@prolibu-suite/cobalt-form-vue

@prolibu-suite/cobalt-form-vue

Adapter Vue 3 para los formularios schema-driven del Cobalt Design System. Composable useForm() + componente <CoFormRenderer> con todo el estado reactivo de Vue.

Instalación

pnpm add @prolibu-suite/cobalt-form-vue@^10.0.0 @prolibu-suite/cobalt-vue@^0.6.0 @prolibu-suite/cobalt-core@^0.11.0 @prolibu-suite/cobalt-tokens@^0.6.0

cobalt-form-vue arrastra cobalt-form-core y AJV automáticamente.

Setup mínimo

// main.js — registrá los Web Components base
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);

// vite.config.js — Vue debe reconocer co-*
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
    }
  })]
};

/* CSS global */
@import '@prolibu-suite/cobalt-tokens/css';
@import '@prolibu-suite/cobalt-tokens/css/dark';
@import '@prolibu-suite/cobalt-form-vue/style.css';

Uso

<script setup>
import { useForm, CoFormRenderer } from '@prolibu-suite/cobalt-form-vue';

const form = useForm(() => ({
  schema: {
    modelSchema: {
      email:    { type: 'String', required: true, format: 'email' },
      password: { type: 'String', required: true, minLength: 8 },
    },
    locale: 'es',
  },
}));

function onSubmit({ values }) {
  console.log('payload:', values);
}
</script>

<template>
  <CoFormRenderer :form="form" @submit="onSubmit" />
</template>

API · useForm()

Retorna refs reactivas:

const form = useForm(() => ({ schema, initialValues }));

form.values       // ComputedRef<Record<string, any>>
form.errors       // ComputedRef<Record<string, string[]>>
form.isValid      // ComputedRef<boolean>
form.touched      // ComputedRef<Record<string, boolean>>
form.isDirty      // ComputedRef<boolean>
form.isSubmitting // ComputedRef<boolean>
form.fields       // ComputedRef<FieldDescriptor[]>
form.controller   // Ref<FormController>

form.setValue(name, value);
form.setValues(partial);
form.touch(name);
form.touchAll();
form.setSchema(instance); // swap de schema en caliente
form.validate();
form.submit();
form.reset(values?);

Componentes de campo

Si necesitás un renderer custom, podés componer tus propios fields:

<script setup>
import {
  FieldBoolean, FieldColor, FieldDate, FieldDatePicker, FieldFile,
  FieldMasked, FieldMixed, FieldMultiple, FieldNumber, FieldObject,
  FieldPhone, FieldRef, FieldSelect, FieldText, FieldTextArea,
} from '@prolibu-suite/cobalt-form-vue';
</script>

Campos bloqueados

Un descriptor con locked: true (junto con disabled: true) y lockHint opcional hace que CoFormRenderer marque la celda con data-locked y pinte debajo del campo un candado con la ayuda — en todo tipo de campo, también en los overrides por slot y en los hijos de FieldObject. Ver Campos bloqueados.

También se exporta CoFieldRenderer para renderizar un campo individual (resuelve el field component según el kind).

Claves de presentación (originalAttrs)

Los field components leen claves de originalAttrs del nodo del schema. Un host puede estamparlas por modelo antes de describeFields (p. ej. un mapa de overrides de presentación). Una clave que una versión vieja de este paquete no conoce es inerte: el campo la ignora.

// Ejemplo: el presupuesto muestra la moneda que se eligió en el campo `currency`.
budget: { format: 'amount', suffixFrom: 'currency' }

Documentación

→ cobalt-docs/formularios — useForm(), CoFormRenderer, ejemplos completos.

License

MIT