Vue3 Formulario JSON

Este componente tiene como objetivo la generación de un formulario a partir de un JSON de configuración.

Actualmente es funcional aunque hay cosas que faltan.

- Se puede crear un formulario (en repo ver examples/test_1)
- Aún no se soporta inclusión de tabla de datos ya cargados
- No hay soporte para autocompletado

Instalación

``npm i @greenborn/vue_json_form`

Uso

En main.js
`
import { VueFormJSON } from '@greenborn/vue_json_form'
import 'bootstrap/dist/css/bootstrap.css'

createApp(App).use(VueFormJSON).mount('#app')
`

En componente a incluir el formulario:
`
v-model="form_data"
@submit="submitHandler" @input="inputHandler"/>
`

Ejemplo de configuración JSON formulario:
`
const configuration_json = ref({
"general_data": {
"field_options": {
"opciones_select_categoria": [
{ id: 1, text: 'Categoria 1'},
{ id: 2, text: 'Categoria 2'},
{ id: 3, text: 'Categoria 3'},
{ id: 4, text: 'Categoria 4'},
],
"opciones_radio_ej": [
{ id: 1, text: 'Radio 1'},
{ id: 2, text: 'Radio 2'},
{ id: 3, text: 'Radio 3'},
{ id: 4, text: 'Radio 4'},
],
"opciones_checkbox_ej": [
{ id: 1, text: 'Checkbox 1'},
{ id: 2, text: 'Checkbox 2'},
{ id: 3, text: 'Checkbox 3'},
{ id: 4, text: 'Checkbox 4'},
]
},
"autocomplete_options": {
"ciudades": [ 'Tandil', 'Mar del Plata', 'Ayacucho', 'Azul', 'Bolivar', 'Capital Federal' ]
},
"initial_values": {
user_list_initial_values: { date:new Date(), color:'#00FF00' }
}

},
"sections": {
component: 'V_TABS',
section_def:
[
{
header: "Parte 1",
content: [
{ class: 'row', content:
[
{
component: 'V_GROUP', class:'col-6',
params:{
id: "example_group_1",
content: [
{ class: 'row', content:
[{ component: '_IMAGE', params:{ src: "https://www.primefaces.org/primevue/demo/images/primevue-logo-dark.svg", alt: "Vue logo" } }
]
},
{ class: 'row', content:
[{ component: '_TEXT', params:{ html: "

Titulo de formulario

"} }
]
},
{ class: 'row', content:
[
{ component: 'I_TEXT', params:{ field: 'name',tooltip:"hello moto", label: 'Campo de texto', type: 'text' } },
{ component: 'I_TEXTAREA', params:{ field: 'descripcion','tooltip':'hola', label: 'Campo Textarea' } },
{ component: 'I_SELECT', params:{ field: 'categoria_1', 'tooltip':'hola1', label: 'Campo Select',
field_options: "opciones_select_categoria", option_id : "id", option_label: "text"
} },
{ component: 'I_NUMBER', params:{ field: 'number', min:0, max: 20, tooltip:"number", label: 'Campo de numerico' } },
]
},
{ class: 'row', content:
[
{ component: 'I_RADIO', params:
{ field: 'radio_ej', label: 'Campo Radio Button',
field_options: "opciones_radio_ej", option_id : "id", option_label: "text"
}
},
{ component: 'I_CHECKBOX', params:
{ field: 'checkbox_ej', label: 'Campo Checkbox',
field_options: "opciones_checkbox_ej", option_id : "id", option_label: "text"
}
}
]
},
]
}
}
]
},
{ class: 'row', content:
[
{ class:'col-4', component: 'I_DATE', params:{ field: 'date', label: 'Campo de fecha' } },
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'test_action','tooltip':'hola', label: 'Boton de prueba' } },
{ class:'col-4', component: 'I_COLOR', params:{ field: 'color','tooltip':'hola', label: 'Campo de selección de color' } },
]
},
{ class: 'row', content:
[
{ class:'col-4', component: 'I_RANGE', params:{ field: 'rango', range:false, min:0, step:1, max:200, label: 'Campo de selección tipo Slider' } },
{ class:'col-6', component: 'I_FILE', params:{ field: 'file', label: 'Campo de subida de archivos' } },
]
},
{ class: 'row',
content: [
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'section_next', label: 'Siguiente' } }
]
},
],
},
{
header: "Parte 2",
content: [
{ class: 'row', content:
[{ class:'col-4', component: '_IMAGE', params:{ src: "https://www.primefaces.org/primevue/demo/images/primevue-logo-dark.svg", alt: "Vue logo" } }
]
},
{ class: 'row', content:
[{ class:'col-4', component: '_TEXT', params:{ html: "

Titulo de formulario Parte 2

"} }
]
},
{ class: 'row', content:
[{ class:'col-4', component: 'I_TEXT', params:{ field: 'name', label: 'Campo de texto', type: 'text' } },
{ class:'col-4', component: 'I_TEXTAREA', params:{ field: 'descripcion', label: 'Campo Textarea' } },
{ class:'col-4', component: 'I_SELECT', params:{ field: 'categoria', label: 'Campo Select',
field_options: "opciones_select_categoria", option_id : "id", option_label: "text"
} }
]
},
{ class: 'row', content:
[
{ class:'col-4', component: 'I_RADIO', params:
{ field: 'radio_ej', label: 'Campo Radio Button',
field_options: "opciones_radio_ej", option_id : "id", option_label: "text"
}
},
{ class:'col-4', component: 'I_CHECKBOX', params:
{ field: 'checkbox_ej', label: 'Campo Checkbox',
field_options: "opciones_checkbox_ej", option_id : "id", option_label: "text"
}
}
]
},
{ class: 'row', content:
[
{ class:'col-4', component: 'I_DATE', params:{ field: 'date', label: 'Campo de fecha' } },
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'test_action', label: 'Boton de prueba' } },
{ class:'col-4', component: 'I_COLOR', params:{ field: 'color', label: 'Campo de selección de color' } },
]
},
{ class: 'row', content:
[
{ class:'col-4', component: 'I_RANGE', params:{ field: 'rango', min:0, step:1, max:200, label: 'Campo de selección tipo Slider' } },
{ class:'col-4', component: 'I_FILE', params:{ field: 'file', label: 'Campo de subida de archivos' } },
]
},
{ class: 'row',
content: [
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'section_back', label: 'Anterior' } },
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'section_next', label: 'Siguiente' } }
]
},
],
},
{
header: "Paso Final",
content: [
{ class: 'row',
content: [
{
class:'col', component: 'V_LOOP',
params:{
runtime_data_field: 'user_list',
initial_values_id: 'user_list_initial_values',
content: [
{ class: 'row', content:
[
{ class:'col-4', component: 'I_DATE', params:{ dfield: 'date', label: 'Campo de fecha' } },
{ class:'col-4', component: 'I_BUTTON', params:{ dfield: 'btn', action: 'test_action', label: 'Boton de prueba' } },
{ class:'col-4', component: 'I_COLOR', params:{ dfield: 'color', label: 'Campo de selección de color' } },
]
}
]
}
}
]
},
{ class: 'row',
content: [
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'section_back', label: 'Anterior' } },
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'section_goTo', action_params:{ id: 0 }, label: 'Inicio' } },
{ class:'col-4', component: 'I_BUTTON', params:{ action: 'submit', label: 'Confirmar' } }
]
},
]
}
]
}

})
``

Eventos:
|Evento| Descripción |
|---|---|
|@input| Se dispara por cada modificación de los datos de cualquier campo del formulario|
|@click| Se dispara por cada click en cualquier campo del formulario|
|@submit| Se dispara al apretar el botón Submit (enviar)|

Change log

- 0.1.85: Se mejora generación de estructura HTML
- 0.1.84: Se arreglan bug de loop de campos que no generaba correctamente la estructura de datos, si se eliminaban registros
- 0.1.83: Las opciones de configuración de los controles ahora se definen en composable
- 0.1.82: Se agrega tipo de control input numerico diferenciado del control de texto; Se agrega posibilidad de configurar placeholder
- 0.1.81: model llevado a composable; componente de loops ahora sincroniza al modelo general; componente de loops ahora sincroniza al modelo general; Se reemplaza prev_model por model; En Loops: se mejora el almacenamiento de la info cargada en el modelo, se arregla el eliminar; soulución a bug, campos que no recibian el modelo como parametro; refactor se intercambia html_def por content; Se simplifican los nombres de los componetes; Se elimina CompInsert por que se trata de un componente redundante; Los campos de tipo select, ahora usan el inputcompostable; Se define composable para inputs, se aplica a texto, fecha, range y textarea, luego se aplicacra al resto de campos; Se simplifica configuracion basica de componentes de tipo input; Todos los componentes reciben acceso al modelo definido en componete FormularioJSON; Se arregla evento input del control de tipo range; se modifica css_class por class; Se mejora manejo de eventos; Reorganización estructura de directorios
- 0.1.53: Se implementan los eventos @submit e @input; Se implementa v-model
- 0.1.52: Se reemplaza key por field y dkey por dfield
- 0.1.51: La configuración de los componentes V_LOOP ahora permite definir la información inicial de los campos, todavia falta afinar algunos detalles.
- 0.1.50: Se agrega posibilidad de definir tooltips a controles de tipo fecha, color, select, texto y botones, en dichos controles tambien se definen valores por defecto para algunas propiedades
- 0.1.49: Se agrega dependencia Primeicons para el uso de iconos en botones, Ahora en los botones se puede configurar el icono, clases css, posicion del icono. Al componente V_LOOP ahora se le puede configurar los parametros de los botones que usa el mismo
- 0.1.48: Se agrega soporte para loops (multiples registros) de campos pudiendo agregar/quitar/ y editar, ahora los componentes de formulario, en el onmounted actualizan el valor del modelo al registrado en el modelo general de formulario
- 0.1.47: Se agrega soporte para grupo de campos
- 0.1.46: Ahora los botones permiten ir pagina adelante, atras, una especifica, y dar por finalizado el formulario (validaciones pendientes)
- 0.1.45: En JSON se agrega soporte para devidir el formulario en varias partes, y especificar como se requiere mostrar, por ej si se trata de una vista de tabs con V_TABS
- 0.1.44: Componente I_FILE funcional falta, aplicar validaciones
- 0.1.43: Componente I_COLOR funcional; componente I_RANGE funcional
- 0.1.42: Componente I_BUTTON funcional, aunque aun no se atienden las acciones de los botones; componente VFJImage funcional
- 0.1.41: Componente I_DATE funcional, aun no se aplican validaciones ni formateos
- 0.1.40: Componente I_CHECKBOX funcional, por ahora solo tiene en cuenta opciones definidas directamente en JSON (No via API)
- 0.1.39: Componente VFJRadioBtnInput funcional, por ahora solo tiene en cuenta opciones definidas directamente en JSON (No via API)
- 0.1.38: Componente I_SELECT funcional, por ahora solo tiene en cuenta opciones definidas directamente ne JSON (No via API)
- 0.1.36: Componente I_TEXTAREA funcional, aun no se aplican validaciones
- 0.1.35: Componente I_TEXT funcional, aunque aun no se aplican validaciones
- 0.1.33: Componente _TEXT funcional
- 0.1.32: Se agregan componentes base para los diferentes tipos de campos, el componente FormCol ya asigna el componente correpsondiente y los parametros de acuerdo al JSON de configuración
- 0.1.31: Se generan las columnas del formulario
- 0.1.30: Se generan las filas del formulario
- 0.1.29: Se espera definción de parametros
- 0.1.25: Paquete configurado - ya es instalable con: npm i vue-formulario-json y puede ser incluido en cualquir proyeto vue3 para su uso.