ywana-core8 0.1.86 → 0.1.89
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/doc/package-lock.json +4 -4
- package/doc/package.json +1 -1
- package/doc/src/App.js +5 -16
- package/doc/src/components/ExamplePage.js +57 -32
- package/package.json +1 -1
- package/src/html/icon.example.js +1 -1
- package/src/html/index.js +23 -1
- package/doc/src/examples/button.example.js +0 -47
- package/doc/src/examples/input.example.js +0 -91
- package/doc/src/examples-config.js +0 -170
- package/src/html/accordion.example.js.backup +0 -390
- package/src/html/button.example.js.backup +0 -374
- package/src/html/checkbox.example.js.backup +0 -316
- package/src/html/demo-sidebar.html +0 -410
- package/src/html/table2.migration.md +0 -328
- package/src/html/test-resize.html +0 -279
- package/src/html/test-selection.html +0 -387
|
@@ -1,410 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="es">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Demo - Menú Lateral de Navegación</title>
|
|
7
|
-
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
8
|
-
<link rel="stylesheet" href="./ExampleLayout.css">
|
|
9
|
-
<style>
|
|
10
|
-
body {
|
|
11
|
-
margin: 0;
|
|
12
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
13
|
-
background: #f5f5f5;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.demo-content {
|
|
17
|
-
background: white;
|
|
18
|
-
padding: 2rem;
|
|
19
|
-
margin: 1rem;
|
|
20
|
-
border-radius: 8px;
|
|
21
|
-
border: 1px solid #e0e0e0;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.demo-button {
|
|
25
|
-
background: #2196f3;
|
|
26
|
-
color: white;
|
|
27
|
-
border: none;
|
|
28
|
-
padding: 0.75rem 1.5rem;
|
|
29
|
-
border-radius: 4px;
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
font-size: 0.875rem;
|
|
32
|
-
margin: 0.5rem;
|
|
33
|
-
transition: background-color 0.2s ease;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.demo-button:hover {
|
|
37
|
-
background: #1976d2;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.demo-button.secondary {
|
|
41
|
-
background: transparent;
|
|
42
|
-
color: #2196f3;
|
|
43
|
-
border: 1px solid #2196f3;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.demo-button.secondary:hover {
|
|
47
|
-
background: rgba(33, 150, 243, 0.08);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.material-icons {
|
|
51
|
-
font-size: 18px;
|
|
52
|
-
vertical-align: middle;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.icon-button {
|
|
56
|
-
display: inline-flex;
|
|
57
|
-
align-items: center;
|
|
58
|
-
gap: 0.5rem;
|
|
59
|
-
}
|
|
60
|
-
</style>
|
|
61
|
-
</head>
|
|
62
|
-
<body>
|
|
63
|
-
<div class="example-layout">
|
|
64
|
-
<!-- Sidebar -->
|
|
65
|
-
<div class="example-sidebar open" id="sidebar">
|
|
66
|
-
<div class="example-sidebar__header">
|
|
67
|
-
<h3 class="example-sidebar__title">Button Examples</h3>
|
|
68
|
-
<button class="example-sidebar__toggle" onclick="toggleSidebar()">
|
|
69
|
-
<span class="material-icons">menu</span>
|
|
70
|
-
</button>
|
|
71
|
-
</div>
|
|
72
|
-
|
|
73
|
-
<nav class="example-sidebar__nav">
|
|
74
|
-
<ul class="example-sidebar__list">
|
|
75
|
-
<li class="example-sidebar__item">
|
|
76
|
-
<button class="example-sidebar__link active" onclick="scrollToSection('overview')">
|
|
77
|
-
<span class="material-icons">info</span>
|
|
78
|
-
<span>Introducción</span>
|
|
79
|
-
</button>
|
|
80
|
-
</li>
|
|
81
|
-
|
|
82
|
-
<li class="example-sidebar__item">
|
|
83
|
-
<button class="example-sidebar__link" onclick="scrollToSection('basic-buttons')">
|
|
84
|
-
<span class="material-icons">smart_button</span>
|
|
85
|
-
<span>Botones Básicos</span>
|
|
86
|
-
</button>
|
|
87
|
-
<ul class="example-sidebar__subsections">
|
|
88
|
-
<li class="example-sidebar__subsection">
|
|
89
|
-
<button class="example-sidebar__sublink" onclick="scrollToSection('primary-buttons')">
|
|
90
|
-
Botones Primarios
|
|
91
|
-
</button>
|
|
92
|
-
</li>
|
|
93
|
-
<li class="example-sidebar__subsection">
|
|
94
|
-
<button class="example-sidebar__sublink" onclick="scrollToSection('secondary-buttons')">
|
|
95
|
-
Botones Secundarios
|
|
96
|
-
</button>
|
|
97
|
-
</li>
|
|
98
|
-
<li class="example-sidebar__subsection">
|
|
99
|
-
<button class="example-sidebar__sublink" onclick="scrollToSection('text-buttons')">
|
|
100
|
-
Botones de Texto
|
|
101
|
-
</button>
|
|
102
|
-
</li>
|
|
103
|
-
</ul>
|
|
104
|
-
</li>
|
|
105
|
-
|
|
106
|
-
<li class="example-sidebar__item">
|
|
107
|
-
<button class="example-sidebar__link" onclick="scrollToSection('button-states')">
|
|
108
|
-
<span class="material-icons">toggle_on</span>
|
|
109
|
-
<span>Estados de Botones</span>
|
|
110
|
-
</button>
|
|
111
|
-
<ul class="example-sidebar__subsections">
|
|
112
|
-
<li class="example-sidebar__subsection">
|
|
113
|
-
<button class="example-sidebar__sublink" onclick="scrollToSection('loading-state')">
|
|
114
|
-
Estado de Carga
|
|
115
|
-
</button>
|
|
116
|
-
</li>
|
|
117
|
-
<li class="example-sidebar__subsection">
|
|
118
|
-
<button class="example-sidebar__sublink" onclick="scrollToSection('disabled-state')">
|
|
119
|
-
Estado Deshabilitado
|
|
120
|
-
</button>
|
|
121
|
-
</li>
|
|
122
|
-
</ul>
|
|
123
|
-
</li>
|
|
124
|
-
|
|
125
|
-
<li class="example-sidebar__item">
|
|
126
|
-
<button class="example-sidebar__link" onclick="scrollToSection('button-sizes')">
|
|
127
|
-
<span class="material-icons">format_size</span>
|
|
128
|
-
<span>Tamaños</span>
|
|
129
|
-
</button>
|
|
130
|
-
</li>
|
|
131
|
-
|
|
132
|
-
<li class="example-sidebar__item">
|
|
133
|
-
<button class="example-sidebar__link" onclick="scrollToSection('api-reference')">
|
|
134
|
-
<span class="material-icons">code</span>
|
|
135
|
-
<span>Referencia API</span>
|
|
136
|
-
</button>
|
|
137
|
-
</li>
|
|
138
|
-
</ul>
|
|
139
|
-
</nav>
|
|
140
|
-
</div>
|
|
141
|
-
|
|
142
|
-
<!-- Main content -->
|
|
143
|
-
<div class="example-content with-sidebar" id="content">
|
|
144
|
-
<div class="example-content__inner">
|
|
145
|
-
<!-- Overview Section -->
|
|
146
|
-
<section id="overview" class="example-section">
|
|
147
|
-
<div class="example-section__header">
|
|
148
|
-
<span class="material-icons">smart_button</span>
|
|
149
|
-
<h2 class="example-section__title">Button - Componente de Botón</h2>
|
|
150
|
-
</div>
|
|
151
|
-
<div class="example-section__content">
|
|
152
|
-
<p>Componente versátil de botón con múltiples variantes, estados y opciones de personalización.</p>
|
|
153
|
-
|
|
154
|
-
<div class="demo-content">
|
|
155
|
-
<h4>✨ Características principales:</h4>
|
|
156
|
-
<ul style="columns: 2; column-gap: 2rem;">
|
|
157
|
-
<li>🎨 Múltiples variantes (primary, secondary, text)</li>
|
|
158
|
-
<li>📏 Diferentes tamaños (small, medium, large)</li>
|
|
159
|
-
<li>🔄 Estados de carga y deshabilitado</li>
|
|
160
|
-
<li>🎯 Iconos integrados</li>
|
|
161
|
-
<li>⌨️ Accesibilidad completa</li>
|
|
162
|
-
<li>📱 Responsive design</li>
|
|
163
|
-
</ul>
|
|
164
|
-
</div>
|
|
165
|
-
</div>
|
|
166
|
-
</section>
|
|
167
|
-
|
|
168
|
-
<!-- Basic Buttons Section -->
|
|
169
|
-
<section id="basic-buttons" class="example-section">
|
|
170
|
-
<div class="example-section__header">
|
|
171
|
-
<span class="material-icons">smart_button</span>
|
|
172
|
-
<h2 class="example-section__title">Botones Básicos</h2>
|
|
173
|
-
</div>
|
|
174
|
-
|
|
175
|
-
<!-- Primary Buttons -->
|
|
176
|
-
<div id="primary-buttons" class="example-subsection">
|
|
177
|
-
<h3 class="example-subsection__title">Botones Primarios</h3>
|
|
178
|
-
<div class="demo-content">
|
|
179
|
-
<button class="demo-button">Primary Button</button>
|
|
180
|
-
<button class="demo-button icon-button">
|
|
181
|
-
<span class="material-icons">add</span>
|
|
182
|
-
Primary with Icon
|
|
183
|
-
</button>
|
|
184
|
-
<button class="demo-button" disabled>Primary Disabled</button>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
|
|
188
|
-
<!-- Secondary Buttons -->
|
|
189
|
-
<div id="secondary-buttons" class="example-subsection">
|
|
190
|
-
<h3 class="example-subsection__title">Botones Secundarios</h3>
|
|
191
|
-
<div class="demo-content">
|
|
192
|
-
<button class="demo-button secondary">Secondary Button</button>
|
|
193
|
-
<button class="demo-button secondary icon-button">
|
|
194
|
-
<span class="material-icons">edit</span>
|
|
195
|
-
Secondary with Icon
|
|
196
|
-
</button>
|
|
197
|
-
<button class="demo-button secondary" disabled>Secondary Disabled</button>
|
|
198
|
-
</div>
|
|
199
|
-
</div>
|
|
200
|
-
|
|
201
|
-
<!-- Text Buttons -->
|
|
202
|
-
<div id="text-buttons" class="example-subsection">
|
|
203
|
-
<h3 class="example-subsection__title">Botones de Texto</h3>
|
|
204
|
-
<div class="demo-content">
|
|
205
|
-
<button style="background: none; border: none; color: #2196f3; padding: 0.75rem 1rem; cursor: pointer;">
|
|
206
|
-
Text Button
|
|
207
|
-
</button>
|
|
208
|
-
<button style="background: none; border: none; color: #2196f3; padding: 0.75rem 1rem; cursor: pointer;" class="icon-button">
|
|
209
|
-
<span class="material-icons">link</span>
|
|
210
|
-
Text with Icon
|
|
211
|
-
</button>
|
|
212
|
-
<button style="background: none; border: none; color: #f44336; padding: 0.75rem 1rem; cursor: pointer;">
|
|
213
|
-
Text Danger
|
|
214
|
-
</button>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
</section>
|
|
218
|
-
|
|
219
|
-
<!-- Button States Section -->
|
|
220
|
-
<section id="button-states" class="example-section">
|
|
221
|
-
<div class="example-section__header">
|
|
222
|
-
<span class="material-icons">toggle_on</span>
|
|
223
|
-
<h2 class="example-section__title">Estados de Botones</h2>
|
|
224
|
-
</div>
|
|
225
|
-
|
|
226
|
-
<!-- Loading State -->
|
|
227
|
-
<div id="loading-state" class="example-subsection">
|
|
228
|
-
<h3 class="example-subsection__title">Estado de Carga</h3>
|
|
229
|
-
<div class="demo-content">
|
|
230
|
-
<button class="demo-button" onclick="simulateLoading(this)">Simulate Loading</button>
|
|
231
|
-
<button class="demo-button" disabled>
|
|
232
|
-
<span style="animation: spin 1s linear infinite; display: inline-block;">⟳</span>
|
|
233
|
-
Loading...
|
|
234
|
-
</button>
|
|
235
|
-
<p style="font-size: 0.875rem; color: #666; margin-top: 1rem;">
|
|
236
|
-
Los botones en estado de carga muestran un spinner y se deshabilitan automáticamente.
|
|
237
|
-
</p>
|
|
238
|
-
</div>
|
|
239
|
-
</div>
|
|
240
|
-
|
|
241
|
-
<!-- Disabled State -->
|
|
242
|
-
<div id="disabled-state" class="example-subsection">
|
|
243
|
-
<h3 class="example-subsection__title">Estado Deshabilitado</h3>
|
|
244
|
-
<div class="demo-content">
|
|
245
|
-
<button class="demo-button" onclick="toggleDisabled()">Toggle Disabled</button>
|
|
246
|
-
<button class="demo-button secondary" id="toggleTarget">Disabled Button</button>
|
|
247
|
-
<p style="font-size: 0.875rem; color: #666; margin-top: 1rem;">
|
|
248
|
-
Estado actual: <span id="disabledStatus">Habilitado</span>
|
|
249
|
-
</p>
|
|
250
|
-
</div>
|
|
251
|
-
</div>
|
|
252
|
-
</section>
|
|
253
|
-
|
|
254
|
-
<!-- Button Sizes Section -->
|
|
255
|
-
<section id="button-sizes" class="example-section">
|
|
256
|
-
<div class="example-section__header">
|
|
257
|
-
<span class="material-icons">format_size</span>
|
|
258
|
-
<h2 class="example-section__title">Tamaños</h2>
|
|
259
|
-
</div>
|
|
260
|
-
<div class="demo-content">
|
|
261
|
-
<button class="demo-button" style="padding: 0.5rem 1rem; font-size: 0.75rem;">Small Button</button>
|
|
262
|
-
<button class="demo-button">Medium Button</button>
|
|
263
|
-
<button class="demo-button" style="padding: 1rem 2rem; font-size: 1rem;">Large Button</button>
|
|
264
|
-
</div>
|
|
265
|
-
</section>
|
|
266
|
-
|
|
267
|
-
<!-- API Reference Section -->
|
|
268
|
-
<section id="api-reference" class="example-section">
|
|
269
|
-
<div class="example-section__header">
|
|
270
|
-
<span class="material-icons">code</span>
|
|
271
|
-
<h2 class="example-section__title">Referencia API</h2>
|
|
272
|
-
</div>
|
|
273
|
-
<div class="demo-content">
|
|
274
|
-
<h4>Props del componente Button:</h4>
|
|
275
|
-
<table style="width: 100%; border-collapse: collapse; font-size: 0.875rem;">
|
|
276
|
-
<thead>
|
|
277
|
-
<tr style="background: #f8f9fa;">
|
|
278
|
-
<th style="padding: 0.5rem; border: 1px solid #ddd; text-align: left;">Prop</th>
|
|
279
|
-
<th style="padding: 0.5rem; border: 1px solid #ddd; text-align: left;">Tipo</th>
|
|
280
|
-
<th style="padding: 0.5rem; border: 1px solid #ddd; text-align: left;">Default</th>
|
|
281
|
-
<th style="padding: 0.5rem; border: 1px solid #ddd; text-align: left;">Descripción</th>
|
|
282
|
-
</tr>
|
|
283
|
-
</thead>
|
|
284
|
-
<tbody>
|
|
285
|
-
<tr>
|
|
286
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;"><code>label</code></td>
|
|
287
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">string</td>
|
|
288
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">-</td>
|
|
289
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">Texto del botón</td>
|
|
290
|
-
</tr>
|
|
291
|
-
<tr>
|
|
292
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;"><code>variant</code></td>
|
|
293
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">string</td>
|
|
294
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">primary</td>
|
|
295
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">Variante: primary, secondary, text</td>
|
|
296
|
-
</tr>
|
|
297
|
-
<tr>
|
|
298
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;"><code>size</code></td>
|
|
299
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">string</td>
|
|
300
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">medium</td>
|
|
301
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">Tamaño: small, medium, large</td>
|
|
302
|
-
</tr>
|
|
303
|
-
<tr>
|
|
304
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;"><code>disabled</code></td>
|
|
305
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">boolean</td>
|
|
306
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">false</td>
|
|
307
|
-
<td style="padding: 0.5rem; border: 1px solid #ddd;">Deshabilita el botón</td>
|
|
308
|
-
</tr>
|
|
309
|
-
</tbody>
|
|
310
|
-
</table>
|
|
311
|
-
</div>
|
|
312
|
-
</section>
|
|
313
|
-
</div>
|
|
314
|
-
</div>
|
|
315
|
-
</div>
|
|
316
|
-
|
|
317
|
-
<script>
|
|
318
|
-
let sidebarOpen = true;
|
|
319
|
-
let disabled = false;
|
|
320
|
-
|
|
321
|
-
function toggleSidebar() {
|
|
322
|
-
const sidebar = document.getElementById('sidebar');
|
|
323
|
-
const content = document.getElementById('content');
|
|
324
|
-
|
|
325
|
-
sidebarOpen = !sidebarOpen;
|
|
326
|
-
|
|
327
|
-
if (sidebarOpen) {
|
|
328
|
-
sidebar.classList.remove('closed');
|
|
329
|
-
sidebar.classList.add('open');
|
|
330
|
-
content.classList.remove('full-width');
|
|
331
|
-
content.classList.add('with-sidebar');
|
|
332
|
-
} else {
|
|
333
|
-
sidebar.classList.remove('open');
|
|
334
|
-
sidebar.classList.add('closed');
|
|
335
|
-
content.classList.remove('with-sidebar');
|
|
336
|
-
content.classList.add('full-width');
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
function scrollToSection(sectionId) {
|
|
341
|
-
const element = document.getElementById(sectionId);
|
|
342
|
-
if (element) {
|
|
343
|
-
element.scrollIntoView({
|
|
344
|
-
behavior: 'smooth',
|
|
345
|
-
block: 'start'
|
|
346
|
-
});
|
|
347
|
-
|
|
348
|
-
// Update active link
|
|
349
|
-
document.querySelectorAll('.example-sidebar__link, .example-sidebar__sublink').forEach(link => {
|
|
350
|
-
link.classList.remove('active');
|
|
351
|
-
});
|
|
352
|
-
|
|
353
|
-
event.target.classList.add('active');
|
|
354
|
-
}
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
function simulateLoading(button) {
|
|
358
|
-
button.disabled = true;
|
|
359
|
-
button.innerHTML = '<span style="animation: spin 1s linear infinite; display: inline-block;">⟳</span> Loading...';
|
|
360
|
-
|
|
361
|
-
setTimeout(() => {
|
|
362
|
-
button.disabled = false;
|
|
363
|
-
button.innerHTML = 'Simulate Loading';
|
|
364
|
-
}, 3000);
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
function toggleDisabled() {
|
|
368
|
-
const target = document.getElementById('toggleTarget');
|
|
369
|
-
const status = document.getElementById('disabledStatus');
|
|
370
|
-
|
|
371
|
-
disabled = !disabled;
|
|
372
|
-
target.disabled = disabled;
|
|
373
|
-
status.textContent = disabled ? 'Deshabilitado' : 'Habilitado';
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
// Add spin animation
|
|
377
|
-
const style = document.createElement('style');
|
|
378
|
-
style.textContent = `
|
|
379
|
-
@keyframes spin {
|
|
380
|
-
from { transform: rotate(0deg); }
|
|
381
|
-
to { transform: rotate(360deg); }
|
|
382
|
-
}
|
|
383
|
-
`;
|
|
384
|
-
document.head.appendChild(style);
|
|
385
|
-
|
|
386
|
-
// Handle scroll to update active section
|
|
387
|
-
window.addEventListener('scroll', () => {
|
|
388
|
-
const sections = ['overview', 'basic-buttons', 'primary-buttons', 'secondary-buttons', 'text-buttons', 'button-states', 'loading-state', 'disabled-state', 'button-sizes', 'api-reference'];
|
|
389
|
-
const scrollPosition = window.scrollY + 100;
|
|
390
|
-
|
|
391
|
-
for (let i = sections.length - 1; i >= 0; i--) {
|
|
392
|
-
const section = sections[i];
|
|
393
|
-
const element = document.getElementById(section);
|
|
394
|
-
if (element && element.offsetTop <= scrollPosition) {
|
|
395
|
-
// Update active link
|
|
396
|
-
document.querySelectorAll('.example-sidebar__link, .example-sidebar__sublink').forEach(link => {
|
|
397
|
-
link.classList.remove('active');
|
|
398
|
-
});
|
|
399
|
-
|
|
400
|
-
const activeLink = document.querySelector(`[onclick="scrollToSection('${section}')"]`);
|
|
401
|
-
if (activeLink) {
|
|
402
|
-
activeLink.classList.add('active');
|
|
403
|
-
}
|
|
404
|
-
break;
|
|
405
|
-
}
|
|
406
|
-
}
|
|
407
|
-
});
|
|
408
|
-
</script>
|
|
409
|
-
</body>
|
|
410
|
-
</html>
|