form

Funcionalidades

• Construir formulario dinamicamente
• Validar formulario
• Formatear los valores de salida
• Agregar slots como campos del formulario

Para una rapida construccion de formulario puedes pasarle un JSON que renderizara el formulario y te entregara los valores correspondientes a hacer submit

Componente Form

El componente Form te permite crear formularios personalizados con diversos tipos de campos y opciones. Puedes utilizarlo para recopilar información de los usuarios y realizar acciones en función de los datos ingresados.

Uso en Componentes

Utilizando en un Componente

Puedes utilizar el componente Form en tus componentes de la siguiente manera:

<template>
  <Form
    :inputs="formInputs"
    ref="refForm"
    @onSubmit="handleSubmit"
  >
    <template #buttons>
        <div class="d-flex justify-content-end">
            <CButton :disabled="sending" background="bg-success" text="Guardar" />
        </div>
    </template>
  </Form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const formInputs = ref([
  {
    key: "nombre",
    type: "text",
    placeholder: "Nombre",
    title: "Nombre",
    value: null,
    cols: 6,
    validations: {
      rules: {
        required: true,
      },
    },
  },
  {
    key: "contacto_id",
    type: "select",
    placeholder: "Contacto",
    title: "Contacto",
    label: 'nombre_completo',
    value: null,
    cols: 6,
    options: contactos,
    formatValue: (data:any) => {
      return data?.id
    },
    validations: {
      rules: {
        required: true,
      },
    },
  },
  {
    key: "domicilio_id",
    type: "select",
    placeholder: "Domicilio",
    title: "Domicilio",
    label: 'calleNumero',
    value: null,
    state: null,
    cols: 6,
    options: domicilios,
    formatValue: (data:any) => {
      return data?.id
    },
    validations: {
      rules: {
        required: true,
      },
    },
  },
]);

// Métodos para manejar eventos
const handleSubmit = (formData) => {
  // Lógica para manejar el envío del formulario
};

const sending = ref<boolean>(false);

</script>

Propiedades

Propiedad	Tipo	Valor por defecto	Descripción
inputs	Array	[]	Definición de campos y opciones del formulario.
id	String		Identificador único para el formulario.
customClass	String	''	Clase CSS personalizada para el formulario.

Eventos

Evento	Parámetros	Descripción
select	value, input	Selección de una opción en el componente Select.
change	value, input	Cambio en el valor de un campo del formulario.
onFile	value, input	Adjuntar un archivo en el componente File.
onRemoveFile	value, input	Eliminación de un archivo adjunto.
focus	value, input	Enfoque en un campo del formulario.
remove	value, input	Eliminación de un valor en el componente Select.
datePicker	value, input	Selección de una fecha en el componente Date.
switch	value, input	Cambio de estado en el componente CheckBox.
getValues	data	Obtención de los valores del formulario.
blur	value, input	Pérdida de enfoque en un campo del formulario.