@ons/design-system 62.0.0 → 62.0.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/components/table/sortable-table.js +9 -5
- package/css/print.css +1 -1
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/print.scss +7 -17
|
@@ -35,16 +35,16 @@ export default class TableSort {
|
|
|
35
35
|
button.setAttribute('data-index', i);
|
|
36
36
|
button.setAttribute('class', 'ons-table__sort-button');
|
|
37
37
|
button.textContent = text;
|
|
38
|
-
button.addEventListener('click', this.sortButtonClicked.bind(this));
|
|
39
38
|
let sortSprite = document.getElementById('sort-sprite-' + text.toLowerCase());
|
|
40
39
|
const sortSpriteParent = sortSprite.parentNode;
|
|
41
40
|
sortSpriteParent.replaceChild(button, sortSprite);
|
|
42
41
|
button.appendChild(sortSprite);
|
|
42
|
+
button.addEventListener('click', this.sortButtonClicked.bind(this));
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
sortButtonClicked(event) {
|
|
46
|
-
const columnNumber = event.target.getAttribute('data-index');
|
|
47
|
-
const sortDirection = event.target.
|
|
46
|
+
const columnNumber = event.target.closest('[data-index]').getAttribute('data-index');
|
|
47
|
+
const sortDirection = event.target.closest('[aria-sort]').getAttribute('aria-sort');
|
|
48
48
|
let newSortDirection;
|
|
49
49
|
|
|
50
50
|
if (sortDirection === 'none' || sortDirection === 'ascending') {
|
|
@@ -63,7 +63,7 @@ export default class TableSort {
|
|
|
63
63
|
});
|
|
64
64
|
|
|
65
65
|
this.removeButtonStates();
|
|
66
|
-
this.updateButtonState(event.target, newSortDirection);
|
|
66
|
+
this.updateButtonState(event.target.closest('[aria-sort]'), newSortDirection);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
getTableRowsArray(tbody) {
|
|
@@ -109,6 +109,10 @@ export default class TableSort {
|
|
|
109
109
|
}
|
|
110
110
|
|
|
111
111
|
getCellValue(cell) {
|
|
112
|
+
if (!cell) {
|
|
113
|
+
return undefined;
|
|
114
|
+
}
|
|
115
|
+
|
|
112
116
|
let cellValue = cell.getAttribute('data-sort-value') || cell.textContent;
|
|
113
117
|
cellValue = parseFloat(cellValue) || cellValue;
|
|
114
118
|
|
|
@@ -130,7 +134,7 @@ export default class TableSort {
|
|
|
130
134
|
}
|
|
131
135
|
|
|
132
136
|
updateButtonState(button, direction) {
|
|
133
|
-
button.
|
|
137
|
+
button.setAttribute('aria-sort', direction);
|
|
134
138
|
let message = this.options.statusMessage;
|
|
135
139
|
message = message + ' ' + button.textContent.replace(/^\s+|\s+$/g, '');
|
|
136
140
|
message = message + ' (' + direction + ')';
|
package/css/print.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{--ons-color-black: #222}.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}
|
|
1
|
+
html{--ons-color-black: #222}.ons-btn,.ons-navigation-search,.ons-summary__actions,.ons-footer,.ons-cookies-banner,.ons-language-links,.ons-breadcrumb{display:none !important}a::after{content:" (" attr(href) ") "}.ons-header__main,.ons-header__bottom{background:transparent}.ons-header__title{color:var(--ons-color-black)}.ons-header .ons-header__svg-logo{fill:var(--ons-color-black)}.ons-navigation--main,.ons-navigation--sub{border-top:1px solid var(--ons-color-text-link);display:block !important;padding:1rem 0 .5rem}.ons-navigation--main .ons-navigation__item,.ons-navigation--sub .ons-navigation__item{display:inline-block}.ons-navigation--main .ons-navigation__item--active,.ons-navigation--sub .ons-navigation__item--active{border:0}.ons-navigation--main .ons-navigation__link,.ons-navigation--main .ons-navigation__link:hover,.ons-navigation--sub .ons-navigation__link,.ons-navigation--sub .ons-navigation__link:hover{color:var(--ons-color-text-link)}details,details>summary{display:block !important}.ons-hero{-webkit-print-color-adjust:exact;color-adjust:exact}.ons-grid__col{display:block}
|