@dropi/ui 0.1.4 → 0.1.5
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/package.json +1 -1
- package/readme.md +39 -8
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -10,9 +10,15 @@ Genera componentes reutilizables para Angular, React y Vue desde una única base
|
|
|
10
10
|
|
|
11
11
|
## Instalación
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
| Framework | Paquete a instalar |
|
|
14
|
+
|---|---|
|
|
15
|
+
| React | `npm install @dropi/ui-react` |
|
|
16
|
+
| Angular / Vue / Vanilla | `npm install @dropi/ui` |
|
|
17
|
+
|
|
18
|
+
> **¿Por qué dos paquetes?**
|
|
19
|
+
> `@dropi/ui` contiene los Web Components puros (estándares del navegador).
|
|
20
|
+
> `@dropi/ui-react` son wrappers React auto-generados por Stencil que los envuelven con props tipadas, eventos estilo React (`onDropiChange`) y autocompletado en VSCode.
|
|
21
|
+
> `@dropi/ui-react` depende internamente de `@dropi/ui` — no necesitas instalar los dos.
|
|
16
22
|
|
|
17
23
|
---
|
|
18
24
|
|
|
@@ -20,11 +26,13 @@ npm install @dropi/ui
|
|
|
20
26
|
|
|
21
27
|
### React (`main.tsx`)
|
|
22
28
|
|
|
29
|
+
Con `@dropi/ui-react` **no necesitas** llamar `defineCustomElements()` — cada wrapper registra su Web Component automáticamente al importarlo.
|
|
30
|
+
|
|
23
31
|
```typescript
|
|
24
|
-
import
|
|
25
|
-
import '@dropi/ui/dist/dropi-ui/dropi-ui.css'
|
|
32
|
+
import '@dropi/ui/dist/dropi-ui/dropi-ui.css' // estilos globales y tokens
|
|
26
33
|
|
|
27
|
-
defineCustomElements()
|
|
34
|
+
// No se necesita defineCustomElements()
|
|
35
|
+
// Solo importa y usa los componentes directamente
|
|
28
36
|
```
|
|
29
37
|
|
|
30
38
|
### Angular (`main.ts`)
|
|
@@ -62,15 +70,38 @@ El componente `<dropi-icon>` requiere el sprite en `/assets/icons/symbol/svg/spr
|
|
|
62
70
|
|
|
63
71
|
---
|
|
64
72
|
|
|
73
|
+
## Cómo pasar props — regla fundamental
|
|
74
|
+
|
|
75
|
+
Cada prop se pasa **directamente en el JSX**, una por una. No existe un prop contenedor tipo `selectProperties` u `options` agrupadas.
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
// ❌ Incorrecto — selectProperties no existe como prop
|
|
79
|
+
<DropiSelect selectProperties={{ label: 'País', placeholder: 'Seleccionar' }} />
|
|
80
|
+
|
|
81
|
+
// ✅ Correcto — cada prop va suelta en el tag
|
|
82
|
+
<DropiSelect
|
|
83
|
+
label="País"
|
|
84
|
+
placeholder="Seleccionar"
|
|
85
|
+
options={options}
|
|
86
|
+
onDropiChange={(e) => setSelected(e.detail)}
|
|
87
|
+
/>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Esto aplica para todos los componentes. Las props disponibles están listadas en cada sección de este readme.
|
|
91
|
+
|
|
92
|
+
> **Intellisense en VSCode:** si al hacer hover sobre un componente no aparecen las props, significa que `@dropi/ui-react` necesita ser compilado (`npm run build` en la carpeta `dropi-ui-react`). Después de cualquier cambio en la librería siempre hay que correr el build.
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
65
96
|
## Nota importante sobre eventos
|
|
66
97
|
|
|
67
98
|
Todos los eventos son `CustomEvent`. El valor emitido **siempre viene en `e.detail`**, no en `e` directamente.
|
|
68
99
|
|
|
69
100
|
```typescript
|
|
70
|
-
// ❌ Incorrecto — e es el CustomEvent completo
|
|
101
|
+
// ❌ Incorrecto — e es el CustomEvent completo, no el valor
|
|
71
102
|
onDropiChange={(e) => console.log(e)}
|
|
72
103
|
|
|
73
|
-
// ✅ Correcto
|
|
104
|
+
// ✅ Correcto — e.detail tiene el valor real
|
|
74
105
|
onDropiChange={(e) => console.log(e.detail)}
|
|
75
106
|
```
|
|
76
107
|
|