@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-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      // Ref<Record<string, any>>
form.errors      // Ref<Record<string, string[]>>
form.isValid     // Ref<boolean>
form.touched     // Ref<Record<string, boolean>>

form.setValue(name, value);
form.touch(name);
form.touchAll();
form.submit();

Componentes de campo

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

<script setup>
import { FieldText, FieldNumber, FieldSelect, FieldBoolean, FieldDate, FieldRef } from '@prolibu-suite/cobalt-form-vue';
</script>

Documentación

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

License

MIT