@seace/ui 0.0.1 → 0.0.4
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 +66 -38
- package/fesm2022/seace-ui.mjs +1416 -8
- package/fesm2022/seace-ui.mjs.map +1 -1
- package/package.json +6 -3
- package/types/seace-ui.d.ts +91 -5
package/README.md
CHANGED
|
@@ -1,64 +1,92 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @seace/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Librería de componentes UI para proyectos SEACE, construida con Angular y Tailwind CSS.
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
5
|
+
## Instalación
|
|
8
6
|
|
|
9
7
|
```bash
|
|
10
|
-
|
|
8
|
+
npm install @seace/ui
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
## Requisitos
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
```
|
|
13
|
+
- Angular 21+
|
|
14
|
+
- Tailwind CSS 3+
|
|
18
15
|
|
|
19
|
-
##
|
|
16
|
+
## Configuración
|
|
20
17
|
|
|
21
|
-
|
|
18
|
+
### 1. Registra los iconos en tu componente raíz
|
|
22
19
|
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
```typescript
|
|
21
|
+
import { Component, inject, OnInit } from '@angular/core';
|
|
22
|
+
import { IconRegistry, ICONS_SYSTEM } from '@seace/ui';
|
|
26
23
|
|
|
27
|
-
|
|
24
|
+
@Component({ selector: 'app-root', ... })
|
|
25
|
+
export class AppComponent implements OnInit {
|
|
26
|
+
#registry = inject(IconRegistry);
|
|
28
27
|
|
|
29
|
-
|
|
28
|
+
ngOnInit() {
|
|
29
|
+
this.#registry.registerCategory(ICONS_SYSTEM);
|
|
30
|
+
// Agrega más categorías según necesites
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
```
|
|
30
34
|
|
|
31
|
-
|
|
35
|
+
### 2. Configura Tailwind para incluir las clases de la librería
|
|
32
36
|
|
|
33
|
-
|
|
37
|
+
```js
|
|
38
|
+
// tailwind.config.js
|
|
39
|
+
module.exports = {
|
|
40
|
+
content: [
|
|
41
|
+
'./src/**/*.{html,ts}',
|
|
42
|
+
'./node_modules/@seace/ui/**/*.mjs',
|
|
43
|
+
],
|
|
44
|
+
};
|
|
45
|
+
```
|
|
34
46
|
|
|
35
|
-
|
|
36
|
-
cd dist/ui
|
|
37
|
-
```
|
|
47
|
+
## Componentes
|
|
38
48
|
|
|
39
|
-
|
|
40
|
-
```bash
|
|
41
|
-
npm publish
|
|
42
|
-
```
|
|
49
|
+
### Badge
|
|
43
50
|
|
|
44
|
-
|
|
51
|
+
```html
|
|
52
|
+
<ui-badge color="primary" variant="ghost">Pendiente</ui-badge>
|
|
53
|
+
<ui-badge color="success" variant="filled" icon="check">Aprobado</ui-badge>
|
|
54
|
+
<ui-badge color="danger" variant="outlined" size="sm">Rechazado</ui-badge>
|
|
55
|
+
```
|
|
45
56
|
|
|
46
|
-
|
|
57
|
+
| Input | Tipo | Default | Descripción |
|
|
58
|
+
|-------|------|---------|-------------|
|
|
59
|
+
| `color` | `BadgeColor` | `primary` | Color semántico o decorativo |
|
|
60
|
+
| `variant` | `filled \| outlined \| ghost` | `ghost` | Estilo visual |
|
|
61
|
+
| `size` | `sm \| md \| lg` | `md` | Tamaño |
|
|
62
|
+
| `icon` | `string \| null` | `null` | Nombre del icono |
|
|
63
|
+
| `iconPosition` | `left \| right` | `left` | Posición del icono |
|
|
47
64
|
|
|
48
|
-
|
|
49
|
-
|
|
65
|
+
### Icon
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<ui-icon name="check_circle" [size]="24" />
|
|
50
69
|
```
|
|
51
70
|
|
|
52
|
-
|
|
71
|
+
| Input | Tipo | Default | Descripción |
|
|
72
|
+
|-------|------|---------|-------------|
|
|
73
|
+
| `name` | `string` | — | Nombre del icono (requerido) |
|
|
74
|
+
| `size` | `number` | `24` | Tamaño en px |
|
|
53
75
|
|
|
54
|
-
|
|
76
|
+
## Iconos disponibles
|
|
55
77
|
|
|
56
|
-
|
|
57
|
-
ng e2e
|
|
58
|
-
```
|
|
78
|
+
La librería incluye 1151 iconos organizados en categorías:
|
|
59
79
|
|
|
60
|
-
|
|
80
|
+
```typescript
|
|
81
|
+
import {
|
|
82
|
+
ICONS_SYSTEM,
|
|
83
|
+
ICONS_ARROWS,
|
|
84
|
+
ICONS_CHART,
|
|
85
|
+
ICONS_DOCUMENTS,
|
|
86
|
+
// ...
|
|
87
|
+
} from '@seace/ui';
|
|
88
|
+
```
|
|
61
89
|
|
|
62
|
-
##
|
|
90
|
+
## Licencia
|
|
63
91
|
|
|
64
|
-
|
|
92
|
+
UNLICENSED — uso interno SEACE/OSCE.
|