desy-html 8.1.7 → 8.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/config/tailwind.config.js +0 -1
- package/docs/index.html +12 -0
- package/package.json +4 -5
- package/src/js/aria/MenuVertical.js +71 -0
- package/src/js/aria/dataGrid.js +1 -1
- package/src/js/desy-html.js +14 -0
- package/src/js/index.js +3 -2
- package/src/templates/components/button/_examples.button.njk +9 -2
- package/src/templates/components/button/_template.button.njk +1 -1
- package/src/templates/components/listbox/_examples.listbox.njk +3 -3
- package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +10 -4
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +7 -7
- package/src/templates/components/menu-vertical/params.menu-vertical.yaml +4 -0
- package/src/templates/components/pagination/_examples.pagination.njk +177 -8
- package/src/templates/components/pagination/_template.pagination.njk +48 -15
- package/src/templates/components/pagination/params.pagination.yaml +36 -4
- package/src/templates/components/status-item/_examples.status-item.njk +13 -13
- package/src/templates/components/table/_examples.table.njk +75 -0
- package/src/templates/components/table/_template.table.njk +11 -0
- package/src/templates/components/table/params.table.yaml +29 -0
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +115 -1
- package/src/templates/components/table-advanced/_template.table-advanced.njk +42 -2
- package/src/templates/components/table-advanced/params.table-advanced.yaml +33 -0
- package/src/templates/pages/_template.home.njk +4 -1
- package/src/templates/pages/_template.logged-out.njk +4 -1
- package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +3 -0
- package/src/templates/pages/_template.logged-selector-fixed.njk +3 -0
- package/src/templates/pages/_template.logged.njk +3 -0
- package/src/templates/pages/_template.mfe.njk +3 -0
- package/src/templates/pages/_template.test.njk +3 -0
- package/src/templates/pages/_template.with-header-advanced.njk +4 -1
package/docs/index.html
CHANGED
|
@@ -37,6 +37,18 @@
|
|
|
37
37
|
|
|
38
38
|
<h2>Changelog (English)</h2>
|
|
39
39
|
<p>What's new in the latest version of desy-html</p>
|
|
40
|
+
<h3>v.8.2.1</h3>
|
|
41
|
+
<ul class="text-sm">
|
|
42
|
+
<li>Minor fixes.</li>
|
|
43
|
+
</ul>
|
|
44
|
+
<h3>v.8.2.0</h3>
|
|
45
|
+
<ul class="text-sm">
|
|
46
|
+
<li>Added global function to select an item in Menu vertical.</li>
|
|
47
|
+
<li>Added tfoot in Table and Table advanced, that is not affected by orderby. Useful for showing totals in tables.</li>
|
|
48
|
+
<li>Removed aspect-ratio plugin from Tailwind CSS as it's now baked by default.</li>
|
|
49
|
+
<li>Added first and last buttons to navigate in Pagination.</li>
|
|
50
|
+
<li>Minor improvements.</li>
|
|
51
|
+
</ul>
|
|
40
52
|
<h3>v.8.1.7</h3>
|
|
41
53
|
<ul class="text-sm">
|
|
42
54
|
<li>Fixed bad html copy code in caller components.</li>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "desy-html",
|
|
3
|
-
"version": "8.1
|
|
3
|
+
"version": "8.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)",
|
|
@@ -32,9 +32,8 @@
|
|
|
32
32
|
"backstop-test:test": "backstop test --config=test/backstop_config/backstop.config.js"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@tailwindcss/
|
|
36
|
-
"@tailwindcss/
|
|
37
|
-
"@tailwindcss/typography": "^0.5.7",
|
|
35
|
+
"@tailwindcss/forms": "~0.5.3",
|
|
36
|
+
"@tailwindcss/typography": "~0.5.7",
|
|
38
37
|
"autoprefixer": "^10.0.2",
|
|
39
38
|
"hex-rgb": "^5.0.0",
|
|
40
39
|
"highlight.js": "^11.7.0",
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
"postcss": "^8.2.15",
|
|
43
42
|
"postcss-cli": "^10.0.0",
|
|
44
43
|
"postcss-import": "^15.0.0",
|
|
45
|
-
"tailwindcss": "
|
|
44
|
+
"tailwindcss": "~3.2.1"
|
|
46
45
|
},
|
|
47
46
|
"devDependencies": {
|
|
48
47
|
"browser-sync": "^2.26.13",
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
export function MenuVertical(aria) {
|
|
2
|
+
(function () {
|
|
3
|
+
aria.MenuVertical = function (domNode) {
|
|
4
|
+
this.domNode = domNode;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
aria.MenuVertical.prototype.init = function () {
|
|
8
|
+
this.valueActive = this.domNode.dataset.menuActive;
|
|
9
|
+
if(this.valueActive) {
|
|
10
|
+
this.activateElement(this.valueActive);
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
aria.MenuVertical.prototype.activateElement = function (elementActive) {
|
|
15
|
+
this.domNode.querySelectorAll('li').forEach((element, index) => {
|
|
16
|
+
const processElement = function (elem, parent) {
|
|
17
|
+
let getId = elem.id
|
|
18
|
+
if(getId == elementActive){
|
|
19
|
+
parent.wrapActiveElement(elem)
|
|
20
|
+
} else {
|
|
21
|
+
parent.deactivateElement(elem)
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
if (element.querySelector('a')) {
|
|
25
|
+
const getLink = element.querySelector('a');
|
|
26
|
+
processElement(getLink, this);
|
|
27
|
+
} else if (element.querySelector('span')) {
|
|
28
|
+
const getLink = element.querySelector('span');
|
|
29
|
+
processElement(getLink, this);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
})
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
|
|
36
|
+
const getText = elementActive.textContent;
|
|
37
|
+
const strongElement = `<strong>${getText}</strong>`;
|
|
38
|
+
elementActive.innerHTML = strongElement;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
|
|
42
|
+
const getText = elementDeactivated.textContent;
|
|
43
|
+
const strongElement = `${getText}`;
|
|
44
|
+
elementDeactivated.innerHTML = strongElement;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
window.activateItemMenuVertical = function (menu, elementActive) {
|
|
48
|
+
menu.querySelectorAll('li').forEach((element, index) => {
|
|
49
|
+
const processElement = function (elem) {
|
|
50
|
+
let getId = elem.id
|
|
51
|
+
if(getId == elementActive){
|
|
52
|
+
const getText = elem.textContent;
|
|
53
|
+
const strongElement = `<strong>${getText}</strong>`;
|
|
54
|
+
elem.innerHTML = strongElement;
|
|
55
|
+
} else {
|
|
56
|
+
const getText = elem.textContent;
|
|
57
|
+
const strongElement = `${getText}`;
|
|
58
|
+
elem.innerHTML = strongElement;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
if (element.querySelector('a')) {
|
|
62
|
+
let getLink = element.querySelector('a');
|
|
63
|
+
processElement(getLink);
|
|
64
|
+
} else if (element.querySelector('span')) {
|
|
65
|
+
let getLink = element.querySelector('span');
|
|
66
|
+
processElement(getLink);
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
};
|
|
70
|
+
}());
|
|
71
|
+
}
|
package/src/js/aria/dataGrid.js
CHANGED
|
@@ -574,7 +574,7 @@ export function dataGrid(aria) {
|
|
|
574
574
|
* Comparison function to sort the rows
|
|
575
575
|
*/
|
|
576
576
|
aria.Grid.prototype.sortRows = function (compareFn) {
|
|
577
|
-
var rows = this.gridNode.querySelectorAll(
|
|
577
|
+
var rows = this.gridNode.querySelectorAll("tbody tr");
|
|
578
578
|
var rowWrapper = this.gridNode.querySelector('tbody');
|
|
579
579
|
var dataRows = Array.prototype.slice.call(rows, 1);
|
|
580
580
|
|
package/src/js/desy-html.js
CHANGED
|
@@ -17,6 +17,7 @@ import { Collapsible } from './aria/collapsible.js';
|
|
|
17
17
|
import { notification } from './aria/notification.js';
|
|
18
18
|
import { RadioButton } from './aria/radioButton.js';
|
|
19
19
|
import { CheckBox } from './aria/checkBoxes.js';
|
|
20
|
+
import { MenuVertical } from './aria/MenuVertical.js';
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
export function accordionComponent(aria) {
|
|
@@ -377,3 +378,16 @@ export function radioButtonComponent(aria) {
|
|
|
377
378
|
export function checkBoxComponent(aria) {
|
|
378
379
|
CheckBox(aria);
|
|
379
380
|
}
|
|
381
|
+
|
|
382
|
+
export function MenuVerticalComponent(aria) {
|
|
383
|
+
MenuVertical(aria);
|
|
384
|
+
const modules = document.querySelectorAll('[data-module]');
|
|
385
|
+
for (const item in modules) if (modules.hasOwnProperty(item)) {
|
|
386
|
+
const moduleValue = modules[item].getAttribute('data-module');
|
|
387
|
+
|
|
388
|
+
if (moduleValue == 'c-menu-vertical'){
|
|
389
|
+
const menuVertical = new aria.MenuVertical(modules[item]);
|
|
390
|
+
menuVertical.init(null);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
}
|
package/src/js/index.js
CHANGED
|
@@ -19,7 +19,8 @@ import {
|
|
|
19
19
|
treeComponent,
|
|
20
20
|
notificationComponent,
|
|
21
21
|
radioButtonComponent,
|
|
22
|
-
checkBoxComponent
|
|
22
|
+
checkBoxComponent,
|
|
23
|
+
MenuVerticalComponent
|
|
23
24
|
} from './desy-html.js';
|
|
24
25
|
|
|
25
26
|
var aria = aria || {};
|
|
@@ -40,7 +41,7 @@ treeComponent(aria);
|
|
|
40
41
|
notificationComponent(aria);
|
|
41
42
|
radioButtonComponent(aria);
|
|
42
43
|
checkBoxComponent(aria);
|
|
43
|
-
|
|
44
|
+
MenuVerticalComponent(aria);
|
|
44
45
|
|
|
45
46
|
//Using the browser API to copy code to the clipboard
|
|
46
47
|
const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');
|
|
@@ -166,6 +166,13 @@
|
|
|
166
166
|
"classes": "c-button--transparent"
|
|
167
167
|
}
|
|
168
168
|
},
|
|
169
|
+
{
|
|
170
|
+
"name": "anchura completa",
|
|
171
|
+
"data": {
|
|
172
|
+
"text": "Anchura completa",
|
|
173
|
+
"classes": "w-full justify-center"
|
|
174
|
+
}
|
|
175
|
+
},
|
|
169
176
|
{
|
|
170
177
|
"name": "peque",
|
|
171
178
|
"data": {
|
|
@@ -238,7 +245,7 @@
|
|
|
238
245
|
{
|
|
239
246
|
"name": "botón sólo con icono",
|
|
240
247
|
"data": {
|
|
241
|
-
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"
|
|
248
|
+
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center my-1" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" /></svg>',
|
|
242
249
|
"href": "/",
|
|
243
250
|
"classes": "c-button--primary align-bottom"
|
|
244
251
|
}
|
|
@@ -246,7 +253,7 @@
|
|
|
246
253
|
{
|
|
247
254
|
"name": "button peque sólo con icono",
|
|
248
255
|
"data": {
|
|
249
|
-
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center my-1"
|
|
256
|
+
"html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center my-1" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar"><path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor"/></svg>',
|
|
250
257
|
"href": "/",
|
|
251
258
|
"classes": "c-button--primary c-button--sm align-bottom"
|
|
252
259
|
}
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<!-- button -->
|
|
33
33
|
{%- if element == 'a' %}
|
|
34
34
|
|
|
35
|
-
<a href="{{ params.href if params.href else '#' }}"
|
|
35
|
+
<a href="{{ params.href if params.href else '#' }}" draggable="false" {%- if params.disabled %} tabindex="-1"{% endif %}{% if params.target %} target="{{ params.target }}"{% endif %} {{- commonAttributes | safe }}>
|
|
36
36
|
{{ params.html | safe if params.html else params.text }}
|
|
37
37
|
</a>
|
|
38
38
|
|
|
@@ -554,15 +554,15 @@
|
|
|
554
554
|
"items": [
|
|
555
555
|
{
|
|
556
556
|
"href": "#",
|
|
557
|
-
"html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
557
|
+
"html": 'Opción 1 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg>'
|
|
558
558
|
},
|
|
559
559
|
{
|
|
560
560
|
"href": "#",
|
|
561
|
-
"html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
561
|
+
"html": 'Opción 2 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg>'
|
|
562
562
|
},
|
|
563
563
|
{
|
|
564
564
|
"href": "#",
|
|
565
|
-
"html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0
|
|
565
|
+
"html": 'Opción 3 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline ml-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg>'
|
|
566
566
|
}
|
|
567
567
|
]
|
|
568
568
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
{
|
|
4
4
|
"name": "por defecto",
|
|
5
5
|
"data": {
|
|
6
|
+
"idPrefix": "default",
|
|
6
7
|
"items": [
|
|
7
8
|
{
|
|
8
9
|
"href": "#",
|
|
@@ -25,6 +26,7 @@
|
|
|
25
26
|
{
|
|
26
27
|
"name": "con item deshabilitado",
|
|
27
28
|
"data": {
|
|
29
|
+
"idPrefix": "disabled-item",
|
|
28
30
|
"items": [
|
|
29
31
|
{
|
|
30
32
|
"href": "#",
|
|
@@ -35,7 +37,6 @@
|
|
|
35
37
|
"text": "Item 2"
|
|
36
38
|
},
|
|
37
39
|
{
|
|
38
|
-
"href": "#",
|
|
39
40
|
"text": "Item 3",
|
|
40
41
|
"disabled": true
|
|
41
42
|
}
|
|
@@ -47,7 +48,9 @@
|
|
|
47
48
|
},
|
|
48
49
|
{
|
|
49
50
|
"name": "con item activo",
|
|
51
|
+
"description": 'Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical(document.getElementById("mi-menu"), "active-item-3")</code> para desactivar el item actual de este ejemplo y activar el tercer item.',
|
|
50
52
|
"data": {
|
|
53
|
+
"idPrefix": "active-item",
|
|
51
54
|
"items": [
|
|
52
55
|
{
|
|
53
56
|
"href": "#",
|
|
@@ -64,6 +67,7 @@
|
|
|
64
67
|
}
|
|
65
68
|
],
|
|
66
69
|
"attributes": {
|
|
70
|
+
"id": "mi-menu",
|
|
67
71
|
"aria-label": "Menu vertical"
|
|
68
72
|
}
|
|
69
73
|
}
|
|
@@ -71,6 +75,7 @@
|
|
|
71
75
|
{
|
|
72
76
|
"name": "con target en enlaces",
|
|
73
77
|
"data": {
|
|
78
|
+
"idPrefix": "target",
|
|
74
79
|
"items": [
|
|
75
80
|
{
|
|
76
81
|
"href": "#",
|
|
@@ -105,6 +110,7 @@
|
|
|
105
110
|
{
|
|
106
111
|
"name": "con divisor",
|
|
107
112
|
"data": {
|
|
113
|
+
"idPrefix": "with-divisor",
|
|
108
114
|
"items": [
|
|
109
115
|
{
|
|
110
116
|
"href": "#",
|
|
@@ -132,6 +138,7 @@
|
|
|
132
138
|
{
|
|
133
139
|
"name": "con un texto de item muy largo",
|
|
134
140
|
"data": {
|
|
141
|
+
"idPrefix": "long-text",
|
|
135
142
|
"items": [
|
|
136
143
|
{
|
|
137
144
|
"href": "#",
|
|
@@ -334,7 +341,6 @@
|
|
|
334
341
|
"hasUnderline": true,
|
|
335
342
|
"items": [
|
|
336
343
|
{
|
|
337
|
-
"href": "#",
|
|
338
344
|
"text": "Item 1 deshabilitado o sin href",
|
|
339
345
|
"id": "nav-item-item-1-b",
|
|
340
346
|
"disabled": true,
|
|
@@ -345,7 +351,6 @@
|
|
|
345
351
|
"text": "Subitem 1"
|
|
346
352
|
},
|
|
347
353
|
{
|
|
348
|
-
"href": "#",
|
|
349
354
|
"text": "Subitem 2 deshabilitado o sin href",
|
|
350
355
|
"disabled": true
|
|
351
356
|
},
|
|
@@ -513,6 +518,7 @@
|
|
|
513
518
|
"name": "con atributos",
|
|
514
519
|
"description": "Muestra el código para ver cómo se aplican los atributos",
|
|
515
520
|
"data": {
|
|
521
|
+
"idPrefix": "with-attributes",
|
|
516
522
|
"attributes": {
|
|
517
523
|
"id": "nav-id-example"
|
|
518
524
|
},
|
|
@@ -598,7 +604,7 @@
|
|
|
598
604
|
"name": "con items mixtos",
|
|
599
605
|
"data": {
|
|
600
606
|
"name": "with-sub-items",
|
|
601
|
-
"idPrefix": "
|
|
607
|
+
"idPrefix": "with-mixed-items",
|
|
602
608
|
"items": [
|
|
603
609
|
{
|
|
604
610
|
"href": "#",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
{% set subId = "sub-" + id %}
|
|
21
21
|
<li class="m-base">
|
|
22
22
|
{% if item.href %}
|
|
23
|
-
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}
|
|
23
|
+
<a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
24
24
|
{% if item.active %}
|
|
25
25
|
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
26
26
|
{% else %}
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
{% endif %}
|
|
29
29
|
</a>
|
|
30
30
|
{% else %}
|
|
31
|
-
<span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}
|
|
31
|
+
<span {%- if id %} id="{{ id }}"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
32
32
|
{% if item.active %}
|
|
33
33
|
<strong>{{ item.html | safe if item.html else item.text }}</strong>
|
|
34
34
|
{% else %}
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
{%- endif %}
|
|
54
54
|
<li class="m-base origin-top-left text-sm">
|
|
55
55
|
{% if subitem.href %}
|
|
56
|
-
<a {%- if
|
|
56
|
+
<a {%- if subId %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
57
57
|
{% if subitem.active %}
|
|
58
58
|
<strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
|
|
59
59
|
{% else %}
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
{% endif %}
|
|
62
62
|
</a>
|
|
63
63
|
{% else %}
|
|
64
|
-
<span {%- if
|
|
64
|
+
<span {%- if subId %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
65
65
|
{% if subitem.active %}
|
|
66
66
|
<strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
|
|
67
67
|
{% else %}
|
|
@@ -95,8 +95,8 @@
|
|
|
95
95
|
{% endset -%}
|
|
96
96
|
|
|
97
97
|
<!-- menu-vertical -->
|
|
98
|
-
<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
|
|
99
|
-
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
|
|
98
|
+
<nav data-module="c-menu-vertical" {%- if params.classes %} class="{{ params.classes }}"{% endif %}
|
|
99
|
+
{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} {%- if params.active %} {% endif %}>
|
|
100
100
|
{{ innerHtml | trim | safe }}
|
|
101
101
|
</nav>
|
|
102
|
-
<!-- /menu-vertical -->
|
|
102
|
+
<!-- /menu-vertical -->
|