desy-html 13.0.1 → 14.0.0

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 (60) hide show
  1. package/docs/_include.template-header.njk +5 -0
  2. package/docs/_macro.example-render.njk +5 -0
  3. package/docs/componentes.html +3 -0
  4. package/docs/ds/_ds.example.checkboxes.njk +1 -1
  5. package/docs/ds/_ds.example.date-input.njk +3 -3
  6. package/docs/ds/_ds.example.file-upload.njk +1 -1
  7. package/docs/ds/_ds.example.input-group.njk +1 -1
  8. package/docs/ds/_ds.example.input.njk +5 -5
  9. package/docs/ds/_ds.example.radios.njk +1 -1
  10. package/docs/ds/_ds.example.searchbar.njk +1 -1
  11. package/docs/ds/_ds.example.select.njk +5 -5
  12. package/docs/ds/_ds.example.textarea.njk +7 -7
  13. package/docs/examples-treegrid.html +8 -0
  14. package/docs/index.html +8 -0
  15. package/gulpfile.js +15 -1
  16. package/package.json +2 -1
  17. package/src/css/styles.css +1 -0
  18. package/src/js/aria/MenuNavigation.js +12 -3
  19. package/src/js/aria/tree.js +320 -31
  20. package/src/js/aria/treegrid.js +508 -0
  21. package/src/js/aria/treeitem.js +25 -19
  22. package/src/js/desy-html.js +37 -31
  23. package/src/js/index.js +12 -10
  24. package/src/templates/components/character-count/_examples.character-count.njk +3 -15
  25. package/src/templates/components/checkboxes/_examples.checkboxes.njk +67 -86
  26. package/src/templates/components/date-input/_examples.date-input.njk +15 -15
  27. package/src/templates/components/datepicker/_examples.datepicker.njk +7 -6
  28. package/src/templates/components/datepicker/_template.datepicker.njk +0 -1
  29. package/src/templates/components/description-list/_examples.description-list.njk +2 -2
  30. package/src/templates/components/dialog/_examples.dialog.njk +2 -2
  31. package/src/templates/components/dropdown/_examples.dropdown.njk +3 -3
  32. package/src/templates/components/error-message/_examples.error-message.njk +4 -2
  33. package/src/templates/components/error-summary/params.error-summary.yaml +0 -3
  34. package/src/templates/components/fieldset/_examples.fieldset.njk +2 -29
  35. package/src/templates/components/file-upload/_examples.file-upload.njk +4 -15
  36. package/src/templates/components/header-advanced/_template.header-advanced.njk +1 -0
  37. package/src/templates/components/hint/params.hint.yaml +0 -14
  38. package/src/templates/components/input/_examples.input.njk +9 -45
  39. package/src/templates/components/input-group/_examples.input-group.njk +19 -18
  40. package/src/templates/components/item/_examples.item.njk +1 -0
  41. package/src/templates/components/media-object/_examples.media-object.njk +6 -5
  42. package/src/templates/components/menubar/_template.menubar.njk +2 -2
  43. package/src/templates/components/menubar/params.menubar.yaml +0 -10
  44. package/src/templates/components/modal/_examples.modal.njk +1 -1
  45. package/src/templates/components/notification/_examples.notification.njk +8 -2
  46. package/src/templates/components/pill/_examples.pill.njk +2 -1
  47. package/src/templates/components/radios/_examples.radios.njk +56 -91
  48. package/src/templates/components/searchbar/_examples.searchbar.njk +2 -1
  49. package/src/templates/components/select/_examples.select.njk +3 -29
  50. package/src/templates/components/status-item/_examples.status-item.njk +1 -0
  51. package/src/templates/components/table-advanced/params.table-advanced.yaml +1 -1
  52. package/src/templates/components/textarea/_examples.textarea.njk +3 -14
  53. package/src/templates/components/tree/_examples.tree.njk +157 -3
  54. package/src/templates/components/tree/_template.tree.njk +112 -101
  55. package/src/templates/components/tree/params.tree.yaml +4 -0
  56. package/src/templates/components/treegrid/_examples.treegrid.njk +1240 -0
  57. package/src/templates/components/treegrid/_macro.treegrid.njk +3 -0
  58. package/src/templates/components/treegrid/_styles.treegrid.css +39 -0
  59. package/src/templates/components/treegrid/_template.treegrid.njk +91 -0
  60. package/src/templates/components/treegrid/params.treegrid.yaml +132 -0
@@ -0,0 +1,1240 @@
1
+ {% set exampleComponent = "treegrid" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "treegrid por defecto",
5
+ "description": "El Treegrid usa una tabla que se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
6
+ "data": {
7
+ "caption": "Caption de la treegrid",
8
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
9
+ "head": [
10
+ {
11
+ "text": "Documento"
12
+ },
13
+ {
14
+ "text": "Importe",
15
+ "classes": "lg:text-right"
16
+ },
17
+ {
18
+ "text": "Fecha"
19
+ },
20
+ {
21
+ "text": "Acciones"
22
+ }
23
+ ],
24
+ "rows": [
25
+ {
26
+ "level": 1,
27
+ "posinset": 1,
28
+ "setsize": 1,
29
+ "expanded": false,
30
+ "cells": [
31
+ {
32
+ "text": "A0001",
33
+ "attributes": { "id": "A0001" }
34
+ },
35
+ {
36
+ "text": "3.000,00€",
37
+ "classes": "lg:text-right"
38
+ },
39
+ {
40
+ "text": "05/01/2024"
41
+ },
42
+ {
43
+ "html": "<a href='#' id='A0001-action' class='c-link' aria-labelledby='A0001-action A0001'>Ver</a>"
44
+ }
45
+ ]
46
+ },
47
+ {
48
+ "level": 2,
49
+ "posinset": 1,
50
+ "setsize": 3,
51
+ "cells": [
52
+ {
53
+ "text": "A0001-1",
54
+ "attributes": { "id": "A0001-1" }
55
+ },
56
+ {
57
+ "text": "1.000,00€",
58
+ "classes": "lg:text-right"
59
+ },
60
+ {
61
+ "text": "05/01/2024"
62
+ },
63
+ {
64
+ "html": "<a href='#' id='A0001-1-action' class='c-link' aria-labelledby='A0001-1-action A0001-1'>Ver</a>"
65
+ }
66
+ ]
67
+ },
68
+ {
69
+ "level": 2,
70
+ "posinset": 2,
71
+ "setsize": 3,
72
+ "expanded": false,
73
+ "cells": [
74
+ {
75
+ "text": "A0001-2",
76
+ "attributes": { "id": "A0001-2" }
77
+ },
78
+ {
79
+ "text": "2.000,00€",
80
+ "classes": "lg:text-right"
81
+ },
82
+ {
83
+ "text": "05/01/2024"
84
+ },
85
+ {
86
+ "html": "<a href='#' id='A0001-2-action' class='c-link' aria-labelledby='A0001-2-action A0001-2'>Ver</a>"
87
+ }
88
+ ]
89
+ },
90
+ {
91
+ "level": 3,
92
+ "posinset": 1,
93
+ "setsize": 1,
94
+ "cells": [
95
+ {
96
+ "text": "A0001-2-1",
97
+ "attributes": { "id": "A0001-2-1" }
98
+ },
99
+ {
100
+ "text": "1.000,00€",
101
+ "classes": "lg:text-right"
102
+ },
103
+ {
104
+ "text": "05/01/2024"
105
+ },
106
+ {
107
+ "html": "<a href='#' id='A0001-2-1-action' class='c-link' aria-labelledby='A0001-2-1-action A0001-2-1'>Ver</a>"
108
+ }
109
+ ]
110
+ },
111
+ {
112
+ "level": 2,
113
+ "posinset": 3,
114
+ "setsize": 3,
115
+ "expanded": false,
116
+ "cells": [
117
+ {
118
+ "text": "A0001-3",
119
+ "attributes": { "id": "A0001-3" }
120
+ },
121
+ {
122
+ "text": "2.000,00€",
123
+ "classes": "lg:text-right"
124
+ },
125
+ {
126
+ "text": "05/01/2024"
127
+ },
128
+ {
129
+ "html": "<a href='#' id='A0001-3-action' class='c-link' aria-labelledby='A0001-3-action A0001-3'>Ver</a>"
130
+ }
131
+ ]
132
+ },
133
+ {
134
+ "level": 3,
135
+ "posinset": 1,
136
+ "setsize": 1,
137
+ "expanded": false,
138
+ "cells": [
139
+ {
140
+ "text": "A0001-3-1",
141
+ "attributes": { "id": "A0001-3-1" }
142
+ },
143
+ {
144
+ "text": "5.000,00€",
145
+ "classes": "lg:text-right"
146
+ },
147
+ {
148
+ "text": "15/01/2024"
149
+ },
150
+ {
151
+ "html": "<a href='#' id='A0001-3-1-action' class='c-link' aria-labelledby='A0001-3-1-action A0001-3-1'>Ver</a>"
152
+ }
153
+ ]
154
+ },
155
+ {
156
+ "level": 4,
157
+ "posinset": 1,
158
+ "setsize": 2,
159
+ "cells": [
160
+ {
161
+ "text": "A0001-3-1-1",
162
+ "attributes": { "id": "A0001-3-1-1" }
163
+ },
164
+ {
165
+ "text": "95€",
166
+ "classes": "lg:text-right"
167
+ },
168
+ {
169
+ "text": "15/01/2024"
170
+ },
171
+ {
172
+ "html": "<a href='#' id='A0001-3-1-1-action' class='c-link' aria-labelledby='A0001-3-1-1-action A0001-3-1-1'>Ver</a>"
173
+ }
174
+ ]
175
+ },
176
+ {
177
+ "level": 4,
178
+ "posinset": 2,
179
+ "setsize": 2,
180
+ "cells": [
181
+ {
182
+ "text": "A0001-3-1-2",
183
+ "attributes": { "id": "A0001-3-1-2" }
184
+ },
185
+ {
186
+ "text": "5.000,00€",
187
+ "classes": "lg:text-right"
188
+ },
189
+ {
190
+ "text": "15/01/2024"
191
+ },
192
+ {
193
+ "html": "<a href='#' id='A0001-3-1-2-action' class='c-link' aria-labelledby='A0001-3-1-2-action A0001-3-1-2'>Ver</a>"
194
+ }
195
+ ]
196
+ }
197
+ ],
198
+ "wrapper": {
199
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
200
+ "attributes": {
201
+ "tabindex": "0",
202
+ "role": "region",
203
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
204
+ }
205
+ },
206
+ "classes": "w-full",
207
+ "attributes": {
208
+ "id": "treegrid",
209
+ "aria-describedby": "treegrid-desc"
210
+ }
211
+ }
212
+ },
213
+ {
214
+ "name": "treegrid con tfoot",
215
+ "description": "El Treegrid usa una tabla que se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
216
+ "data": {
217
+ "caption": "Caption de la treegrid",
218
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
219
+ "head": [
220
+ {
221
+ "text": "Documento"
222
+ },
223
+ {
224
+ "text": "Importe",
225
+ "classes": "lg:text-right"
226
+ },
227
+ {
228
+ "text": "Fecha"
229
+ },
230
+ {
231
+ "text": "Acciones"
232
+ }
233
+ ],
234
+ "rows": [
235
+ {
236
+ "level": 1,
237
+ "posinset": 1,
238
+ "setsize": 1,
239
+ "expanded": true,
240
+ "cells": [
241
+ {
242
+ "text": "B0001",
243
+ "attributes": { "id": "B0001" }
244
+ },
245
+ {
246
+ "text": "3.000,00€",
247
+ "classes": "lg:text-right"
248
+ },
249
+ {
250
+ "text": "05/01/2024"
251
+ },
252
+ {
253
+ "html": "<a href='#' id='B0001-action' class='c-link' aria-labelledby='B0001-action B0001'>Ver</a>"
254
+ }
255
+ ]
256
+ },
257
+ {
258
+ "level": 2,
259
+ "posinset": 1,
260
+ "setsize": 3,
261
+ "cells": [
262
+ {
263
+ "text": "B0001-1",
264
+ "attributes": { "id": "B0001-1" }
265
+ },
266
+ {
267
+ "text": "1.000,00€",
268
+ "classes": "lg:text-right"
269
+ },
270
+ {
271
+ "text": "05/01/2024"
272
+ },
273
+ {
274
+ "html": "<a href='#' id='B0001-1-action' class='c-link' aria-labelledby='B0001-1-action B0001-1'>Ver</a>"
275
+ }
276
+ ]
277
+ },
278
+ {
279
+ "level": 2,
280
+ "posinset": 2,
281
+ "setsize": 3,
282
+ "expanded": false,
283
+ "cells": [
284
+ {
285
+ "text": "B0001-2",
286
+ "attributes": { "id": "B0001-2" }
287
+ },
288
+ {
289
+ "text": "2.000,00€",
290
+ "classes": "lg:text-right"
291
+ },
292
+ {
293
+ "text": "05/01/2024"
294
+ },
295
+ {
296
+ "html": "<a href='#' id='B0001-2-action' class='c-link' aria-labelledby='B0001-2-action B0001-2'>Ver</a>"
297
+ }
298
+ ]
299
+ },
300
+ {
301
+ "level": 3,
302
+ "posinset": 1,
303
+ "setsize": 1,
304
+ "cells": [
305
+ {
306
+ "text": "B0001-2-1",
307
+ "attributes": { "id": "B0001-2-1" }
308
+ },
309
+ {
310
+ "text": "1.000,00€",
311
+ "classes": "lg:text-right"
312
+ },
313
+ {
314
+ "text": "05/01/2024"
315
+ },
316
+ {
317
+ "html": "<a href='#' id='B0001-2-1-action' class='c-link' aria-labelledby='B0001-2-1-action B0001-2-1'>Ver</a>"
318
+ }
319
+ ]
320
+ },
321
+ {
322
+ "level": 2,
323
+ "posinset": 3,
324
+ "setsize": 3,
325
+ "expanded": false,
326
+ "cells": [
327
+ {
328
+ "text": "B0001-3",
329
+ "attributes": { "id": "B0001-3" }
330
+ },
331
+ {
332
+ "text": "2.000,00€",
333
+ "classes": "lg:text-right"
334
+ },
335
+ {
336
+ "text": "05/01/2024"
337
+ },
338
+ {
339
+ "html": "<a href='#' id='B0001-3-action' class='c-link' aria-labelledby='B0001-3-action B0001-3'>Ver</a>"
340
+ }
341
+ ]
342
+ },
343
+ {
344
+ "level": 3,
345
+ "posinset": 1,
346
+ "setsize": 1,
347
+ "expanded": false,
348
+ "cells": [
349
+ {
350
+ "text": "B0001-3-1",
351
+ "attributes": { "id": "B0001-3-1" }
352
+ },
353
+ {
354
+ "text": "5.000,00€",
355
+ "classes": "lg:text-right"
356
+ },
357
+ {
358
+ "text": "15/01/2024"
359
+ },
360
+ {
361
+ "html": "<a href='#' id='B0001-3-1-action' class='c-link' aria-labelledby='B0001-3-1-action B0001-3-1'>Ver</a>"
362
+ }
363
+ ]
364
+ },
365
+ {
366
+ "level": 4,
367
+ "posinset": 1,
368
+ "setsize": 2,
369
+ "cells": [
370
+ {
371
+ "text": "B0001-3-1-1",
372
+ "attributes": { "id": "B0001-3-1-1" }
373
+ },
374
+ {
375
+ "text": "95€",
376
+ "classes": "lg:text-right"
377
+ },
378
+ {
379
+ "text": "15/01/2024"
380
+ },
381
+ {
382
+ "html": "<a href='#' id='B0001-3-1-1-action' class='c-link' aria-labelledby='B0001-3-1-1-action B0001-3-1-1'>Ver</a>"
383
+ }
384
+ ]
385
+ },
386
+ {
387
+ "level": 4,
388
+ "posinset": 2,
389
+ "setsize": 2,
390
+ "cells": [
391
+ {
392
+ "text": "B0001-3-1-2",
393
+ "attributes": { "id": "B0001-3-1-2" }
394
+ },
395
+ {
396
+ "text": "5.000,00€",
397
+ "classes": "lg:text-right"
398
+ },
399
+ {
400
+ "text": "15/01/2024"
401
+ },
402
+ {
403
+ "html": "<a href='#' id='B0001-3-1-2-action' class='c-link' aria-labelledby='B0001-3-1-2-action B0001-3-1-2'>Ver</a>"
404
+ }
405
+ ]
406
+ }
407
+ ],
408
+ "foot": [
409
+ {
410
+ "text": "Suma",
411
+ "classes": "uppercase"
412
+ },
413
+ {
414
+ "text": "10.045€",
415
+ "classes": "lg:text-right"
416
+ },
417
+ {
418
+ "text": ""
419
+ },
420
+ {
421
+ "text": ""
422
+ }
423
+ ],
424
+ "wrapper": {
425
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
426
+ "attributes": {
427
+ "tabindex": "0",
428
+ "role": "region",
429
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
430
+ }
431
+ },
432
+ "classes": "w-full",
433
+ "attributes": {
434
+ "id": "treegrid-B",
435
+ "aria-describedby": "treegrid-B-desc"
436
+ }
437
+ }
438
+ },
439
+ {
440
+ "name": "treegrid con caption visible",
441
+ "description": "El Treegrid usa una tabla que se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
442
+ "data": {
443
+ "caption": "Documentos contables",
444
+ "captionClasses": "mb-base font-bold text-left text-lg",
445
+ "head": [
446
+ {
447
+ "text": "Documento"
448
+ },
449
+ {
450
+ "text": "Importe",
451
+ "classes": "lg:text-right"
452
+ },
453
+ {
454
+ "text": "Fecha"
455
+ },
456
+ {
457
+ "text": "Acciones"
458
+ }
459
+ ],
460
+ "rows": [
461
+ {
462
+ "level": 1,
463
+ "posinset": 1,
464
+ "setsize": 1,
465
+ "expanded": true,
466
+ "cells": [
467
+ {
468
+ "text": "C0001",
469
+ "attributes": { "id": "C0001" }
470
+ },
471
+ {
472
+ "text": "3.000,00€",
473
+ "classes": "lg:text-right"
474
+ },
475
+ {
476
+ "text": "05/01/2024"
477
+ },
478
+ {
479
+ "html": "<a href='#' id='C0001-action' class='c-link' aria-labelledby='C0001-action C0001'>Ver</a>"
480
+ }
481
+ ]
482
+ },
483
+ {
484
+ "level": 2,
485
+ "posinset": 1,
486
+ "setsize": 3,
487
+ "cells": [
488
+ {
489
+ "text": "C0001-1",
490
+ "attributes": { "id": "C0001-1" }
491
+ },
492
+ {
493
+ "text": "1.000,00€",
494
+ "classes": "lg:text-right"
495
+ },
496
+ {
497
+ "text": "05/01/2024"
498
+ },
499
+ {
500
+ "html": "<a href='#' id='C0001-1-action' class='c-link' aria-labelledby='C0001-1-action C0001-1'>Ver</a>"
501
+ }
502
+ ]
503
+ },
504
+ {
505
+ "level": 2,
506
+ "posinset": 2,
507
+ "setsize": 3,
508
+ "expanded": false,
509
+ "cells": [
510
+ {
511
+ "text": "C0001-2",
512
+ "attributes": { "id": "C0001-2" }
513
+ },
514
+ {
515
+ "text": "2.000,00€",
516
+ "classes": "lg:text-right"
517
+ },
518
+ {
519
+ "text": "05/01/2024"
520
+ },
521
+ {
522
+ "html": "<a href='#' id='C0001-2-action' class='c-link' aria-labelledby='C0001-2-action C0001-2'>Ver</a>"
523
+ }
524
+ ]
525
+ },
526
+ {
527
+ "level": 3,
528
+ "posinset": 1,
529
+ "setsize": 1,
530
+ "cells": [
531
+ {
532
+ "text": "C0001-2-1",
533
+ "attributes": { "id": "C0001-2-1" }
534
+ },
535
+ {
536
+ "text": "1.000,00€",
537
+ "classes": "lg:text-right"
538
+ },
539
+ {
540
+ "text": "05/01/2024"
541
+ },
542
+ {
543
+ "html": "<a href='#' id='C0001-2-1-action' class='c-link' aria-labelledby='C0001-2-1-action C0001-2-1'>Ver</a>"
544
+ }
545
+ ]
546
+ },
547
+ {
548
+ "level": 2,
549
+ "posinset": 3,
550
+ "setsize": 3,
551
+ "expanded": false,
552
+ "cells": [
553
+ {
554
+ "text": "C0001-3",
555
+ "attributes": { "id": "C0001-3" }
556
+ },
557
+ {
558
+ "text": "2.000,00€",
559
+ "classes": "lg:text-right"
560
+ },
561
+ {
562
+ "text": "05/01/2024"
563
+ },
564
+ {
565
+ "html": "<a href='#' id='C0001-3-action' class='c-link' aria-labelledby='C0001-3-action C0001-3'>Ver</a>"
566
+ }
567
+ ]
568
+ },
569
+ {
570
+ "level": 3,
571
+ "posinset": 1,
572
+ "setsize": 1,
573
+ "expanded": false,
574
+ "cells": [
575
+ {
576
+ "text": "C0001-3-1",
577
+ "attributes": { "id": "C0001-3-1" }
578
+ },
579
+ {
580
+ "text": "5.000,00€",
581
+ "classes": "lg:text-right"
582
+ },
583
+ {
584
+ "text": "15/01/2024"
585
+ },
586
+ {
587
+ "html": "<a href='#' id='C0001-3-1-action' class='c-link' aria-labelledby='C0001-3-1-action C0001-3-1'>Ver</a>"
588
+ }
589
+ ]
590
+ },
591
+ {
592
+ "level": 4,
593
+ "posinset": 1,
594
+ "setsize": 2,
595
+ "cells": [
596
+ {
597
+ "text": "C0001-3-1-1",
598
+ "attributes": { "id": "C0001-3-1-1" }
599
+ },
600
+ {
601
+ "text": "95€",
602
+ "classes": "lg:text-right"
603
+ },
604
+ {
605
+ "text": "15/01/2024"
606
+ },
607
+ {
608
+ "html": "<a href='#' id='C0001-3-1-1-action' class='c-link' aria-labelledby='C0001-3-1-1-action C0001-3-1-1'>Ver</a>"
609
+ }
610
+ ]
611
+ },
612
+ {
613
+ "level": 4,
614
+ "posinset": 2,
615
+ "setsize": 2,
616
+ "cells": [
617
+ {
618
+ "text": "C0001-3-1-2",
619
+ "attributes": { "id": "C0001-3-1-2" }
620
+ },
621
+ {
622
+ "text": "5.000,00€",
623
+ "classes": "lg:text-right"
624
+ },
625
+ {
626
+ "text": "15/01/2024"
627
+ },
628
+ {
629
+ "html": "<a href='#' id='C0001-3-1-2-action' class='c-link' aria-labelledby='C0001-3-1-2-action C0001-3-1-2'>Ver</a>"
630
+ }
631
+ ]
632
+ }
633
+ ],
634
+ "wrapper": {
635
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
636
+ "attributes": {
637
+ "tabindex": "0",
638
+ "role": "region",
639
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
640
+ }
641
+ },
642
+ "classes": "w-full",
643
+ "attributes": {
644
+ "id": "treegrid-B",
645
+ "aria-describedby": "treegrid-B-desc"
646
+ }
647
+ }
648
+ },
649
+ {
650
+ "name": "treegrid con primera celda como header",
651
+ "description": "El Treegrid usa una tabla que se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
652
+ "data": {
653
+ "firstCellIsHeader": true,
654
+ "caption": "Caption de la treegrid",
655
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
656
+ "head": [
657
+ {
658
+ "text": "Documento"
659
+ },
660
+ {
661
+ "text": "Importe",
662
+ "classes": "lg:text-right"
663
+ },
664
+ {
665
+ "text": "Fecha"
666
+ },
667
+ {
668
+ "text": "Acciones"
669
+ }
670
+ ],
671
+ "rows": [
672
+ {
673
+ "level": 1,
674
+ "posinset": 1,
675
+ "setsize": 1,
676
+ "expanded": true,
677
+ "cells": [
678
+ {
679
+ "text": "E0001",
680
+ "attributes": { "id": "E0001" }
681
+ },
682
+ {
683
+ "text": "3.000,00€",
684
+ "classes": "lg:text-right"
685
+ },
686
+ {
687
+ "text": "05/01/2024"
688
+ },
689
+ {
690
+ "html": "<a href='#' id='E0001-action' class='c-link' aria-labelledby='E0001-action E0001'>Ver</a>"
691
+ }
692
+ ]
693
+ },
694
+ {
695
+ "level": 2,
696
+ "posinset": 1,
697
+ "setsize": 3,
698
+ "cells": [
699
+ {
700
+ "text": "E0001-1",
701
+ "attributes": { "id": "E0001-1" }
702
+ },
703
+ {
704
+ "text": "1.000,00€",
705
+ "classes": "lg:text-right"
706
+ },
707
+ {
708
+ "text": "05/01/2024"
709
+ },
710
+ {
711
+ "html": "<a href='#' id='E0001-1-action' class='c-link' aria-labelledby='E0001-1-action E0001-1'>Ver</a>"
712
+ }
713
+ ]
714
+ },
715
+ {
716
+ "level": 2,
717
+ "posinset": 2,
718
+ "setsize": 3,
719
+ "expanded": false,
720
+ "cells": [
721
+ {
722
+ "text": "E0001-2",
723
+ "attributes": { "id": "E0001-2" }
724
+ },
725
+ {
726
+ "text": "2.000,00€",
727
+ "classes": "lg:text-right"
728
+ },
729
+ {
730
+ "text": "05/01/2024"
731
+ },
732
+ {
733
+ "html": "<a href='#' id='E0001-2-action' class='c-link' aria-labelledby='E0001-2-action E0001-2'>Ver</a>"
734
+ }
735
+ ]
736
+ },
737
+ {
738
+ "level": 3,
739
+ "posinset": 1,
740
+ "setsize": 1,
741
+ "cells": [
742
+ {
743
+ "text": "E0001-2-1",
744
+ "attributes": { "id": "E0001-2-1" }
745
+ },
746
+ {
747
+ "text": "1.000,00€",
748
+ "classes": "lg:text-right"
749
+ },
750
+ {
751
+ "text": "05/01/2024"
752
+ },
753
+ {
754
+ "html": "<a href='#' id='E0001-2-1-action' class='c-link' aria-labelledby='E0001-2-1-action E0001-2-1'>Ver</a>"
755
+ }
756
+ ]
757
+ },
758
+ {
759
+ "level": 2,
760
+ "posinset": 3,
761
+ "setsize": 3,
762
+ "expanded": false,
763
+ "cells": [
764
+ {
765
+ "text": "E0001-3",
766
+ "attributes": { "id": "E0001-3" }
767
+ },
768
+ {
769
+ "text": "2.000,00€",
770
+ "classes": "lg:text-right"
771
+ },
772
+ {
773
+ "text": "05/01/2024"
774
+ },
775
+ {
776
+ "html": "<a href='#' id='E0001-3-action' class='c-link' aria-labelledby='E0001-3-action E0001-3'>Ver</a>"
777
+ }
778
+ ]
779
+ },
780
+ {
781
+ "level": 3,
782
+ "posinset": 1,
783
+ "setsize": 1,
784
+ "expanded": false,
785
+ "cells": [
786
+ {
787
+ "text": "E0001-3-1",
788
+ "attributes": { "id": "E0001-3-1" }
789
+ },
790
+ {
791
+ "text": "5.000,00€",
792
+ "classes": "lg:text-right"
793
+ },
794
+ {
795
+ "text": "15/01/2024"
796
+ },
797
+ {
798
+ "html": "<a href='#' id='E0001-3-1-action' class='c-link' aria-labelledby='E0001-3-1-action E0001-3-1'>Ver</a>"
799
+ }
800
+ ]
801
+ },
802
+ {
803
+ "level": 4,
804
+ "posinset": 1,
805
+ "setsize": 2,
806
+ "cells": [
807
+ {
808
+ "text": "E0001-3-1-1",
809
+ "attributes": { "id": "E0001-3-1-1" }
810
+ },
811
+ {
812
+ "text": "95€",
813
+ "classes": "lg:text-right"
814
+ },
815
+ {
816
+ "text": "15/01/2024"
817
+ },
818
+ {
819
+ "html": "<a href='#' id='E0001-3-1-1-action' class='c-link' aria-labelledby='E0001-3-1-1-action E0001-3-1-1'>Ver</a>"
820
+ }
821
+ ]
822
+ },
823
+ {
824
+ "level": 4,
825
+ "posinset": 2,
826
+ "setsize": 2,
827
+ "cells": [
828
+ {
829
+ "text": "E0001-3-1-2",
830
+ "attributes": { "id": "E0001-3-1-2" }
831
+ },
832
+ {
833
+ "text": "5.000,00€",
834
+ "classes": "lg:text-right"
835
+ },
836
+ {
837
+ "text": "15/01/2024"
838
+ },
839
+ {
840
+ "html": "<a href='#' id='E0001-3-1-2-action' class='c-link' aria-labelledby='E0001-3-1-2-action E0001-3-1-2'>Ver</a>"
841
+ }
842
+ ]
843
+ }
844
+ ],
845
+ "wrapper": {
846
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
847
+ "attributes": {
848
+ "tabindex": "0",
849
+ "role": "region",
850
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
851
+ }
852
+ },
853
+ "classes": "w-full",
854
+ "attributes": {
855
+ "id": "treegrid",
856
+ "aria-describedby": "treegrid-desc"
857
+ }
858
+ }
859
+ },
860
+ {
861
+ "name": "treegrid con 15 niveles de profundidad",
862
+ "description": "Ejemplo de Treegrid con 15 niveles de anidación.",
863
+ "data": {
864
+ "caption": "Caption de la treegrid con 15 niveles",
865
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
866
+ "head": [
867
+ { "text": "Documento" },
868
+ { "text": "Importe", "classes": "lg:text-right" },
869
+ { "text": "Fecha" },
870
+ { "text": "Acciones" }
871
+ ],
872
+ "rows": [
873
+ {
874
+ "level": 1,
875
+ "posinset": 1,
876
+ "setsize": 1,
877
+ "expanded": false,
878
+ "cells": [
879
+ { "text": "F0001", "attributes": { "id": "F0001" } },
880
+ { "text": "100 €", "classes": "lg:text-right" },
881
+ { "text": "01/01/2024" },
882
+ { "html": "<a href='#' id='F0001-action' class='c-link' aria-labelledby='F0001-action F0001'>Ver</a>" }
883
+ ]
884
+ },
885
+ {
886
+ "level": 2,
887
+ "posinset": 1,
888
+ "setsize": 1,
889
+ "expanded": false,
890
+ "cells": [
891
+ { "text": "F0001-1", "attributes": { "id": "F0001-1" } },
892
+ { "text": "200 €", "classes": "lg:text-right" },
893
+ { "text": "02/01/2024" },
894
+ { "html": "<a href='#' id='F0001-1-action' class='c-link' aria-labelledby='F0001-1-action F0001-1'>Ver</a>" }
895
+ ]
896
+ },
897
+ {
898
+ "level": 3,
899
+ "posinset": 1,
900
+ "setsize": 1,
901
+ "expanded": false,
902
+ "cells": [
903
+ { "text": "F0001-1-1", "attributes": { "id": "F0001-1-1" } },
904
+ { "text": "300 €", "classes": "lg:text-right" },
905
+ { "text": "03/01/2024" },
906
+ { "html": "<a href='#' id='F0001-1-1-action' class='c-link' aria-labelledby='F0001-1-1-action F0001-1-1'>Ver</a>" }
907
+ ]
908
+ },
909
+ {
910
+ "level": 4,
911
+ "posinset": 1,
912
+ "setsize": 1,
913
+ "expanded": false,
914
+ "cells": [
915
+ { "text": "F0001-1-1-1", "attributes": { "id": "F0001-1-1-1" } },
916
+ { "text": "400 €", "classes": "lg:text-right" },
917
+ { "text": "04/01/2024" },
918
+ { "html": "<a href='#' id='F0001-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-action F0001-1-1-1'>Ver</a>" }
919
+ ]
920
+ },
921
+ {
922
+ "level": 5,
923
+ "posinset": 1,
924
+ "setsize": 1,
925
+ "expanded": false,
926
+ "cells": [
927
+ { "text": "F0001-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1" } },
928
+ { "text": "500 €", "classes": "lg:text-right" },
929
+ { "text": "05/01/2024" },
930
+ { "html": "<a href='#' id='F0001-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-action F0001-1-1-1-1'>Ver</a>" }
931
+ ]
932
+ },
933
+ {
934
+ "level": 6,
935
+ "posinset": 1,
936
+ "setsize": 1,
937
+ "expanded": false,
938
+ "cells": [
939
+ { "text": "F0001-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1" } },
940
+ { "text": "600 €", "classes": "lg:text-right" },
941
+ { "text": "06/01/2024" },
942
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-action F0001-1-1-1-1-1'>Ver</a>" }
943
+ ]
944
+ },
945
+ {
946
+ "level": 7,
947
+ "posinset": 1,
948
+ "setsize": 1,
949
+ "expanded": false,
950
+ "cells": [
951
+ { "text": "F0001-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1" } },
952
+ { "text": "700 €", "classes": "lg:text-right" },
953
+ { "text": "07/01/2024" },
954
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-action F0001-1-1-1-1-1-1'>Ver</a>" }
955
+ ]
956
+ },
957
+ {
958
+ "level": 8,
959
+ "posinset": 1,
960
+ "setsize": 1,
961
+ "expanded": false,
962
+ "cells": [
963
+ { "text": "F0001-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1" } },
964
+ { "text": "800 €", "classes": "lg:text-right" },
965
+ { "text": "08/01/2024" },
966
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1'>Ver</a>" }
967
+ ]
968
+ },
969
+ {
970
+ "level": 9,
971
+ "posinset": 1,
972
+ "setsize": 1,
973
+ "expanded": false,
974
+ "cells": [
975
+ { "text": "F0001-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1" } },
976
+ { "text": "900 €", "classes": "lg:text-right" },
977
+ { "text": "09/01/2024" },
978
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1'>Ver</a>" }
979
+ ]
980
+ },
981
+ {
982
+ "level": 10,
983
+ "posinset": 1,
984
+ "setsize": 1,
985
+ "expanded": false,
986
+ "cells": [
987
+ { "text": "F0001-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1" } },
988
+ { "text": "1000 €", "classes": "lg:text-right" },
989
+ { "text": "09/01/2024" },
990
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1'>Ver</a>" }
991
+ ]
992
+ },
993
+ {
994
+ "level": 11,
995
+ "posinset": 1,
996
+ "setsize": 1,
997
+ "expanded": false,
998
+ "cells": [
999
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1" } },
1000
+ { "text": "1100 €", "classes": "lg:text-right" },
1001
+ { "text": "09/01/2024" },
1002
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1003
+ ]
1004
+ },
1005
+ {
1006
+ "level": 12,
1007
+ "posinset": 1,
1008
+ "setsize": 1,
1009
+ "expanded": false,
1010
+ "cells": [
1011
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1" } },
1012
+ { "text": "1200 €", "classes": "lg:text-right" },
1013
+ { "text": "09/01/2024" },
1014
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1015
+ ]
1016
+ },
1017
+ {
1018
+ "level": 13,
1019
+ "posinset": 1,
1020
+ "setsize": 1,
1021
+ "expanded": false,
1022
+ "cells": [
1023
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1" } },
1024
+ { "text": "1300 €", "classes": "lg:text-right" },
1025
+ { "text": "09/01/2024" },
1026
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1027
+ ]
1028
+ },
1029
+ {
1030
+ "level": 14,
1031
+ "posinset": 1,
1032
+ "setsize": 1,
1033
+ "expanded": false,
1034
+ "cells": [
1035
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1036
+ { "text": "1400 €", "classes": "lg:text-right" },
1037
+ { "text": "09/01/2024" },
1038
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1039
+ ]
1040
+ },
1041
+ {
1042
+ "level": 15,
1043
+ "posinset": 1,
1044
+ "setsize": 1,
1045
+ "cells": [
1046
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1047
+ { "text": "1500 €", "classes": "lg:text-right" },
1048
+ { "text": "09/01/2024" },
1049
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1050
+ ]
1051
+ },
1052
+ {
1053
+ "level": 1,
1054
+ "posinset": 1,
1055
+ "setsize": 1,
1056
+ "expanded": false,
1057
+ "cells": [
1058
+ {
1059
+ "text": "F0002",
1060
+ "attributes": { "id": "F0002" }
1061
+ },
1062
+ {
1063
+ "text": "3.000,00€",
1064
+ "classes": "lg:text-right"
1065
+ },
1066
+ {
1067
+ "text": "05/01/2024"
1068
+ },
1069
+ {
1070
+ "html": "<a href='#' id='F0002-action' class='c-link' aria-labelledby='F0002-action F0002'>Ver</a>"
1071
+ }
1072
+ ]
1073
+ },
1074
+ {
1075
+ "level": 2,
1076
+ "posinset": 1,
1077
+ "setsize": 3,
1078
+ "cells": [
1079
+ {
1080
+ "text": "F0002-1",
1081
+ "attributes": { "id": "F0002-1" }
1082
+ },
1083
+ {
1084
+ "text": "1.000,00€",
1085
+ "classes": "lg:text-right"
1086
+ },
1087
+ {
1088
+ "text": "05/01/2024"
1089
+ },
1090
+ {
1091
+ "html": "<a href='#' id='F0002-1-action' class='c-link' aria-labelledby='F0002-1-action F0002-1'>Ver</a>"
1092
+ }
1093
+ ]
1094
+ },
1095
+ {
1096
+ "level": 2,
1097
+ "posinset": 2,
1098
+ "setsize": 3,
1099
+ "expanded": false,
1100
+ "cells": [
1101
+ {
1102
+ "text": "F0002-2",
1103
+ "attributes": { "id": "F0002-2" }
1104
+ },
1105
+ {
1106
+ "text": "2.000,00€",
1107
+ "classes": "lg:text-right"
1108
+ },
1109
+ {
1110
+ "text": "05/01/2024"
1111
+ },
1112
+ {
1113
+ "html": "<a href='#' id='F0002-2-action' class='c-link' aria-labelledby='F0002-2-action F0002-2'>Ver</a>"
1114
+ }
1115
+ ]
1116
+ },
1117
+ {
1118
+ "level": 3,
1119
+ "posinset": 1,
1120
+ "setsize": 1,
1121
+ "cells": [
1122
+ {
1123
+ "text": "F0002-2-1",
1124
+ "attributes": { "id": "F0002-2-1" }
1125
+ },
1126
+ {
1127
+ "text": "1.000,00€",
1128
+ "classes": "lg:text-right"
1129
+ },
1130
+ {
1131
+ "text": "05/01/2024"
1132
+ },
1133
+ {
1134
+ "html": "<a href='#' id='F0002-2-1-action' class='c-link' aria-labelledby='F0002-2-1-action F0002-2-1'>Ver</a>"
1135
+ }
1136
+ ]
1137
+ },
1138
+ {
1139
+ "level": 2,
1140
+ "posinset": 3,
1141
+ "setsize": 3,
1142
+ "expanded": false,
1143
+ "cells": [
1144
+ {
1145
+ "text": "F0002-3",
1146
+ "attributes": { "id": "F0002-3" }
1147
+ },
1148
+ {
1149
+ "text": "2.000,00€",
1150
+ "classes": "lg:text-right"
1151
+ },
1152
+ {
1153
+ "text": "05/01/2024"
1154
+ },
1155
+ {
1156
+ "html": "<a href='#' id='F0002-3-action' class='c-link' aria-labelledby='F0002-3-action F0002-3'>Ver</a>"
1157
+ }
1158
+ ]
1159
+ },
1160
+ {
1161
+ "level": 3,
1162
+ "posinset": 1,
1163
+ "setsize": 1,
1164
+ "expanded": false,
1165
+ "cells": [
1166
+ {
1167
+ "text": "F0002-3-1",
1168
+ "attributes": { "id": "F0002-3-1" }
1169
+ },
1170
+ {
1171
+ "text": "5.000,00€",
1172
+ "classes": "lg:text-right"
1173
+ },
1174
+ {
1175
+ "text": "15/01/2024"
1176
+ },
1177
+ {
1178
+ "html": "<a href='#' id='F0002-3-1-action' class='c-link' aria-labelledby='F0002-3-1-action F0002-3-1'>Ver</a>"
1179
+ }
1180
+ ]
1181
+ },
1182
+ {
1183
+ "level": 4,
1184
+ "posinset": 1,
1185
+ "setsize": 2,
1186
+ "cells": [
1187
+ {
1188
+ "text": "F0002-3-1-1",
1189
+ "attributes": { "id": "F0002-3-1-1" }
1190
+ },
1191
+ {
1192
+ "text": "95€",
1193
+ "classes": "lg:text-right"
1194
+ },
1195
+ {
1196
+ "text": "15/01/2024"
1197
+ },
1198
+ {
1199
+ "html": "<a href='#' id='F0002-3-1-1-action' class='c-link' aria-labelledby='F0002-3-1-1-action F0002-3-1-1'>Ver</a>"
1200
+ }
1201
+ ]
1202
+ },
1203
+ {
1204
+ "level": 4,
1205
+ "posinset": 2,
1206
+ "setsize": 2,
1207
+ "cells": [
1208
+ {
1209
+ "text": "F0002-3-1-2",
1210
+ "attributes": { "id": "F0002-3-1-2" }
1211
+ },
1212
+ {
1213
+ "text": "5.000,00€",
1214
+ "classes": "lg:text-right"
1215
+ },
1216
+ {
1217
+ "text": "15/01/2024"
1218
+ },
1219
+ {
1220
+ "html": "<a href='#' id='F0002-3-1-2-action' class='c-link' aria-labelledby='F0002-3-1-2-action F0002-3-1-2'>Ver</a>"
1221
+ }
1222
+ ]
1223
+ }
1224
+ ],
1225
+ "wrapper": {
1226
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
1227
+ "attributes": {
1228
+ "tabindex": "0",
1229
+ "role": "region",
1230
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
1231
+ }
1232
+ },
1233
+ "classes": "w-full",
1234
+ "attributes": {
1235
+ "id": "treegrid-9",
1236
+ "aria-describedby": "treegrid-9-desc"
1237
+ }
1238
+ }
1239
+ }
1240
+ ] %}