Introducción

This content is not available in your language yet.

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.