Introducción

El sistema de formularios de Cobalt está pensado para que escribas un schema, no un formulario. Defines qué campos hay, qué tipo son y cómo se validan — la UI se renderiza sola, validada con AJV y traducida al locale del usuario.

Cuatro paquetes en capas

@prolibu-suite/cobalt-form-core

El controlador headless. Maneja state, validación con AJV, errores, dirty/touched, expression evaluator, scoring, theme resolver. Sin dependencia de framework.

Úsalo si: estás en Svelte, Solid, vanilla JS, o quieres control total.

@prolibu-suite/cobalt-form-vue

Adaptador Vue 3 con useForm() y <CoFormRenderer />. Refs reactivos, hooks, field components listos.

Úsalo si: tu app es Vue (suite-v2, suite, productos internos).

@prolibu-suite/cobalt-form

Web Components <co-form> y <co-form-wizard>. Cero dependencias en runtime. Schema + theme vía atributo o prop.

Úsalo si: trabajas con HTML plano, embebes en otro framework, o necesitas CDN-friendly.

@prolibu-suite/cobalt-form-builder

Builder visual Vue 3. Editor drag-and-drop que produce schemas. Usable como app standalone o componente embebible.

Úsalo si: querés exponer a usuarios admin la creación visual de forms.

Filosofía

Schema-first: la fuente de verdad es un schema Mongoose-style. La UI se deriva, no se cablea.
Validación AJV: el mismo schema que valida en backend valida en frontend. Sin doble código.
i18n built-in: errores traducidos a es, en, pt-BR vía ajv-i18n.
Headless core: form-core no sabe de DOM. form-vue y form lo envuelven en su capa de renderizado.
Field composition: cada campo es un componente Cobalt (co-input, co-select, etc.). Puedes reemplazar cualquiera.
Conditional logic: visibleIf / enableIf / requiredIf con expressions simples ({field} == value, &&, ||, contains).
Multi-page wizard: pages array + stepper navegable + validación por página.
Theme system scoped: accent, dark mode, background image, custom CSS — todo aplicado al form scope sin tocar tokens globales.

Diagrama de capas

┌─────────────────────────────────────────────────────────────┐
│  Tu app (suite-v2 / vanilla / React / iframe embed)         │
└────┬──────────────────┬──────────────────┬──────────────────┘
     │                  │                  │
┌────▼─────────────┐ ┌──▼──────────────┐ ┌─▼───────────────────┐
│ cobalt-form-     │ │ cobalt-form-vue │ │ cobalt-form         │
│  builder         │ │ (useForm,       │ │ (<co-form>,         │
│ (<CobaltForm-    │ │  CoFormRenderer)│ │  <co-form-wizard>)  │
│  Builder>)       │ │                 │ │  Stencil WC         │
└────┬─────────────┘ └────┬────────────┘ └─────┬───────────────┘
     │                    │                    │
     └────────┬───────────┴────────────────────┘
              ▼
     ┌────────────────────────────┐
     │  cobalt-form-core          │
     │  FormController + AJV +    │
     │  expression evaluator +    │
     │  theme resolver + scoring  │
     └────────────┬───────────────┘
                  ▼
     ┌────────────────────────────┐
     │  @prolibu-suite/cobalt-core│
     │  co-input, co-select, etc. │
     └────────────────────────────┘

Schema mínimo

const schema = {
  email: {
    type: 'String',
    required: true,
    format: 'email',
    label: 'Email',
  },
  password: {
    type: 'String',
    required: true,
    minLength: 8,
    label: 'Contraseña',
  },
};

Eso es todo. Con ese objeto tienes un formulario completo con validación, errores traducidos, y UI Cobalt.

Próximos pasos

Instalación — Configurar los paquetes en tu proyecto.
Schema — Referencia completa del formato de schema.
Validación — Cómo funciona AJV y la i18n de errores.
Web Component — Render runtime con <co-form> y <co-form-wizard>.
Builder — Editor visual <CobaltFormBuilder> (Vue 3) para generar schemas.
Theme — Sistema de theming scoped (accent, dark mode, custom CSS).
Wizard — Multi-page, conditional logic, quiz con scoring.
Ejemplos — Casos reales: signup, settings, multi-step.