Instalación

This content is not available in your language yet.

Vue 3 (más común)

Instala los paquetes:
- pnpm
- npm
- yarn
Ventana de terminal
pnpm add @prolibu-suite/cobalt-form-vue @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
Ventana de terminal
npm install @prolibu-suite/cobalt-form-vue @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
Ventana de terminal
yarn 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.

Carga los Web Components Cobalt (co-input, co-select, etc.) en el entry de tu app:

import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);

Configura Vue para reconocer custom elements:

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue({
    template: {
      compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
    }
  })]
};

Importa los tokens y los estilos del form en tu CSS global:

@import '@prolibu-suite/cobalt-tokens/css';
@import '@prolibu-suite/cobalt-tokens/css/dark';
@import '@prolibu-suite/cobalt-form-vue/dist/style.css';

Úsalo en cualquier componente:

<script setup>
import { useForm, CoFormRenderer } from '@prolibu-suite/cobalt-form-vue';

const form = useForm(() => ({
  schema: {
    modelSchema: {
      email: { type: 'String', required: true, format: 'email' },
    },
    locale: 'es',
  },
}));
</script>

<template>
  <CoFormRenderer :form="form" @submit="(p) => console.log(p.values)" />
</template>

Vanilla / cualquier framework (Web Component)

Instala el paquete del Web Component:

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

Registra <co-form> y los componentes base de Cobalt:

import { defineCustomElements as defineCoreElements } from '@prolibu-suite/cobalt-core/loader';
import { defineCustomElements as defineFormElements } from '@prolibu-suite/cobalt-form/loader';

defineCoreElements(window);
defineFormElements(window);

Usa el tag en HTML:

<co-form
  locale="es"
  layout="grid"
  schema='{
    "email": { "type": "String", "required": true, "format": "email" },
    "password": { "type": "String", "required": true, "minLength": 8 }
  }'
></co-form>

<script>
  const form = document.querySelector('co-form');
  form.addEventListener('coSubmit', (e) => {
    console.log('values:', e.detail.values);
  });
</script>

Solo el core (Svelte, Solid, React, Node)

Instala:

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

Crea un controller:

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

const form = createForm({
  schema: { modelSchema: yourSchema, locale: 'es' },
  initialValues: { email: '' },
});

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

form.setValue('email', 'foo@bar.com');
await form.submit();

Construye tu UI consumiendo form.state y form.fields.

Sin build · vía CDN

Para prototipos rápidos o cualquier HTML vanilla, podés cargar <co-form> directamente desde unpkg — sin npm, sin bundler. Copy-paste:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens.css">
  <script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-core@0.1.0/dist/cobalt/cobalt.esm.js"></script>
  <script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-form@0.1.0/dist/cobalt-form/cobalt-form.esm.js"></script>
</head>
<body>
  <co-form
    locale="es"
    layout="grid"
    schema='{
      "email": { "type": "String", "required": true, "format": "email" },
      "password": { "type": "String", "required": true, "minLength": 8 }
    }'
  ></co-form>

  <script>
    document.querySelector('co-form').addEventListener('coSubmit', (e) => {
      console.log('values:', e.detail.values);
    });
  </script>
</body>
</html>

Recursos CDN

Paquete	URL unpkg
`cobalt-tokens` (CSS)	`https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens.css`
Dark mode	`https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.0/build/css/tokens-dark.css`
`cobalt-core` (Web Components base)	`https://unpkg.com/@prolibu-suite/cobalt-core@0.1.0/dist/cobalt/cobalt.esm.js`
`cobalt-form` (`<co-form>`)	`https://unpkg.com/@prolibu-suite/cobalt-form@0.1.0/dist/cobalt-form/cobalt-form.esm.js`
`cobalt-form-core` (controller framework-agnostic)	`https://unpkg.com/@prolibu-suite/cobalt-form-core@0.1.0/dist/index.js`

Demos en vivo

5 ejemplos consumiendo <co-form> desde CDN, de menos invasivo a totalmente custom:

Nivel 0 · Default — <co-form> stock con AJV + ref fields
Nivel 1 · Tokens — theming con CSS variables
Nivel 2 · CSS local — override de layout sin tocar la lib
Nivel 3 · Slot — reemplazar un campo por HTML custom
Nivel 4 · form-core — renderer propio sin <co-form>

Verifica que funciona

Importa el form, renderízalo y abre devtools. Si ves:

Los co-input renderizados con label correcto
Errores en tiempo real al escribir (rojos debajo del input)
En consola, form.values, form.errors, form.isValid actualizándose

…entonces todo está conectado.