@progress/kendo-vue-data-tools 3.6.4 → 3.7.0-dev.202210250731
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/dist/cdn/js/kendo-vue-data-tools.js +1 -1
- package/dist/es/cells/FilterCell.js +10 -16
- package/dist/es/columnmenu/ColumnMenu.js +4 -8
- package/dist/es/columnmenu/ColumnMenuCheckboxFilter.js +16 -56
- package/dist/es/columnmenu/ColumnMenuContent.js +4 -4
- package/dist/es/columnmenu/ColumnMenuFilter.js +35 -59
- package/dist/es/columnmenu/ColumnMenuFilterCell.js +9 -14
- package/dist/es/columnmenu/ColumnMenuFilterOperators.js +2 -4
- package/dist/es/columnmenu/ColumnMenuFilterUI.js +22 -22
- package/dist/es/columnmenu/ColumnMenuItem.js +3 -5
- package/dist/es/columnmenu/ColumnMenuItemContent.js +2 -4
- package/dist/es/columnmenu/ColumnMenuItemGroup.js +0 -2
- package/dist/es/columnmenu/ColumnMenuSort.js +15 -32
- package/dist/es/drag/ColumnDraggable.js +2 -6
- package/dist/es/drag/ColumnResizer.js +2 -6
- package/dist/es/drag/DragClue.js +0 -2
- package/dist/es/drag/DropClue.js +0 -2
- package/dist/es/filter/Expression.js +29 -40
- package/dist/es/filter/Filter.js +6 -13
- package/dist/es/filter/GroupFilters.js +9 -13
- package/dist/es/filter/GroupToolbar.js +26 -24
- package/dist/es/filter/filters/BooleanFilter.js +2 -3
- package/dist/es/filter/filters/DateFilter.js +4 -9
- package/dist/es/filter/filters/EnumFilter.js +10 -15
- package/dist/es/filter/filters/NumericFilter.js +4 -9
- package/dist/es/filter/filters/TextFilter.js +5 -10
- package/dist/es/header/FilterRow.js +7 -19
- package/dist/es/header/Header.js +0 -6
- package/dist/es/header/HeaderCell.js +0 -2
- package/dist/es/header/HeaderRow.js +14 -30
- package/dist/es/header/HeaderSelectionCell.js +0 -2
- package/dist/es/header/HeaderThElement.js +10 -12
- package/dist/es/main.d.ts +1 -0
- package/dist/es/main.js +1 -0
- package/dist/es/navigation/TableKeyboardNavigation.js +27 -75
- package/dist/es/navigation/constants.js +0 -14
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/pager/Pager.js +28 -36
- package/dist/es/pager/PagerInfo.js +0 -2
- package/dist/es/pager/PagerInput.js +0 -3
- package/dist/es/pager/PagerNavigationButton.js +0 -2
- package/dist/es/pager/PagerNumericButtons.js +0 -10
- package/dist/es/pager/PagerPageSizes.js +5 -8
- package/dist/esm/cells/FilterCell.js +10 -16
- package/dist/esm/columnmenu/ColumnMenu.js +4 -8
- package/dist/esm/columnmenu/ColumnMenuCheckboxFilter.js +16 -56
- package/dist/esm/columnmenu/ColumnMenuContent.js +4 -4
- package/dist/esm/columnmenu/ColumnMenuFilter.js +35 -59
- package/dist/esm/columnmenu/ColumnMenuFilterCell.js +9 -14
- package/dist/esm/columnmenu/ColumnMenuFilterOperators.js +2 -4
- package/dist/esm/columnmenu/ColumnMenuFilterUI.js +22 -22
- package/dist/esm/columnmenu/ColumnMenuItem.js +3 -5
- package/dist/esm/columnmenu/ColumnMenuItemContent.js +2 -4
- package/dist/esm/columnmenu/ColumnMenuItemGroup.js +0 -2
- package/dist/esm/columnmenu/ColumnMenuSort.js +15 -32
- package/dist/esm/drag/ColumnDraggable.js +2 -6
- package/dist/esm/drag/ColumnResizer.js +2 -6
- package/dist/esm/drag/DragClue.js +0 -2
- package/dist/esm/drag/DropClue.js +0 -2
- package/dist/esm/filter/Expression.js +29 -40
- package/dist/esm/filter/Filter.js +6 -13
- package/dist/esm/filter/GroupFilters.js +9 -13
- package/dist/esm/filter/GroupToolbar.js +26 -24
- package/dist/esm/filter/filters/BooleanFilter.js +2 -3
- package/dist/esm/filter/filters/DateFilter.js +4 -9
- package/dist/esm/filter/filters/EnumFilter.js +10 -15
- package/dist/esm/filter/filters/NumericFilter.js +4 -9
- package/dist/esm/filter/filters/TextFilter.js +5 -10
- package/dist/esm/header/FilterRow.js +7 -19
- package/dist/esm/header/Header.js +0 -6
- package/dist/esm/header/HeaderCell.js +0 -2
- package/dist/esm/header/HeaderRow.js +14 -30
- package/dist/esm/header/HeaderSelectionCell.js +0 -2
- package/dist/esm/header/HeaderThElement.js +10 -12
- package/dist/esm/main.d.ts +1 -0
- package/dist/esm/main.js +1 -0
- package/dist/esm/navigation/TableKeyboardNavigation.js +27 -75
- package/dist/esm/navigation/constants.js +0 -14
- package/dist/esm/package-metadata.js +1 -1
- package/dist/esm/pager/Pager.js +28 -36
- package/dist/esm/pager/PagerInfo.js +0 -2
- package/dist/esm/pager/PagerInput.js +0 -3
- package/dist/esm/pager/PagerNavigationButton.js +0 -2
- package/dist/esm/pager/PagerNumericButtons.js +0 -10
- package/dist/esm/pager/PagerPageSizes.js +5 -8
- package/dist/npm/cells/FilterCell.js +12 -28
- package/dist/npm/columnmenu/ColumnMenu.js +6 -18
- package/dist/npm/columnmenu/ColumnMenuCheckboxFilter.js +16 -67
- package/dist/npm/columnmenu/ColumnMenuContent.js +6 -11
- package/dist/npm/columnmenu/ColumnMenuFilter.js +35 -75
- package/dist/npm/columnmenu/ColumnMenuFilterCell.js +11 -22
- package/dist/npm/columnmenu/ColumnMenuFilterOperators.js +4 -10
- package/dist/npm/columnmenu/ColumnMenuFilterUI.js +24 -29
- package/dist/npm/columnmenu/ColumnMenuItem.js +5 -10
- package/dist/npm/columnmenu/ColumnMenuItemContent.js +4 -10
- package/dist/npm/columnmenu/ColumnMenuItemGroup.js +2 -7
- package/dist/npm/columnmenu/ColumnMenuSort.js +17 -43
- package/dist/npm/drag/ColumnDraggable.js +4 -11
- package/dist/npm/drag/ColumnResizer.js +4 -11
- package/dist/npm/drag/DragClue.js +2 -5
- package/dist/npm/drag/DropClue.js +2 -5
- package/dist/npm/filter/Expression.js +29 -52
- package/dist/npm/filter/Filter.js +6 -19
- package/dist/npm/filter/GroupFilters.js +9 -18
- package/dist/npm/filter/GroupToolbar.js +26 -30
- package/dist/npm/filter/filters/BooleanFilter.js +4 -9
- package/dist/npm/filter/filters/DateFilter.js +4 -12
- package/dist/npm/filter/filters/EnumFilter.js +10 -20
- package/dist/npm/filter/filters/NumericFilter.js +4 -14
- package/dist/npm/filter/filters/TextFilter.js +5 -15
- package/dist/npm/header/FilterRow.js +9 -29
- package/dist/npm/header/Header.js +2 -11
- package/dist/npm/header/HeaderCell.js +2 -7
- package/dist/npm/header/HeaderRow.js +16 -41
- package/dist/npm/header/HeaderSelectionCell.js +2 -7
- package/dist/npm/header/HeaderThElement.js +12 -18
- package/dist/npm/main.d.ts +1 -0
- package/dist/npm/main.js +1 -0
- package/dist/npm/navigation/TableKeyboardNavigation.js +27 -80
- package/dist/npm/navigation/constants.js +0 -14
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/pager/Pager.js +28 -46
- package/dist/npm/pager/PagerInfo.js +2 -8
- package/dist/npm/pager/PagerInput.js +2 -9
- package/dist/npm/pager/PagerNavigationButton.js +2 -5
- package/dist/npm/pager/PagerNumericButtons.js +0 -12
- package/dist/npm/pager/PagerPageSizes.js +7 -15
- package/package.json +10 -10
|
@@ -13,7 +13,6 @@ import { HeaderThElement } from './HeaderThElement';
|
|
|
13
13
|
/**
|
|
14
14
|
* @hidden
|
|
15
15
|
*/
|
|
16
|
-
|
|
17
16
|
var ariaSortMap = {
|
|
18
17
|
'none': 'none',
|
|
19
18
|
'asc': 'ascending',
|
|
@@ -22,7 +21,6 @@ var ariaSortMap = {
|
|
|
22
21
|
/**
|
|
23
22
|
* @hidden
|
|
24
23
|
*/
|
|
25
|
-
|
|
26
24
|
var sortSeqMap = {
|
|
27
25
|
true: {
|
|
28
26
|
'asc': 'desc',
|
|
@@ -38,7 +36,6 @@ var sortSeqMap = {
|
|
|
38
36
|
/**
|
|
39
37
|
* @hidden
|
|
40
38
|
*/
|
|
41
|
-
|
|
42
39
|
var HeaderRowVue2 = {
|
|
43
40
|
name: 'KendoHeaderRow',
|
|
44
41
|
props: {
|
|
@@ -98,15 +95,12 @@ var HeaderRowVue2 = {
|
|
|
98
95
|
},
|
|
99
96
|
cellClick: function cellClick(e, column) {
|
|
100
97
|
e.preventDefault();
|
|
101
|
-
|
|
102
98
|
if (!hasListener.call(this, 'sortChange')) {
|
|
103
99
|
return;
|
|
104
100
|
}
|
|
105
|
-
|
|
106
101
|
var _a = normalize(this.$props.sortable || false, column.sortable || false),
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
102
|
+
allowUnsort = _a.allowUnsort,
|
|
103
|
+
mode = _a.mode;
|
|
110
104
|
var oldDescriptor = (this.$props.sort || []).filter(function (d) {
|
|
111
105
|
return d.field === column.field;
|
|
112
106
|
})[0];
|
|
@@ -114,14 +108,12 @@ var HeaderRowVue2 = {
|
|
|
114
108
|
var newDescriptor = mode === 'single' ? [] : (this.$props.sort || []).filter(function (d) {
|
|
115
109
|
return d.field !== column.field;
|
|
116
110
|
});
|
|
117
|
-
|
|
118
111
|
if (dir !== '' && column.field) {
|
|
119
112
|
newDescriptor.push({
|
|
120
113
|
field: column.field,
|
|
121
114
|
dir: dir
|
|
122
115
|
});
|
|
123
116
|
}
|
|
124
|
-
|
|
125
117
|
this.sortChangeHandler(newDescriptor, {
|
|
126
118
|
event: e,
|
|
127
119
|
field: column.field
|
|
@@ -136,26 +128,21 @@ var HeaderRowVue2 = {
|
|
|
136
128
|
cellClass: function cellClass(field, headerClassName, locked) {
|
|
137
129
|
var customClass = headerClassName ? ' ' + headerClassName : '';
|
|
138
130
|
var result = "k-header ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
|
|
139
|
-
|
|
140
131
|
if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
|
|
141
132
|
return descriptor.field === field;
|
|
142
133
|
}).length > 0) {
|
|
143
134
|
result += ' k-sorted';
|
|
144
135
|
}
|
|
145
|
-
|
|
146
136
|
return result;
|
|
147
137
|
},
|
|
148
138
|
cellKeyDown: function cellKeyDown(event, column) {
|
|
149
139
|
var _a;
|
|
150
|
-
|
|
151
140
|
if (event.defaultPrevented) {
|
|
152
141
|
return;
|
|
153
142
|
}
|
|
154
|
-
|
|
155
143
|
if (event.keyCode === Keys.enter) {
|
|
156
144
|
this.cellClick(event, column);
|
|
157
145
|
}
|
|
158
|
-
|
|
159
146
|
if (event.altKey && event.keyCode === Keys.down) {
|
|
160
147
|
if (column.field) {
|
|
161
148
|
event.preventDefault();
|
|
@@ -197,25 +184,20 @@ var HeaderRowVue2 = {
|
|
|
197
184
|
var h = gh || createElement;
|
|
198
185
|
this.serviceIndex = 0;
|
|
199
186
|
this.index = -1;
|
|
200
|
-
|
|
201
187
|
var cells = function cells(rowIndexes) {
|
|
202
188
|
return rowIndexes.map(function (columnIndex) {
|
|
203
189
|
var _this2 = this;
|
|
204
|
-
|
|
205
190
|
var _this = this;
|
|
206
|
-
|
|
207
191
|
var column = this.$props.columns[columnIndex];
|
|
208
192
|
var sortable = this.$props.sortable && column.sortable;
|
|
209
193
|
var sortIndex = this.$props.sort ? this.$props.sort.findIndex(function (s) {
|
|
210
194
|
return s.field === column.field;
|
|
211
195
|
}) : -1;
|
|
212
196
|
var sortDir = sortIndex >= 0 ? this.$props.sort[sortIndex].dir || 'none' : 'none';
|
|
213
|
-
|
|
214
197
|
var sortIconRenderer = function sortIconRenderer(iconSortIndex) {
|
|
215
198
|
if (!_this.$props.sort) {
|
|
216
199
|
return null;
|
|
217
200
|
}
|
|
218
|
-
|
|
219
201
|
return iconSortIndex >= 0 && [h("span", {
|
|
220
202
|
key: 1,
|
|
221
203
|
"class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
|
|
@@ -224,7 +206,6 @@ var HeaderRowVue2 = {
|
|
|
224
206
|
"class": "k-sort-order"
|
|
225
207
|
}, [iconSortIndex + 1])];
|
|
226
208
|
};
|
|
227
|
-
|
|
228
209
|
var sortIcon = sortIconRenderer(sortIndex);
|
|
229
210
|
var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
|
|
230
211
|
var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
|
|
@@ -245,7 +226,8 @@ var HeaderRowVue2 = {
|
|
|
245
226
|
'role': 'presentation'
|
|
246
227
|
};
|
|
247
228
|
var key = column.declarationIndex >= 0 ? ++this.index : --this.serviceIndex;
|
|
248
|
-
return (
|
|
229
|
+
return (
|
|
230
|
+
// @ts-ignore function children
|
|
249
231
|
h(HeaderThElement, {
|
|
250
232
|
ariaSort: ariaAttrs.ariaSort,
|
|
251
233
|
attrs: this.v3 ? undefined : {
|
|
@@ -277,7 +259,8 @@ var HeaderRowVue2 = {
|
|
|
277
259
|
}
|
|
278
260
|
}
|
|
279
261
|
}, this.v3 ? function () {
|
|
280
|
-
return [[
|
|
262
|
+
return [[
|
|
263
|
+
// @ts-ignore
|
|
281
264
|
column.children.length === 0 && columnMenu && h(ColumnMenu, {
|
|
282
265
|
key: 0,
|
|
283
266
|
column: {
|
|
@@ -316,7 +299,8 @@ var HeaderRowVue2 = {
|
|
|
316
299
|
render: columnMenuRender
|
|
317
300
|
}), column.internalHeaderCell && h("span", {
|
|
318
301
|
"class": 'k-cell-inner'
|
|
319
|
-
}, [
|
|
302
|
+
}, [
|
|
303
|
+
// @ts-ignore function children
|
|
320
304
|
h(column.internalHeaderCell, {
|
|
321
305
|
key: 1,
|
|
322
306
|
field: column.field,
|
|
@@ -345,7 +329,8 @@ var HeaderRowVue2 = {
|
|
|
345
329
|
return [sortIcon];
|
|
346
330
|
} : [sortIcon])]) || h("span", {
|
|
347
331
|
"class": 'k-cell-inner'
|
|
348
|
-
}, [
|
|
332
|
+
}, [
|
|
333
|
+
// @ts-ignore function children
|
|
349
334
|
h(HeaderCell, {
|
|
350
335
|
key: 1,
|
|
351
336
|
field: column.field,
|
|
@@ -370,7 +355,8 @@ var HeaderRowVue2 = {
|
|
|
370
355
|
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
371
356
|
}, _this2.v3 ? function () {
|
|
372
357
|
return [sortIcon];
|
|
373
|
-
} : [sortIcon])]), _this2.$props.columnResize && _this2.$props.columnResize.resizable
|
|
358
|
+
} : [sortIcon])]), _this2.$props.columnResize && _this2.$props.columnResize.resizable
|
|
359
|
+
// @ts-ignore
|
|
374
360
|
&& column.resizable && h(ColumnResizer, {
|
|
375
361
|
key: 2,
|
|
376
362
|
onResize: function onResize(e, element, end) {
|
|
@@ -486,7 +472,6 @@ var HeaderRowVue2 = {
|
|
|
486
472
|
);
|
|
487
473
|
}, this);
|
|
488
474
|
};
|
|
489
|
-
|
|
490
475
|
return h("thead", {
|
|
491
476
|
role: "presentation",
|
|
492
477
|
attrs: this.v3 ? undefined : {
|
|
@@ -497,8 +482,8 @@ var HeaderRowVue2 = {
|
|
|
497
482
|
"data-keyboardnavheader": true
|
|
498
483
|
}, [this.$props.columnsMap.map(function (rowIndexes, index) {
|
|
499
484
|
var _this3 = this;
|
|
500
|
-
|
|
501
|
-
|
|
485
|
+
return (this.$props.groupable || this.$props.reorderable) &&
|
|
486
|
+
// @ts-ignore function children
|
|
502
487
|
h(ColumnDraggable, {
|
|
503
488
|
key: index,
|
|
504
489
|
onPressHandler: this.pressHandler,
|
|
@@ -523,6 +508,5 @@ var HeaderRowVue2 = {
|
|
|
523
508
|
/**
|
|
524
509
|
* @hidden
|
|
525
510
|
*/
|
|
526
|
-
|
|
527
511
|
var HeaderRow = HeaderRowVue2;
|
|
528
512
|
export { HeaderRow, HeaderRowVue2 };
|
|
@@ -7,7 +7,6 @@ import { guid, getTemplate } from '@progress/kendo-vue-common';
|
|
|
7
7
|
/**
|
|
8
8
|
* @hidden
|
|
9
9
|
*/
|
|
10
|
-
|
|
11
10
|
var HeaderSelectionCellVue2 = {
|
|
12
11
|
props: {
|
|
13
12
|
field: String,
|
|
@@ -76,6 +75,5 @@ var HeaderSelectionCellVue2 = {
|
|
|
76
75
|
/**
|
|
77
76
|
* @hidden
|
|
78
77
|
*/
|
|
79
|
-
|
|
80
78
|
var HeaderSelectionCell = HeaderSelectionCellVue2;
|
|
81
79
|
export { HeaderSelectionCell, HeaderSelectionCellVue2 };
|
|
@@ -9,7 +9,6 @@ import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '../navigation/con
|
|
|
9
9
|
/**
|
|
10
10
|
* @hidden
|
|
11
11
|
*/
|
|
12
|
-
|
|
13
12
|
var HeaderThElementVue2 = {
|
|
14
13
|
name: 'KendoHeaderThElement',
|
|
15
14
|
// @ts-ignore
|
|
@@ -52,16 +51,16 @@ var HeaderThElementVue2 = {
|
|
|
52
51
|
render: function render(createElement) {
|
|
53
52
|
var h = gh || createElement;
|
|
54
53
|
var _a = this.$props,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
54
|
+
ariaSort = _a.ariaSort,
|
|
55
|
+
colSpan = _a.colSpan,
|
|
56
|
+
rowSpan = _a.rowSpan,
|
|
57
|
+
className = _a.className,
|
|
58
|
+
columnId = _a.columnId,
|
|
59
|
+
navigatable = _a.navigatable,
|
|
60
|
+
ariaColumnIndex = _a.ariaColumnIndex,
|
|
61
|
+
ariaLabel = _a.ariaLabel,
|
|
62
|
+
role = _a.role,
|
|
63
|
+
ariaSelected = _a.ariaSelected;
|
|
65
64
|
var navAttrs = this.getKeyboardNavigationAttributes(columnId, navigatable);
|
|
66
65
|
var defaultSlot = getDefaultSlots(this);
|
|
67
66
|
return h("th", {
|
|
@@ -106,6 +105,5 @@ var HeaderThElementVue2 = {
|
|
|
106
105
|
/**
|
|
107
106
|
* @hidden
|
|
108
107
|
*/
|
|
109
|
-
|
|
110
108
|
var HeaderThElement = HeaderThElementVue2;
|
|
111
109
|
export { HeaderThElement, HeaderThElementVue2 };
|
package/dist/es/main.d.ts
CHANGED
package/dist/es/main.js
CHANGED
|
@@ -6,9 +6,8 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
|
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
8
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
};
|
|
10
|
+
// @ts-ignore
|
|
12
11
|
import * as Vue from 'vue';
|
|
13
12
|
var allVue = Vue;
|
|
14
13
|
var gh = allVue.h;
|
|
@@ -21,7 +20,6 @@ import { findId, findNextIdByCellIndex, findNextIdByRowIndex, getBodyElement, ge
|
|
|
21
20
|
/**
|
|
22
21
|
* @hidden
|
|
23
22
|
*/
|
|
24
|
-
|
|
25
23
|
var TableKeyboardNavigationProviderVue2 = {
|
|
26
24
|
name: 'KendoTableKeyboardNavigationProvider',
|
|
27
25
|
props: {
|
|
@@ -45,9 +43,9 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
45
43
|
// },
|
|
46
44
|
// @ts-ignore
|
|
47
45
|
setup: !isV3 ? undefined : function () {
|
|
48
|
-
var v3 = !!isV3;
|
|
46
|
+
var v3 = !!isV3;
|
|
47
|
+
// const localizationService = ref(new LocalizationService(props.language));
|
|
49
48
|
// provide('kendoLocalizationService', localizationService);
|
|
50
|
-
|
|
51
49
|
return {
|
|
52
50
|
v3: v3
|
|
53
51
|
};
|
|
@@ -67,9 +65,9 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
67
65
|
},
|
|
68
66
|
created: function created() {
|
|
69
67
|
var _a = this.$props,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
navigatable = _a.navigatable,
|
|
69
|
+
id = _a.id;
|
|
70
|
+
// v.2: check if nested navigation
|
|
73
71
|
if (navigatable) {
|
|
74
72
|
this.kbContext = {
|
|
75
73
|
activeId: '',
|
|
@@ -87,25 +85,21 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
87
85
|
methods: {
|
|
88
86
|
getKeyboardNavigationAttributes: function getKeyboardNavigationAttributes(elementId) {
|
|
89
87
|
var _a;
|
|
90
|
-
|
|
91
88
|
if (!elementId || this.$props.navigatable === false) {
|
|
92
89
|
return {};
|
|
93
90
|
}
|
|
94
|
-
|
|
95
91
|
return _a = {
|
|
96
92
|
tabIndex: this.kbContext.activeId && this.kbContext.activeId === elementId ? 0 : -1
|
|
97
93
|
}, _a[KEYBOARD_NAV_DATA_LEVEL] = this.kbContext.level, _a[KEYBOARD_NAV_DATA_ID] = elementId, _a;
|
|
98
94
|
},
|
|
99
95
|
onComponentDidMount: function onComponentDidMount(options) {
|
|
100
96
|
var _a = options.scope,
|
|
101
|
-
|
|
102
|
-
|
|
97
|
+
scope = _a === void 0 ? this.scope : _a;
|
|
103
98
|
if (this.kbContext && this.navigation && scope) {
|
|
104
99
|
this.scope = scope;
|
|
105
100
|
this.generateMatrix(options);
|
|
106
101
|
var firstId = this.navigation.navigationMatrix[0][0];
|
|
107
102
|
var firstIdElement = navigationTools.getActiveElement(scope, firstId);
|
|
108
|
-
|
|
109
103
|
if (firstId && firstIdElement) {
|
|
110
104
|
this.kbContext.activeId = firstId;
|
|
111
105
|
firstIdElement.setAttribute('tabIndex', '0');
|
|
@@ -114,15 +108,13 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
114
108
|
},
|
|
115
109
|
onGetSnapshotBeforeUpdate: function onGetSnapshotBeforeUpdate(options) {
|
|
116
110
|
var _a = options.kbContext,
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
111
|
+
kbContext = _a === void 0 ? this.kbContext : _a,
|
|
112
|
+
_b = options.navigation,
|
|
113
|
+
navigation = _b === void 0 ? this.navigation : _b,
|
|
114
|
+
document = options.document;
|
|
122
115
|
if (kbContext && navigation && document) {
|
|
123
116
|
var activeElement = document.activeElement;
|
|
124
117
|
var activeId = navigationTools.getNavigatableId(activeElement);
|
|
125
|
-
|
|
126
118
|
if (activeId && activeId === kbContext.activeId) {
|
|
127
119
|
navigation.activeElementIsFocused = true;
|
|
128
120
|
}
|
|
@@ -130,74 +122,59 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
130
122
|
},
|
|
131
123
|
onComponentDidUpdate: function onComponentDidUpdate(options) {
|
|
132
124
|
var scope = options.scope;
|
|
133
|
-
this.generateMatrix(options);
|
|
134
|
-
|
|
125
|
+
this.generateMatrix(options);
|
|
126
|
+
// check if nested navigation
|
|
135
127
|
if (this.kbContext && this.navigation && scope) {
|
|
136
128
|
var activeElement = navigationTools.getActiveElement(scope, this.kbContext.activeId);
|
|
137
|
-
|
|
138
129
|
if (!activeElement) {
|
|
139
130
|
var firstId = this.navigation.navigationMatrix[0][0];
|
|
140
131
|
var firstIdElement = navigationTools.getActiveElement(scope, firstId);
|
|
141
|
-
|
|
142
132
|
if (firstId && firstIdElement) {
|
|
143
133
|
this.kbContext.activeId = firstId;
|
|
144
134
|
firstIdElement.setAttribute('tabIndex', '0');
|
|
145
|
-
|
|
146
135
|
if (this.navigation.activeElementIsFocused) {
|
|
147
136
|
firstIdElement.focus();
|
|
148
137
|
}
|
|
149
138
|
}
|
|
150
139
|
}
|
|
151
|
-
|
|
152
140
|
this.navigation.activeElementIsFocused = false;
|
|
153
141
|
}
|
|
154
142
|
},
|
|
155
143
|
onFocus: function onFocus(event) {
|
|
156
144
|
var kbContext = this.kbContext;
|
|
157
|
-
|
|
158
145
|
if (event.defaultPrevented) {
|
|
159
146
|
return;
|
|
160
147
|
}
|
|
161
|
-
|
|
162
148
|
if (!kbContext) {
|
|
163
149
|
return;
|
|
164
150
|
}
|
|
165
|
-
|
|
166
151
|
var focusedElement = event.target;
|
|
167
152
|
var activeId = navigationTools.getNavigatableId(focusedElement);
|
|
168
|
-
|
|
169
153
|
if (activeId && activeId !== kbContext.activeId) {
|
|
170
154
|
var scope = navigationTools.getClosestScope(focusedElement);
|
|
171
|
-
|
|
172
155
|
if (!scope) {
|
|
173
156
|
return;
|
|
174
157
|
}
|
|
175
|
-
|
|
176
158
|
var prevElement = navigationTools.getActiveElement(scope, kbContext.activeId);
|
|
177
|
-
|
|
178
159
|
if (prevElement) {
|
|
179
160
|
prevElement.setAttribute('tabIndex', '-1');
|
|
180
161
|
}
|
|
181
|
-
|
|
182
162
|
focusedElement.setAttribute('tabIndex', '0');
|
|
183
163
|
kbContext.activeId = activeId;
|
|
184
164
|
}
|
|
185
165
|
},
|
|
186
166
|
onKeyDown: function onKeyDown(event, options) {
|
|
187
167
|
var _a = options.kbContext,
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
168
|
+
kbContext = _a === void 0 ? this.kbContext : _a,
|
|
169
|
+
_b = options.navigation,
|
|
170
|
+
navigation = _b === void 0 ? this.navigation : _b,
|
|
171
|
+
onNavigationAction = options.onNavigationAction;
|
|
193
172
|
if (event.defaultPrevented) {
|
|
194
173
|
return;
|
|
195
174
|
}
|
|
196
|
-
|
|
197
175
|
if (!kbContext || !navigation) {
|
|
198
176
|
return;
|
|
199
177
|
}
|
|
200
|
-
|
|
201
178
|
if (event.keyCode === Keys.esc) {
|
|
202
179
|
// activate navigation
|
|
203
180
|
var elementForFocus = navigationTools.getClosestNavigatableElement(event.target);
|
|
@@ -208,20 +185,17 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
208
185
|
});
|
|
209
186
|
return;
|
|
210
187
|
}
|
|
211
|
-
|
|
212
188
|
var element = event.target;
|
|
213
189
|
var elementId = navigationTools.getNavigatableId(element);
|
|
214
190
|
var dataLevel = navigationTools.getNavigatableLevel(element);
|
|
215
191
|
var scope = navigationTools.getClosestScope(element);
|
|
216
192
|
var matrix = navigation.navigationMatrix;
|
|
217
|
-
|
|
218
193
|
if (dataLevel !== undefined && scope) {
|
|
219
194
|
if (event.keyCode === Keys.enter) {
|
|
220
195
|
// activate nested navigation or focus focusable element
|
|
221
196
|
var navigatableElement = navigationTools.getNavigatableElement(element, {
|
|
222
197
|
level: dataLevel + 1
|
|
223
198
|
});
|
|
224
|
-
|
|
225
199
|
if (navigatableElement) {
|
|
226
200
|
navigationTools.focusElement({
|
|
227
201
|
elementForFocus: navigatableElement,
|
|
@@ -241,17 +215,14 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
241
215
|
return;
|
|
242
216
|
}
|
|
243
217
|
}
|
|
244
|
-
|
|
245
218
|
if (event.keyCode === Keys.up || event.keyCode === Keys.down || event.keyCode === Keys.left || event.keyCode === Keys.right) {
|
|
246
219
|
var isReverse = event.keyCode === Keys.up || event.keyCode === Keys.left;
|
|
247
220
|
var isVertical = event.keyCode === Keys.up || event.keyCode === Keys.down;
|
|
248
221
|
var currentIdIndexes = void 0;
|
|
249
|
-
|
|
250
222
|
if (navigation && navigation.prevNavigationIndexes) {
|
|
251
223
|
var _c = navigation.prevNavigationIndexes,
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
224
|
+
rowIndex = _c[0],
|
|
225
|
+
cellIndex = _c[1];
|
|
255
226
|
if (matrix[rowIndex][cellIndex] === elementId) {
|
|
256
227
|
currentIdIndexes = navigation.prevNavigationIndexes;
|
|
257
228
|
} else {
|
|
@@ -260,18 +231,15 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
260
231
|
} else {
|
|
261
232
|
currentIdIndexes = findId(matrix, elementId);
|
|
262
233
|
}
|
|
263
|
-
|
|
264
234
|
if (currentIdIndexes) {
|
|
265
235
|
var rowIndex = currentIdIndexes[0],
|
|
266
|
-
|
|
267
|
-
|
|
236
|
+
cellIndex = currentIdIndexes[1];
|
|
268
237
|
var _d = isVertical ? findNextIdByRowIndex(rowIndex, cellIndex, elementId, matrix, isReverse) : findNextIdByCellIndex(rowIndex, cellIndex, elementId, matrix, isReverse),
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
238
|
+
idForFocus = _d[0],
|
|
239
|
+
currentIndexes = _d[1];
|
|
272
240
|
if (idForFocus) {
|
|
273
|
-
var elementForFocus = navigationTools.getActiveElement(scope, idForFocus);
|
|
274
|
-
|
|
241
|
+
var elementForFocus = navigationTools.getActiveElement(scope, idForFocus);
|
|
242
|
+
// emit event
|
|
275
243
|
navigationTools.focusElement({
|
|
276
244
|
elementForFocus: elementForFocus,
|
|
277
245
|
event: event,
|
|
@@ -279,7 +247,6 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
279
247
|
prevElement: element
|
|
280
248
|
});
|
|
281
249
|
navigation.prevNavigationIndexes = currentIndexes;
|
|
282
|
-
|
|
283
250
|
if (onNavigationAction) {
|
|
284
251
|
onNavigationAction({
|
|
285
252
|
focusElement: elementForFocus,
|
|
@@ -293,65 +260,51 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
293
260
|
},
|
|
294
261
|
generateMatrix: function generateMatrix(options) {
|
|
295
262
|
var _a = options.navigation,
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
263
|
+
navigation = _a === void 0 ? this.navigation : _a,
|
|
264
|
+
scope = options.scope;
|
|
299
265
|
if (!navigation || !scope) {
|
|
300
266
|
return;
|
|
301
267
|
}
|
|
302
|
-
|
|
303
268
|
var matrix = [];
|
|
304
269
|
var thead = getHeaderElement(scope);
|
|
305
270
|
var tbody = getBodyElement(scope);
|
|
306
|
-
|
|
307
271
|
if (!thead || !tbody) {
|
|
308
272
|
return;
|
|
309
273
|
}
|
|
310
|
-
|
|
311
274
|
var headerRows = Array.from(thead.children);
|
|
312
275
|
var bodyRows = Array.from(tbody.children);
|
|
313
|
-
|
|
314
276
|
__spreadArray(__spreadArray([], headerRows, true), bodyRows, true).forEach(function (row, rowIndex) {
|
|
315
277
|
Array.from(row.children).forEach(function (cell) {
|
|
316
278
|
var cellId = getNavigatableId(cell);
|
|
317
|
-
|
|
318
279
|
if (!cellId) {
|
|
319
280
|
return;
|
|
320
281
|
} // cell is not navigatable
|
|
321
|
-
|
|
322
|
-
|
|
323
282
|
var rowSpan = cell.rowSpan || 1;
|
|
324
283
|
var cellSpan = cell.colSpan || 1;
|
|
325
284
|
var cellIndex;
|
|
326
|
-
|
|
327
285
|
for (var depth = rowIndex, maxDepth = rowIndex + rowSpan; depth < maxDepth; depth++) {
|
|
328
286
|
if (!matrix[depth]) {
|
|
329
287
|
matrix[depth] = [];
|
|
330
288
|
}
|
|
331
|
-
|
|
332
289
|
if (cellIndex === undefined) {
|
|
333
290
|
var freeSlotIndex = matrix[depth].findIndex(function (mi) {
|
|
334
291
|
return !mi;
|
|
335
292
|
});
|
|
336
293
|
cellIndex = freeSlotIndex > -1 ? freeSlotIndex : matrix[depth].length;
|
|
337
294
|
}
|
|
338
|
-
|
|
339
295
|
matrix[depth][cellIndex] = cellId || '';
|
|
340
296
|
}
|
|
341
|
-
|
|
342
297
|
for (var depth = cellIndex + 1, maxDepth = cellIndex + cellSpan; depth < maxDepth; depth++) {
|
|
343
298
|
matrix[rowIndex][depth] = cellId || '';
|
|
344
299
|
}
|
|
345
300
|
});
|
|
346
301
|
});
|
|
347
|
-
|
|
348
302
|
navigation.navigationMatrix = matrix.filter(function (row) {
|
|
349
303
|
return !!row;
|
|
350
304
|
});
|
|
351
305
|
navigation.lastHeaderIndex = headerRows.length - 1;
|
|
352
306
|
}
|
|
353
307
|
},
|
|
354
|
-
|
|
355
308
|
/**
|
|
356
309
|
* @hidden
|
|
357
310
|
*/
|
|
@@ -366,6 +319,5 @@ var TableKeyboardNavigationProviderVue2 = {
|
|
|
366
319
|
/**
|
|
367
320
|
* @hidden
|
|
368
321
|
*/
|
|
369
|
-
|
|
370
322
|
var TableKeyboardNavigationProvider = TableKeyboardNavigationProviderVue2;
|
|
371
323
|
export { TableKeyboardNavigationProvider, TableKeyboardNavigationProviderVue2 };
|
|
@@ -7,69 +7,55 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
|
|
|
7
7
|
}
|
|
8
8
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
9
|
};
|
|
10
|
-
|
|
11
10
|
var _a, _b, _c;
|
|
12
11
|
/**
|
|
13
12
|
* @hidden
|
|
14
13
|
*/
|
|
15
|
-
|
|
16
|
-
|
|
17
14
|
export var KEYBOARD_NAV_DATA_LEVEL = 'data-keyboardnavlevel';
|
|
18
15
|
/**
|
|
19
16
|
* @hidden
|
|
20
17
|
*/
|
|
21
|
-
|
|
22
18
|
export var KEYBOARD_NAV_DATA_SCOPE = 'data-keyboardnavscope';
|
|
23
19
|
/**
|
|
24
20
|
* @hidden
|
|
25
21
|
*/
|
|
26
|
-
|
|
27
22
|
export var KEYBOARD_NAV_DATA_HEADER = 'data-keyboardnavheader';
|
|
28
23
|
/**
|
|
29
24
|
* @hidden
|
|
30
25
|
*/
|
|
31
|
-
|
|
32
26
|
export var KEYBOARD_NAV_DATA_BODY = 'data-keyboardnavbody';
|
|
33
27
|
/**
|
|
34
28
|
* @hidden
|
|
35
29
|
*/
|
|
36
|
-
|
|
37
30
|
export var KEYBOARD_NAV_DATA_ID = 'data-keyboardnavid';
|
|
38
31
|
/**
|
|
39
32
|
* @hidden
|
|
40
33
|
*/
|
|
41
|
-
|
|
42
34
|
export var KEYBOARD_NAV_DATA_ZONE = 'data-keyboardnavzone';
|
|
43
35
|
/**
|
|
44
36
|
* @hidden
|
|
45
37
|
*/
|
|
46
|
-
|
|
47
38
|
export var KEYBOARD_NAV_FILTER_COL_SUFFIX = '_filter';
|
|
48
39
|
var FOCUSABLE_ELEMENTS_BASE = ['input:not([disabled]):not([type=hidden])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'a[href]', 'area[href]', 'summary', 'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]', '[contenteditable]'];
|
|
49
40
|
/**
|
|
50
41
|
* @hidden
|
|
51
42
|
*/
|
|
52
|
-
|
|
53
43
|
export var FOCUSABLE_ELEMENTS = __spreadArray(__spreadArray([], FOCUSABLE_ELEMENTS_BASE, true), ['[tabindex]'], false);
|
|
54
44
|
/**
|
|
55
45
|
* @hidden
|
|
56
46
|
*/
|
|
57
|
-
|
|
58
47
|
export var TABBABLE_ELEMENTS = __spreadArray(__spreadArray([], FOCUSABLE_ELEMENTS_BASE, true), ['[tabindex]'], false).map(function (selector) {
|
|
59
48
|
return selector + ':not([tabindex="-1"])';
|
|
60
49
|
});
|
|
61
50
|
/**
|
|
62
51
|
* @hidden
|
|
63
52
|
*/
|
|
64
|
-
|
|
65
53
|
export var tableKeyboardNavigationScopeAttributes = (_a = {}, _a[KEYBOARD_NAV_DATA_SCOPE] = true, _a);
|
|
66
54
|
/**
|
|
67
55
|
* @hidden
|
|
68
56
|
*/
|
|
69
|
-
|
|
70
57
|
export var tableKeyboardNavigationHeaderAttributes = (_b = {}, _b[KEYBOARD_NAV_DATA_HEADER] = true, _b);
|
|
71
58
|
/**
|
|
72
59
|
* @hidden
|
|
73
60
|
*/
|
|
74
|
-
|
|
75
61
|
export var tableKeyboardNavigationBodyAttributes = (_c = {}, _c[KEYBOARD_NAV_DATA_BODY] = true, _c);
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-vue-data-tools',
|
|
6
6
|
productName: 'Kendo UI for Vue',
|
|
7
7
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1666682597,
|
|
9
9
|
version: '',
|
|
10
10
|
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
11
|
};
|