desy-html 5.0.1 → 5.2.1
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 +8 -0
- package/docs/_macro.example-render.njk +8 -0
- package/docs/componentes.html +6 -0
- package/docs/ds/_ds.example.menu-vertical.njk +3 -3
- 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/examples-tree.html +5 -0
- package/docs/index.html +20 -1
- package/package.json +1 -1
- package/src/css/styles.css +1 -0
- package/src/js/aria/tree.js +245 -0
- package/src/js/aria/treeitem.js +260 -0
- package/src/js/desy-html.js +28 -0
- package/src/js/index.js +3 -1
- package/src/templates/components/checkboxes/_template.checkboxes.njk +1 -2
- package/src/templates/components/menubar/_examples.menubar.njk +169 -0
- 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 +37 -0
- package/src/templates/components/toggle/params.toggle.yaml +57 -0
- package/src/templates/components/tree/_examples.tree.njk +1171 -0
- package/src/templates/components/tree/_macro.tree.njk +3 -0
- package/src/templates/components/tree/_styles.tree.css +45 -0
- package/src/templates/components/tree/_template.tree.njk +178 -0
- package/src/templates/components/tree/params.tree.yaml +163 -0
|
@@ -250,9 +250,17 @@
|
|
|
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"
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
href: "examples-tree.html",
|
|
263
|
+
text: "Tree"
|
|
256
264
|
}],
|
|
257
265
|
attributes: {
|
|
258
266
|
"aria-label": "Navegación ejemplos"
|
|
@@ -89,8 +89,12 @@ 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 %}
|
|
96
|
+
{% from "components/tree/_macro.tree.njk"
|
|
97
|
+
import componentTree %}
|
|
94
98
|
|
|
95
99
|
{% macro exampleRender(data) %}
|
|
96
100
|
{% set exampleComponent = data.data.exampleComponent %}
|
|
@@ -204,8 +208,12 @@ import componentTooltip %}
|
|
|
204
208
|
{{ componentTabs(example.data) }}
|
|
205
209
|
{% elseif exampleComponent == "textarea" %}
|
|
206
210
|
{{ componentTextarea(example.data) }}
|
|
211
|
+
{% elseif exampleComponent == "toggle" %}
|
|
212
|
+
{{ componentToggle(example.data) }}
|
|
207
213
|
{% elseif exampleComponent == "tooltip" %}
|
|
208
214
|
{{ componentTooltip(example.data) }}
|
|
215
|
+
{% elseif exampleComponent == "tree" %}
|
|
216
|
+
{{ componentTree(example.data) }}
|
|
209
217
|
{% endif %}
|
|
210
218
|
<div class="mt-xl py-base">
|
|
211
219
|
<span x-text="textShow" @click="isOpenCode = !isOpenCode; isOpenCode ? textShow = 'Hide code' : textShow = 'Show code'" class="text-primary-base hover:text-primary-dark underline cursor-pointer">Show code</span>
|
package/docs/componentes.html
CHANGED
|
@@ -145,9 +145,15 @@
|
|
|
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>
|
|
154
|
+
<div>
|
|
155
|
+
<p class="c-paragraph-base"><a href="examples-tree.html" class="c-link">Tree</a></p>
|
|
156
|
+
</div>
|
|
151
157
|
</div>
|
|
152
158
|
<div class="pb-2xl"></div>
|
|
153
159
|
{% endblock %}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
],
|
|
30
30
|
"attributes": {
|
|
31
|
-
"aria-label": "
|
|
31
|
+
"aria-label": "Árbol"
|
|
32
32
|
}
|
|
33
33
|
}) }}
|
|
34
34
|
</div>
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
],
|
|
60
60
|
"attributes": {
|
|
61
|
-
"aria-label": "
|
|
61
|
+
"aria-label": "Árbol"
|
|
62
62
|
}
|
|
63
63
|
}) }}
|
|
64
64
|
</div>
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
}
|
|
124
124
|
],
|
|
125
125
|
"attributes": {
|
|
126
|
-
"aria-label": "
|
|
126
|
+
"aria-label": "Árbol"
|
|
127
127
|
}
|
|
128
128
|
}) }}
|
|
129
129
|
</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,10 +38,29 @@
|
|
|
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.1</h3>
|
|
42
|
+
<ul class="text-sm">
|
|
43
|
+
<li>Docs improvements.</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<h3>v.5.2.0</h3>
|
|
46
|
+
<ul class="text-sm">
|
|
47
|
+
<li>Added toggle component.</li>
|
|
48
|
+
<li>Added searchbar to tree component.</li>
|
|
49
|
+
<li>Minor validation fixes.</li>
|
|
50
|
+
</ul>
|
|
51
|
+
<h3>v.5.1.1</h3>
|
|
52
|
+
<ul class="text-sm">
|
|
53
|
+
<li>Fixed pagination from having too much listbox height.</li>
|
|
54
|
+
</ul>
|
|
55
|
+
<h3>v.5.1.0</h3>
|
|
56
|
+
<ul class="text-sm">
|
|
57
|
+
<li>Added tree component.</li>
|
|
58
|
+
</ul>
|
|
41
59
|
<h3>v.5.0.1</h3>
|
|
42
60
|
<ul class="text-sm">
|
|
43
61
|
<li>Fixed accesibility bad semantics in subnav. Added dropdown contentHtml rendering and example.</li>
|
|
44
|
-
</ul
|
|
62
|
+
</ul>
|
|
63
|
+
<h3>v.5.0.0</h3>
|
|
45
64
|
<ul class="text-sm">
|
|
46
65
|
<li>Header now uses correct dropdown params.</li>
|
|
47
66
|
</ul>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.2.1",
|
|
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)",
|