@ersolucoesweb/vueder
v7.0.1
Published
Criador de formulário baseado em objetos para VueJS
Downloads
8
Maintainers
Readme
Vueder
Componente para gerar formulários a partir de um objeto Javascript usando VueJS.
Exemplo de formulário
let Form = {
attrs: function(params){
return {
method: 'POST'
}
},
events: {
'submit': (event) => {
alert(9999)
}
},
fieldsets: {
dadosPessoais: {
attrs: {},
eventos: {},
legend: {
text: 'Dados Pessoais'
},
fields: {
nome: {
type: 'text',
name: 'nome',
attrs: {
class: 'col-6'
},
label: {
text: 'Nome'
}
},
estado: {
type: 'select',
name: 'estado',
label: {
text: 'Estado'
},
attrs: {
class: 'col-6'
},
options: async function(params) {
var res = await axios.get('https://servicodados.ibge.gov.br/api/v1/localidades/estados')
var estados = new Array
for(let i in res.data) {
estados.push({label: {text: res.data[i].nome}, value: res.data[i].sigla})
}
params.field.options = (params) => estados
}
},
button: {
type: 'button',
attrs: {
class: "col-12"
},
input_attrs: {
style: {
backgroundColor: 'red',
width: '100px',
height: '30px',
padding: 0,
margin: 0
}
},
label: {
text: 'ENVIAR'
},
events: {
click() {
}
}
}
}
}
}
}
Exemplo:
http://jsfiddle.net/ersolucoesweb/f15kqacv
Para endetender como as validações funcionam veja: https://validatejs.org/
Sistema de grid
O Vueder possui um grid system interno bem simples baseado em 12 colunas.
.col-[1-12] para desktop
.col-m-[1-12] para mobile (abaixo de 800px)