Builder

@prolibu-suite/cobalt-form-builder es un editor visual escrito en Vue 3 que produce el schema canónico que consumen <co-form> y <co-form-wizard>.

Se distribuye en dos modos:

• Standalone app (Vite SPA) — corre pnpm dev dentro del paquete; el playground sirve para autorías rápidas o lo hosteás como builder dedicado.
• Componente Vue 3 embebible (recomendado) — <CobaltFormBuilder v-model="schema" /> para incrustarlo dentro de cualquier app Vue 3 (suite-v2, herramientas internas, dashboards).

Instalación

pnpm add @prolibu-suite/cobalt-form-builder
# Peers requeridos:
pnpm add vue @prolibu-suite/cobalt-core @prolibu-suite/cobalt-form \
         @prolibu-suite/cobalt-form-core @prolibu-suite/cobalt-vue \
         @prolibu-suite/cobalt-tokens

Uso mínimo

<script setup>
import { ref } from 'vue';
import { CobaltFormBuilder } from '@prolibu-suite/cobalt-form-builder';
import '@prolibu-suite/cobalt-form-builder/style.css';
import '@prolibu-suite/cobalt-tokens/css';
import '@prolibu-suite/cobalt-tokens/css/dark';

const schema = ref({});
</script>

<template>
  <div style="height: 100vh">
    <CobaltFormBuilder v-model="schema" />
  </div>
</template>

El builder se encarga internamente de:

• Crear su propio store scoped por instancia (podés tener N builders en la misma página).
• Registrar los Web Components Cobalt (co-input, co-form, etc.) en onMounted.
• Sincronizar el schema bidireccionalmente con v-model.
• Atajos de teclado: ⌘Z / ⌘⇧Z undo / redo, Esc colapsa el field editor inline.

Note

Pinia NO es peer dependency — el store interno es un composable plano basado en reactive() + provide/inject.

Props

Prop	Tipo	Default	Descripción
modelValue	Record<string, any>	{}	Schema editado (paged-shape preferido). v-model bidireccional.
tabs	('designer' | 'preview' | 'json')[]	todas	Qué tabs exponer. Ejemplo: ['designer'] para esconder Preview y JSON.
hideBrand	boolean	false	Ocultar la marca “CF” del topbar (cuando el host tiene su propio chrome).
brandLabel	string	'Cobalt Form Builder'	Texto del brand.
skipCobaltRegister	boolean	false	No auto-registrar los Web Components Cobalt (si el host ya lo hizo).

Slots

Cuatro slots para personalizar el chrome:

Slot	Default	Scope
brand	Marca CF + label	—
actions	Botones Undo/Redo	{ store }
before	(vacío)	—
after	(vacío)	{ store }

<CobaltFormBuilder v-model="schema">
  <template #brand>
    <img src="/logo.svg" alt="My company" />
  </template>

  <template #actions="{ store }">
    <button @click="save(store.exported)">Save</button>
  </template>

  <template #after="{ store }">
    <div class="footer">{{ store.data.pages.length }} pages · {{ store.canUndo ? 'unsaved changes' : 'saved' }}</div>
  </template>
</CobaltFormBuilder>

Eventos granulares

Además del update:modelValue de v-model, el builder emite eventos específicos para cada mutación. Útil para analytics, autosave, audit log.

<CobaltFormBuilder
  v-model="schema"
  @field-added="(e) => trackEvent('form_field_added', e)"
  @theme-changed="(e) => autosave(schema)"
  @event="(e) => console.log('any change:', e)"
/>

Evento	Payload	Cuándo se emite
field-added	{ pageIdx, fieldName, kind }	Click en toolbox o “Add field below”
field-removed	{ pageIdx, fieldName }	Delete en field card
field-renamed	{ pageIdx, oldName, newName }	Rename en properties panel
field-updated	{ pageIdx, fieldName, patch }	Cualquier prop del field cambia
field-duplicated	{ pageIdx, sourceName, newName }	Duplicate field
field-reordered	{ pageIdx, order }	Drag-and-drop reorder
page-added	{ pageIdx }	Add page
page-removed	{ pageIdx }	Delete page
page-duplicated	{ sourceIdx, newIdx }	Duplicate page
page-updated	{ pageIdx, patch }	Page title / description / visibleIf cambia
theme-changed	{ theme }	Cualquier setting de Theme cambia
selection-changed	{ selection }	Cambio de scope (form / page / field)
schema-replaced	—	JSON Editor → Apply, o replaceAll() desde host
undo / redo	—	Triggerado por teclado o botón
event	SchemaEvent (union)	Cualquier evento de los anteriores

Cada evento individual ES también enviado como event (genérico). Útil para logging exhaustivo.

Uso avanzado: store directo

Si necesitás acceso al store fuera del componente (por ejemplo, persistencia compleja, integración con tu propio sistema de undo):

import { createSchemaStore } from '@prolibu-suite/cobalt-form-builder';

const store = createSchemaStore({
  initialSchema: existingSchemaFromBackend,
  onEvent: (event) => {
    auditLog.push(event);
  },
});

// Mutar:
store.addField('text');
store.setTheme({ accent: 'verde' });

// Leer (reactive — usable en `computed`, `watch`):
console.log(store.exported);
console.log(store.canUndo);

Limitaciones / FAQ

¿Puedo tener varios builders en la misma página? Sí. Cada <CobaltFormBuilder> crea su propio store scoped con provide/inject. No hay singleton global.

¿Funciona en SSR? La parte que mounts el componente no — los Web Components Cobalt requieren ventana real. v-if el componente detrás de un mount guard si tu app es SSR.

¿Por qué Pinia ya no es peer dep? El store es composable plano con reactive(). Eliminamos la dep externa para que el builder sea más liviano de instalar.

¿Cómo hago un botón “Save”? Usá el slot actions con acceso al store: <template #actions="{ store }"><CoButton @click="save(store.exported)" /></template>. O escuchá update:modelValue y guardás con debounce.

¿Custom CSS para forms embebidos en landing pages? Theme → Advanced tab expone un textarea con CSS scoped al form. Ver Theme docs.