veleta-templates 0.0.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.
Files changed (147) hide show
  1. package/README.md +288 -0
  2. package/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
  3. package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
  4. package/dist/cjs/index-rvPH40G4.js +1366 -0
  5. package/dist/cjs/index-rvPH40G4.js.map +1 -0
  6. package/dist/cjs/index.cjs.js +5 -0
  7. package/dist/cjs/index.cjs.js.map +1 -0
  8. package/dist/cjs/loader.cjs.js +16 -0
  9. package/dist/cjs/loader.cjs.js.map +1 -0
  10. package/dist/cjs/prop-parser-CqlyGycg.js +129 -0
  11. package/dist/cjs/prop-parser-CqlyGycg.js.map +1 -0
  12. package/dist/cjs/veleta-demo-template.cjs.entry.js +39 -0
  13. package/dist/cjs/veleta-menu-template-b.cjs.entry.js +60 -0
  14. package/dist/cjs/veleta-templates.cjs.js +28 -0
  15. package/dist/cjs/veleta-templates.cjs.js.map +1 -0
  16. package/dist/cjs/webfontloader-CDgRDOZ3.js +64 -0
  17. package/dist/cjs/webfontloader-CDgRDOZ3.js.map +1 -0
  18. package/dist/collection/collection-manifest.json +13 -0
  19. package/dist/collection/components/demo-template/demo-template.css +57 -0
  20. package/dist/collection/components/demo-template/demo-template.js +144 -0
  21. package/dist/collection/components/demo-template/demo-template.js.map +1 -0
  22. package/dist/collection/components/menu-template-b/menu-template-b.css +305 -0
  23. package/dist/collection/components/menu-template-b/menu-template-b.js +150 -0
  24. package/dist/collection/components/menu-template-b/menu-template-b.js.map +1 -0
  25. package/dist/collection/components.js +3 -0
  26. package/dist/collection/components.js.map +1 -0
  27. package/dist/collection/index.js +2 -0
  28. package/dist/collection/index.js.map +1 -0
  29. package/dist/collection/types/index.js +2 -0
  30. package/dist/collection/types/index.js.map +1 -0
  31. package/dist/collection/types/interfaces.js +2 -0
  32. package/dist/collection/types/interfaces.js.map +1 -0
  33. package/dist/collection/utils/data-helpers.js +16 -0
  34. package/dist/collection/utils/data-helpers.js.map +1 -0
  35. package/dist/collection/utils/font-loader.js +55 -0
  36. package/dist/collection/utils/font-loader.js.map +1 -0
  37. package/dist/collection/utils/mock-data.js +85 -0
  38. package/dist/collection/utils/mock-data.js.map +1 -0
  39. package/dist/collection/utils/prop-parser.js +65 -0
  40. package/dist/collection/utils/prop-parser.js.map +1 -0
  41. package/dist/components/index.d.ts +33 -0
  42. package/dist/components/index.js +1126 -0
  43. package/dist/components/index.js.map +1 -0
  44. package/dist/components/p-BtFpp-ge.js +124 -0
  45. package/dist/components/p-BtFpp-ge.js.map +1 -0
  46. package/dist/components/p-DjUJwx0S.js +62 -0
  47. package/dist/components/p-DjUJwx0S.js.map +1 -0
  48. package/dist/components/veleta-demo-template.d.ts +11 -0
  49. package/dist/components/veleta-demo-template.js +64 -0
  50. package/dist/components/veleta-demo-template.js.map +1 -0
  51. package/dist/components/veleta-menu-template-b.d.ts +11 -0
  52. package/dist/components/veleta-menu-template-b.js +85 -0
  53. package/dist/components/veleta-menu-template-b.js.map +1 -0
  54. package/dist/esm/app-globals-DQuL1Twl.js +6 -0
  55. package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
  56. package/dist/esm/index-zOTWMTLj.js +1341 -0
  57. package/dist/esm/index-zOTWMTLj.js.map +1 -0
  58. package/dist/esm/index.js +4 -0
  59. package/dist/esm/index.js.map +1 -0
  60. package/dist/esm/loader.js +14 -0
  61. package/dist/esm/loader.js.map +1 -0
  62. package/dist/esm/polyfills/core-js.js +11 -0
  63. package/dist/esm/polyfills/dom.js +79 -0
  64. package/dist/esm/polyfills/es5-html-element.js +1 -0
  65. package/dist/esm/polyfills/index.js +34 -0
  66. package/dist/esm/polyfills/system.js +6 -0
  67. package/dist/esm/prop-parser-D5qpnUIY.js +124 -0
  68. package/dist/esm/prop-parser-D5qpnUIY.js.map +1 -0
  69. package/dist/esm/veleta-demo-template.entry.js +37 -0
  70. package/dist/esm/veleta-demo-template.entry.js.map +1 -0
  71. package/dist/esm/veleta-menu-template-b.entry.js +58 -0
  72. package/dist/esm/veleta-menu-template-b.entry.js.map +1 -0
  73. package/dist/esm/veleta-templates.js +24 -0
  74. package/dist/esm/veleta-templates.js.map +1 -0
  75. package/dist/esm/webfontloader-DjUJwx0S.js +62 -0
  76. package/dist/esm/webfontloader-DjUJwx0S.js.map +1 -0
  77. package/dist/esm-es5/app-globals-DQuL1Twl.js +2 -0
  78. package/dist/esm-es5/app-globals-DQuL1Twl.js.map +1 -0
  79. package/dist/esm-es5/index-zOTWMTLj.js +2 -0
  80. package/dist/esm-es5/index-zOTWMTLj.js.map +1 -0
  81. package/dist/esm-es5/index.js +2 -0
  82. package/dist/esm-es5/index.js.map +1 -0
  83. package/dist/esm-es5/loader.js +2 -0
  84. package/dist/esm-es5/loader.js.map +1 -0
  85. package/dist/esm-es5/prop-parser-D5qpnUIY.js +2 -0
  86. package/dist/esm-es5/prop-parser-D5qpnUIY.js.map +1 -0
  87. package/dist/esm-es5/veleta-demo-template.entry.js +2 -0
  88. package/dist/esm-es5/veleta-demo-template.entry.js.map +1 -0
  89. package/dist/esm-es5/veleta-menu-template-b.entry.js +2 -0
  90. package/dist/esm-es5/veleta-menu-template-b.entry.js.map +1 -0
  91. package/dist/esm-es5/veleta-templates.js +2 -0
  92. package/dist/esm-es5/veleta-templates.js.map +1 -0
  93. package/dist/esm-es5/webfontloader-DjUJwx0S.js +2 -0
  94. package/dist/esm-es5/webfontloader-DjUJwx0S.js.map +1 -0
  95. package/dist/index.cjs.js +1 -0
  96. package/dist/index.js +1 -0
  97. package/dist/types/components/demo-template/demo-template.d.ts +12 -0
  98. package/dist/types/components/menu-template-b/menu-template-b.d.ts +11 -0
  99. package/dist/types/components.d.ts +116 -0
  100. package/dist/types/index.d.ts +1 -0
  101. package/dist/types/stencil-public-runtime.d.ts +1799 -0
  102. package/dist/types/types/index.d.ts +1 -0
  103. package/dist/types/types/interfaces.d.ts +39 -0
  104. package/dist/types/utils/data-helpers.d.ts +10 -0
  105. package/dist/types/utils/font-loader.d.ts +33 -0
  106. package/dist/types/utils/mock-data.d.ts +9 -0
  107. package/dist/types/utils/prop-parser.d.ts +11 -0
  108. package/dist/veleta-templates/index.esm.js +2 -0
  109. package/dist/veleta-templates/index.esm.js.map +1 -0
  110. package/dist/veleta-templates/loader.esm.js.map +1 -0
  111. package/dist/veleta-templates/p-1da2f609.entry.js +2 -0
  112. package/dist/veleta-templates/p-1da2f609.entry.js.map +1 -0
  113. package/dist/veleta-templates/p-6f14da26.system.entry.js +2 -0
  114. package/dist/veleta-templates/p-6f14da26.system.entry.js.map +1 -0
  115. package/dist/veleta-templates/p-6tMTQRgb.system.js +2 -0
  116. package/dist/veleta-templates/p-6tMTQRgb.system.js.map +1 -0
  117. package/dist/veleta-templates/p-9e099798.entry.js +2 -0
  118. package/dist/veleta-templates/p-9e099798.entry.js.map +1 -0
  119. package/dist/veleta-templates/p-BbPAtVJG.system.js +2 -0
  120. package/dist/veleta-templates/p-BbPAtVJG.system.js.map +1 -0
  121. package/dist/veleta-templates/p-BtFpp-ge.js +2 -0
  122. package/dist/veleta-templates/p-BtFpp-ge.js.map +1 -0
  123. package/dist/veleta-templates/p-D1BkLoGd.system.js +2 -0
  124. package/dist/veleta-templates/p-D1BkLoGd.system.js.map +1 -0
  125. package/dist/veleta-templates/p-D3ESHVSd.system.js +3 -0
  126. package/dist/veleta-templates/p-D3ESHVSd.system.js.map +1 -0
  127. package/dist/veleta-templates/p-DQuL1Twl.js +2 -0
  128. package/dist/veleta-templates/p-DQuL1Twl.js.map +1 -0
  129. package/dist/veleta-templates/p-DjUJwx0S.js +2 -0
  130. package/dist/veleta-templates/p-DjUJwx0S.js.map +1 -0
  131. package/dist/veleta-templates/p-YWpyar7R.system.js +2 -0
  132. package/dist/veleta-templates/p-YWpyar7R.system.js.map +1 -0
  133. package/dist/veleta-templates/p-bbAxcnzz.system.js +2 -0
  134. package/dist/veleta-templates/p-bbAxcnzz.system.js.map +1 -0
  135. package/dist/veleta-templates/p-e7ecc57b.system.entry.js +2 -0
  136. package/dist/veleta-templates/p-e7ecc57b.system.entry.js.map +1 -0
  137. package/dist/veleta-templates/p-zOTWMTLj.js +3 -0
  138. package/dist/veleta-templates/p-zOTWMTLj.js.map +1 -0
  139. package/dist/veleta-templates/veleta-templates.esm.js +2 -0
  140. package/dist/veleta-templates/veleta-templates.esm.js.map +1 -0
  141. package/dist/veleta-templates/veleta-templates.js +127 -0
  142. package/loader/cdn.js +2 -0
  143. package/loader/index.cjs.js +2 -0
  144. package/loader/index.d.ts +24 -0
  145. package/loader/index.es2017.js +2 -0
  146. package/loader/index.js +3 -0
  147. package/package.json +41 -0
package/README.md ADDED
@@ -0,0 +1,288 @@
1
+ # Veleta Templates
2
+
3
+ Proyecto Stencil completamente configurado con TypeScript, Tailwind CSS y PostCSS.
4
+
5
+ ## Características
6
+
7
+ - ✅ TypeScript completamente configurado
8
+ - ✅ Tailwind CSS configurado y funcionando dentro de los componentes
9
+ - ✅ PostCSS con autoprefixer
10
+ - ✅ OutputTargets: dist, dist-custom-elements, www
11
+ - ✅ Compatible con Astro, Ionic Angular y Web Components puros
12
+ - ✅ Componente de ejemplo `<menu-template-a>` con tipos TypeScript
13
+
14
+ ## Requisitos Previos
15
+
16
+ - Node.js 16 o superior
17
+ - npm 7 o superior
18
+
19
+ ## Instalación
20
+
21
+ ```bash
22
+ npm install
23
+ ```
24
+
25
+ ## Desarrollo
26
+
27
+ Para iniciar el servidor de desarrollo con hot-reload:
28
+
29
+ ```bash
30
+ npm run start
31
+ ```
32
+
33
+ Esto iniciará el servidor en `http://localhost:3333` y abrirá automáticamente el navegador con la página de prueba.
34
+
35
+ ## Construcción
36
+
37
+ Para construir el proyecto para producción:
38
+
39
+ ```bash
40
+ npm run build
41
+ ```
42
+
43
+ Esto generará:
44
+ - `dist/` - Build estándar de Stencil
45
+ - `dist-custom-elements/` - Build para Web Components independientes
46
+ - `www/` - Build para testing local
47
+
48
+ ## Uso
49
+
50
+ ### Como Web Component puro
51
+
52
+ ```html
53
+ <!DOCTYPE html>
54
+ <html>
55
+ <head>
56
+ <meta charset="utf-8">
57
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
58
+ <script type="module" src="./dist/veleta-templates/veleta-templates.esm.js"></script>
59
+ </head>
60
+ <body>
61
+ <menu-template-a id="menu"></menu-template-a>
62
+ <script>
63
+ document.getElementById('menu').data = {
64
+ title: 'Mi Menú',
65
+ items: [
66
+ { id: '1', label: 'Inicio', href: '/', icon: '🏠' },
67
+ { id: '2', label: 'Acerca', href: '/about', icon: 'ℹ️' }
68
+ ]
69
+ };
70
+ </script>
71
+ </body>
72
+ </html>
73
+ ```
74
+
75
+ ### En Astro
76
+
77
+ 1. Instala el paquete en tu proyecto Astro:
78
+ ```bash
79
+ npm install ./path/to/veleta-templates
80
+ ```
81
+
82
+ 2. Usa el componente en tu archivo `.astro`:
83
+
84
+ ```astro
85
+ ---
86
+ import { defineCustomElement } from 'veleta-templates/dist/veleta-templates/veleta-templates.esm.js';
87
+ import type { MenuTemplateData } from 'veleta-templates/dist/types/menu';
88
+
89
+ const menuData: MenuTemplateData = {
90
+ title: 'Menú Principal',
91
+ items: [
92
+ { id: '1', label: 'Inicio', href: '/', icon: '🏠' },
93
+ { id: '2', label: 'Productos', href: '/products', icon: '📦' }
94
+ ]
95
+ };
96
+ ---
97
+
98
+ <menu-template-a data={menuData}></menu-template-a>
99
+
100
+ <script>
101
+ defineCustomElement();
102
+ </script>
103
+ ```
104
+
105
+ ### En Ionic Angular
106
+
107
+ 1. Instala el paquete:
108
+ ```bash
109
+ npm install ./path/to/veleta-templates
110
+ ```
111
+
112
+ 2. En tu módulo Angular, importa `CUSTOM_ELEMENTS_SCHEMA`:
113
+
114
+ ```typescript
115
+ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
116
+ import { AppComponent } from './app.component';
117
+
118
+ @NgModule({
119
+ declarations: [AppComponent],
120
+ imports: [],
121
+ schemas: [CUSTOM_ELEMENTS_SCHEMA], // Importante para usar Web Components
122
+ bootstrap: [AppComponent]
123
+ })
124
+ export class AppModule {}
125
+ ```
126
+
127
+ 3. En tu componente TypeScript:
128
+
129
+ ```typescript
130
+ import { Component } from '@angular/core';
131
+ import type { MenuTemplateData } from 'veleta-templates/dist/types/menu';
132
+
133
+ @Component({
134
+ selector: 'app-root',
135
+ templateUrl: './app.component.html'
136
+ })
137
+ export class AppComponent {
138
+ menuData: MenuTemplateData = {
139
+ title: 'Menú Principal',
140
+ items: [
141
+ { id: '1', label: 'Inicio', href: '/', icon: '🏠' },
142
+ { id: '2', label: 'Productos', href: '/products', icon: '📦' }
143
+ ]
144
+ };
145
+ }
146
+ ```
147
+
148
+ 4. En tu template HTML:
149
+
150
+ ```html
151
+ <menu-template-a [data]="menuData"></menu-template-a>
152
+ ```
153
+
154
+ 5. Importa los estilos en `angular.json` o en tu `styles.css`:
155
+
156
+ ```json
157
+ "styles": [
158
+ "node_modules/veleta-templates/dist/veleta-templates/veleta-templates.css"
159
+ ]
160
+ ```
161
+
162
+ ## Estructura del Proyecto
163
+
164
+ ```
165
+ veleta-templates/
166
+ ├── src/
167
+ │ ├── components/
168
+ │ │ └── menu-template-a/
169
+ │ │ ├── menu-template-a.tsx # Componente principal
170
+ │ │ └── menu-template-a.css # Estilos con Tailwind
171
+ │ ├── types/
172
+ │ │ ├── menu.ts # Tipos TypeScript
173
+ │ │ └── index.ts # Exportación de tipos
174
+ │ ├── global/
175
+ │ │ └── app.css # Estilos globales
176
+ │ ├── components.ts # Exportación de componentes
177
+ │ ├── index.ts # Punto de entrada
178
+ │ └── index.html # Página de prueba
179
+ ├── stencil.config.ts # Configuración de Stencil
180
+ ├── tailwind.config.js # Configuración de Tailwind
181
+ ├── postcss.config.js # Configuración de PostCSS
182
+ ├── tsconfig.json # Configuración de TypeScript
183
+ └── package.json # Dependencias y scripts
184
+ ```
185
+
186
+ ## Componentes
187
+
188
+ ### menu-template-a
189
+
190
+ Componente de menú que acepta datos estructurados y los renderiza con estilos de Tailwind CSS.
191
+
192
+ **Props:**
193
+ - `data` (MenuTemplateData, requerido): Datos del menú a renderizar
194
+
195
+ **Ejemplo de datos:**
196
+
197
+ ```typescript
198
+ import type { MenuTemplateData } from './types/menu';
199
+
200
+ const menuData: MenuTemplateData = {
201
+ title: 'Menú Principal',
202
+ variant: 'default', // opcional: 'default' | 'compact' | 'expanded'
203
+ items: [
204
+ {
205
+ id: '1',
206
+ label: 'Inicio',
207
+ href: '/',
208
+ icon: '🏠'
209
+ },
210
+ {
211
+ id: '2',
212
+ label: 'Productos',
213
+ href: '/products',
214
+ icon: '📦',
215
+ children: [
216
+ { id: '2-1', label: 'Todos los productos', href: '/products/all' },
217
+ { id: '2-2', label: 'Categorías', href: '/products/categories' }
218
+ ]
219
+ },
220
+ {
221
+ id: '3',
222
+ label: 'Contacto',
223
+ href: '/contact',
224
+ icon: '📧'
225
+ }
226
+ ]
227
+ };
228
+ ```
229
+
230
+ **Interfaces TypeScript:**
231
+
232
+ ```typescript
233
+ interface MenuItem {
234
+ id: string;
235
+ label: string;
236
+ href?: string;
237
+ icon?: string;
238
+ children?: MenuItem[];
239
+ }
240
+
241
+ interface MenuTemplateData {
242
+ title: string;
243
+ items: MenuItem[];
244
+ variant?: 'default' | 'compact' | 'expanded';
245
+ }
246
+ ```
247
+
248
+ ## Scripts Disponibles
249
+
250
+ - `npm run build` - Construye el proyecto para producción
251
+ - `npm run start` - Inicia el servidor de desarrollo con hot-reload
252
+ - `npm test` - Ejecuta los tests
253
+ - `npm run test.watch` - Ejecuta los tests en modo watch
254
+ - `npm run generate` - Genera un nuevo componente
255
+
256
+ ## Configuración
257
+
258
+ ### Tailwind CSS
259
+
260
+ El proyecto está configurado para usar Tailwind CSS dentro de los componentes Stencil. Las clases de Tailwind se pueden usar directamente en el JSX de los componentes.
261
+
262
+ ### PostCSS
263
+
264
+ PostCSS está configurado con:
265
+ - Tailwind CSS
266
+ - Autoprefixer (para compatibilidad con navegadores)
267
+
268
+ ### TypeScript
269
+
270
+ TypeScript está configurado con:
271
+ - Decoradores experimentales habilitados
272
+ - JSX configurado para Stencil
273
+ - Tipos estrictos
274
+
275
+ ## Compatibilidad
276
+
277
+ Este proyecto es compatible con:
278
+ - ✅ Astro
279
+ - ✅ Ionic Angular
280
+ - ✅ Web Components puros (Vanilla JS)
281
+ - ✅ React (usando Web Components)
282
+ - ✅ Vue (usando Web Components)
283
+ - ✅ Cualquier framework que soporte Web Components
284
+
285
+ ## Licencia
286
+
287
+ MIT
288
+
@@ -0,0 +1,8 @@
1
+ 'use strict';
2
+
3
+ const globalScripts = () => {};
4
+
5
+ exports.globalScripts = globalScripts;
6
+ //# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
7
+
8
+ //# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\nexport const globalStyles = null;\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}