desy-html 11.1.2 → 12.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.
- package/docs/_global.foot.njk +1 -1
- package/docs/_macro.example-render.njk +62 -18
- package/docs/ds/_ds.example.botones-primary-lg.njk +265 -0
- package/docs/ds/_ds.example.dropdowns-variaciones.njk +37 -0
- package/docs/ds/_ds.example.listbox-variaciones.njk +137 -0
- package/docs/ds/_ds.example.tabs.njk +44 -0
- package/docs/ds/_ds.example.textos.njk +5 -0
- package/docs/ds/_ds.section.botones.njk +5 -0
- package/docs/ds/_ds.section.textos.njk +11 -1
- package/docs/index.html +19 -0
- package/docs/pagina-prueba.html +2 -2
- package/package.json +3 -3
- package/src/css/component.text.css +33 -26
- package/src/js/aria/linksList.js +42 -0
- package/src/js/aria/treeitem.js +9 -2
- package/src/js/aria/utils.js +80 -15
- package/src/js/desy-html.js +249 -196
- package/src/js/filters/filter-caller.js +4 -2
- package/src/js/filters/filter-escape-ltgt.js +7 -0
- package/src/js/filters/filter-quotes.js +50 -0
- package/src/js/filters/filter-version.js +8 -0
- package/src/js/filters/index.js +7 -1
- package/src/js/index.js +2 -0
- package/src/templates/components/accordion/_examples.accordion.njk +107 -107
- package/src/templates/components/accordion/_template.accordion.njk +5 -5
- package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
- package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
- package/src/templates/components/alert/_examples.alert.njk +2 -2
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
- package/src/templates/components/button/_examples.button.njk +28 -21
- package/src/templates/components/button/_styles.button.css +7 -0
- package/src/templates/components/button/_template.button.njk +2 -2
- package/src/templates/components/button-loader/_examples.button-loader.njk +25 -18
- package/src/templates/components/button-loader/_styles.button-loader.css +6 -0
- package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
- package/src/templates/components/card/_examples.card.njk +3 -3
- package/src/templates/components/card/_template.card.njk +4 -4
- package/src/templates/components/character-count/_examples.character-count.njk +2 -2
- package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
- package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
- package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
- package/src/templates/components/date-input/_template.date-input.njk +1 -1
- package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
- package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
- package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
- package/src/templates/components/description-list/_examples.description-list.njk +3 -3
- package/src/templates/components/description-list/_template.description-list.njk +2 -2
- package/src/templates/components/details/_examples.details.njk +3 -3
- package/src/templates/components/details/_template.details.njk +1 -1
- package/src/templates/components/dialog/_examples.dialog.njk +4 -4
- package/src/templates/components/dropdown/_examples.dropdown.njk +38 -16
- package/src/templates/components/dropdown/_styles.dropdown.css +7 -0
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-message/_examples.error-message.njk +1 -1
- package/src/templates/components/error-message/_template.error-message.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
- package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
- package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
- package/src/templates/components/footer/_examples.footer.njk +32 -32
- package/src/templates/components/footer/_template.footer.njk +6 -6
- package/src/templates/components/header/_examples.header.njk +14 -8
- package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
- package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
- package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
- package/src/templates/components/header/_template.header.njk +2 -2
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
- package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
- package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
- package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
- package/src/templates/components/hint/_examples.hint.njk +1 -1
- package/src/templates/components/hint/_template.hint.njk +1 -1
- package/src/templates/components/input/_examples.input.njk +7 -7
- package/src/templates/components/input-group/_examples.input-group.njk +1 -1
- package/src/templates/components/input-group/_template.input-group.njk +1 -1
- package/src/templates/components/item/_examples.item.njk +23 -23
- package/src/templates/components/item/_template.item.njk +9 -9
- package/src/templates/components/label/_examples.label.njk +2 -2
- package/src/templates/components/label/_template.label.njk +1 -1
- package/src/templates/components/links-list/_examples.links-list.njk +54 -34
- package/src/templates/components/links-list/_template.links-list.njk +15 -15
- package/src/templates/components/listbox/_examples.listbox.njk +52 -17
- package/src/templates/components/listbox/_styles.listbox.css +7 -0
- package/src/templates/components/listbox/_template.listbox.njk +5 -5
- package/src/templates/components/media-object/_examples.media-object.njk +5 -5
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +93 -9
- package/src/templates/components/menu-navigation/_styles.menu-navigation.css +7 -0
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
- package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
- package/src/templates/components/menubar/_examples.menubar.njk +169 -15
- package/src/templates/components/menubar/_styles.menubar.css +8 -1
- package/src/templates/components/menubar/_template.menubar.njk +7 -7
- package/src/templates/components/modal/_examples.modal.njk +18 -18
- package/src/templates/components/modal/_template.modal.njk +8 -8
- package/src/templates/components/nav/_examples.nav.njk +7 -7
- package/src/templates/components/nav/_template.nav.njk +2 -2
- package/src/templates/components/notification/_examples.notification.njk +9 -9
- package/src/templates/components/notification/_template.notification.njk +11 -11
- package/src/templates/components/pagination/_examples.pagination.njk +6 -6
- package/src/templates/components/pagination/_template.pagination.njk +3 -3
- package/src/templates/components/pill/_examples.pill.njk +8 -8
- package/src/templates/components/pill/_template.pill.njk +3 -3
- package/src/templates/components/radios/_examples.radios.njk +2 -2
- package/src/templates/components/radios/_template.radios.njk +1 -1
- package/src/templates/components/select/_examples.select.njk +1 -1
- package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
- package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
- package/src/templates/components/status/_examples.status.njk +1 -1
- package/src/templates/components/status/_template.status.njk +1 -1
- package/src/templates/components/status-item/_examples.status-item.njk +15 -15
- package/src/templates/components/status-item/_template.status-item.njk +3 -3
- package/src/templates/components/table/_examples.table.njk +3 -3
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +96 -6
- package/src/templates/components/table-advanced/_template.table-advanced.njk +8 -8
- package/src/templates/components/table-advanced/params.table-advanced.yaml +4 -0
- package/src/templates/components/tabs/_examples.tabs.njk +57 -14
- package/src/templates/components/tabs/_styles.tabs.css +31 -8
- package/src/templates/components/tabs/_template.tabs.njk +8 -8
- package/src/templates/components/tabs/params.tabs.yaml +4 -0
- package/src/templates/components/textarea/_examples.textarea.njk +2 -2
- package/src/templates/components/toggle/_examples.toggle.njk +29 -29
- package/src/templates/components/toggle/_template.toggle.njk +2 -2
- package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
- package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
- package/src/templates/components/tree/_examples.tree.njk +112 -47
- package/src/templates/components/tree/_template.tree.njk +6 -6
- package/src/templates/includes/_test-include.njk +2 -2
- package/src/templates/pages/_page.footer.njk +1 -1
- package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
|
@@ -11,8 +11,8 @@
|
|
|
11
11
|
},
|
|
12
12
|
"classes": "c-select--sm w-full",
|
|
13
13
|
"label": {
|
|
14
|
-
"text": "Selecciona año",
|
|
15
|
-
"classes": "text-sm"
|
|
14
|
+
"text": "Selecciona un año para cargar sus datos",
|
|
15
|
+
"classes": "max-w-40 text-sm"
|
|
16
16
|
},
|
|
17
17
|
"items": [
|
|
18
18
|
{
|
|
@@ -47,9 +47,10 @@
|
|
|
47
47
|
|
|
48
48
|
{% set calendarDateExample %}
|
|
49
49
|
<calendar-date
|
|
50
|
-
min="
|
|
51
|
-
max="
|
|
52
|
-
locale="es
|
|
50
|
+
min="01-01-2024"
|
|
51
|
+
max="01-01-2025"
|
|
52
|
+
locale="es"
|
|
53
|
+
format="DD-MM-YYYY"
|
|
53
54
|
>
|
|
54
55
|
{{ buttonLeft | safe }}
|
|
55
56
|
{{ buttonRight | safe }}
|
|
@@ -61,10 +62,10 @@
|
|
|
61
62
|
|
|
62
63
|
{% macro calendarDateYearsExample(id='id') %}
|
|
63
64
|
<calendar-date
|
|
64
|
-
value="
|
|
65
|
-
min="
|
|
66
|
-
max="
|
|
67
|
-
locale="es
|
|
65
|
+
value="01-10-2024"
|
|
66
|
+
min="01-01-2024"
|
|
67
|
+
max="12-31-2024"
|
|
68
|
+
locale="es"
|
|
68
69
|
>
|
|
69
70
|
{{ buttonLeft | safe }}
|
|
70
71
|
{{ buttonRight | safe }}
|
|
@@ -77,10 +78,10 @@
|
|
|
77
78
|
|
|
78
79
|
{% set calendarMultiExample %}
|
|
79
80
|
<calendar-multi
|
|
80
|
-
value="
|
|
81
|
-
min="
|
|
82
|
-
max="
|
|
83
|
-
locale="es
|
|
81
|
+
value="10-01-2024 20-01-2024"
|
|
82
|
+
min="01-01-2024"
|
|
83
|
+
max="31-12-2024"
|
|
84
|
+
locale="es"
|
|
84
85
|
>
|
|
85
86
|
{{ buttonLeft | safe }}
|
|
86
87
|
{{ buttonRight | safe }}
|
|
@@ -92,10 +93,10 @@
|
|
|
92
93
|
|
|
93
94
|
{% set calendarRangeExample %}
|
|
94
95
|
<calendar-range
|
|
95
|
-
value="
|
|
96
|
-
min="
|
|
97
|
-
max="
|
|
98
|
-
locale="es
|
|
96
|
+
value="10-01-2024/20-01-2024"
|
|
97
|
+
min="01-01-2024"
|
|
98
|
+
max="21-12-2024"
|
|
99
|
+
locale="es"
|
|
99
100
|
>
|
|
100
101
|
{{ buttonLeft | safe }}
|
|
101
102
|
{{ buttonRight | safe }}
|
|
@@ -108,10 +109,10 @@
|
|
|
108
109
|
{% macro calendarRangeExample2(id='id') %}
|
|
109
110
|
<calendar-range
|
|
110
111
|
months="2"
|
|
111
|
-
value="
|
|
112
|
-
min="
|
|
113
|
-
max="
|
|
114
|
-
locale="es
|
|
112
|
+
value="01-01-2025/16-01-2025"
|
|
113
|
+
min="01-01-2025"
|
|
114
|
+
max="31-12-2025"
|
|
115
|
+
locale="es"
|
|
115
116
|
>
|
|
116
117
|
{{ buttonLeft | safe }}
|
|
117
118
|
{{ buttonRight | safe }}
|
|
@@ -127,7 +128,7 @@
|
|
|
127
128
|
{% set examples = [
|
|
128
129
|
{
|
|
129
130
|
"name": "standalone fecha única",
|
|
130
|
-
"description":
|
|
131
|
+
"description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente.",
|
|
131
132
|
"data": {
|
|
132
133
|
"id": "datepicker-date",
|
|
133
134
|
"standalone": true,
|
|
@@ -136,7 +137,7 @@
|
|
|
136
137
|
},
|
|
137
138
|
{
|
|
138
139
|
"name": "standalone fecha única y selector de año",
|
|
139
|
-
"description":
|
|
140
|
+
"description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot 'header' del calendario de Cally para añadirle un componente Select como selector de año.",
|
|
140
141
|
"data": {
|
|
141
142
|
"id": "datepicker-years",
|
|
142
143
|
"standalone": true,
|
|
@@ -145,7 +146,7 @@
|
|
|
145
146
|
},
|
|
146
147
|
{
|
|
147
148
|
"name": "standalone fechas múltiples",
|
|
148
|
-
"description":
|
|
149
|
+
"description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code><calendar-multi></code> de Cally para se puedan seleccionar múltiples fechas.",
|
|
149
150
|
"data": {
|
|
150
151
|
"id": "datepicker-multi",
|
|
151
152
|
"standalone": true,
|
|
@@ -154,7 +155,7 @@
|
|
|
154
155
|
},
|
|
155
156
|
{
|
|
156
157
|
"name": "standalone rango de fechas",
|
|
157
|
-
"description":
|
|
158
|
+
"description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code><calendar-range></code> de Cally para que tenga un selector de rangos de fecha.",
|
|
158
159
|
"data": {
|
|
159
160
|
"id": "datepicker-range",
|
|
160
161
|
"standalone": true,
|
|
@@ -163,7 +164,7 @@
|
|
|
163
164
|
},
|
|
164
165
|
{
|
|
165
166
|
"name": "standalone rango de fechas 2 meses y selector de año",
|
|
166
|
-
"description":
|
|
167
|
+
"description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='inline-block mx-xs no-underline align-baseline' aria-hidden='true' focusable='false' role='img'><g><path fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg></a> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <code><calendar-range months='2'></code> y <code><calendar-month offset='1'></code> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.",
|
|
167
168
|
"data": {
|
|
168
169
|
"id": "datepicker-range2",
|
|
169
170
|
"standalone": true,
|
|
@@ -179,72 +180,54 @@
|
|
|
179
180
|
"text": "Elige fecha de inicio"
|
|
180
181
|
},
|
|
181
182
|
"hint": {
|
|
182
|
-
"html":
|
|
183
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
|
|
183
184
|
},
|
|
184
|
-
"pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
|
|
185
185
|
"caller": calendarDateExample | safe
|
|
186
186
|
}
|
|
187
187
|
},
|
|
188
188
|
{
|
|
189
189
|
"name": "Fechas múltiples",
|
|
190
190
|
"data": {
|
|
191
|
-
"id": "datepicker-
|
|
191
|
+
"id": "datepicker-multiple-dates",
|
|
192
192
|
"name": "test-name",
|
|
193
193
|
"label": {
|
|
194
194
|
"text": "Elige tus días disponibles"
|
|
195
195
|
},
|
|
196
196
|
"hint": {
|
|
197
|
-
"html":
|
|
197
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
|
|
198
198
|
},
|
|
199
|
-
"value": "
|
|
199
|
+
"value": "10-01-2024 20-01-2024",
|
|
200
200
|
"caller": calendarMultiExample | safe
|
|
201
201
|
}
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"name": "Rango de fechas",
|
|
205
205
|
"data": {
|
|
206
|
-
"id": "datepicker-
|
|
206
|
+
"id": "datepicker-range3",
|
|
207
207
|
"name": "test-name",
|
|
208
208
|
"label": {
|
|
209
209
|
"text": "Elige tus días disponibles"
|
|
210
210
|
},
|
|
211
211
|
"hint": {
|
|
212
|
-
"html":
|
|
212
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
|
|
213
213
|
},
|
|
214
|
-
"value": "
|
|
214
|
+
"value": "10-01-2024/20-01-2024",
|
|
215
215
|
"caller": calendarRangeExample | safe
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
{
|
|
219
219
|
"name": "Rango de fechas 2 meses y selector de año",
|
|
220
220
|
"data": {
|
|
221
|
-
"id": "datepicker-with-hint-text",
|
|
221
|
+
"id": "datepicker-with-hint-text-and-year",
|
|
222
222
|
"name": "test-name",
|
|
223
223
|
"label": {
|
|
224
224
|
"text": "Elige tus días disponibles"
|
|
225
225
|
},
|
|
226
226
|
"hint": {
|
|
227
|
-
"html":
|
|
228
|
-
},
|
|
229
|
-
"value": "2024-01-16/2024-02-04",
|
|
230
|
-
"caller": calendarRangeExample2('datepicker-with-hint-text') | safe
|
|
231
|
-
}
|
|
232
|
-
},
|
|
233
|
-
{
|
|
234
|
-
"name": "con placeholder y label invisible",
|
|
235
|
-
"data": {
|
|
236
|
-
"id": "datepicker-with-placeholder",
|
|
237
|
-
"name": "test-name",
|
|
238
|
-
"label": {
|
|
239
|
-
"text": "Elige rango de fechas",
|
|
240
|
-
"classes": "sr-only"
|
|
241
|
-
},
|
|
242
|
-
"hint": {
|
|
243
|
-
"html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.',
|
|
244
|
-
"classes": "sr-only"
|
|
227
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
|
|
245
228
|
},
|
|
246
|
-
"
|
|
247
|
-
"caller":
|
|
229
|
+
"value": "16-01-2024/04-02-2024",
|
|
230
|
+
"caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
|
|
248
231
|
}
|
|
249
232
|
},
|
|
250
233
|
{
|
|
@@ -256,7 +239,7 @@
|
|
|
256
239
|
"text": "Elige fecha de inicio"
|
|
257
240
|
},
|
|
258
241
|
"hint": {
|
|
259
|
-
"html":
|
|
242
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
|
|
260
243
|
},
|
|
261
244
|
"disabled": true,
|
|
262
245
|
"pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
|
|
@@ -272,7 +255,7 @@
|
|
|
272
255
|
"text": "Elige fecha de inicio"
|
|
273
256
|
},
|
|
274
257
|
"hint": {
|
|
275
|
-
"html":
|
|
258
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
|
|
276
259
|
},
|
|
277
260
|
"errorMessage": {
|
|
278
261
|
"text": "Error: Esto es un mensaje de error",
|
|
@@ -292,7 +275,7 @@
|
|
|
292
275
|
"classes": "text-sm"
|
|
293
276
|
},
|
|
294
277
|
"hint": {
|
|
295
|
-
"html":
|
|
278
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
|
|
296
279
|
"classes": "text-sm"
|
|
297
280
|
},
|
|
298
281
|
"classes": "c-input--sm",
|
|
@@ -311,10 +294,10 @@
|
|
|
311
294
|
"text": "Elige fecha de inicio"
|
|
312
295
|
},
|
|
313
296
|
"hint": {
|
|
314
|
-
"html":
|
|
297
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
|
|
315
298
|
},
|
|
316
299
|
"dropdown": {
|
|
317
|
-
"html":
|
|
300
|
+
"html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>"
|
|
318
301
|
},
|
|
319
302
|
"classes": "flex-1",
|
|
320
303
|
"pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
|
|
@@ -332,11 +315,11 @@
|
|
|
332
315
|
"classes": "text-sm"
|
|
333
316
|
},
|
|
334
317
|
"hint": {
|
|
335
|
-
"html":
|
|
318
|
+
"html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
|
|
336
319
|
"classes": "text-sm"
|
|
337
320
|
},
|
|
338
321
|
"dropdown": {
|
|
339
|
-
"html":
|
|
322
|
+
"html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
|
|
340
323
|
"classes": "c-dropdown--sm"
|
|
341
324
|
},
|
|
342
325
|
"classes": "flex-1 c-input--sm",
|
|
@@ -105,16 +105,24 @@
|
|
|
105
105
|
{% else %}
|
|
106
106
|
<div class="absolute top-0 right-0">
|
|
107
107
|
{% call componentDropdown({
|
|
108
|
-
"html":
|
|
108
|
+
"html": "<span class='sr-only'>Seleccionar fecha con una tabla de calendario</span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='1.375em' height='1.375em' aria-hidden='true'><g><path fill='currentColor' fill-rule='evenodd' d='M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
|
|
109
109
|
"classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
|
|
110
110
|
"disabled": params.disabled,
|
|
111
111
|
"attributes": {
|
|
112
|
-
"id": params.id + "-dropdown"
|
|
112
|
+
"id": params.id + "-dropdown",
|
|
113
|
+
"data-aria-haspopup": "dialog",
|
|
114
|
+
"data-role": "dialog",
|
|
115
|
+
"data-aria-modal": "false",
|
|
116
|
+
"data-aria-label": "Selección de fecha"
|
|
113
117
|
}
|
|
114
118
|
}) %}
|
|
115
119
|
{{ datepickerContent | safe }}
|
|
116
120
|
{{ dropdownActionButtons | safe }}
|
|
117
121
|
{% endcall %}
|
|
122
|
+
{# Change the dropdown aria-haspopup="true" to "dialog" #}
|
|
123
|
+
<script>
|
|
124
|
+
document.getElementById('{{params.id}}-dropdown').setAttribute('aria-haspopup', 'dialog');
|
|
125
|
+
</script>
|
|
118
126
|
</div>
|
|
119
127
|
{% endif %}
|
|
120
128
|
</div>
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
"classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
|
|
275
275
|
},
|
|
276
276
|
"definition": {
|
|
277
|
-
"html":
|
|
277
|
+
"html": "<strong>45,5€</strong>",
|
|
278
278
|
"classes": "lg:w-2/3 px-base py-sm"
|
|
279
279
|
},
|
|
280
280
|
"classes": "lg:flex -mb-px border-t border-b border-neutral-base"
|
|
@@ -381,7 +381,7 @@
|
|
|
381
381
|
"classes": "lg:w-1/3 px-base pt-sm lg:pb-sm text-sm lg:text-base text-neutral-dark"
|
|
382
382
|
},
|
|
383
383
|
"definition": {
|
|
384
|
-
"html":
|
|
384
|
+
"html": "<strong>Si</strong>",
|
|
385
385
|
"classes": "lg:w-2/3 px-base py-sm lg:text-right"
|
|
386
386
|
},
|
|
387
387
|
"classes": "lg:flex -mb-px border-t border-b border-neutral-base"
|
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
"classes": "mb-sm"
|
|
400
400
|
},
|
|
401
401
|
"definition": {
|
|
402
|
-
"html":
|
|
402
|
+
"html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
|
|
403
403
|
}
|
|
404
404
|
}
|
|
405
405
|
],
|
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
{%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
7
7
|
<dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}text-sm text-neutral-dark{% endif %}"
|
|
8
8
|
{%- for attribute, value in item.term.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
9
|
-
{{ item.term.html | safe if item.term.html else item.term.text }}
|
|
9
|
+
{{ item.term.html | filterquotes | safe if item.term.html else item.term.text }}
|
|
10
10
|
</dt>
|
|
11
11
|
<dd class="{% if item.definition.classes %}{{ item.definition.classes }}{% else %}text-base text-black{% endif %}"
|
|
12
12
|
{%- for attribute, value in item.definition.attributes %} {{attribute}}="{{value}}"{% endfor %}>
|
|
13
|
-
{{ item.definition.html | safe if item.definition.html else item.definition.text }}
|
|
13
|
+
{{ item.definition.html | filterquotes | safe if item.definition.html else item.definition.text }}
|
|
14
14
|
</dd>
|
|
15
15
|
</div>
|
|
16
16
|
{% endfor %}
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "expandido",
|
|
14
|
-
"description":
|
|
14
|
+
"description": "Usa el parámetro <code>'open': true</code> para mostrar inicialmente abierto un item.",
|
|
15
15
|
"data": {
|
|
16
16
|
"id": "mas-informacion",
|
|
17
17
|
"summary": {
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"name": "con HTML",
|
|
26
26
|
"data": {
|
|
27
27
|
"summary": {
|
|
28
|
-
"html":
|
|
28
|
+
"html": "Más información <em>actualizada</em>"
|
|
29
29
|
},
|
|
30
30
|
"caller": "<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Quae omnis ipsa eius dolorum, maiores! Labore quaerat nam pariatur minima consectetur, tempora magnam. At sequi quidem exercitationem velit id, pariatur, animi.</p>"
|
|
31
31
|
}
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"name": "con clases",
|
|
35
35
|
"data": {
|
|
36
36
|
"summary": {
|
|
37
|
-
"html":
|
|
37
|
+
"html": "Más información <em>actualizada</em>",
|
|
38
38
|
"classes": "hover:underline"
|
|
39
39
|
},
|
|
40
40
|
"classes": "p-base bg-primary-light text-primary-base",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<details {%- if params.id %} id="{{params.id}}"{% endif %} class="{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
|
|
3
3
|
<summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
|
|
4
4
|
<span class="{% if params.summary.classes %}{{ params.summary.classes }}{% else %}c-link{% endif %}">
|
|
5
|
-
{{ params.summary.html | safe if params.summary.html else params.summary.text }}
|
|
5
|
+
{{ params.summary.html | filterquotes | safe if params.summary.html else params.summary.text }}
|
|
6
6
|
</span>
|
|
7
7
|
</summary>
|
|
8
8
|
<div class="py-sm">
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
],
|
|
40
40
|
"itemsSecondary": [
|
|
41
41
|
{
|
|
42
|
-
"html":
|
|
42
|
+
"html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
|
|
43
43
|
"attributes": {
|
|
44
44
|
"onclick": "closeDialog(this)"
|
|
45
45
|
}
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
},
|
|
61
61
|
"itemsSecondary": [
|
|
62
62
|
{
|
|
63
|
-
"html":
|
|
63
|
+
"html": "Cerrar",
|
|
64
64
|
"attributes": {
|
|
65
65
|
"onclick": "closeDialog(this)"
|
|
66
66
|
}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
{% set examples = [
|
|
76
76
|
{
|
|
77
77
|
"name": "Modal lanzado con un Dialog",
|
|
78
|
-
"description":
|
|
78
|
+
"description": "Un dialog es un componente que permite mostrar otro componente que se muestra sobre la página, con una capa negra semitransparente por debajo. Se utiliza para mostrar modales o para mostrar el menú móvil de la cabecera. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función <code>openDialog</code>, el primer parámetro es el id del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el id del elemento al que se le da el foco al abrir el contenido. En este ejemplo de modal usamos los atributos de accesibilidad: <code>'role':'dialog'</code> y <code>'aria-modal': true</code>",
|
|
79
79
|
"data": {
|
|
80
80
|
"button": {
|
|
81
81
|
"text": "Abrir modal",
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
"name": "Modal lanzado con un Dialog con JavaScript",
|
|
119
|
-
"description":
|
|
119
|
+
"description": "También puedes usar con javascript la función global <code>openDialog(dialog, focusAfterClosed, focusFirst)</code>, para abrir la modal usando su id. La función admite tres parámetros <code>dialog</code>, que es el id de la modal que queremos abrir, <code>focusAfterClosed</code>, el elemento que tendrá el foco cuando cerremos la modal, y <code>focusFirst</code>, el elemento que tendra el foco al abrir la modal. Ej: Abre la consola del navegador y escribe <code>openDialog('modal-javascript', 'button-javascript-action-example', 'label-javascript-action-example')</code> para mostrar la modal.",
|
|
120
120
|
"data": {
|
|
121
121
|
"button": {
|
|
122
122
|
"text": "Abrir modal con JavaScript",
|
|
@@ -4,34 +4,34 @@
|
|
|
4
4
|
"name": "por defecto",
|
|
5
5
|
"data": {
|
|
6
6
|
"text": "Por defecto",
|
|
7
|
-
"caller": "<div class
|
|
7
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
8
8
|
}
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
"name": "con estado activo",
|
|
12
|
-
"description":
|
|
12
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
13
13
|
"data": {
|
|
14
14
|
"text": "Activo",
|
|
15
15
|
"classes": "ds-active",
|
|
16
|
-
"caller": "<div class
|
|
16
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
{
|
|
20
20
|
"name": "con estado hover",
|
|
21
|
-
"description":
|
|
21
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:hover</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
22
22
|
"data": {
|
|
23
23
|
"text": "Hover",
|
|
24
24
|
"classes": "ds-hover",
|
|
25
|
-
"caller": "<div class
|
|
25
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"name": "con estado focus",
|
|
30
|
-
"description":
|
|
30
|
+
"description": "Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.",
|
|
31
31
|
"data": {
|
|
32
32
|
"text": "Focus",
|
|
33
33
|
"classes": "ds-focus",
|
|
34
|
-
"caller": "<div class
|
|
34
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
{
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"data": {
|
|
41
41
|
"text": "Primario",
|
|
42
42
|
"classes": "c-dropdown--primary",
|
|
43
|
-
"caller": "<div class
|
|
43
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
{
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"data": {
|
|
49
49
|
"text": "Transparente",
|
|
50
50
|
"classes": "c-dropdown--transparent",
|
|
51
|
-
"caller": "<div class
|
|
51
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
52
52
|
}
|
|
53
53
|
},
|
|
54
54
|
{
|
|
@@ -56,7 +56,15 @@
|
|
|
56
56
|
"data": {
|
|
57
57
|
"text": "Header",
|
|
58
58
|
"classes": "c-dropdown--header",
|
|
59
|
-
"caller": "<div class
|
|
59
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"name": "grande",
|
|
64
|
+
"data": {
|
|
65
|
+
"text": "Grande",
|
|
66
|
+
"classes": "c-dropdown--lg",
|
|
67
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
60
68
|
}
|
|
61
69
|
},
|
|
62
70
|
{
|
|
@@ -64,7 +72,7 @@
|
|
|
64
72
|
"data": {
|
|
65
73
|
"text": "Botón pequeño con texto muy largo",
|
|
66
74
|
"classes": "c-dropdown--sm",
|
|
67
|
-
"caller": "<div class
|
|
75
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
68
76
|
}
|
|
69
77
|
},
|
|
70
78
|
{
|
|
@@ -73,7 +81,7 @@
|
|
|
73
81
|
"data": {
|
|
74
82
|
"text": "Botón pequeño con texto muy largo",
|
|
75
83
|
"classes": "c-dropdown--has-selection c-dropdown--sm",
|
|
76
|
-
"caller": "<div class
|
|
84
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
77
85
|
}
|
|
78
86
|
},
|
|
79
87
|
{
|
|
@@ -81,7 +89,7 @@
|
|
|
81
89
|
"data": {
|
|
82
90
|
"text": "Deshabilitado",
|
|
83
91
|
"disabled": true,
|
|
84
|
-
"caller": "<div class
|
|
92
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
85
93
|
}
|
|
86
94
|
},
|
|
87
95
|
{
|
|
@@ -90,7 +98,7 @@
|
|
|
90
98
|
"data": {
|
|
91
99
|
"text": "Clases en container",
|
|
92
100
|
"classesContainer": "inline-block p-base bg-primary-light",
|
|
93
|
-
"caller": "<div class
|
|
101
|
+
"caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>"
|
|
94
102
|
}
|
|
95
103
|
},
|
|
96
104
|
{
|
|
@@ -99,7 +107,7 @@
|
|
|
99
107
|
"data": {
|
|
100
108
|
"text": "Clases al contenido del tooltip",
|
|
101
109
|
"classesTooltip": "max-h-64 overflow-y-auto",
|
|
102
|
-
"caller": "<div class
|
|
110
|
+
"caller": "<div class=' w-64 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '></div></div>"
|
|
103
111
|
}
|
|
104
112
|
},
|
|
105
113
|
{
|
|
@@ -109,7 +117,21 @@
|
|
|
109
117
|
"text": "Dropdown anchura completa",
|
|
110
118
|
"classes": "w-full justify-between",
|
|
111
119
|
"classesTooltip": "w-max max-h-64 overflow-y-auto",
|
|
112
|
-
"caller": "<div class
|
|
120
|
+
"caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:900px '></div></div></div>"
|
|
121
|
+
}
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"name": "Con role dialog",
|
|
125
|
+
"description": 'Usa los atributos <code>data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional"</code> para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.',
|
|
126
|
+
"data": {
|
|
127
|
+
"text": "Marta Pérez",
|
|
128
|
+
"caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
|
|
129
|
+
"attributes": {
|
|
130
|
+
"data-aria-haspopup": "dialog",
|
|
131
|
+
"data-role": "dialog",
|
|
132
|
+
"data-aria-modal": "false",
|
|
133
|
+
"data-aria-label": "Información adicional"
|
|
134
|
+
}
|
|
113
135
|
}
|
|
114
136
|
}
|
|
115
137
|
] %}
|