@prolibu-suite/cobalt-form-core 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-form-core
|
|
2
|
+
|
|
3
|
+
Controller framework-agnostic para formularios schema-driven del **Cobalt Design System**. Validación AJV, estado reactivo, sin DOM.
|
|
4
|
+
|
|
5
|
+
> El motor headless de `<co-form>`. Úsalo cuando querés tu propio renderer (Svelte, Solid, Node, tests).
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-form-core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { createForm } from '@prolibu-suite/cobalt-form-core';
|
|
17
|
+
|
|
18
|
+
const form = createForm({
|
|
19
|
+
schema: {
|
|
20
|
+
modelSchema: {
|
|
21
|
+
email: { type: 'String', required: true, format: 'email' },
|
|
22
|
+
password: { type: 'String', required: true, minLength: 8 },
|
|
23
|
+
},
|
|
24
|
+
locale: 'es',
|
|
25
|
+
},
|
|
26
|
+
initialValues: { email: 'foo@bar.com' },
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// Estado reactivo
|
|
30
|
+
form.subscribe((state) => {
|
|
31
|
+
console.log(state.values, state.errors, state.isValid);
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// Mutaciones
|
|
35
|
+
form.setValue('email', 'nuevo@bar.com');
|
|
36
|
+
form.touch('password');
|
|
37
|
+
|
|
38
|
+
// Submit
|
|
39
|
+
const result = await form.submit();
|
|
40
|
+
if (result.isValid) {
|
|
41
|
+
console.log('payload:', result.values);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API
|
|
46
|
+
|
|
47
|
+
| Método | Descripción |
|
|
48
|
+
|---|---|
|
|
49
|
+
| `createForm(opts)` | Crea un controller con `schema`, `initialValues`, `locale` |
|
|
50
|
+
| `form.fields` | Array de campos derivados del schema |
|
|
51
|
+
| `form.state` | `{ values, errors, touched, isValid }` (snapshot actual) |
|
|
52
|
+
| `form.getValue(name)` | Lee el valor de un campo |
|
|
53
|
+
| `form.setValue(name, value)` | Setea un valor (dispara validación) |
|
|
54
|
+
| `form.touch(name)` | Marca como touched (muestra errores) |
|
|
55
|
+
| `form.touchAll()` | Marca todos como touched (en submit fallido) |
|
|
56
|
+
| `form.submit()` | Valida todo y retorna `{ isValid, values }` |
|
|
57
|
+
| `form.subscribe(fn)` | Suscripción reactiva (retorna unsubscribe) |
|
|
58
|
+
|
|
59
|
+
## Si usás Vue
|
|
60
|
+
|
|
61
|
+
Mirá [`@prolibu-suite/cobalt-form-vue`](https://www.npmjs.com/package/@prolibu-suite/cobalt-form-vue) — composable `useForm()` + componente `CoFormRenderer`.
|
|
62
|
+
|
|
63
|
+
## Si querés un Web Component listo
|
|
64
|
+
|
|
65
|
+
Mirá [`@prolibu-suite/cobalt-form`](https://www.npmjs.com/package/@prolibu-suite/cobalt-form) — `<co-form>` schema-driven con todos los campos renderizados.
|
|
66
|
+
|
|
67
|
+
## Sin build · vía CDN
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<script type="importmap">
|
|
71
|
+
{
|
|
72
|
+
"imports": {
|
|
73
|
+
"@prolibu-suite/cobalt-form-core": "https://unpkg.com/@prolibu-suite/cobalt-form-core@0.1.1/dist/index.js",
|
|
74
|
+
"ajv": "https://esm.sh/ajv@8.17.1",
|
|
75
|
+
"ajv-formats": "https://esm.sh/ajv-formats@3.0.1",
|
|
76
|
+
"ajv-i18n/localize/es": "https://esm.sh/ajv-i18n@4.2.0/localize/es"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
</script>
|
|
80
|
+
<script type="module">
|
|
81
|
+
import { createForm } from '@prolibu-suite/cobalt-form-core';
|
|
82
|
+
// ...
|
|
83
|
+
</script>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Documentación
|
|
87
|
+
|
|
88
|
+
→ [cobalt-docs/formularios](https://dev10.prolibu.com/ui/static/cobalt-docs/formularios/introduccion/) — schemas, validación, ejemplos.
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
MIT
|
package/package.json
CHANGED