@prolibu-suite/cobalt-form
v0.2.2
Published
Cobalt Form — schema-driven <co-form> Web Component. CDN entry point.
Maintainers
agoxReadme
@prolibu-suite/cobalt-form
<co-form> — Web Component schema-driven con validación AJV. Pegás un schema, obtenés un formulario completo. CDN entry point del Cobalt Design System.
Schema → formulario. Sin loops, sin componentes, sin framework.
Instalación
pnpm add @prolibu-suite/cobalt-form @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokensUso
import { defineCustomElements as defineCoreElements } from '@prolibu-suite/cobalt-core/loader';
import { defineCustomElements as defineFormElements } from '@prolibu-suite/cobalt-form/loader';
defineCoreElements(window);
defineFormElements(window);<co-form
locale="es"
layout="grid"
schema='{
"email": { "type": "String", "required": true, "format": "email" },
"password": { "type": "String", "required": true, "minLength": 8 },
"newsletter": { "type": "Boolean", "label": "Suscribirme", "default": true }
}'
></co-form>
<script>
const form = document.querySelector('co-form');
form.addEventListener('coSubmit', (e) => {
console.log('values:', e.detail.values);
});
</script>Sin build · vía CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/[email protected]/build/css/tokens.css">
<script type="module" src="https://unpkg.com/@prolibu-suite/[email protected]/dist/cobalt/cobalt.esm.js"></script>
<script type="module" src="https://unpkg.com/@prolibu-suite/[email protected]/dist/cobalt-form/cobalt-form.esm.js"></script>
</head>
<body>
<co-form locale="es" schema='{ "email": { "type": "String", "required": true, "format": "email" } }'></co-form>
</body>
</html>Eventos
| Evento | Detail | Cuándo |
|---|---|---|
| coSubmit | { values, isValid } | Submit válido |
| coChange | { name, value, values } | Cambio de cualquier campo |
| coValidate | { errors, isValid } | Validación dispara |
Métodos públicos
await form.setValue('email', '[email protected]');
await form.getValue('email');
await form.touch('email');
await form.submit();Slots para custom fields
<co-form schema='{ "email": { "type": "String", "required": true, "format": "email" } }'>
<!-- Reemplazá el render del campo "email" con HTML propio -->
<div slot="field:email">
<input type="email" id="myEmail">
</div>
</co-form>Demos en vivo
5 niveles de personalización, todos sirviendo <co-form> desde unpkg:
Si usás Vue 3
Mirá @prolibu-suite/cobalt-form-vue — composable useForm() + CoFormRenderer.vue.
Documentación
→ cobalt-docs/formularios — schemas, validación, ref fields, ejemplos.
License
MIT