ywana-core8 0.1.85 → 0.1.87

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 (19) hide show
  1. package/doc/package-lock.json +4 -4
  2. package/doc/package.json +3 -2
  3. package/doc/scripts/generate-examples.js +129 -0
  4. package/doc/src/App.js +6 -186
  5. package/doc/src/components/ExamplePage.js +57 -32
  6. package/doc/src/index.js +2 -0
  7. package/package.json +1 -1
  8. package/src/html/index.js +23 -1
  9. package/doc/craco.config.js +0 -31
  10. package/doc/generate-examples.cjs +0 -310
  11. package/doc/src/examples/button.example.js +0 -47
  12. package/doc/src/examples/input.example.js +0 -91
  13. package/src/html/accordion.example.js.backup +0 -390
  14. package/src/html/button.example.js.backup +0 -374
  15. package/src/html/checkbox.example.js.backup +0 -316
  16. package/src/html/demo-sidebar.html +0 -410
  17. package/src/html/table2.migration.md +0 -328
  18. package/src/html/test-resize.html +0 -279
  19. package/src/html/test-selection.html +0 -387
package/src/html/test-selection.html DELETED
@@ -1,387 +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>Test - Selección Múltiple DataTable2</title>
7
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
8
- <link rel="stylesheet" href="./table2.css">
9
- <style>
10
- body {
11
- margin: 0;
12
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
13
- background: #f5f5f5;
14
- padding: 2rem;
15
- }
16
-
17
- .test-container {
18
- background: white;
19
- padding: 2rem;
20
- border-radius: 8px;
21
- border: 1px solid #e0e0e0;
22
- max-width: 1200px;
23
- margin: 0 auto;
24
- }
25
-
26
- .material-icons {
27
- font-size: 18px;
28
- vertical-align: middle;
29
- }
30
-
31
- .section {
32
- margin-bottom: 3rem;
33
- padding: 1.5rem;
34
- border: 1px solid #e9ecef;
35
- border-radius: 8px;
36
- background: #fff;
37
- }
38
-
39
- .actions-bar {
40
- display: flex;
41
- gap: 1rem;
42
- margin-bottom: 1rem;
43
- padding: 1rem;
44
- background: #f8f9fa;
45
- border-radius: 4px;
46
- align-items: center;
47
- }
48
-
49
- .btn {
50
- padding: 0.5rem 1rem;
51
- border: none;
52
- border-radius: 4px;
53
- cursor: pointer;
54
- font-size: 0.875rem;
55
- font-weight: 500;
56
- }
57
-
58
- .btn-danger {
59
- background: #dc3545;
60
- color: white;
61
- }
62
-
63
- .btn-primary {
64
- background: #007bff;
65
- color: white;
66
- }
67
-
68
- .btn-secondary {
69
- background: #6c757d;
70
- color: white;
71
- }
72
-
73
- .btn:disabled {
74
- opacity: 0.5;
75
- cursor: not-allowed;
76
- }
77
-
78
- .status-info {
79
- background: #f8f9fa;
80
- padding: 1rem;
81
- border-radius: 4px;
82
- border: 1px solid #e9ecef;
83
- margin-top: 1rem;
84
- }
85
- </style>
86
- </head>
87
- <body>
88
- <div class="test-container">
89
- <h1>📋 Test de Selección Múltiple - DataTable2</h1>
90
-
91
- <!-- Ejemplo 1: Selección con Checkboxes -->
92
- <div class="section">
93
- <h2>☑️ 1. Selección con Checkboxes</h2>
94
- <p>Cada fila tiene un checkbox individual y hay un "Seleccionar todo" en el header.</p>
95
-
96
- <div class="datatable2 datatable2--medium datatable2--normal datatable2--default">
97
- <div class="datatable2__table-container">
98
- <table>
99
- <thead class="datatable2__header">
100
- <tr>
101
- <th class="datatable2__select-header">
102
- <input type="checkbox" id="select-all" onchange="handleSelectAll(this.checked)">
103
- </th>
104
- <th class="datatable2__header-cell">ID</th>
105
- <th class="datatable2__header-cell">Nombre</th>
106
- <th class="datatable2__header-cell">Email</th>
107
- <th class="datatable2__header-cell">Estado</th>
108
- </tr>
109
- </thead>
110
- <tbody id="checkbox-table-body">
111
- <!-- Se llena dinámicamente -->
112
- </tbody>
113
- </table>
114
- </div>
115
- </div>
116
-
117
- <div class="status-info">
118
- <strong>Estado actual:</strong> <span id="selected-count">0</span> elementos seleccionados
119
- <br>
120
- <strong>IDs seleccionados:</strong> <span id="selected-ids">Ninguno</span>
121
- </div>
122
- </div>
123
-
124
- <!-- Ejemplo 2: Selección por Click -->
125
- <div class="section">
126
- <h2>👆 2. Selección por Click en Fila</h2>
127
- <p>Haz click en cualquier fila para seleccionarla/deseleccionarla.</p>
128
-
129
- <div class="datatable2 datatable2--medium datatable2--comfortable datatable2--default">
130
- <div class="datatable2__table-container">
131
- <table>
132
- <thead class="datatable2__header">
133
- <tr>
134
- <th class="datatable2__header-cell">ID</th>
135
- <th class="datatable2__header-cell">Nombre</th>
136
- <th class="datatable2__header-cell">Email</th>
137
- <th class="datatable2__header-cell">Estado</th>
138
- </tr>
139
- </thead>
140
- <tbody id="click-table-body">
141
- <!-- Se llena dinámicamente -->
142
- </tbody>
143
- </table>
144
- </div>
145
- </div>
146
-
147
- <div class="status-info">
148
- <strong>Filas seleccionadas:</strong> <span id="click-selected-count">0</span>
149
- <br>
150
- <strong>IDs:</strong> <span id="click-selected-ids">Ninguna</span>
151
- </div>
152
- </div>
153
-
154
- <!-- Ejemplo 3: Acciones en Lote -->
155
- <div class="section">
156
- <h2>⚡ 3. Acciones en Lote</h2>
157
- <p>Selecciona elementos y ejecuta acciones masivas.</p>
158
-
159
- <div class="actions-bar">
160
- <span style="font-weight: bold;">
161
- Seleccionados: <span id="bulk-selected-count">0</span>
162
- </span>
163
- <button class="btn btn-danger" id="delete-btn" onclick="handleBulkAction('delete')" disabled>
164
- 🗑️ Eliminar
165
- </button>
166
- <button class="btn btn-primary" id="activate-btn" onclick="handleBulkAction('activate')" disabled>
167
- ✅ Activar
168
- </button>
169
- <button class="btn btn-secondary" id="export-btn" onclick="handleBulkAction('export')" disabled>
170
- 📤 Exportar
171
- </button>
172
- </div>
173
-
174
- <div class="datatable2 datatable2--medium datatable2--compact datatable2--default">
175
- <div class="datatable2__table-container">
176
- <table>
177
- <thead class="datatable2__header">
178
- <tr>
179
- <th class="datatable2__select-header">
180
- <input type="checkbox" id="bulk-select-all" onchange="handleBulkSelectAll(this.checked)">
181
- </th>
182
- <th class="datatable2__header-cell">ID</th>
183
- <th class="datatable2__header-cell">Nombre</th>
184
- <th class="datatable2__header-cell">Email</th>
185
- <th class="datatable2__header-cell">Estado</th>
186
- </tr>
187
- </thead>
188
- <tbody id="bulk-table-body">
189
- <!-- Se llena dinámicamente -->
190
- </tbody>
191
- </table>
192
- </div>
193
- </div>
194
- </div>
195
- </div>
196
-
197
- <script>
198
- // Datos de ejemplo
199
- const sampleData = [
200
- { id: 1, name: 'Juan Pérez', email: 'juan@example.com', status: 'Activo' },
201
- { id: 2, name: 'María García', email: 'maria@example.com', status: 'Pendiente' },
202
- { id: 3, name: 'Carlos López', email: 'carlos@example.com', status: 'Activo' },
203
- { id: 4, name: 'Ana Martínez', email: 'ana@example.com', status: 'Inactivo' },
204
- { id: 5, name: 'Roberto Silva', email: 'roberto@example.com', status: 'Activo' }
205
- ];
206
-
207
- // Estado de selección
208
- let checkedRows = {};
209
- let clickSelectedRows = [];
210
- let bulkCheckedRows = {};
211
-
212
- // Funciones de utilidad
213
- function getStatusClass(status) {
214
- switch (status) {
215
- case 'Activo': return 'status-active';
216
- case 'Pendiente': return 'status-pending';
217
- case 'Inactivo': return 'status-inactive';
218
- default: return '';
219
- }
220
- }
221
-
222
- function updateSelectedDisplay() {
223
- const selectedIds = Object.keys(checkedRows).filter(id => checkedRows[id]);
224
- document.getElementById('selected-count').textContent = selectedIds.length;
225
- document.getElementById('selected-ids').textContent = selectedIds.length > 0 ? selectedIds.join(', ') : 'Ninguno';
226
- }
227
-
228
- function updateClickSelectedDisplay() {
229
- document.getElementById('click-selected-count').textContent = clickSelectedRows.length;
230
- document.getElementById('click-selected-ids').textContent = clickSelectedRows.length > 0 ? clickSelectedRows.join(', ') : 'Ninguna';
231
- }
232
-
233
- function updateBulkDisplay() {
234
- const selectedIds = Object.keys(bulkCheckedRows).filter(id => bulkCheckedRows[id]);
235
- const count = selectedIds.length;
236
-
237
- document.getElementById('bulk-selected-count').textContent = count;
238
-
239
- // Habilitar/deshabilitar botones
240
- const buttons = ['delete-btn', 'activate-btn', 'export-btn'];
241
- buttons.forEach(btnId => {
242
- document.getElementById(btnId).disabled = count === 0;
243
- });
244
- }
245
-
246
- // Renderizar tablas
247
- function renderCheckboxTable() {
248
- const tbody = document.getElementById('checkbox-table-body');
249
- tbody.innerHTML = sampleData.map(row => `
250
- <tr class="datatable2__row ${checkedRows[row.id] ? 'datatable2__row--selected' : ''}">
251
- <td class="datatable2__cell">
252
- <input type="checkbox" ${checkedRows[row.id] ? 'checked' : ''}
253
- onchange="handleRowCheck(${row.id}, this.checked)">
254
- </td>
255
- <td class="datatable2__cell">${row.id}</td>
256
- <td class="datatable2__cell">${row.name}</td>
257
- <td class="datatable2__cell">${row.email}</td>
258
- <td class="datatable2__cell">
259
- <span class="status-badge ${getStatusClass(row.status)}">${row.status}</span>
260
- </td>
261
- </tr>
262
- `).join('');
263
- }
264
-
265
- function renderClickTable() {
266
- const tbody = document.getElementById('click-table-body');
267
- tbody.innerHTML = sampleData.slice(0, 3).map(row => `
268
- <tr class="datatable2__row ${clickSelectedRows.includes(row.id) ? 'datatable2__row--selected' : ''}"
269
- onclick="handleRowClick(${row.id})" style="cursor: pointer;">
270
- <td class="datatable2__cell">${row.id}</td>
271
- <td class="datatable2__cell">${row.name}</td>
272
- <td class="datatable2__cell">${row.email}</td>
273
- <td class="datatable2__cell">
274
- <span class="status-badge ${getStatusClass(row.status)}">${row.status}</span>
275
- </td>
276
- </tr>
277
- `).join('');
278
- }
279
-
280
- function renderBulkTable() {
281
- const tbody = document.getElementById('bulk-table-body');
282
- tbody.innerHTML = sampleData.map(row => `
283
- <tr class="datatable2__row ${bulkCheckedRows[row.id] ? 'datatable2__row--selected' : ''}">
284
- <td class="datatable2__cell">
285
- <input type="checkbox" ${bulkCheckedRows[row.id] ? 'checked' : ''}
286
- onchange="handleBulkRowCheck(${row.id}, this.checked)">
287
- </td>
288
- <td class="datatable2__cell">${row.id}</td>
289
- <td class="datatable2__cell">${row.name}</td>
290
- <td class="datatable2__cell">${row.email}</td>
291
- <td class="datatable2__cell">
292
- <span class="status-badge ${getStatusClass(row.status)}">${row.status}</span>
293
- </td>
294
- </tr>
295
- `).join('');
296
- }
297
-
298
- // Event handlers
299
- function handleRowCheck(rowId, checked) {
300
- checkedRows[rowId] = checked;
301
- if (!checked) delete checkedRows[rowId];
302
-
303
- renderCheckboxTable();
304
- updateSelectedDisplay();
305
-
306
- // Actualizar select all
307
- const allChecked = sampleData.every(row => checkedRows[row.id]);
308
- document.getElementById('select-all').checked = allChecked;
309
- }
310
-
311
- function handleSelectAll(checked) {
312
- if (checked) {
313
- sampleData.forEach(row => {
314
- checkedRows[row.id] = true;
315
- });
316
- } else {
317
- checkedRows = {};
318
- }
319
-
320
- renderCheckboxTable();
321
- updateSelectedDisplay();
322
- }
323
-
324
- function handleRowClick(rowId) {
325
- if (clickSelectedRows.includes(rowId)) {
326
- clickSelectedRows = clickSelectedRows.filter(id => id !== rowId);
327
- } else {
328
- clickSelectedRows.push(rowId);
329
- }
330
-
331
- renderClickTable();
332
- updateClickSelectedDisplay();
333
- }
334
-
335
- function handleBulkRowCheck(rowId, checked) {
336
- bulkCheckedRows[rowId] = checked;
337
- if (!checked) delete bulkCheckedRows[rowId];
338
-
339
- renderBulkTable();
340
- updateBulkDisplay();
341
-
342
- // Actualizar select all
343
- const allChecked = sampleData.every(row => bulkCheckedRows[row.id]);
344
- document.getElementById('bulk-select-all').checked = allChecked;
345
- }
346
-
347
- function handleBulkSelectAll(checked) {
348
- if (checked) {
349
- sampleData.forEach(row => {
350
- bulkCheckedRows[row.id] = true;
351
- });
352
- } else {
353
- bulkCheckedRows = {};
354
- }
355
-
356
- renderBulkTable();
357
- updateBulkDisplay();
358
- }
359
-
360
- function handleBulkAction(action) {
361
- const selectedIds = Object.keys(bulkCheckedRows).filter(id => bulkCheckedRows[id]);
362
-
363
- switch (action) {
364
- case 'delete':
365
- alert(`🗑️ Eliminar ${selectedIds.length} elementos: ${selectedIds.join(', ')}`);
366
- break;
367
- case 'activate':
368
- alert(`✅ Activar ${selectedIds.length} elementos: ${selectedIds.join(', ')}`);
369
- break;
370
- case 'export':
371
- alert(`📤 Exportar ${selectedIds.length} elementos: ${selectedIds.join(', ')}`);
372
- break;
373
- }
374
- }
375
-
376
- // Inicializar
377
- document.addEventListener('DOMContentLoaded', function() {
378
- renderCheckboxTable();
379
- renderClickTable();
380
- renderBulkTable();
381
- updateSelectedDisplay();
382
- updateClickSelectedDisplay();
383
- updateBulkDisplay();
384
- });
385
- </script>
386
- </body>
387
- </html>