@prolibu-suite/cobalt-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 +84 -0
- package/custom-elements.json +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-core
|
|
2
|
+
|
|
3
|
+
53 Web Components `co-*` framework-agnostic del **Cobalt Design System**, construidos con [Stencil](https://stenciljs.com/).
|
|
4
|
+
|
|
5
|
+
> Elemento #27. El azul que no se desvanece. La estructura invisible que hace que todo funcione.
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
### Vue / React / Svelte / cualquier bundler
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
// main.js — registra todos los custom elements
|
|
19
|
+
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
|
|
20
|
+
defineCustomElements(window);
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<co-button label="Guardar" variant="primary"></co-button>
|
|
25
|
+
<co-input label="Email" icon-left="envelope"></co-input>
|
|
26
|
+
<co-icon name="bell" weight="fill"></co-icon>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Vue 3 — configurar custom elements
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
// vite.config.js
|
|
33
|
+
export default {
|
|
34
|
+
plugins: [vue({
|
|
35
|
+
template: {
|
|
36
|
+
compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
|
|
37
|
+
}
|
|
38
|
+
})]
|
|
39
|
+
};
|
|
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
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<co-button label="Guardar" variant="primary"></co-button>
|
|
53
|
+
<co-input label="Email" icon-left="envelope"></co-input>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Wrappers framework-específicos
|
|
59
|
+
|
|
60
|
+
Para tipado completo y mejor DX, usá los wrappers oficiales:
|
|
61
|
+
|
|
62
|
+
- [`@prolibu-suite/cobalt-vue`](https://www.npmjs.com/package/@prolibu-suite/cobalt-vue) — Vue 3
|
|
63
|
+
- [`@prolibu-suite/cobalt-react`](https://www.npmjs.com/package/@prolibu-suite/cobalt-react) — React 17/18/19
|
|
64
|
+
|
|
65
|
+
## Componentes incluidos
|
|
66
|
+
|
|
67
|
+
Botones, inputs, selects, tablas, modales, drawers, tabs, tooltips, popovers, badges, chips, sidebars, autocomplete, combobox, transfer-list… 53 en total. Ver la [referencia completa](https://dev10.prolibu.com/ui/static/cobalt-docs/componentes/co-button/).
|
|
68
|
+
|
|
69
|
+
## Iconos
|
|
70
|
+
|
|
71
|
+
`<co-icon>` usa [Phosphor Icons](https://phosphoricons.com/) en kebab-case:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<co-icon name="magnifying-glass"></co-icon>
|
|
75
|
+
<co-icon name="bell" weight="fill" size="20"></co-icon>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Documentación
|
|
79
|
+
|
|
80
|
+
→ [cobalt-docs](https://dev10.prolibu.com/ui/static/cobalt-docs/) — referencia completa, ejemplos y guías de theming.
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT
|
package/custom-elements.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prolibu-suite/cobalt-core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Cobalt Design System — Framework-agnostic Web Components built with Stencil",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"license": "MIT",
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@phosphor-icons/core": "^2.1.1",
|
|
47
|
-
"@prolibu-suite/cobalt-tokens": "0.1.
|
|
47
|
+
"@prolibu-suite/cobalt-tokens": "0.1.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@stencil/core": "^4.43.4",
|