desy-html 5.1.0 → 5.2.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/_include.template-header.njk +5 -1
- package/docs/_macro.example-render.njk +4 -0
- package/docs/componentes.html +3 -0
- package/docs/ds/_ds.example.toggle.njk +56 -0
- package/docs/ds/_ds.example.tree.njk +457 -0
- package/docs/ds/_ds.section.forms.njk +5 -0
- package/docs/ds/_ds.section.mostrar-ocultar.njk +5 -0
- package/docs/examples-toggle.html +5 -0
- package/docs/index.html +18 -0
- package/package.json +1 -1
- package/src/templates/components/checkboxes/_template.checkboxes.njk +1 -2
- package/src/templates/components/pagination/_examples.pagination.njk +32 -0
- package/src/templates/components/pagination/_template.pagination.njk +1 -0
- package/src/templates/components/toggle/_examples.toggle.njk +52 -0
- package/src/templates/components/toggle/_macro.toggle.njk +3 -0
- package/src/templates/components/toggle/_template.toggle.njk +39 -0
- package/src/templates/components/toggle/params.toggle.yaml +57 -0
- package/src/templates/components/tooltip/_template.tooltip.njk +2 -2
- package/src/templates/components/tree/_examples.tree.njk +186 -2
- package/src/templates/components/tree/_template.tree.njk +11 -8
- package/src/templates/components/tree/params.tree.yaml +4 -0
|
@@ -250,12 +250,16 @@
|
|
|
250
250
|
href: "examples-textarea.html",
|
|
251
251
|
text: "Textarea"
|
|
252
252
|
},
|
|
253
|
+
{
|
|
254
|
+
href: "examples-toggle.html",
|
|
255
|
+
text: "Toggle"
|
|
256
|
+
},
|
|
253
257
|
{
|
|
254
258
|
href: "examples-tooltip.html",
|
|
255
259
|
text: "Tooltip"
|
|
256
260
|
},
|
|
257
261
|
{
|
|
258
|
-
href: "
|
|
262
|
+
href: "examples-tree.html",
|
|
259
263
|
text: "Tree"
|
|
260
264
|
}],
|
|
261
265
|
attributes: {
|
|
@@ -89,6 +89,8 @@ import componentTableAdvanced %}
|
|
|
89
89
|
import componentTabs %}
|
|
90
90
|
{% from "components/textarea/_macro.textarea.njk"
|
|
91
91
|
import componentTextarea %}
|
|
92
|
+
{% from "components/toggle/_macro.toggle.njk"
|
|
93
|
+
import componentToggle %}
|
|
92
94
|
{% from "components/tooltip/_macro.tooltip.njk"
|
|
93
95
|
import componentTooltip %}
|
|
94
96
|
{% from "components/tree/_macro.tree.njk"
|
|
@@ -206,6 +208,8 @@ import componentTree %}
|
|
|
206
208
|
{{ componentTabs(example.data) }}
|
|
207
209
|
{% elseif exampleComponent == "textarea" %}
|
|
208
210
|
{{ componentTextarea(example.data) }}
|
|
211
|
+
{% elseif exampleComponent == "toggle" %}
|
|
212
|
+
{{ componentToggle(example.data) }}
|
|
209
213
|
{% elseif exampleComponent == "tooltip" %}
|
|
210
214
|
{{ componentTooltip(example.data) }}
|
|
211
215
|
{% elseif exampleComponent == "tree" %}
|
package/docs/componentes.html
CHANGED
|
@@ -145,6 +145,9 @@
|
|
|
145
145
|
<div>
|
|
146
146
|
<p class="c-paragraph-base"><a href="examples-textarea.html" class="c-link">Textarea</a></p>
|
|
147
147
|
</div>
|
|
148
|
+
<div>
|
|
149
|
+
<p class="c-paragraph-base"><a href="examples-toggle.html" class="c-link">Toggle</a></p>
|
|
150
|
+
</div>
|
|
148
151
|
<div>
|
|
149
152
|
<p class="c-paragraph-base"><a href="examples-tooltip.html" class="c-link">Tooltip</a></p>
|
|
150
153
|
</div>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{% from "components/toggle/_macro.toggle.njk" import componentToggle %}
|
|
2
|
+
|
|
3
|
+
<div class="grid lg:grid-cols-2 gap-xl mb-lg">
|
|
4
|
+
<div>
|
|
5
|
+
{{ componentToggle({
|
|
6
|
+
"classes": "c-button c-button--transparent no-underline",
|
|
7
|
+
"offState": {
|
|
8
|
+
"classes": "",
|
|
9
|
+
"html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" width=\"1em\" height=\"1em\"><path d=\"M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z\" fill=\"currentColor\"/></svg>Notificar por correo electrónico</span>"
|
|
10
|
+
},
|
|
11
|
+
"onState": {
|
|
12
|
+
"classes": "",
|
|
13
|
+
"html": "Notificar por correo electrónico"
|
|
14
|
+
}
|
|
15
|
+
}) }}
|
|
16
|
+
<div class="pb-base"></div>
|
|
17
|
+
{{ componentToggle({
|
|
18
|
+
"classes": "c-button c-button--sm c-button--transparent no-underline",
|
|
19
|
+
"offState": {
|
|
20
|
+
"classes": "",
|
|
21
|
+
"html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z\" fill=\"currentColor\" transform=\"scale(3.42857)\"/></svg><span aria-hidden=\"true\">Ocultar heredados del servicio</span><span class=\"sr-only\">Mostrar heredados del servicio</span></span>"
|
|
22
|
+
},
|
|
23
|
+
"onState": {
|
|
24
|
+
"classes": "",
|
|
25
|
+
"html": "<span class=\"inline-flex\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 48 48\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><g transform=\"scale(3.42857)\"><circle cx=\"7\" cy=\"7\" r=\"2\" fill=\"currentColor\" /><path d=\"m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z\" fill=\"currentColor\"/></g></svg>Mostrar heredados del servicio</span>"
|
|
26
|
+
}
|
|
27
|
+
}) }}
|
|
28
|
+
</div>
|
|
29
|
+
<div>
|
|
30
|
+
<ul>
|
|
31
|
+
<li class="flex flex-wrap w-full justify-between p-base border-t border-b border-neutral-base">
|
|
32
|
+
<div>
|
|
33
|
+
<p id="id-text">Notificar por email</p>
|
|
34
|
+
</div>
|
|
35
|
+
<div>
|
|
36
|
+
{{ componentToggle({
|
|
37
|
+
"classes": "",
|
|
38
|
+
"isSwitch": true,
|
|
39
|
+
"offState": {
|
|
40
|
+
"classes": "",
|
|
41
|
+
"html": "<span class=\"bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">on</span><span aria-hidden=\"true\" class=\"translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
|
|
42
|
+
},
|
|
43
|
+
"onState": {
|
|
44
|
+
"classes": "",
|
|
45
|
+
"html": "<span class=\"bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75\"><span class=\"sr-only\">off</span><span aria-hidden=\"true\" class=\"translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200\" /></span></span>"
|
|
46
|
+
},
|
|
47
|
+
"attributes": {
|
|
48
|
+
"aria-labelledby": "id-text"
|
|
49
|
+
}
|
|
50
|
+
}) }}
|
|
51
|
+
</div>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
</div>
|
|
@@ -0,0 +1,457 @@
|
|
|
1
|
+
{% from "components/tree/_macro.tree.njk" import componentTree %}
|
|
2
|
+
|
|
3
|
+
<div class="grid lg:grid-cols-4 gap-xl mb-lg">
|
|
4
|
+
<div>
|
|
5
|
+
{{ componentTree({
|
|
6
|
+
"name": "with-a-parent-item-opened",
|
|
7
|
+
"classes": "mt-base",
|
|
8
|
+
"fieldset": {
|
|
9
|
+
"legend": {
|
|
10
|
+
"text": "Selecciona organismo"
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
"hint": {
|
|
14
|
+
"text": "Selecciona el organismo al que perteneces."
|
|
15
|
+
},
|
|
16
|
+
"idPrefix": "tree-item",
|
|
17
|
+
"items": [
|
|
18
|
+
{
|
|
19
|
+
"text": "Item 1",
|
|
20
|
+
"id": "tree-item-item-1",
|
|
21
|
+
"sub": {
|
|
22
|
+
"items": [
|
|
23
|
+
{
|
|
24
|
+
"text": "Subitem 1",
|
|
25
|
+
"value": "subitem-1"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"text": "Subitem 2",
|
|
29
|
+
"value": "subitem-2"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"text": "Subitem 3",
|
|
33
|
+
"value": "subitem-3"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"attributes": {
|
|
37
|
+
"aria-labelledby": "tree-item-item-1"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"text": "Item 2",
|
|
43
|
+
"id": "tree-item-item-2",
|
|
44
|
+
"expanded": true,
|
|
45
|
+
"sub": {
|
|
46
|
+
"items": [
|
|
47
|
+
{
|
|
48
|
+
"text": "Subitem 1",
|
|
49
|
+
"value": "subitem-1"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"text": "Subitem 2",
|
|
53
|
+
"value": "subitem-2"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"text": "Subitem 3",
|
|
57
|
+
"value": "subitem-3"
|
|
58
|
+
}
|
|
59
|
+
],
|
|
60
|
+
"attributes": {
|
|
61
|
+
"aria-labelledby": "tree-item-item-2"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"text": "Item 3",
|
|
67
|
+
"id": "tree-item-item-3",
|
|
68
|
+
"sub": {
|
|
69
|
+
"items": [
|
|
70
|
+
{
|
|
71
|
+
"text": "Subitem 1",
|
|
72
|
+
"value": "subitem-1"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"text": "Subitem 2",
|
|
76
|
+
"value": "subitem-2"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"text": "Subitem 3",
|
|
80
|
+
"value": "subitem-3"
|
|
81
|
+
}
|
|
82
|
+
],
|
|
83
|
+
"attributes": {
|
|
84
|
+
"aria-labelledby": "tree-item-item-3"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
]
|
|
89
|
+
}) }}
|
|
90
|
+
</div>
|
|
91
|
+
<div>
|
|
92
|
+
{{ componentTree({
|
|
93
|
+
"name": "indeterminate",
|
|
94
|
+
"classes": "mt-base",
|
|
95
|
+
"type": "checkbox",
|
|
96
|
+
"fieldset": {
|
|
97
|
+
"legend": {
|
|
98
|
+
"text": "Selecciona organismo"
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"hint": {
|
|
102
|
+
"text": "Selecciona el organismo al que perteneces."
|
|
103
|
+
},
|
|
104
|
+
"idPrefix": "indeterminate-example",
|
|
105
|
+
"items": [
|
|
106
|
+
{
|
|
107
|
+
"text": "Item 1",
|
|
108
|
+
"id": "indeterminate-example-item-1",
|
|
109
|
+
"isIndeterminate": true,
|
|
110
|
+
"sub": {
|
|
111
|
+
"items": [
|
|
112
|
+
{
|
|
113
|
+
"text": "Subitem 1",
|
|
114
|
+
"value": "subitem-1"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"text": "Subitem 2",
|
|
118
|
+
"value": "subitem-2"
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"text": "Subitem 3",
|
|
122
|
+
"value": "subitem-3"
|
|
123
|
+
}
|
|
124
|
+
],
|
|
125
|
+
"attributes": {
|
|
126
|
+
"aria-labelledby": "indeterminate-example-item-1"
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
"text": "Item 2",
|
|
132
|
+
"id": "indeterminate-example-item-2",
|
|
133
|
+
"isIndeterminate": true,
|
|
134
|
+
"indeterminateChecked": true,
|
|
135
|
+
"checked": false,
|
|
136
|
+
"expanded": true,
|
|
137
|
+
"sub": {
|
|
138
|
+
"items": [
|
|
139
|
+
{
|
|
140
|
+
"text": "Subitem 1",
|
|
141
|
+
"value": "subitem-1"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"text": "Subitem 2",
|
|
145
|
+
"value": "subitem-2",
|
|
146
|
+
"checked": true
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
"text": "Subitem 3",
|
|
150
|
+
"value": "subitem-3"
|
|
151
|
+
}
|
|
152
|
+
],
|
|
153
|
+
"attributes": {
|
|
154
|
+
"aria-labelledby": "indeterminate-example-item-2"
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"text": "Item 3",
|
|
160
|
+
"id": "indeterminate-example-item-3",
|
|
161
|
+
"isIndeterminate": true,
|
|
162
|
+
"sub": {
|
|
163
|
+
"items": [
|
|
164
|
+
{
|
|
165
|
+
"text": "Subitem 1",
|
|
166
|
+
"value": "subitem-1"
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"text": "Subitem 2",
|
|
170
|
+
"value": "subitem-2"
|
|
171
|
+
},
|
|
172
|
+
{
|
|
173
|
+
"text": "Subitem 3",
|
|
174
|
+
"value": "subitem-3"
|
|
175
|
+
}
|
|
176
|
+
],
|
|
177
|
+
"attributes": {
|
|
178
|
+
"aria-labelledby": "indeterminate-example-item-3"
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
]
|
|
183
|
+
}) }}
|
|
184
|
+
</div>
|
|
185
|
+
<div>
|
|
186
|
+
{{ componentTree({
|
|
187
|
+
"name": "with-searchbar",
|
|
188
|
+
"classes": "mt-base",
|
|
189
|
+
"fieldset": {
|
|
190
|
+
"legend": {
|
|
191
|
+
"text": "Selecciona organismo"
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
"searchbar": {
|
|
195
|
+
"id": "with-searchbar-searchbar",
|
|
196
|
+
"label": {
|
|
197
|
+
"text": "Buscar"
|
|
198
|
+
},
|
|
199
|
+
"placeholder": "Buscar organismo"
|
|
200
|
+
},
|
|
201
|
+
"items": [
|
|
202
|
+
{
|
|
203
|
+
"text": "Item 1",
|
|
204
|
+
"id": "with-searchbar-item-1",
|
|
205
|
+
"sub": {
|
|
206
|
+
"items": [
|
|
207
|
+
{
|
|
208
|
+
"text": "Subitem 1",
|
|
209
|
+
"value": "subitem-1"
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
"text": "Subitem 2",
|
|
213
|
+
"value": "subitem-2"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
"text": "Subitem 3",
|
|
217
|
+
"value": "subitem-3"
|
|
218
|
+
}
|
|
219
|
+
],
|
|
220
|
+
"attributes": {
|
|
221
|
+
"aria-labelledby": "with-searchbar-item-1"
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"text": "Item 2",
|
|
227
|
+
"id": "with-searchbar-item-2",
|
|
228
|
+
"sub": {
|
|
229
|
+
"items": [
|
|
230
|
+
{
|
|
231
|
+
"text": "Subitem 1",
|
|
232
|
+
"value": "subitem-1"
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
"text": "Subitem 2",
|
|
236
|
+
"value": "subitem-2"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"text": "Subitem 3",
|
|
240
|
+
"value": "subitem-3"
|
|
241
|
+
}
|
|
242
|
+
],
|
|
243
|
+
"attributes": {
|
|
244
|
+
"aria-labelledby": "with-searchbar-item-2"
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"text": "Item 3",
|
|
250
|
+
"id": "with-searchbar-item-3",
|
|
251
|
+
"sub": {
|
|
252
|
+
"items": [
|
|
253
|
+
{
|
|
254
|
+
"text": "Subitem 1",
|
|
255
|
+
"value": "subitem-1"
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"text": "Subitem 2",
|
|
259
|
+
"value": "subitem-2"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
"text": "Subitem 3",
|
|
263
|
+
"value": "subitem-3"
|
|
264
|
+
}
|
|
265
|
+
],
|
|
266
|
+
"attributes": {
|
|
267
|
+
"aria-labelledby": "with-searchbar-item-3"
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
]
|
|
272
|
+
}) }}
|
|
273
|
+
</div>
|
|
274
|
+
<div>
|
|
275
|
+
{{ componentTree({
|
|
276
|
+
"name": "with-many-depth-levels",
|
|
277
|
+
"classes": "mt-base",
|
|
278
|
+
"fieldset": {
|
|
279
|
+
"legend": {
|
|
280
|
+
"text": "Selecciona organismo"
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
"hint": {
|
|
284
|
+
"text": "Selecciona el organismo al que perteneces."
|
|
285
|
+
},
|
|
286
|
+
"idPrefix": "tree-item-nodes",
|
|
287
|
+
"items": [
|
|
288
|
+
{
|
|
289
|
+
"text": "Item 1",
|
|
290
|
+
"sub": {
|
|
291
|
+
"items": [
|
|
292
|
+
{
|
|
293
|
+
"text": "Subitem 1",
|
|
294
|
+
"value": "subitem-1"
|
|
295
|
+
},
|
|
296
|
+
{
|
|
297
|
+
"text": "Subitem 2",
|
|
298
|
+
"value": "subitem-2"
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"text": "Subitem 3",
|
|
302
|
+
"value": "subitem-3"
|
|
303
|
+
}
|
|
304
|
+
]
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"text": "Item 2",
|
|
309
|
+
"sub": {
|
|
310
|
+
"items": [
|
|
311
|
+
{
|
|
312
|
+
"text": "Subitem 1",
|
|
313
|
+
"value": "subitem-1"
|
|
314
|
+
},
|
|
315
|
+
{
|
|
316
|
+
"text": "Subitem 2",
|
|
317
|
+
"value": "subitem-2"
|
|
318
|
+
},
|
|
319
|
+
{
|
|
320
|
+
"text": "Subitem 3",
|
|
321
|
+
"value": "subitem-3"
|
|
322
|
+
}
|
|
323
|
+
]
|
|
324
|
+
}
|
|
325
|
+
},
|
|
326
|
+
{
|
|
327
|
+
"text": "Item 3",
|
|
328
|
+
"expanded": true,
|
|
329
|
+
"sub": {
|
|
330
|
+
"items": [
|
|
331
|
+
{
|
|
332
|
+
"text": "Subitem 1",
|
|
333
|
+
"sub": {
|
|
334
|
+
"items": [
|
|
335
|
+
{
|
|
336
|
+
"text": "Subitem 1",
|
|
337
|
+
"value": "subitem-1"
|
|
338
|
+
},
|
|
339
|
+
{
|
|
340
|
+
"text": "Subitem 2",
|
|
341
|
+
"value": "subitem-2"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"text": "Subitem 3",
|
|
345
|
+
"value": "subitem-3"
|
|
346
|
+
}
|
|
347
|
+
]
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"text": "Subitem 2",
|
|
352
|
+
"sub": {
|
|
353
|
+
"items": [
|
|
354
|
+
{
|
|
355
|
+
"text": "Subitem 1",
|
|
356
|
+
"value": "subitem-1"
|
|
357
|
+
},
|
|
358
|
+
{
|
|
359
|
+
"text": "Subitem 2",
|
|
360
|
+
"value": "subitem-2"
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"text": "Subitem 3",
|
|
364
|
+
"value": "subitem-3"
|
|
365
|
+
}
|
|
366
|
+
]
|
|
367
|
+
}
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"text": "Subitem 3",
|
|
371
|
+
"sub": {
|
|
372
|
+
"items": [
|
|
373
|
+
{
|
|
374
|
+
"text": "Subitem 1",
|
|
375
|
+
"value": "subitem-1"
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"text": "Subitem 2",
|
|
379
|
+
"value": "subitem-2"
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"text": "Subitem 3",
|
|
383
|
+
"value": "subitem-3",
|
|
384
|
+
"expanded": true,
|
|
385
|
+
"sub": {
|
|
386
|
+
"items": [
|
|
387
|
+
{
|
|
388
|
+
"text": "Subitem 1",
|
|
389
|
+
"sub": {
|
|
390
|
+
"items": [
|
|
391
|
+
{
|
|
392
|
+
"text": "Subitem 1",
|
|
393
|
+
"value": "subitem-1"
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"text": "Subitem 2",
|
|
397
|
+
"value": "subitem-2"
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"text": "Subitem 3",
|
|
401
|
+
"value": "subitem-3"
|
|
402
|
+
}
|
|
403
|
+
]
|
|
404
|
+
}
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"text": "Subitem 2",
|
|
408
|
+
"sub": {
|
|
409
|
+
"items": [
|
|
410
|
+
{
|
|
411
|
+
"text": "Subitem 1",
|
|
412
|
+
"value": "subitem-1"
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"text": "Subitem 2",
|
|
416
|
+
"value": "subitem-2"
|
|
417
|
+
},
|
|
418
|
+
{
|
|
419
|
+
"text": "Subitem 3",
|
|
420
|
+
"value": "subitem-3"
|
|
421
|
+
}
|
|
422
|
+
]
|
|
423
|
+
}
|
|
424
|
+
},
|
|
425
|
+
{
|
|
426
|
+
"text": "Subitem 3",
|
|
427
|
+
"expanded": true,
|
|
428
|
+
"sub": {
|
|
429
|
+
"items": [
|
|
430
|
+
{
|
|
431
|
+
"text": "Subitem 1",
|
|
432
|
+
"value": "subitem-1"
|
|
433
|
+
},
|
|
434
|
+
{
|
|
435
|
+
"text": "Subitem 2",
|
|
436
|
+
"value": "subitem-2"
|
|
437
|
+
},
|
|
438
|
+
{
|
|
439
|
+
"text": "Subitem 3",
|
|
440
|
+
"value": "subitem-3"
|
|
441
|
+
}
|
|
442
|
+
]
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
]
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
]
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
]
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
]
|
|
455
|
+
}) }}
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
@@ -51,6 +51,11 @@
|
|
|
51
51
|
}) }}
|
|
52
52
|
{% include "ds/_ds.example.radios.njk" %}
|
|
53
53
|
<div class="pb-lg"></div>
|
|
54
|
+
{{ DSSubsectionTitle({
|
|
55
|
+
title: "Tree"
|
|
56
|
+
}) }}
|
|
57
|
+
{% include "ds/_ds.example.tree.njk" %}
|
|
58
|
+
<div class="pb-lg"></div>
|
|
54
59
|
{{ DSSubsectionTitle({
|
|
55
60
|
title: "Listbox por defecto"
|
|
56
61
|
}) }}
|
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
title: "Details"
|
|
21
21
|
}) }}
|
|
22
22
|
{% include "ds/_ds.example.details.njk" %}
|
|
23
|
+
<div class="pb-lg"></div>
|
|
24
|
+
{{ DSSubsectionTitle({
|
|
25
|
+
title: "Toggle"
|
|
26
|
+
}) }}
|
|
27
|
+
{% include "ds/_ds.example.toggle.njk" %}
|
|
23
28
|
<div class="pb-lg"></div>
|
|
24
29
|
{{ DSSubsectionTitle({
|
|
25
30
|
title: "Tabs"
|
package/docs/index.html
CHANGED
|
@@ -38,7 +38,25 @@
|
|
|
38
38
|
|
|
39
39
|
<h2>Changelog (English)</h2>
|
|
40
40
|
<p>What's new in the latest version of desy-html</p>
|
|
41
|
+
<h3>v.5.2.2</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Minor fixes.</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<h3>v.5.2.1</h3>
|
|
46
|
+
<ul class="text-sm">
|
|
47
|
+
<li>Docs improvements.</li>
|
|
48
|
+
</ul>
|
|
41
49
|
<h3>v.5.2.0</h3>
|
|
50
|
+
<ul class="text-sm">
|
|
51
|
+
<li>Added toggle component.</li>
|
|
52
|
+
<li>Added searchbar to tree component.</li>
|
|
53
|
+
<li>Minor validation fixes.</li>
|
|
54
|
+
</ul>
|
|
55
|
+
<h3>v.5.1.1</h3>
|
|
56
|
+
<ul class="text-sm">
|
|
57
|
+
<li>Fixed pagination from having too much listbox height.</li>
|
|
58
|
+
</ul>
|
|
59
|
+
<h3>v.5.1.0</h3>
|
|
42
60
|
<ul class="text-sm">
|
|
43
61
|
<li>Added tree component.</li>
|
|
44
62
|
</ul>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.2",
|
|
4
4
|
"description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Desy (SDA Servicios Digitales de Aragón)",
|
|
@@ -80,8 +80,7 @@
|
|
|
80
80
|
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
|
81
81
|
{%- if params.errorMessage %} aria-invalid="true"{% endif -%}
|
|
82
82
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
|
|
83
|
-
{%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}
|
|
84
|
-
{%- if item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
|
|
83
|
+
{%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
|
|
85
84
|
</div>
|
|
86
85
|
<div class="pt-0.5 leading-5">
|
|
87
86
|
{{ componentLabel({
|
|
@@ -73,6 +73,38 @@
|
|
|
73
73
|
{
|
|
74
74
|
"href": "#",
|
|
75
75
|
"text": 6
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"href": "#",
|
|
79
|
+
"text": 7
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"href": "#",
|
|
83
|
+
"text": 8
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"href": "#",
|
|
87
|
+
"text": 9
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"href": "#",
|
|
91
|
+
"text": 10
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"href": "#",
|
|
95
|
+
"text": 11
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"href": "#",
|
|
99
|
+
"text": 12
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"href": "#",
|
|
103
|
+
"text": 13
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"href": "#",
|
|
107
|
+
"text": 14
|
|
76
108
|
}
|
|
77
109
|
],
|
|
78
110
|
"hasPrevious": true,
|
|
@@ -95,6 +95,7 @@
|
|
|
95
95
|
"idPrefix": params.idPrefix,
|
|
96
96
|
"text": "Página " + params.items[activePosition].text,
|
|
97
97
|
"classes": "c-listbox--sm c-listbox--transparent mr-xs",
|
|
98
|
+
"classesTooltip": "max-h-52 overflow-y-auto",
|
|
98
99
|
"doesChangeButtonText": true,
|
|
99
100
|
"label": {
|
|
100
101
|
"text": "Selecciona una página para cargar datos",
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{% set exampleComponent = "toggle" %}
|
|
2
|
+
{% set examples = [
|
|
3
|
+
{
|
|
4
|
+
"name": "default",
|
|
5
|
+
"description": "Button like appearance, no change of button text, only changes in visual state",
|
|
6
|
+
"data": {
|
|
7
|
+
"classes": "c-button c-button--transparent no-underline",
|
|
8
|
+
"offState": {
|
|
9
|
+
"classes": "",
|
|
10
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Notificar por correo electrónico</span>'
|
|
11
|
+
},
|
|
12
|
+
"onState": {
|
|
13
|
+
"classes": "",
|
|
14
|
+
"html": 'Notificar por correo electrónico'
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"name": "2 icons",
|
|
20
|
+
"description": "Button like appearance, changes of button text, but no text changes for screenreaders",
|
|
21
|
+
"data": {
|
|
22
|
+
"classes": "c-button c-button--sm c-button--transparent no-underline",
|
|
23
|
+
"offState": {
|
|
24
|
+
"classes": "",
|
|
25
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar heredados del servicio</span><span class="sr-only">Mostrar heredados del servicio</span></span>'
|
|
26
|
+
},
|
|
27
|
+
"onState": {
|
|
28
|
+
"classes": "",
|
|
29
|
+
"html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar heredados del servicio</span>'
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"name": "isSwitch",
|
|
35
|
+
"description": "Switch appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-labelledby.",
|
|
36
|
+
"data": {
|
|
37
|
+
"classes": "",
|
|
38
|
+
"isSwitch": true,
|
|
39
|
+
"offState": {
|
|
40
|
+
"classes": "",
|
|
41
|
+
"html": '<span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
|
|
42
|
+
},
|
|
43
|
+
"onState": {
|
|
44
|
+
"classes": "",
|
|
45
|
+
"html": '<span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
|
|
46
|
+
},
|
|
47
|
+
"attributes": {
|
|
48
|
+
"aria-labelledby": "id-text"
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
] %}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<!-- toggle -->
|
|
2
|
+
<div
|
|
3
|
+
x-data="{
|
|
4
|
+
pressed: {{ params.pressed if params.pressed else 'false' }},
|
|
5
|
+
offClasses: '{{ params.offState.classes if params.offState.classes else '' }}',
|
|
6
|
+
onClasses: '{{ params.onState.classes if params.onState.classes else '' }}',
|
|
7
|
+
toggle() {
|
|
8
|
+
if (this.pressed) {
|
|
9
|
+
return this.unpress()
|
|
10
|
+
}
|
|
11
|
+
this.pressed = true
|
|
12
|
+
},
|
|
13
|
+
unpress() {
|
|
14
|
+
this.pressed = false
|
|
15
|
+
}
|
|
16
|
+
}"
|
|
17
|
+
x-id="['toggle-button']"
|
|
18
|
+
class="relative"
|
|
19
|
+
>
|
|
20
|
+
<!-- Button -->
|
|
21
|
+
<button
|
|
22
|
+
x-ref="button"
|
|
23
|
+
x-on:click="toggle()"
|
|
24
|
+
{% if params.isSwitch %}
|
|
25
|
+
role = "switch"
|
|
26
|
+
:aria-checked="pressed ? 'true' : 'false'"
|
|
27
|
+
{% else %}
|
|
28
|
+
:aria-pressed="pressed ? 'true' : 'false'"
|
|
29
|
+
{% endif %}
|
|
30
|
+
type="button"
|
|
31
|
+
class="{{ params.classes if params.classes else '' }}"
|
|
32
|
+
:class="pressed ? onClasses : offClasses"
|
|
33
|
+
{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
|
|
34
|
+
>
|
|
35
|
+
<span :class="pressed ? 'hidden' : ''">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
|
|
36
|
+
<span :class="pressed ? '' : 'hidden'">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
|
|
37
|
+
</button>
|
|
38
|
+
</div>
|
|
39
|
+
<!-- /toggle -->
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
params:
|
|
2
|
+
- name: isSwitch
|
|
3
|
+
type: boolean
|
|
4
|
+
required: false
|
|
5
|
+
description: Defaults to `false`. If `true` the button has role `switch` and has `aria-checked` instead of `aria-pressed`.
|
|
6
|
+
- name: pressed
|
|
7
|
+
type: boolean
|
|
8
|
+
required: false
|
|
9
|
+
description: Defaults to `false`. If `true` the button informs the screenreader that the button is pressed.
|
|
10
|
+
- name: onState
|
|
11
|
+
type: object
|
|
12
|
+
required: true
|
|
13
|
+
description: On state elements
|
|
14
|
+
- name: text
|
|
15
|
+
type: string
|
|
16
|
+
required: true
|
|
17
|
+
description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
|
|
18
|
+
- name: html
|
|
19
|
+
type: string
|
|
20
|
+
required: true
|
|
21
|
+
description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
|
|
22
|
+
- name: classes
|
|
23
|
+
type: string
|
|
24
|
+
required: false
|
|
25
|
+
description: Classes to add to the state span tag.
|
|
26
|
+
- name: attributes
|
|
27
|
+
type: object
|
|
28
|
+
required: false
|
|
29
|
+
description: HTML attributes (for example data attributes) to add to the state span tag.
|
|
30
|
+
- name: offState
|
|
31
|
+
type: object
|
|
32
|
+
required: true
|
|
33
|
+
description: Off state elements
|
|
34
|
+
- name: text
|
|
35
|
+
type: string
|
|
36
|
+
required: true
|
|
37
|
+
description: If `html` is set, this is not required. Text to use within the state. If `html` is provided, the `text` argument will be ignored.
|
|
38
|
+
- name: html
|
|
39
|
+
type: string
|
|
40
|
+
required: true
|
|
41
|
+
description: If `text` is set, this is not required. HTML to use within the state. If `html` is provided, the `text` argument will be ignored.
|
|
42
|
+
- name: classes
|
|
43
|
+
type: string
|
|
44
|
+
required: false
|
|
45
|
+
description: Classes to add to the state span tag.
|
|
46
|
+
- name: attributes
|
|
47
|
+
type: object
|
|
48
|
+
required: false
|
|
49
|
+
description: HTML attributes (for example data attributes) to add to the state span tag.
|
|
50
|
+
- name: classes
|
|
51
|
+
type: string
|
|
52
|
+
required: false
|
|
53
|
+
description: Classes to add to the test component span tag.
|
|
54
|
+
- name: attributes
|
|
55
|
+
type: object
|
|
56
|
+
required: false
|
|
57
|
+
description: HTML attributes (for example data attributes) to add to the test component span tag.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!--
|
|
1
|
+
<!-- tooltip -->
|
|
2
2
|
{% set idButton = params.id + "-button" %}
|
|
3
3
|
{% set idTooltip = params.id + "-tooltip" %}
|
|
4
4
|
<div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
|
|
@@ -37,4 +37,4 @@
|
|
|
37
37
|
{% endif %}
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
<!-- /
|
|
40
|
+
<!-- /tooltip -->
|
|
@@ -636,7 +636,7 @@
|
|
|
636
636
|
"hint": {
|
|
637
637
|
"text": "Selecciona el organismo al que perteneces."
|
|
638
638
|
},
|
|
639
|
-
"idPrefix": "
|
|
639
|
+
"idPrefix": "indeterminate-example",
|
|
640
640
|
"items": [
|
|
641
641
|
{
|
|
642
642
|
"text": "Item 1",
|
|
@@ -717,6 +717,190 @@
|
|
|
717
717
|
]
|
|
718
718
|
}
|
|
719
719
|
},
|
|
720
|
+
{
|
|
721
|
+
"name": "with searchbar",
|
|
722
|
+
"data": {
|
|
723
|
+
"name": "with-searchbar",
|
|
724
|
+
"classes": "mt-base",
|
|
725
|
+
"fieldset": {
|
|
726
|
+
"legend": {
|
|
727
|
+
"text": "Selecciona organismo"
|
|
728
|
+
}
|
|
729
|
+
},
|
|
730
|
+
"searchbar": {
|
|
731
|
+
"id": "with-searchbar-searchbar",
|
|
732
|
+
"label": {
|
|
733
|
+
"text": "Buscar"
|
|
734
|
+
},
|
|
735
|
+
"placeholder": "Buscar organismo"
|
|
736
|
+
},
|
|
737
|
+
"items": [
|
|
738
|
+
{
|
|
739
|
+
"text": "Item 1",
|
|
740
|
+
"id": "with-searchbar-item-1",
|
|
741
|
+
"sub": {
|
|
742
|
+
"items": [
|
|
743
|
+
{
|
|
744
|
+
"text": "Subitem 1",
|
|
745
|
+
"value": "subitem-1"
|
|
746
|
+
},
|
|
747
|
+
{
|
|
748
|
+
"text": "Subitem 2",
|
|
749
|
+
"value": "subitem-2"
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
"text": "Subitem 3",
|
|
753
|
+
"value": "subitem-3"
|
|
754
|
+
}
|
|
755
|
+
],
|
|
756
|
+
"attributes": {
|
|
757
|
+
"aria-labelledby": "with-searchbar-item-1"
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
},
|
|
761
|
+
{
|
|
762
|
+
"text": "Item 2",
|
|
763
|
+
"id": "with-searchbar-item-2",
|
|
764
|
+
"sub": {
|
|
765
|
+
"items": [
|
|
766
|
+
{
|
|
767
|
+
"text": "Subitem 1",
|
|
768
|
+
"value": "subitem-1"
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"text": "Subitem 2",
|
|
772
|
+
"value": "subitem-2"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"text": "Subitem 3",
|
|
776
|
+
"value": "subitem-3"
|
|
777
|
+
}
|
|
778
|
+
],
|
|
779
|
+
"attributes": {
|
|
780
|
+
"aria-labelledby": "with-searchbar-item-2"
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
},
|
|
784
|
+
{
|
|
785
|
+
"text": "Item 3",
|
|
786
|
+
"id": "with-searchbar-item-3",
|
|
787
|
+
"sub": {
|
|
788
|
+
"items": [
|
|
789
|
+
{
|
|
790
|
+
"text": "Subitem 1",
|
|
791
|
+
"value": "subitem-1"
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
"text": "Subitem 2",
|
|
795
|
+
"value": "subitem-2"
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"text": "Subitem 3",
|
|
799
|
+
"value": "subitem-3"
|
|
800
|
+
}
|
|
801
|
+
],
|
|
802
|
+
"attributes": {
|
|
803
|
+
"aria-labelledby": "with-searchbar-item-3"
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
]
|
|
808
|
+
}
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
"name": "with searchbar error",
|
|
812
|
+
"data": {
|
|
813
|
+
"name": "with-searchbar-error",
|
|
814
|
+
"classes": "mt-base",
|
|
815
|
+
"fieldset": {
|
|
816
|
+
"legend": {
|
|
817
|
+
"text": "Selecciona organismo"
|
|
818
|
+
}
|
|
819
|
+
},
|
|
820
|
+
"searchbar": {
|
|
821
|
+
"id": "with-searchbar-error-searchbar",
|
|
822
|
+
"label": {
|
|
823
|
+
"text": "Buscar"
|
|
824
|
+
},
|
|
825
|
+
"placeholder": "Buscar organismo",
|
|
826
|
+
"errorMessage": {
|
|
827
|
+
"text": "Error: Introduce al menos un carácter",
|
|
828
|
+
"classes": "mt-xs"
|
|
829
|
+
}
|
|
830
|
+
},
|
|
831
|
+
"items": [
|
|
832
|
+
{
|
|
833
|
+
"text": "Item 1",
|
|
834
|
+
"id": "with-searchbar-error-item-1",
|
|
835
|
+
"sub": {
|
|
836
|
+
"items": [
|
|
837
|
+
{
|
|
838
|
+
"text": "Subitem 1",
|
|
839
|
+
"value": "subitem-1"
|
|
840
|
+
},
|
|
841
|
+
{
|
|
842
|
+
"text": "Subitem 2",
|
|
843
|
+
"value": "subitem-2"
|
|
844
|
+
},
|
|
845
|
+
{
|
|
846
|
+
"text": "Subitem 3",
|
|
847
|
+
"value": "subitem-3"
|
|
848
|
+
}
|
|
849
|
+
],
|
|
850
|
+
"attributes": {
|
|
851
|
+
"aria-labelledby": "with-searchbar-error-item-1"
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
},
|
|
855
|
+
{
|
|
856
|
+
"text": "Item 2",
|
|
857
|
+
"id": "with-searchbar-error-item-2",
|
|
858
|
+
"sub": {
|
|
859
|
+
"items": [
|
|
860
|
+
{
|
|
861
|
+
"text": "Subitem 1",
|
|
862
|
+
"value": "subitem-1"
|
|
863
|
+
},
|
|
864
|
+
{
|
|
865
|
+
"text": "Subitem 2",
|
|
866
|
+
"value": "subitem-2"
|
|
867
|
+
},
|
|
868
|
+
{
|
|
869
|
+
"text": "Subitem 3",
|
|
870
|
+
"value": "subitem-3"
|
|
871
|
+
}
|
|
872
|
+
],
|
|
873
|
+
"attributes": {
|
|
874
|
+
"aria-labelledby": "with-searchbar-error-item-2"
|
|
875
|
+
}
|
|
876
|
+
}
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"text": "Item 3",
|
|
880
|
+
"id": "with-searchbar-error-item-3",
|
|
881
|
+
"sub": {
|
|
882
|
+
"items": [
|
|
883
|
+
{
|
|
884
|
+
"text": "Subitem 1",
|
|
885
|
+
"value": "subitem-1"
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"text": "Subitem 2",
|
|
889
|
+
"value": "subitem-2"
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
"text": "Subitem 3",
|
|
893
|
+
"value": "subitem-3"
|
|
894
|
+
}
|
|
895
|
+
],
|
|
896
|
+
"attributes": {
|
|
897
|
+
"aria-labelledby": "with-searchbar-error-item-3"
|
|
898
|
+
}
|
|
899
|
+
}
|
|
900
|
+
}
|
|
901
|
+
]
|
|
902
|
+
}
|
|
903
|
+
},
|
|
720
904
|
{
|
|
721
905
|
"name": "small",
|
|
722
906
|
"description": "with classes applied",
|
|
@@ -748,8 +932,8 @@
|
|
|
748
932
|
"classes": "text-sm -mt-1"
|
|
749
933
|
},
|
|
750
934
|
"expanded": true,
|
|
935
|
+
"id": "classes-1",
|
|
751
936
|
"sub": {
|
|
752
|
-
"id": "classes-1",
|
|
753
937
|
"items": [
|
|
754
938
|
{
|
|
755
939
|
"text": "Item",
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
|
|
3
3
|
{% from "../hint/_macro.hint.njk" import componentHint %}
|
|
4
4
|
{% from "../label/_macro.label.njk" import componentLabel %}
|
|
5
|
+
{% from "../searchbar/_macro.searchbar.njk" import componentSearchbar %}
|
|
5
6
|
|
|
6
7
|
{#- If an id 'prefix' is not passed, fall back to using the name attribute
|
|
7
8
|
instead. We need this for error messages and hints as well -#}
|
|
@@ -28,14 +29,13 @@
|
|
|
28
29
|
<div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
|
|
29
30
|
<div class="relative flex items-start py-xs">
|
|
30
31
|
<div class="flex items-center mx-sm">
|
|
31
|
-
<input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif
|
|
32
|
+
<input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
|
|
32
33
|
{{-" checked" if item.checked }}
|
|
33
34
|
{{-" disabled" if item.disabled }}
|
|
34
35
|
{%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
|
|
35
36
|
{%- if params.errorMessage %} aria-invalid="true"{% endif -%}
|
|
36
37
|
{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
|
|
37
|
-
{%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}
|
|
38
|
-
{%- if item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
|
|
38
|
+
{%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
|
|
39
39
|
</div>
|
|
40
40
|
<div class="flex-1 pt-0.5 leading-5">
|
|
41
41
|
{{ componentLabel({
|
|
@@ -63,14 +63,14 @@
|
|
|
63
63
|
{% macro childrenTree(itemNode, id, name, type) %}
|
|
64
64
|
{% if itemNode.sub %}
|
|
65
65
|
<div class="w-full h-full">
|
|
66
|
-
<
|
|
66
|
+
<div class="w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
|
|
67
67
|
{%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
68
68
|
<span class="absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold">
|
|
69
69
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
|
|
70
70
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
|
|
71
71
|
</span>
|
|
72
72
|
{{ checkboxItem(itemNode, id, name, type) }}
|
|
73
|
-
</
|
|
73
|
+
</div>
|
|
74
74
|
</div>
|
|
75
75
|
{% else %}
|
|
76
76
|
{{ checkboxItem(itemNode, id, name, type) }}
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
{% else %}
|
|
93
93
|
<div {%- if subitem.id %} id="{{ id }}"{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
94
94
|
{% if subitem.active %}
|
|
95
|
-
<
|
|
95
|
+
<div class="font-bold">
|
|
96
96
|
{{ checkboxItem(subitem, subId, name, type) }}
|
|
97
|
-
</
|
|
97
|
+
</div>
|
|
98
98
|
{% else %}
|
|
99
99
|
{{ checkboxItem(subitem, subId, name, type) }}
|
|
100
100
|
{% endif %}
|
|
@@ -132,7 +132,10 @@
|
|
|
132
132
|
visuallyHiddenText: params.errorMessage.visuallyHiddenText
|
|
133
133
|
}) | indent(2) | trim }}
|
|
134
134
|
{% endif %}
|
|
135
|
-
|
|
135
|
+
{% if params.searchbar %}
|
|
136
|
+
{{ componentSearchbar(params.searchbar) }}
|
|
137
|
+
{% endif %}
|
|
138
|
+
<ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" role="tree" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
|
|
136
139
|
{% for item in params.items %}
|
|
137
140
|
{% if item %}
|
|
138
141
|
{#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
|
|
@@ -3,6 +3,10 @@ params:
|
|
|
3
3
|
type: string
|
|
4
4
|
required: false
|
|
5
5
|
description: Type of input control to render. Admitted values are `checkbox` and `radio` or not set. Defaults to `radio`.
|
|
6
|
+
- name: searchbar
|
|
7
|
+
type: component
|
|
8
|
+
required: false
|
|
9
|
+
description: A searchbar component to filter the items. Inherits all the searchbar component params.
|
|
6
10
|
- name: describedBy
|
|
7
11
|
type: string
|
|
8
12
|
required: false
|