@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 @prolibu-suite/cobalt-vue @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens

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>

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

Documentación

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

License

MIT