desy-html 17.0.1 → 17.0.2
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/docs/ds/_ds.example.combobox.njk +154 -67
- package/docs/ds/_ds.section.forms.njk +0 -9
- package/docs/index.html +5 -0
- package/package.json +1 -1
- package/src/templates/components/combobox/_examples.combobox.njk +78 -16
- package/src/templates/components/combobox/_styles.combobox.css +17 -0
- package/src/templates/components/combobox/_template.combobox.njk +1 -1
- package/docs/ds/_ds.example.listbox-default.njk +0 -677
- package/docs/ds/_ds.example.listbox-variaciones.njk +0 -824
|
@@ -1,90 +1,177 @@
|
|
|
1
1
|
{% from "components/combobox/_macro.combobox.njk" import componentCombobox %}
|
|
2
2
|
|
|
3
|
-
<div class="grid lg:grid-cols-
|
|
3
|
+
<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
|
|
4
4
|
<div>
|
|
5
5
|
{{ componentCombobox({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
"label"
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
{
|
|
13
|
-
"text": "Huesca"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"text": "Zaragoza"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"text": "Teruel"
|
|
20
|
-
}
|
|
6
|
+
id: "ds-combobox-default",
|
|
7
|
+
name: "ds-combobox-default",
|
|
8
|
+
label: { text: "Esto es un label" },
|
|
9
|
+
items: [
|
|
10
|
+
{ text: "Huesca" },
|
|
11
|
+
{ text: "Zaragoza" },
|
|
12
|
+
{ text: "Teruel" }
|
|
21
13
|
]
|
|
22
14
|
}) }}
|
|
23
15
|
</div>
|
|
24
16
|
<div>
|
|
25
17
|
{{ componentCombobox({
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"label"
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{
|
|
34
|
-
"text": "Huesca"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"text": "Zaragoza"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
"text": "Teruel"
|
|
41
|
-
}
|
|
18
|
+
id: "ds-combobox-disabled",
|
|
19
|
+
name: "ds-combobox-disabled",
|
|
20
|
+
label: { text: "Esto es un label" },
|
|
21
|
+
disabled: true,
|
|
22
|
+
items: [
|
|
23
|
+
{ text: "Huesca" },
|
|
24
|
+
{ text: "Zaragoza" },
|
|
25
|
+
{ text: "Teruel" }
|
|
42
26
|
]
|
|
43
27
|
}) }}
|
|
44
28
|
</div>
|
|
45
29
|
<div>
|
|
46
30
|
{{ componentCombobox({
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"label"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"items": [
|
|
56
|
-
{
|
|
57
|
-
"text": "Huesca"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"text": "Zaragoza"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"text": "Teruel"
|
|
64
|
-
}
|
|
31
|
+
id: "ds-combobox-hint",
|
|
32
|
+
name: "ds-combobox-hint",
|
|
33
|
+
label: { text: "Esto es un label" },
|
|
34
|
+
hint: { text: "Esto es un hint" },
|
|
35
|
+
items: [
|
|
36
|
+
{ text: "Huesca" },
|
|
37
|
+
{ text: "Zaragoza" },
|
|
38
|
+
{ text: "Teruel" }
|
|
65
39
|
]
|
|
66
40
|
}) }}
|
|
67
41
|
</div>
|
|
68
|
-
<div
|
|
42
|
+
<div>
|
|
43
|
+
{{ componentCombobox({
|
|
44
|
+
id: "ds-combobox-error",
|
|
45
|
+
name: "ds-combobox-error",
|
|
46
|
+
label: { text: "Esto es un label" },
|
|
47
|
+
errorMessage: { text: "Esto es un mensaje de error" },
|
|
48
|
+
items: [
|
|
49
|
+
{ text: "Huesca" },
|
|
50
|
+
{ text: "Zaragoza" },
|
|
51
|
+
{ text: "Teruel" }
|
|
52
|
+
]
|
|
53
|
+
}) }}
|
|
54
|
+
</div>
|
|
55
|
+
<div>
|
|
56
|
+
{{ componentCombobox({
|
|
57
|
+
id: "ds-combobox-hint-error",
|
|
58
|
+
name: "ds-combobox-hint-error",
|
|
59
|
+
label: { text: "Esto es un label" },
|
|
60
|
+
hint: { text: "Esto es un hint" },
|
|
61
|
+
errorMessage: { text: "Esto es un mensaje de error" },
|
|
62
|
+
items: [
|
|
63
|
+
{ text: "Huesca" },
|
|
64
|
+
{ text: "Zaragoza" },
|
|
65
|
+
{ text: "Teruel" }
|
|
66
|
+
]
|
|
67
|
+
}) }}
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="grid lg:grid-cols-5 gap-xl mb-lg items-end">
|
|
72
|
+
<div>
|
|
73
|
+
{{ componentCombobox({
|
|
74
|
+
id: "ds-combobox-placeholder",
|
|
75
|
+
name: "ds-combobox-placeholder",
|
|
76
|
+
label: { text: "Esto es un label" },
|
|
77
|
+
placeholder: "Escribe para buscar...",
|
|
78
|
+
items: [
|
|
79
|
+
{ text: "Huesca" },
|
|
80
|
+
{ text: "Zaragoza" },
|
|
81
|
+
{ text: "Teruel" }
|
|
82
|
+
]
|
|
83
|
+
}) }}
|
|
84
|
+
</div>
|
|
85
|
+
<div>
|
|
86
|
+
{{ componentCombobox({
|
|
87
|
+
id: "ds-combobox-default-value",
|
|
88
|
+
name: "ds-combobox-default-value",
|
|
89
|
+
label: { text: "Esto es un label" },
|
|
90
|
+
defaultValue: "Zaragoza",
|
|
91
|
+
items: [
|
|
92
|
+
{ text: "Huesca" },
|
|
93
|
+
{ text: "Zaragoza", selected: true },
|
|
94
|
+
{ text: "Teruel" }
|
|
95
|
+
]
|
|
96
|
+
}) }}
|
|
97
|
+
</div>
|
|
98
|
+
<div>
|
|
99
|
+
{{ componentCombobox({
|
|
100
|
+
id: "ds-combobox-autocomplete-list",
|
|
101
|
+
name: "ds-combobox-autocomplete-list",
|
|
102
|
+
label: { text: "Esto es un label" },
|
|
103
|
+
autocomplete: "list",
|
|
104
|
+
items: [
|
|
105
|
+
{ text: "Huesca" },
|
|
106
|
+
{ text: "Zaragoza" },
|
|
107
|
+
{ text: "Teruel" }
|
|
108
|
+
]
|
|
109
|
+
}) }}
|
|
110
|
+
</div>
|
|
111
|
+
<div>
|
|
112
|
+
{{ componentCombobox({
|
|
113
|
+
id: "ds-combobox-multiselect",
|
|
114
|
+
name: "ds-combobox-multiselect[]",
|
|
115
|
+
label: { text: "Esto es un label" },
|
|
116
|
+
multiselect: true,
|
|
117
|
+
placeholder: "Selecciona opciones",
|
|
118
|
+
items: [
|
|
119
|
+
{ text: "Huesca", selected: true },
|
|
120
|
+
{ text: "Zaragoza", selected: true },
|
|
121
|
+
{ text: "Teruel" }
|
|
122
|
+
]
|
|
123
|
+
}) }}
|
|
124
|
+
</div>
|
|
125
|
+
<div>
|
|
126
|
+
{{ componentCombobox({
|
|
127
|
+
id: "ds-combobox-sm",
|
|
128
|
+
name: "ds-combobox-sm",
|
|
129
|
+
classes: "c-combobox--sm",
|
|
130
|
+
label: { text: "Esto es un label", classes: "text-sm" },
|
|
131
|
+
items: [
|
|
132
|
+
{ text: "Opción 1" },
|
|
133
|
+
{ text: "Opción 2", selected: true },
|
|
134
|
+
{ text: "Opción 3" }
|
|
135
|
+
]
|
|
136
|
+
}) }}
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="grid lg:grid-cols-2 gap-xl mb-lg items-end">
|
|
141
|
+
<div>
|
|
142
|
+
{{ componentCombobox({
|
|
143
|
+
id: "ds-combobox-multiselect-extended",
|
|
144
|
+
name: "ds-combobox-multiselect-extended[]",
|
|
145
|
+
label: { text: "Esto es un label" },
|
|
146
|
+
multiselect: true,
|
|
147
|
+
autocomplete: "list",
|
|
148
|
+
placeholder: "Selecciona varias opciones",
|
|
149
|
+
items: [
|
|
150
|
+
{ text: "Huesca", selected: true },
|
|
151
|
+
{ text: "Zaragoza", selected: true },
|
|
152
|
+
{ text: "Teruel" },
|
|
153
|
+
{ text: "Barcelona" },
|
|
154
|
+
{ text: "Madrid" },
|
|
155
|
+
{ text: "Valencia" }
|
|
156
|
+
]
|
|
157
|
+
}) }}
|
|
158
|
+
</div>
|
|
159
|
+
<div>
|
|
69
160
|
{{ componentCombobox({
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
"
|
|
73
|
-
|
|
161
|
+
id: "ds-combobox-inline",
|
|
162
|
+
name: "ds-combobox-inline",
|
|
163
|
+
classes: "lg:flex-1",
|
|
164
|
+
formGroup: {
|
|
165
|
+
classes: "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
|
|
74
166
|
},
|
|
75
|
-
|
|
76
|
-
|
|
167
|
+
label: {
|
|
168
|
+
text: "Esto es un label",
|
|
169
|
+
classes: "lg:py-sm lg:mt-sm"
|
|
77
170
|
},
|
|
78
|
-
|
|
79
|
-
{
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
{
|
|
83
|
-
"text": "Zaragoza"
|
|
84
|
-
},
|
|
85
|
-
{
|
|
86
|
-
"text": "Teruel"
|
|
87
|
-
}
|
|
171
|
+
items: [
|
|
172
|
+
{ text: "Huesca" },
|
|
173
|
+
{ text: "Zaragoza" },
|
|
174
|
+
{ text: "Teruel" }
|
|
88
175
|
]
|
|
89
176
|
}) }}
|
|
90
177
|
</div>
|
|
@@ -61,13 +61,4 @@
|
|
|
61
61
|
}) }}
|
|
62
62
|
{% include "ds/_ds.example.tree.njk" %}
|
|
63
63
|
<div class="pb-lg"></div>
|
|
64
|
-
{{ DSSubsectionTitle({
|
|
65
|
-
title: "Listbox por defecto"
|
|
66
|
-
}) }}
|
|
67
|
-
{% include "ds/_ds.example.listbox-default.njk" %}
|
|
68
|
-
<div class="pb-lg"></div>
|
|
69
|
-
{{ DSSubsectionTitle({
|
|
70
|
-
title: "Listbox variaciones"
|
|
71
|
-
}) }}
|
|
72
|
-
{% include "ds/_ds.example.listbox-variaciones.njk" %}
|
|
73
64
|
</div>
|
package/docs/index.html
CHANGED
|
@@ -147,6 +147,11 @@ cd desy-html</code></pre>
|
|
|
147
147
|
|
|
148
148
|
<h2>Changelog (English)</h2>
|
|
149
149
|
<p>What's new in the latest version of desy-html</p>
|
|
150
|
+
<h3>v.17.0.2</h3>
|
|
151
|
+
<ul class="text-sm">
|
|
152
|
+
<li>Improvements in Combobox.</li>
|
|
153
|
+
<li>Removed Listbox from Catálogo as its deprecated.</li>
|
|
154
|
+
</ul>
|
|
150
155
|
<h3>v.17.0.1</h3>
|
|
151
156
|
<ul class="text-sm">
|
|
152
157
|
<li>Security fixes from deepsec.</li>
|
package/package.json
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
{ "text": "Valencia" }
|
|
59
59
|
]
|
|
60
60
|
},
|
|
61
|
-
"visualDescription": "Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El
|
|
61
|
+
"visualDescription": "Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El combobox permanece abierto al elegir varias."
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
"name": "con estado activo",
|
|
@@ -309,29 +309,25 @@
|
|
|
309
309
|
},
|
|
310
310
|
{
|
|
311
311
|
"name": "peque",
|
|
312
|
-
"description": "Label solo visible para lectores de pantalla.",
|
|
313
312
|
"data": {
|
|
314
|
-
"id": "
|
|
315
|
-
"name": "
|
|
313
|
+
"id": "combobox-sm",
|
|
314
|
+
"name": "combobox-sm",
|
|
315
|
+
"classes": "c-combobox--sm",
|
|
316
316
|
"label": {
|
|
317
|
-
"text": "
|
|
318
|
-
"classes": "
|
|
317
|
+
"text": "Esto es un label",
|
|
318
|
+
"classes": "text-sm"
|
|
319
319
|
},
|
|
320
|
-
"classes": "px-2 py-1 text-sm",
|
|
321
320
|
"items": [
|
|
322
|
-
{ "text": "
|
|
323
|
-
{ "text": "
|
|
324
|
-
{ "text": "
|
|
325
|
-
{ "text": "Barcelona" },
|
|
326
|
-
{ "text": "Madrid" },
|
|
327
|
-
{ "text": "Valencia" }
|
|
321
|
+
{ "text": "Opción 1" },
|
|
322
|
+
{ "text": "Opción 2", "selected": true },
|
|
323
|
+
{ "text": "Opción 3" }
|
|
328
324
|
]
|
|
329
325
|
},
|
|
330
|
-
"visualDescription": "Combobox con label
|
|
326
|
+
"visualDescription": "Combobox pequeño con label visible en tamaño reducido. Campo rectangular compacto con borde gris, fondo blanco, texto pequeño y flecha desplegable alineada a la derecha.",
|
|
331
327
|
"_generated": {
|
|
332
|
-
"hash": "
|
|
328
|
+
"hash": "f4c92a618d70e35b9a14cc782ebf063d",
|
|
333
329
|
"version": "1.0.0",
|
|
334
|
-
"timestamp": "2026-
|
|
330
|
+
"timestamp": "2026-07-22T00:00:00.000Z"
|
|
335
331
|
}
|
|
336
332
|
},
|
|
337
333
|
{
|
|
@@ -436,5 +432,71 @@
|
|
|
436
432
|
"version": "1.0.0",
|
|
437
433
|
"timestamp": "2026-04-20T17:48:37.642Z"
|
|
438
434
|
}
|
|
435
|
+
},
|
|
436
|
+
{
|
|
437
|
+
"name": "ancho completo",
|
|
438
|
+
"description": "Utiliza <code>classes: \"w-full\"</code> para que el combobox ocupe todo el ancho disponible.",
|
|
439
|
+
"data": {
|
|
440
|
+
"id": "full-width",
|
|
441
|
+
"name": "provincia-full",
|
|
442
|
+
"label": {
|
|
443
|
+
"text": "Provincia"
|
|
444
|
+
},
|
|
445
|
+
"classes": "w-full",
|
|
446
|
+
"autocomplete": "both",
|
|
447
|
+
"items": [
|
|
448
|
+
{
|
|
449
|
+
"text": "Huesca"
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
"text": "Zaragoza"
|
|
453
|
+
},
|
|
454
|
+
{
|
|
455
|
+
"text": "Teruel"
|
|
456
|
+
},
|
|
457
|
+
{
|
|
458
|
+
"text": "Barcelona"
|
|
459
|
+
},
|
|
460
|
+
{
|
|
461
|
+
"text": "Madrid"
|
|
462
|
+
},
|
|
463
|
+
{
|
|
464
|
+
"text": "Valencia"
|
|
465
|
+
}
|
|
466
|
+
]
|
|
467
|
+
},
|
|
468
|
+
"visualDescription": "Combobox que ocupa todo el ancho del contenedor. Label gris oscuro pequeño posicionado arriba. Campo rectangular a ancho completo con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo pegado al borde derecho del input."
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"name": "con clases de form-group opcionales",
|
|
472
|
+
"description": "Label en línea + Combobox flexible y mensaje de error",
|
|
473
|
+
"data": {
|
|
474
|
+
"id": "combobox-form-group-opcionales",
|
|
475
|
+
"name": "combobox-form-group-opcionales",
|
|
476
|
+
"classes": "w-full",
|
|
477
|
+
"classesContainer": "lg:flex-1",
|
|
478
|
+
"label": {
|
|
479
|
+
"text": "Label en línea:",
|
|
480
|
+
"classes": "lg:py-sm lg:mt-sm"
|
|
481
|
+
},
|
|
482
|
+
"formGroup": {
|
|
483
|
+
"classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
|
|
484
|
+
},
|
|
485
|
+
"errorMessage": {
|
|
486
|
+
"text": "Esto es un mensaje de error",
|
|
487
|
+
"classes": "order-1 w-full pt-sm"
|
|
488
|
+
},
|
|
489
|
+
"items": [
|
|
490
|
+
{ "text": "Opción 1" },
|
|
491
|
+
{ "text": "Opción 2", "selected": true },
|
|
492
|
+
{ "text": "Opción 3" }
|
|
493
|
+
]
|
|
494
|
+
},
|
|
495
|
+
"visualDescription": "Combobox con label en línea horizontal en negro a la izquierda del campo en pantallas grandes (label arriba en móvil). Contenedor con borde rojo de 2px por el mensaje de error, fondo blanco, y valor seleccionado visible. Mensaje de error en rojo debajo del campo indicando validación fallida. Botón toggle con chevron gris a la derecha del campo.",
|
|
496
|
+
"_generated": {
|
|
497
|
+
"hash": "f27e5d917921b62038775f3ad51fc257",
|
|
498
|
+
"version": "1.0.0",
|
|
499
|
+
"timestamp": "2026-07-22T00:00:00.000Z"
|
|
500
|
+
}
|
|
439
501
|
}
|
|
440
502
|
] %}
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
@apply relative;
|
|
7
7
|
@apply inline-flex;
|
|
8
8
|
@apply items-center;
|
|
9
|
+
|
|
10
|
+
&:has(> .w-full) {
|
|
11
|
+
@apply w-full;
|
|
12
|
+
}
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.c-combobox__toggle {
|
|
@@ -89,4 +93,17 @@
|
|
|
89
93
|
@apply text-neutral-dark;
|
|
90
94
|
@apply italic;
|
|
91
95
|
}
|
|
96
|
+
|
|
97
|
+
.c-combobox--base {
|
|
98
|
+
@apply pr-10;
|
|
99
|
+
@apply pl-3;
|
|
100
|
+
@apply py-2;
|
|
101
|
+
@apply text-base;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.c-combobox--sm {
|
|
105
|
+
@apply pl-2;
|
|
106
|
+
@apply py-1;
|
|
107
|
+
@apply text-sm;
|
|
108
|
+
}
|
|
92
109
|
}
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
{% endif %}
|
|
59
59
|
<div class="c-combobox relative {%- if params.classesContainer %} {{ params.classesContainer }}{% endif %}">
|
|
60
60
|
<div class="c-combobox__input-wrapper">
|
|
61
|
-
<input class="c-input c-combobox__input block mt-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" type="text" role="combobox" autocomplete="off" aria-autocomplete="{{ autocompleteMode }}" aria-expanded="false" aria-haspopup="listbox" aria-controls="{{ listboxId }}"
|
|
61
|
+
<input class="c-input c-combobox__input block mt-sm pr-10 {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" type="text" role="combobox" autocomplete="off" aria-autocomplete="{{ autocompleteMode }}" aria-expanded="false" aria-haspopup="listbox" aria-controls="{{ listboxId }}"
|
|
62
62
|
{%- if inputValue %} value="{{ inputValue }}"{% endif %}
|
|
63
63
|
{%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
|
|
64
64
|
{%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
|