@prolibu-suite/cobalt-form 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 +106 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-form
|
|
2
|
+
|
|
3
|
+
`<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**.
|
|
4
|
+
|
|
5
|
+
> Schema → formulario. Sin loops, sin componentes, sin framework.
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-form @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import { defineCustomElements as defineCoreElements } from '@prolibu-suite/cobalt-core/loader';
|
|
17
|
+
import { defineCustomElements as defineFormElements } from '@prolibu-suite/cobalt-form/loader';
|
|
18
|
+
|
|
19
|
+
defineCoreElements(window);
|
|
20
|
+
defineFormElements(window);
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<co-form
|
|
25
|
+
locale="es"
|
|
26
|
+
layout="grid"
|
|
27
|
+
schema='{
|
|
28
|
+
"email": { "type": "String", "required": true, "format": "email" },
|
|
29
|
+
"password": { "type": "String", "required": true, "minLength": 8 },
|
|
30
|
+
"newsletter": { "type": "Boolean", "label": "Suscribirme", "default": true }
|
|
31
|
+
}'
|
|
32
|
+
></co-form>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
const form = document.querySelector('co-form');
|
|
36
|
+
form.addEventListener('coSubmit', (e) => {
|
|
37
|
+
console.log('values:', e.detail.values);
|
|
38
|
+
});
|
|
39
|
+
</script>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Sin build · vía CDN
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<!DOCTYPE html>
|
|
46
|
+
<html>
|
|
47
|
+
<head>
|
|
48
|
+
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens.css">
|
|
49
|
+
<script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-core@0.1.1/dist/cobalt/cobalt.esm.js"></script>
|
|
50
|
+
<script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-form@0.1.1/dist/cobalt-form/cobalt-form.esm.js"></script>
|
|
51
|
+
</head>
|
|
52
|
+
<body>
|
|
53
|
+
<co-form locale="es" schema='{ "email": { "type": "String", "required": true, "format": "email" } }'></co-form>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Eventos
|
|
59
|
+
|
|
60
|
+
| Evento | Detail | Cuándo |
|
|
61
|
+
|---|---|---|
|
|
62
|
+
| `coSubmit` | `{ values, isValid }` | Submit válido |
|
|
63
|
+
| `coChange` | `{ name, value, values }` | Cambio de cualquier campo |
|
|
64
|
+
| `coValidate` | `{ errors, isValid }` | Validación dispara |
|
|
65
|
+
|
|
66
|
+
## Métodos públicos
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
await form.setValue('email', 'nuevo@bar.com');
|
|
70
|
+
await form.getValue('email');
|
|
71
|
+
await form.touch('email');
|
|
72
|
+
await form.submit();
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Slots para custom fields
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<co-form schema='{ "email": { "type": "String", "required": true, "format": "email" } }'>
|
|
79
|
+
<!-- Reemplazá el render del campo "email" con HTML propio -->
|
|
80
|
+
<div slot="field:email">
|
|
81
|
+
<input type="email" id="myEmail">
|
|
82
|
+
</div>
|
|
83
|
+
</co-form>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
## Demos en vivo
|
|
87
|
+
|
|
88
|
+
5 niveles de personalización, todos sirviendo `<co-form>` desde unpkg:
|
|
89
|
+
|
|
90
|
+
- [Default](https://dev10.prolibu.com/ui/static/cobalt-form-demo/01-default.html)
|
|
91
|
+
- [Tokens theming](https://dev10.prolibu.com/ui/static/cobalt-form-demo/02-tokens.html)
|
|
92
|
+
- [CSS local](https://dev10.prolibu.com/ui/static/cobalt-form-demo/03-css.html)
|
|
93
|
+
- [Slot override](https://dev10.prolibu.com/ui/static/cobalt-form-demo/04-slot.html)
|
|
94
|
+
- [Renderer propio](https://dev10.prolibu.com/ui/static/cobalt-form-demo/05-custom.html)
|
|
95
|
+
|
|
96
|
+
## Si usás Vue 3
|
|
97
|
+
|
|
98
|
+
Mirá [`@prolibu-suite/cobalt-form-vue`](https://www.npmjs.com/package/@prolibu-suite/cobalt-form-vue) — composable `useForm()` + `CoFormRenderer.vue`.
|
|
99
|
+
|
|
100
|
+
## Documentación
|
|
101
|
+
|
|
102
|
+
→ [cobalt-docs/formularios](https://dev10.prolibu.com/ui/static/cobalt-docs/formularios/introduccion/) — schemas, validación, ref fields, ejemplos.
|
|
103
|
+
|
|
104
|
+
## License
|
|
105
|
+
|
|
106
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prolibu-suite/cobalt-form",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Cobalt Form — schema-driven <co-form> Web Component. CDN entry point.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
"author": "Prolibu <contact@prolibu.com>",
|
|
38
38
|
"license": "MIT",
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"@prolibu-suite/cobalt-core": "0.1.
|
|
40
|
+
"@prolibu-suite/cobalt-core": "0.1.1"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@prolibu-suite/cobalt-form-core": "0.1.
|
|
43
|
+
"@prolibu-suite/cobalt-form-core": "0.1.1"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@stencil/core": "^4.43.4"
|