Formulario autogenerado

/components/dna/form-elements/FormFromScheme.vue

A partir de los componentes individuales de formulario se crea un componente que permite renderizar un formulario a partir de un scheme dado

Forma de uso

<template>
  <div>
    <form-from-scheme
        :data="user"
        :scheme="scheme"
        @save="save"
        @exitForm="cancel"
        textCancel="Cerrar"
        textSave="Guardar"
      />
  </div>
</template>

<script>
import FormFromScheme from '~/components/dna/form-elements/FormFromScheme'
export default {
  components: {
    FormFromScheme,
  },
  data() {
    return {
      scheme: [
        {
          key: 'name',
          label: 'Nombre',
          inputType: 'text',
          transform: (val) => `${val.firstName} ${val.lastName}`,
        },
        {
          key: 'email',
          rules: 'required|email',
          label: 'Email',
        },
        {
          key: 'role',
          label: 'Rol',
          inputType: 'select',
          transform: (val) => `${val.role.label}`,
          options:[
            {text:'Administrador', value: 'admin'},
            {text:'Operador', value: 'operator'},
            {text:'Visitante', value: 'viwer'},
          ]
        },
      ],
    }
  },
  method: {
    save(data) {
      // logic
    },
    cancel() {
      // logic
    }
}
</script>

Scheme

El esquema define la estructura del formulario que el componente va a rederizar. El atributo scheme recibe un Array de objetos, cada objeto define un input del formulario, la estructura de cada objeto de este Array tiene los siguientes atributos:

Nombre	Tipo	Requerido	Descripción
key	string	si	Corresponde al nombre de la variable correspondiente
label	string	si	Nombre de que se mostrará sobre el input para el usuario.
inputType	string	no	Corresponde a los tipos de inputs disponibles.
rules	string	no (ver reglas)	Corresponde a las reglas de validación, la validación está gestionada por vee validate
transform	function	no	Una función que permite modificar el valor que se muestra inicialmente. Recibe como parámetro el objeto completo y el retorno debe ser un string que finalmente se mostrará como value
options	Array	select, selectWithSearch	alimenta las opciones de las listas desplegables, es un Array de strings o un array de {text, value}
fieldsToShow	Array	selectWithSearch	En el select con busqueda puede desplegar mas de un campo como texto.
valueColumn	string	selectWithSearch	Cual de todos los atributos de options corresponde al valor retornado por el input
textColumn	string	selectWithSearch	EL campo que final mente muestra como seleccionado
acceptedValue	any	checkbox	El valor retornado cuando se selecciona
notAcceptedValue	any	checkbox	El valor retornado sin selección
text	string	checkbox	El texto que acompaña al checkbox

inputTypes

• text (dafault)

• run

• email

• phone

• number

• password

• date

• time

• select

• selectWithSearch

• checkbox

Rules

• Reglas de vee validate

• run

• unique_in:

• phone

• latitude

• longitude

Uncancelable

Si necesitas que el formulario no tenga un botón de cancelar acción, agrega esta propiedad para ocultarlo

<form-from-scheme
   :data="currentData"
   :scheme="scheme"
   textCancel="Cerrar"
   textSave="Guardar"
   uncancelable
   @save="editModalSave"
   @exitForm="$refs['modal-edit-entity'].hide()"
/>

@save

Este evento debe ser asociado a una función que gestiona la lógica al hacer click en el botón de guardar

@exitForm

Este evento debe ser asociado a una función que gestiona la lógica al hacer click en el botón de cancelar. Útil para cerrar algún modal o para redirigir