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.
- package/README.md +288 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js +8 -0
- package/dist/cjs/app-globals-V2Kpy_OQ.js.map +1 -0
- package/dist/cjs/index-rvPH40G4.js +1366 -0
- package/dist/cjs/index-rvPH40G4.js.map +1 -0
- package/dist/cjs/index.cjs.js +5 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/loader.cjs.js +16 -0
- package/dist/cjs/loader.cjs.js.map +1 -0
- package/dist/cjs/prop-parser-CqlyGycg.js +129 -0
- package/dist/cjs/prop-parser-CqlyGycg.js.map +1 -0
- package/dist/cjs/veleta-demo-template.cjs.entry.js +39 -0
- package/dist/cjs/veleta-menu-template-b.cjs.entry.js +60 -0
- package/dist/cjs/veleta-templates.cjs.js +28 -0
- package/dist/cjs/veleta-templates.cjs.js.map +1 -0
- package/dist/cjs/webfontloader-CDgRDOZ3.js +64 -0
- package/dist/cjs/webfontloader-CDgRDOZ3.js.map +1 -0
- package/dist/collection/collection-manifest.json +13 -0
- package/dist/collection/components/demo-template/demo-template.css +57 -0
- package/dist/collection/components/demo-template/demo-template.js +144 -0
- package/dist/collection/components/demo-template/demo-template.js.map +1 -0
- package/dist/collection/components/menu-template-b/menu-template-b.css +305 -0
- package/dist/collection/components/menu-template-b/menu-template-b.js +150 -0
- package/dist/collection/components/menu-template-b/menu-template-b.js.map +1 -0
- package/dist/collection/components.js +3 -0
- package/dist/collection/components.js.map +1 -0
- package/dist/collection/index.js +2 -0
- package/dist/collection/index.js.map +1 -0
- package/dist/collection/types/index.js +2 -0
- package/dist/collection/types/index.js.map +1 -0
- package/dist/collection/types/interfaces.js +2 -0
- package/dist/collection/types/interfaces.js.map +1 -0
- package/dist/collection/utils/data-helpers.js +16 -0
- package/dist/collection/utils/data-helpers.js.map +1 -0
- package/dist/collection/utils/font-loader.js +55 -0
- package/dist/collection/utils/font-loader.js.map +1 -0
- package/dist/collection/utils/mock-data.js +85 -0
- package/dist/collection/utils/mock-data.js.map +1 -0
- package/dist/collection/utils/prop-parser.js +65 -0
- package/dist/collection/utils/prop-parser.js.map +1 -0
- package/dist/components/index.d.ts +33 -0
- package/dist/components/index.js +1126 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/p-BtFpp-ge.js +124 -0
- package/dist/components/p-BtFpp-ge.js.map +1 -0
- package/dist/components/p-DjUJwx0S.js +62 -0
- package/dist/components/p-DjUJwx0S.js.map +1 -0
- package/dist/components/veleta-demo-template.d.ts +11 -0
- package/dist/components/veleta-demo-template.js +64 -0
- package/dist/components/veleta-demo-template.js.map +1 -0
- package/dist/components/veleta-menu-template-b.d.ts +11 -0
- package/dist/components/veleta-menu-template-b.js +85 -0
- package/dist/components/veleta-menu-template-b.js.map +1 -0
- package/dist/esm/app-globals-DQuL1Twl.js +6 -0
- package/dist/esm/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/esm/index-zOTWMTLj.js +1341 -0
- package/dist/esm/index-zOTWMTLj.js.map +1 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/loader.js +14 -0
- package/dist/esm/loader.js.map +1 -0
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/esm/prop-parser-D5qpnUIY.js +124 -0
- package/dist/esm/prop-parser-D5qpnUIY.js.map +1 -0
- package/dist/esm/veleta-demo-template.entry.js +37 -0
- package/dist/esm/veleta-demo-template.entry.js.map +1 -0
- package/dist/esm/veleta-menu-template-b.entry.js +58 -0
- package/dist/esm/veleta-menu-template-b.entry.js.map +1 -0
- package/dist/esm/veleta-templates.js +24 -0
- package/dist/esm/veleta-templates.js.map +1 -0
- package/dist/esm/webfontloader-DjUJwx0S.js +62 -0
- package/dist/esm/webfontloader-DjUJwx0S.js.map +1 -0
- package/dist/esm-es5/app-globals-DQuL1Twl.js +2 -0
- package/dist/esm-es5/app-globals-DQuL1Twl.js.map +1 -0
- package/dist/esm-es5/index-zOTWMTLj.js +2 -0
- package/dist/esm-es5/index-zOTWMTLj.js.map +1 -0
- package/dist/esm-es5/index.js +2 -0
- package/dist/esm-es5/index.js.map +1 -0
- package/dist/esm-es5/loader.js +2 -0
- package/dist/esm-es5/loader.js.map +1 -0
- package/dist/esm-es5/prop-parser-D5qpnUIY.js +2 -0
- package/dist/esm-es5/prop-parser-D5qpnUIY.js.map +1 -0
- package/dist/esm-es5/veleta-demo-template.entry.js +2 -0
- package/dist/esm-es5/veleta-demo-template.entry.js.map +1 -0
- package/dist/esm-es5/veleta-menu-template-b.entry.js +2 -0
- package/dist/esm-es5/veleta-menu-template-b.entry.js.map +1 -0
- package/dist/esm-es5/veleta-templates.js +2 -0
- package/dist/esm-es5/veleta-templates.js.map +1 -0
- package/dist/esm-es5/webfontloader-DjUJwx0S.js +2 -0
- package/dist/esm-es5/webfontloader-DjUJwx0S.js.map +1 -0
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/types/components/demo-template/demo-template.d.ts +12 -0
- package/dist/types/components/menu-template-b/menu-template-b.d.ts +11 -0
- package/dist/types/components.d.ts +116 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/stencil-public-runtime.d.ts +1799 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types/types/interfaces.d.ts +39 -0
- package/dist/types/utils/data-helpers.d.ts +10 -0
- package/dist/types/utils/font-loader.d.ts +33 -0
- package/dist/types/utils/mock-data.d.ts +9 -0
- package/dist/types/utils/prop-parser.d.ts +11 -0
- package/dist/veleta-templates/index.esm.js +2 -0
- package/dist/veleta-templates/index.esm.js.map +1 -0
- package/dist/veleta-templates/loader.esm.js.map +1 -0
- package/dist/veleta-templates/p-1da2f609.entry.js +2 -0
- package/dist/veleta-templates/p-1da2f609.entry.js.map +1 -0
- package/dist/veleta-templates/p-6f14da26.system.entry.js +2 -0
- package/dist/veleta-templates/p-6f14da26.system.entry.js.map +1 -0
- package/dist/veleta-templates/p-6tMTQRgb.system.js +2 -0
- package/dist/veleta-templates/p-6tMTQRgb.system.js.map +1 -0
- package/dist/veleta-templates/p-9e099798.entry.js +2 -0
- package/dist/veleta-templates/p-9e099798.entry.js.map +1 -0
- package/dist/veleta-templates/p-BbPAtVJG.system.js +2 -0
- package/dist/veleta-templates/p-BbPAtVJG.system.js.map +1 -0
- package/dist/veleta-templates/p-BtFpp-ge.js +2 -0
- package/dist/veleta-templates/p-BtFpp-ge.js.map +1 -0
- package/dist/veleta-templates/p-D1BkLoGd.system.js +2 -0
- package/dist/veleta-templates/p-D1BkLoGd.system.js.map +1 -0
- package/dist/veleta-templates/p-D3ESHVSd.system.js +3 -0
- package/dist/veleta-templates/p-D3ESHVSd.system.js.map +1 -0
- package/dist/veleta-templates/p-DQuL1Twl.js +2 -0
- package/dist/veleta-templates/p-DQuL1Twl.js.map +1 -0
- package/dist/veleta-templates/p-DjUJwx0S.js +2 -0
- package/dist/veleta-templates/p-DjUJwx0S.js.map +1 -0
- package/dist/veleta-templates/p-YWpyar7R.system.js +2 -0
- package/dist/veleta-templates/p-YWpyar7R.system.js.map +1 -0
- package/dist/veleta-templates/p-bbAxcnzz.system.js +2 -0
- package/dist/veleta-templates/p-bbAxcnzz.system.js.map +1 -0
- package/dist/veleta-templates/p-e7ecc57b.system.entry.js +2 -0
- package/dist/veleta-templates/p-e7ecc57b.system.entry.js.map +1 -0
- package/dist/veleta-templates/p-zOTWMTLj.js +3 -0
- package/dist/veleta-templates/p-zOTWMTLj.js.map +1 -0
- package/dist/veleta-templates/veleta-templates.esm.js +2 -0
- package/dist/veleta-templates/veleta-templates.esm.js.map +1 -0
- package/dist/veleta-templates/veleta-templates.js +127 -0
- package/loader/cdn.js +2 -0
- package/loader/index.cjs.js +2 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +2 -0
- package/loader/index.js +3 -0
- 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 @@
|
|
|
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;;;;"}
|