@prolibu-suite/cobalt-form-core

Controller framework-agnostic para formularios schema-driven del Cobalt Design System. Validación AJV, estado reactivo, sin DOM.

El motor headless de <co-form>. Úsalo cuando querés tu propio renderer (Svelte, Solid, Node, tests).

Instalación

pnpm add @prolibu-suite/cobalt-form-core

Uso

import { createForm } from '@prolibu-suite/cobalt-form-core';

const form = createForm({
  schema: {
    modelSchema: {
      email:    { type: 'String', required: true, format: 'email' },
      password: { type: 'String', required: true, minLength: 8 },
    },
    locale: 'es',
  },
  initialValues: { email: '[email protected]' },
});

// Estado reactivo
form.subscribe((state) => {
  console.log(state.values, state.errors, state.isValid);
});

// Mutaciones
form.setValue('email', '[email protected]');
form.touch('password');

// Submit
const result = await form.submit();
if (result.isValid) {
  console.log('payload:', result.values);
}

API

| Método | Descripción | |---|---| | createForm(opts) | Crea un controller con schema, initialValues, locale | | form.fields | Array de campos derivados del schema | | form.state | { values, errors, touched, isValid } (snapshot actual) | | form.getValue(name) | Lee el valor de un campo | | form.setValue(name, value) | Setea un valor (dispara validación) | | form.touch(name) | Marca como touched (muestra errores) | | form.touchAll() | Marca todos como touched (en submit fallido) | | form.submit() | Valida todo y retorna { isValid, values } | | form.subscribe(fn) | Suscripción reactiva (retorna unsubscribe) |

Si usás Vue

Mirá @prolibu-suite/cobalt-form-vue — composable useForm() + componente CoFormRenderer.

Si querés un Web Component listo

Mirá @prolibu-suite/cobalt-form — <co-form> schema-driven con todos los campos renderizados.

Sin build · vía CDN

<script type="importmap">
{
  "imports": {
    "@prolibu-suite/cobalt-form-core": "https://unpkg.com/@prolibu-suite/[email protected]/dist/index.js",
    "ajv":          "https://esm.sh/[email protected]",
    "ajv-formats":  "https://esm.sh/[email protected]",
    "ajv-i18n/localize/es": "https://esm.sh/[email protected]/localize/es"
  }
}
</script>
<script type="module">
  import { createForm } from '@prolibu-suite/cobalt-form-core';
  // ...
</script>

Documentación

→ cobalt-docs/formularios — schemas, validación, ejemplos.

License

MIT