@kaufmann-lab/ui 0.1.1 → 0.1.3
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 +37 -26
- package/fesm2022/kaufmann-lab-ui.mjs +807 -326
- package/fesm2022/kaufmann-lab-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/kaufmann-lab-ui.d.ts +63 -6
package/README.md
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
1
|
# @kaufmann-lab/ui
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
LATAM, Portal OTD
|
|
5
|
-
|
|
3
|
+
Librería de componentes Angular compartida para los frontends de Kaufmann.
|
|
4
|
+
La consumen Portal LATAM, Portal OTD y Portal Star — incluida la app móvil
|
|
5
|
+
Ionic, que por debajo sigue siendo Angular.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
> **Nota sobre este README**: por ahora solo documenta `<kf-button>` en
|
|
8
|
+
> detalle. La librería ya tiene muchos más componentes (`Input`, `Checkbox`,
|
|
9
|
+
> `Select`, `Modal`, `Card`, `Tabs`, `Toast`, y otros) — para verlos, mirá el
|
|
10
|
+
> código fuente en `projects/ui/src/lib/` en el
|
|
11
|
+
> [repositorio](https://github.com/kaufmann-lab/kaufmann-ui-angular) hasta
|
|
12
|
+
> que esta tabla se complete. Ver también el
|
|
13
|
+
> [CHANGELOG](https://github.com/kaufmann-lab/kaufmann-ui-angular/blob/main/CHANGELOG.md)
|
|
14
|
+
> para el detalle de qué cambió en cada versión publicada.
|
|
8
15
|
|
|
9
|
-
|
|
10
|
-
uses whatever Angular version the host application already has installed. All
|
|
11
|
-
consumers must be on the same Angular major.
|
|
16
|
+
## Requisitos
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
Angular 22 y TypeScript ~6.0.3. Angular es una `peerDependency`, así que la
|
|
19
|
+
librería usa la versión de Angular que ya tenga instalada la aplicación
|
|
20
|
+
anfitriona. Todos los consumidores deben estar en el mismo major de Angular.
|
|
21
|
+
|
|
22
|
+
## Instalación
|
|
14
23
|
|
|
15
24
|
```bash
|
|
16
25
|
pnpm add @kaufmann-lab/ui
|
|
17
26
|
```
|
|
18
27
|
|
|
19
|
-
##
|
|
28
|
+
## Uso
|
|
20
29
|
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
Todos los componentes son standalone — no hay ningún módulo para importar.
|
|
31
|
+
Agregá el componente a los `imports` de quien lo use:
|
|
23
32
|
|
|
24
33
|
```ts
|
|
25
34
|
import { Component } from '@angular/core';
|
|
@@ -28,34 +37,36 @@ import { Button } from '@kaufmann-lab/ui';
|
|
|
28
37
|
@Component({
|
|
29
38
|
selector: 'app-customers',
|
|
30
39
|
imports: [Button],
|
|
31
|
-
template: `<kf-button (click)="save()">
|
|
40
|
+
template: `<kf-button (click)="save()">Guardar</kf-button>`,
|
|
32
41
|
})
|
|
33
42
|
export class Customers {}
|
|
34
43
|
```
|
|
35
44
|
|
|
36
|
-
|
|
37
|
-
|
|
45
|
+
Los estilos viajan compilados dentro de cada componente con view
|
|
46
|
+
encapsulation. No hay nada para importar en `angular.json`, ni ninguna hoja
|
|
47
|
+
de estilos global para conectar.
|
|
38
48
|
|
|
39
|
-
##
|
|
49
|
+
## Componentes
|
|
40
50
|
|
|
41
51
|
### `<kf-button>`
|
|
42
52
|
|
|
43
|
-
|
|
44
|
-
|
|
53
|
+
Envuelve un `<button>` nativo, así que el manejo de teclado, el foco y el
|
|
54
|
+
envío de formularios funcionan como se espera. `(click)` burbujea desde el
|
|
55
|
+
botón interno — bindealo en el host.
|
|
45
56
|
|
|
46
|
-
| Input
|
|
47
|
-
|
|
|
48
|
-
| `variant`
|
|
49
|
-
| `disabled` | `boolean`
|
|
50
|
-
| `type`
|
|
57
|
+
| Input | Tipo | Default | Notas |
|
|
58
|
+
| ---------- | --------------------------------- | ----------- | --------------------------------------------------- |
|
|
59
|
+
| `variant` | `'primary' \| 'ghost'` | `'primary'` | |
|
|
60
|
+
| `disabled` | `boolean` | `false` | El atributo suelto funciona: `<kf-button disabled>` |
|
|
61
|
+
| `type` | `'button' \| 'submit' \| 'reset'` | `'submit'` | Coincide con el default nativo |
|
|
51
62
|
|
|
52
63
|
```html
|
|
53
|
-
<kf-button (click)="save()">
|
|
54
|
-
<kf-button variant="ghost">
|
|
55
|
-
<kf-button type="button" disabled>
|
|
64
|
+
<kf-button (click)="save()">Guardar</kf-button>
|
|
65
|
+
<kf-button variant="ghost">Cancelar</kf-button>
|
|
66
|
+
<kf-button type="button" disabled>No disponible</kf-button>
|
|
56
67
|
```
|
|
57
68
|
|
|
58
|
-
|
|
69
|
+
El theming se hace mediante una custom property de CSS en el host:
|
|
59
70
|
|
|
60
71
|
```css
|
|
61
72
|
kf-button {
|