@progress/kendo-vue-data-tools 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431
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/README.md +1 -1
- package/dist/cdn/js/kendo-vue-data-tools.js +1 -1
- package/dist/es/cells/FilterCell.js +35 -21
- package/dist/es/columnmenu/ColumnMenu.js +9 -3
- package/dist/es/columnmenu/ColumnMenuCheckboxFilter.js +10 -3
- package/dist/es/columnmenu/ColumnMenuItem.js +3 -3
- package/dist/es/columnmenu/ColumnMenuSort.js +8 -8
- package/dist/es/drag/ColumnDraggable.js +6 -2
- package/dist/es/drag/DragClue.js +6 -2
- package/dist/es/filter/Expression.js +17 -8
- package/dist/es/filter/Filter.js +20 -4
- package/dist/es/filter/GroupFilters.js +10 -2
- package/dist/es/filter/GroupToolbar.js +33 -8
- package/dist/es/header/FilterRow.d.ts +1 -0
- package/dist/es/header/FilterRow.js +9 -6
- package/dist/es/header/Header.d.ts +1 -0
- package/dist/es/header/Header.js +12 -2
- package/dist/es/header/HeaderRow.d.ts +2 -0
- package/dist/es/header/HeaderRow.js +78 -8
- package/dist/es/header/HeaderSelectionCell.d.ts +1 -0
- package/dist/es/header/HeaderSelectionCell.js +43 -13
- package/dist/es/header/HeaderTdElement.d.ts +46 -0
- package/dist/es/header/HeaderTdElement.js +92 -0
- package/dist/es/header/HeaderThElement.d.ts +8 -1
- package/dist/es/header/HeaderThElement.js +10 -2
- package/dist/es/header/main.d.ts +1 -0
- package/dist/es/header/main.js +1 -0
- package/dist/es/interfaces/FilterCellProps.d.ts +12 -0
- package/dist/es/messages/main.d.ts +5 -0
- package/dist/es/messages/main.js +5 -0
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/pager/Pager.d.ts +13 -1
- package/dist/es/pager/Pager.js +66 -28
- package/dist/es/pager/PagerInput.d.ts +9 -1
- package/dist/es/pager/PagerInput.js +16 -2
- package/dist/es/pager/PagerNavigationButton.d.ts +13 -0
- package/dist/es/pager/PagerNavigationButton.js +31 -22
- package/dist/es/pager/PagerNumericButtons.d.ts +5 -1
- package/dist/es/pager/PagerNumericButtons.js +61 -27
- package/dist/es/pager/PagerPageSizes.d.ts +1 -0
- package/dist/es/pager/PagerPageSizes.js +3 -0
- package/dist/es/selection/utils.js +6 -8
- package/dist/esm/cells/FilterCell.js +35 -21
- package/dist/esm/columnmenu/ColumnMenu.js +9 -3
- package/dist/esm/columnmenu/ColumnMenuCheckboxFilter.js +10 -3
- package/dist/esm/columnmenu/ColumnMenuItem.js +3 -3
- package/dist/esm/columnmenu/ColumnMenuSort.js +8 -8
- package/dist/esm/drag/ColumnDraggable.js +6 -2
- package/dist/esm/drag/DragClue.js +6 -2
- package/dist/esm/filter/Expression.js +17 -8
- package/dist/esm/filter/Filter.js +20 -4
- package/dist/esm/filter/GroupFilters.js +10 -2
- package/dist/esm/filter/GroupToolbar.js +33 -8
- package/dist/esm/header/FilterRow.d.ts +1 -0
- package/dist/esm/header/FilterRow.js +9 -6
- package/dist/esm/header/Header.d.ts +1 -0
- package/dist/esm/header/Header.js +12 -2
- package/dist/esm/header/HeaderRow.d.ts +2 -0
- package/dist/esm/header/HeaderRow.js +78 -8
- package/dist/esm/header/HeaderSelectionCell.d.ts +1 -0
- package/dist/esm/header/HeaderSelectionCell.js +43 -13
- package/dist/esm/header/HeaderTdElement.d.ts +46 -0
- package/dist/esm/header/HeaderTdElement.js +92 -0
- package/dist/esm/header/HeaderThElement.d.ts +8 -1
- package/dist/esm/header/HeaderThElement.js +10 -2
- package/dist/esm/header/main.d.ts +1 -0
- package/dist/esm/header/main.js +1 -0
- package/dist/esm/interfaces/FilterCellProps.d.ts +12 -0
- package/dist/esm/messages/main.d.ts +5 -0
- package/dist/esm/messages/main.js +5 -0
- package/dist/esm/package-metadata.js +1 -1
- package/dist/esm/pager/Pager.d.ts +13 -1
- package/dist/esm/pager/Pager.js +66 -28
- package/dist/esm/pager/PagerInput.d.ts +9 -1
- package/dist/esm/pager/PagerInput.js +16 -2
- package/dist/esm/pager/PagerNavigationButton.d.ts +13 -0
- package/dist/esm/pager/PagerNavigationButton.js +31 -22
- package/dist/esm/pager/PagerNumericButtons.d.ts +5 -1
- package/dist/esm/pager/PagerNumericButtons.js +61 -27
- package/dist/esm/pager/PagerPageSizes.d.ts +1 -0
- package/dist/esm/pager/PagerPageSizes.js +3 -0
- package/dist/esm/selection/utils.js +6 -8
- package/dist/npm/cells/FilterCell.js +34 -20
- package/dist/npm/columnmenu/ColumnMenu.js +8 -2
- package/dist/npm/columnmenu/ColumnMenuCheckboxFilter.js +9 -2
- package/dist/npm/columnmenu/ColumnMenuItem.js +2 -2
- package/dist/npm/columnmenu/ColumnMenuSort.js +8 -8
- package/dist/npm/drag/ColumnDraggable.js +6 -2
- package/dist/npm/drag/DragClue.js +6 -2
- package/dist/npm/filter/Expression.js +17 -8
- package/dist/npm/filter/Filter.js +20 -4
- package/dist/npm/filter/GroupFilters.js +10 -2
- package/dist/npm/filter/GroupToolbar.js +33 -8
- package/dist/npm/header/FilterRow.d.ts +1 -0
- package/dist/npm/header/FilterRow.js +9 -6
- package/dist/npm/header/Header.d.ts +1 -0
- package/dist/npm/header/Header.js +11 -1
- package/dist/npm/header/HeaderRow.d.ts +2 -0
- package/dist/npm/header/HeaderRow.js +77 -7
- package/dist/npm/header/HeaderSelectionCell.d.ts +1 -0
- package/dist/npm/header/HeaderSelectionCell.js +42 -12
- package/dist/npm/header/HeaderTdElement.d.ts +46 -0
- package/dist/npm/header/HeaderTdElement.js +99 -0
- package/dist/npm/header/HeaderThElement.d.ts +8 -1
- package/dist/npm/header/HeaderThElement.js +10 -2
- package/dist/npm/header/main.d.ts +1 -0
- package/dist/npm/header/main.js +1 -0
- package/dist/npm/interfaces/FilterCellProps.d.ts +12 -0
- package/dist/npm/messages/main.d.ts +5 -0
- package/dist/npm/messages/main.js +6 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/pager/Pager.d.ts +13 -1
- package/dist/npm/pager/Pager.js +65 -27
- package/dist/npm/pager/PagerInput.d.ts +9 -1
- package/dist/npm/pager/PagerInput.js +16 -2
- package/dist/npm/pager/PagerNavigationButton.d.ts +13 -0
- package/dist/npm/pager/PagerNavigationButton.js +31 -22
- package/dist/npm/pager/PagerNumericButtons.d.ts +5 -1
- package/dist/npm/pager/PagerNumericButtons.js +61 -27
- package/dist/npm/pager/PagerPageSizes.d.ts +1 -0
- package/dist/npm/pager/PagerPageSizes.js +3 -0
- package/dist/npm/selection/utils.js +5 -7
- package/package.json +12 -11
|
@@ -10,6 +10,7 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
|
10
10
|
import { filterAriaLabel, messages } from '../messages/main';
|
|
11
11
|
import { tableKeyboardNavigationTools as navigationTools } from '../navigation/utils';
|
|
12
12
|
import { HeaderThElement } from './HeaderThElement';
|
|
13
|
+
import { classNames } from '@progress/kendo-vue-common';
|
|
13
14
|
/**
|
|
14
15
|
* @hidden
|
|
15
16
|
*/
|
|
@@ -23,7 +24,8 @@ var FilterRowVue2 = {
|
|
|
23
24
|
sort: [Object, Array],
|
|
24
25
|
cellRender: [String, Function, Object],
|
|
25
26
|
isRtl: Boolean,
|
|
26
|
-
ariaRowIndex: Number
|
|
27
|
+
ariaRowIndex: Number,
|
|
28
|
+
size: String
|
|
27
29
|
},
|
|
28
30
|
inject: {
|
|
29
31
|
kendoLocalizationService: {
|
|
@@ -32,7 +34,7 @@ var FilterRowVue2 = {
|
|
|
32
34
|
},
|
|
33
35
|
methods: {
|
|
34
36
|
headerCellClassName: function headerCellClassName(field, locked) {
|
|
35
|
-
var result = ""
|
|
37
|
+
var result = "k-header" + (locked ? ' k-grid-header-sticky' : '');
|
|
36
38
|
if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
|
|
37
39
|
return descriptor.field === field;
|
|
38
40
|
}).length > 0) {
|
|
@@ -95,7 +97,6 @@ var FilterRowVue2 = {
|
|
|
95
97
|
})[0];
|
|
96
98
|
return found ? found.operator : null;
|
|
97
99
|
};
|
|
98
|
-
var filterCellProps;
|
|
99
100
|
var serviceIndex = 0,
|
|
100
101
|
index = -1;
|
|
101
102
|
var filterCells = this.$props.columns.filter(function (c) {
|
|
@@ -112,6 +113,7 @@ var FilterRowVue2 = {
|
|
|
112
113
|
attrs: this.v3 ? undefined : {
|
|
113
114
|
grid: this.$props.grid,
|
|
114
115
|
field: column.field,
|
|
116
|
+
size: this.$props.size,
|
|
115
117
|
title: column.filterTitle,
|
|
116
118
|
value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
|
|
117
119
|
operator: activeOperatorFor(column.field),
|
|
@@ -121,6 +123,7 @@ var FilterRowVue2 = {
|
|
|
121
123
|
render: column.filterCell || this.$props.cellRender
|
|
122
124
|
},
|
|
123
125
|
field: column.field,
|
|
126
|
+
size: this.$props.size,
|
|
124
127
|
title: column.filterTitle,
|
|
125
128
|
value: activeFilterValueFor(column.field, filterType === 'text' ? '' : null),
|
|
126
129
|
operator: activeOperatorFor(column.field),
|
|
@@ -158,7 +161,7 @@ var FilterRowVue2 = {
|
|
|
158
161
|
},
|
|
159
162
|
navigatable: column.navigatable,
|
|
160
163
|
style: style,
|
|
161
|
-
"class": this.headerCellClassName(column.field, column.locked) || undefined,
|
|
164
|
+
"class": classNames('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
|
|
162
165
|
ariaLabel: ariaAttrs.ariaLabel,
|
|
163
166
|
ariaColumnIndex: ariaAttrs.ariaColumnIndex
|
|
164
167
|
}, this.v3 ? function () {
|
|
@@ -177,13 +180,13 @@ var FilterRowVue2 = {
|
|
|
177
180
|
},
|
|
178
181
|
navigatable: column.navigatable,
|
|
179
182
|
style: style,
|
|
180
|
-
"class": this.headerCellClassName(column.field, column.locked) || undefined,
|
|
183
|
+
"class": classNames('k-table-th', this.headerCellClassName(column.field, column.locked) || undefined),
|
|
181
184
|
ariaLabel: ariaAttrs.ariaLabel,
|
|
182
185
|
ariaColumnIndex: ariaAttrs.ariaColumnIndex
|
|
183
186
|
});
|
|
184
187
|
}, this);
|
|
185
188
|
return h("tr", {
|
|
186
|
-
"class": "k-filter-row",
|
|
189
|
+
"class": "k-table-row k-filter-row",
|
|
187
190
|
"aria-rowindex": this.ariaRowIndex,
|
|
188
191
|
attrs: this.v3 ? undefined : {
|
|
189
192
|
"aria-rowindex": this.ariaRowIndex,
|
package/dist/es/header/Header.js
CHANGED
|
@@ -4,7 +4,7 @@ var allVue = Vue;
|
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
6
|
var ref = allVue.ref;
|
|
7
|
-
import { isRtl, getRef, setRef, BrowserSupportService } from '@progress/kendo-vue-common';
|
|
7
|
+
import { isRtl, getRef, setRef, BrowserSupportService, kendoThemeMaps } from '@progress/kendo-vue-common';
|
|
8
8
|
/**
|
|
9
9
|
* @hidden
|
|
10
10
|
*/
|
|
@@ -15,7 +15,8 @@ var HeaderVue2 = {
|
|
|
15
15
|
headerRow: Object,
|
|
16
16
|
columnResize: Object,
|
|
17
17
|
cols: Array,
|
|
18
|
-
draggable: Boolean
|
|
18
|
+
draggable: Boolean,
|
|
19
|
+
size: String
|
|
19
20
|
},
|
|
20
21
|
data: function data() {
|
|
21
22
|
return {
|
|
@@ -31,6 +32,14 @@ var HeaderVue2 = {
|
|
|
31
32
|
'k-grid-header': true,
|
|
32
33
|
'k-grid-draggable-header': this.$props.draggable
|
|
33
34
|
};
|
|
35
|
+
},
|
|
36
|
+
tableClass: function tableClass() {
|
|
37
|
+
var _a;
|
|
38
|
+
var size = this.$props.size;
|
|
39
|
+
return _a = {
|
|
40
|
+
'k-table': true,
|
|
41
|
+
'k-grid-header-table': true
|
|
42
|
+
}, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
|
|
34
43
|
}
|
|
35
44
|
},
|
|
36
45
|
mounted: function mounted() {
|
|
@@ -95,6 +104,7 @@ var HeaderVue2 = {
|
|
|
95
104
|
role: "presentation"
|
|
96
105
|
}
|
|
97
106
|
}, [h("table", {
|
|
107
|
+
"class": this.tableClass,
|
|
98
108
|
ref: setRef(this, 'table'),
|
|
99
109
|
role: "presentation",
|
|
100
110
|
attrs: this.v3 ? undefined : {
|
|
@@ -21,6 +21,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
|
|
|
21
21
|
reorderable?: boolean;
|
|
22
22
|
onSortChange?: (descriptors: SortDescriptor[], e: any) => void;
|
|
23
23
|
sort?: any;
|
|
24
|
+
selectedField?: string;
|
|
24
25
|
filter?: CompositeFilterDescriptor;
|
|
25
26
|
filterOperators: FilterOperators;
|
|
26
27
|
filterable?: boolean | undefined;
|
|
@@ -35,6 +36,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
|
|
|
35
36
|
columnMenuAnimate?: boolean | PopupAnimation;
|
|
36
37
|
onFilterChange?: Function;
|
|
37
38
|
isRtl?: boolean;
|
|
39
|
+
size: string;
|
|
38
40
|
}
|
|
39
41
|
/**
|
|
40
42
|
* @hidden
|
|
@@ -8,7 +8,9 @@ import { ColumnResizer } from '../drag/ColumnResizer';
|
|
|
8
8
|
import { ColumnDraggable } from '../drag/ColumnDraggable';
|
|
9
9
|
import { HeaderCell } from './HeaderCell';
|
|
10
10
|
import { ColumnMenu } from '../columnmenu/ColumnMenu';
|
|
11
|
-
import {
|
|
11
|
+
import { HeaderSelectionCell } from './HeaderSelectionCell';
|
|
12
|
+
import { templateRendering, hasListener, getListeners, Keys, noop, Icon } from '@progress/kendo-vue-common';
|
|
13
|
+
import { sortDescSmallIcon, sortAscSmallIcon } from '@progress/kendo-svg-icons';
|
|
12
14
|
import { HeaderThElement } from './HeaderThElement';
|
|
13
15
|
/**
|
|
14
16
|
* @hidden
|
|
@@ -47,6 +49,7 @@ var HeaderRowVue2 = {
|
|
|
47
49
|
sort: {
|
|
48
50
|
type: Array
|
|
49
51
|
},
|
|
52
|
+
selectedField: String,
|
|
50
53
|
filter: Object,
|
|
51
54
|
filterable: Boolean,
|
|
52
55
|
filterOperators: Object,
|
|
@@ -62,6 +65,7 @@ var HeaderRowVue2 = {
|
|
|
62
65
|
return true;
|
|
63
66
|
}
|
|
64
67
|
},
|
|
68
|
+
size: String,
|
|
65
69
|
isRtl: Boolean
|
|
66
70
|
},
|
|
67
71
|
inject: {
|
|
@@ -127,7 +131,7 @@ var HeaderRowVue2 = {
|
|
|
127
131
|
},
|
|
128
132
|
cellClass: function cellClass(field, headerClassName, locked) {
|
|
129
133
|
var customClass = headerClassName ? ' ' + headerClassName : '';
|
|
130
|
-
var result = "k-header
|
|
134
|
+
var result = "k-header" + (locked ? ' k-grid-header-sticky' : '') + customClass;
|
|
131
135
|
if (this.$props.sort && this.$props.sort.filter(function (descriptor) {
|
|
132
136
|
return descriptor.field === field;
|
|
133
137
|
}).length > 0) {
|
|
@@ -167,6 +171,7 @@ var HeaderRowVue2 = {
|
|
|
167
171
|
theadClasses: {
|
|
168
172
|
get: function get() {
|
|
169
173
|
return {
|
|
174
|
+
'k-table-thead': true,
|
|
170
175
|
'k-grid-header': true
|
|
171
176
|
};
|
|
172
177
|
}
|
|
@@ -195,20 +200,26 @@ var HeaderRowVue2 = {
|
|
|
195
200
|
}) : -1;
|
|
196
201
|
var sortDir = sortIndex >= 0 ? this.$props.sort[sortIndex].dir || 'none' : 'none';
|
|
197
202
|
var sortIconRenderer = function sortIconRenderer(iconSortIndex) {
|
|
198
|
-
if (!
|
|
203
|
+
if (!this.$props.sort) {
|
|
199
204
|
return null;
|
|
200
205
|
}
|
|
201
|
-
|
|
206
|
+
var currentDir = this.$props.sort[iconSortIndex].dir;
|
|
207
|
+
return iconSortIndex >= 0 && [h(Icon, {
|
|
202
208
|
key: 1,
|
|
203
|
-
|
|
204
|
-
|
|
209
|
+
name: "sort-".concat(currentDir, "-small"),
|
|
210
|
+
attrs: this.v3 ? undefined : {
|
|
211
|
+
name: "sort-".concat(currentDir, "-small"),
|
|
212
|
+
icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
|
|
213
|
+
},
|
|
214
|
+
icon: currentDir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon
|
|
215
|
+
}), this.$props.sort.length > 1 && h("span", {
|
|
205
216
|
key: 2,
|
|
206
217
|
"class": "k-sort-order"
|
|
207
218
|
}, [iconSortIndex + 1])];
|
|
208
219
|
};
|
|
209
|
-
var sortIcon = sortIconRenderer(sortIndex);
|
|
210
|
-
var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
|
|
220
|
+
var sortIcon = sortIconRenderer.call(this, sortIndex);
|
|
211
221
|
var columnMenu = column.columnMenu || column.columnMenu === false ? column.columnMenu : this.$props.columnMenu;
|
|
222
|
+
var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked) + (columnMenu ? ' k-filterable' : '');
|
|
212
223
|
var columnMenuRender = !columnMenu || typeof columnMenu === 'boolean' ? !!columnMenu : this.getTemplate(columnMenu);
|
|
213
224
|
var style = column.left !== undefined ? !this.$props.isRtl ? {
|
|
214
225
|
left: column.left + 'px',
|
|
@@ -327,6 +338,36 @@ var HeaderRowVue2 = {
|
|
|
327
338
|
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
328
339
|
}, _this2.v3 ? function () {
|
|
329
340
|
return [sortIcon];
|
|
341
|
+
} : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
|
|
342
|
+
"class": 'k-cell-inner'
|
|
343
|
+
}, [
|
|
344
|
+
// @ts-ignore function children
|
|
345
|
+
h(HeaderSelectionCell, {
|
|
346
|
+
key: 1,
|
|
347
|
+
field: column.field,
|
|
348
|
+
attrs: _this2.v3 ? undefined : {
|
|
349
|
+
field: column.field,
|
|
350
|
+
sortable: sortable,
|
|
351
|
+
selectionValue: column.headerSelectionValue,
|
|
352
|
+
title: column.title,
|
|
353
|
+
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
354
|
+
},
|
|
355
|
+
sortable: sortable,
|
|
356
|
+
onHeadercellclick: function onHeadercellclick(e) {
|
|
357
|
+
return _this.cellClick(e, column);
|
|
358
|
+
},
|
|
359
|
+
on: _this2.v3 ? undefined : {
|
|
360
|
+
"headercellclick": function onHeadercellclick(e) {
|
|
361
|
+
return _this.cellClick(e, column);
|
|
362
|
+
},
|
|
363
|
+
"selectionchange": _this2.selectionChangeHandler
|
|
364
|
+
},
|
|
365
|
+
onSelectionchange: _this2.selectionChangeHandler,
|
|
366
|
+
selectionValue: column.headerSelectionValue,
|
|
367
|
+
title: column.title,
|
|
368
|
+
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
369
|
+
}, _this2.v3 ? function () {
|
|
370
|
+
return [sortIcon];
|
|
330
371
|
} : [sortIcon])]) || h("span", {
|
|
331
372
|
"class": 'k-cell-inner'
|
|
332
373
|
}, [
|
|
@@ -432,6 +473,34 @@ var HeaderRowVue2 = {
|
|
|
432
473
|
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
433
474
|
}, _this2.v3 ? function () {
|
|
434
475
|
return [sortIcon];
|
|
476
|
+
} : [sortIcon])]) || column.field === _this2.$props.selectedField && h("span", {
|
|
477
|
+
"class": 'k-cell-inner'
|
|
478
|
+
}, [h(HeaderSelectionCell, {
|
|
479
|
+
key: 1,
|
|
480
|
+
field: column.field,
|
|
481
|
+
attrs: _this2.v3 ? undefined : {
|
|
482
|
+
field: column.field,
|
|
483
|
+
sortable: sortable,
|
|
484
|
+
selectionValue: column.headerSelectionValue,
|
|
485
|
+
title: column.title,
|
|
486
|
+
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
487
|
+
},
|
|
488
|
+
sortable: sortable,
|
|
489
|
+
onHeadercellclick: function onHeadercellclick(e) {
|
|
490
|
+
return _this.cellClick(e, column);
|
|
491
|
+
},
|
|
492
|
+
on: _this2.v3 ? undefined : {
|
|
493
|
+
"headercellclick": function onHeadercellclick(e) {
|
|
494
|
+
return _this.cellClick(e, column);
|
|
495
|
+
},
|
|
496
|
+
"selectionchange": _this2.selectionChangeHandler
|
|
497
|
+
},
|
|
498
|
+
onSelectionchange: _this2.selectionChangeHandler,
|
|
499
|
+
selectionValue: column.headerSelectionValue,
|
|
500
|
+
title: column.title,
|
|
501
|
+
render: (column.headerCell || _this2.$props.cellRender) && _this2.getTemplate(column.headerCell || _this2.$props.cellRender)
|
|
502
|
+
}, _this2.v3 ? function () {
|
|
503
|
+
return [sortIcon];
|
|
435
504
|
} : [sortIcon])]) || h("span", {
|
|
436
505
|
"class": 'k-cell-inner'
|
|
437
506
|
}, [h(HeaderCell, {
|
|
@@ -497,6 +566,7 @@ var HeaderRowVue2 = {
|
|
|
497
566
|
}, this.v3 ? function () {
|
|
498
567
|
return [cells.call(_this3, rowIndexes)];
|
|
499
568
|
} : [cells.call(_this3, rowIndexes)]) || h("tr", {
|
|
569
|
+
"class": 'k-table-row',
|
|
500
570
|
role: 'row',
|
|
501
571
|
attrs: this.v3 ? undefined : {
|
|
502
572
|
role: 'row'
|
|
@@ -3,7 +3,9 @@ import * as Vue from 'vue';
|
|
|
3
3
|
var allVue = Vue;
|
|
4
4
|
var gh = allVue.h;
|
|
5
5
|
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
|
-
import { guid, getTemplate } from '@progress/kendo-vue-common';
|
|
6
|
+
import { guid, getTemplate, getDefaultSlots } from '@progress/kendo-vue-common';
|
|
7
|
+
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
8
|
+
import { messages, selectAllRows } from '../messages/main';
|
|
7
9
|
/**
|
|
8
10
|
* @hidden
|
|
9
11
|
*/
|
|
@@ -11,9 +13,20 @@ var HeaderSelectionCellVue2 = {
|
|
|
11
13
|
props: {
|
|
12
14
|
field: String,
|
|
13
15
|
title: String,
|
|
16
|
+
sortable: [Boolean, Object],
|
|
14
17
|
selectionValue: Boolean,
|
|
15
18
|
render: [Object, Function, String]
|
|
16
19
|
},
|
|
20
|
+
// @ts-ignore
|
|
21
|
+
emits: {
|
|
22
|
+
selectionchange: null,
|
|
23
|
+
headercellclick: null
|
|
24
|
+
},
|
|
25
|
+
inject: {
|
|
26
|
+
kendoLocalizationService: {
|
|
27
|
+
default: null
|
|
28
|
+
}
|
|
29
|
+
},
|
|
17
30
|
created: function created() {
|
|
18
31
|
this.inputId = guid();
|
|
19
32
|
},
|
|
@@ -23,6 +36,11 @@ var HeaderSelectionCellVue2 = {
|
|
|
23
36
|
field: this.$props.field,
|
|
24
37
|
event: e
|
|
25
38
|
});
|
|
39
|
+
},
|
|
40
|
+
clickHandler: function clickHandler(event) {
|
|
41
|
+
if (this.$props.sortable) {
|
|
42
|
+
this.$emit('headercellclick', event);
|
|
43
|
+
}
|
|
26
44
|
}
|
|
27
45
|
},
|
|
28
46
|
// @ts-ignore
|
|
@@ -35,8 +53,11 @@ var HeaderSelectionCellVue2 = {
|
|
|
35
53
|
// @ts-ignore
|
|
36
54
|
render: function render(createElement) {
|
|
37
55
|
var h = gh || createElement;
|
|
56
|
+
var defaultSlot = getDefaultSlots(this);
|
|
38
57
|
var renderTemplate = this.$props.render;
|
|
39
|
-
var
|
|
58
|
+
var ls = provideLocalizationService(this);
|
|
59
|
+
var selectAllRowsMessage = ls.toLanguageString(selectAllRows, messages[selectAllRows]);
|
|
60
|
+
var input = h("input", {
|
|
40
61
|
key: 0,
|
|
41
62
|
checked: this.v3 ? this.$props.selectionValue : null,
|
|
42
63
|
domProps: this.v3 ? undefined : {
|
|
@@ -45,31 +66,40 @@ var HeaderSelectionCellVue2 = {
|
|
|
45
66
|
id: this.inputId,
|
|
46
67
|
attrs: this.v3 ? undefined : {
|
|
47
68
|
id: this.inputId,
|
|
48
|
-
type: "checkbox"
|
|
69
|
+
type: "checkbox",
|
|
70
|
+
"aria-label": selectAllRowsMessage
|
|
49
71
|
},
|
|
50
72
|
type: "checkbox",
|
|
51
73
|
"class": "k-checkbox k-checkbox-md k-rounded-md",
|
|
74
|
+
"aria-label": selectAllRowsMessage,
|
|
52
75
|
onChange: this.changeHandle,
|
|
53
76
|
on: this.v3 ? undefined : {
|
|
54
77
|
"change": this.changeHandle
|
|
55
78
|
}
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
"class": "k-checkbox-label",
|
|
59
|
-
"for": this.inputId,
|
|
60
|
-
attrs: this.v3 ? undefined : {
|
|
61
|
-
"for": this.inputId
|
|
62
|
-
}
|
|
63
|
-
})]]);
|
|
64
|
-
return getTemplate.call(this, {
|
|
79
|
+
});
|
|
80
|
+
var defaultRendering = getTemplate.call(this, {
|
|
65
81
|
h: h,
|
|
66
82
|
template: renderTemplate,
|
|
67
|
-
defaultRendering:
|
|
83
|
+
defaultRendering: input,
|
|
68
84
|
additionalProps: this.$props,
|
|
69
85
|
additionalListeners: {
|
|
86
|
+
click: this.clickHandler,
|
|
70
87
|
selectionchange: this.changeHandle
|
|
71
88
|
}
|
|
72
89
|
});
|
|
90
|
+
return h("span", {
|
|
91
|
+
"class": "k-link",
|
|
92
|
+
onClick: this.clickHandler,
|
|
93
|
+
on: this.v3 ? undefined : {
|
|
94
|
+
"click": this.clickHandler
|
|
95
|
+
}
|
|
96
|
+
}, [h("span", {
|
|
97
|
+
"class": "k-column-title",
|
|
98
|
+
title: this.$props.title,
|
|
99
|
+
attrs: this.v3 ? undefined : {
|
|
100
|
+
title: this.$props.title
|
|
101
|
+
}
|
|
102
|
+
}, [defaultRendering]), defaultSlot]);
|
|
73
103
|
}
|
|
74
104
|
};
|
|
75
105
|
/**
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
|
|
2
|
+
declare type DefaultData<V> = object | ((this: V) => {});
|
|
3
|
+
declare type DefaultMethods<V> = {
|
|
4
|
+
[key: string]: (this: V, ...args: any[]) => any;
|
|
5
|
+
};
|
|
6
|
+
export interface HeaderTdElementProps {
|
|
7
|
+
ariaColumnIndex?: number;
|
|
8
|
+
colSpan?: number;
|
|
9
|
+
rowSpan?: number;
|
|
10
|
+
role?: string;
|
|
11
|
+
columnId: string;
|
|
12
|
+
navigatable?: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @hidden
|
|
16
|
+
*/
|
|
17
|
+
export interface HeaderTdElementMethods extends Vue2type {
|
|
18
|
+
onKeydown: (event: any) => void;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* @hidden
|
|
22
|
+
*/
|
|
23
|
+
export interface HeaderTdElementComputed {
|
|
24
|
+
[key: string]: any;
|
|
25
|
+
tdClass: object;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* @hidden
|
|
29
|
+
*/
|
|
30
|
+
export interface HeaderTdElementState {
|
|
31
|
+
_text: string | undefined;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* @hidden
|
|
35
|
+
*/
|
|
36
|
+
export interface HeaderTdElementAll extends HeaderTdElementMethods, HeaderTdElementState, HeaderTdElementComputed {
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* @hidden
|
|
40
|
+
*/
|
|
41
|
+
declare let HeaderTdElementVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<HeaderTdElementAll>, {}, RecordPropsDefinition<HeaderTdElementProps>>;
|
|
42
|
+
/**
|
|
43
|
+
* @hidden
|
|
44
|
+
*/
|
|
45
|
+
declare const HeaderTdElement: DefineComponent<HeaderTdElementProps, any, {}, {}, HeaderTdElementMethods, {}, {}, {}, string, HeaderTdElementProps, HeaderTdElementProps, {}>;
|
|
46
|
+
export { HeaderTdElement, HeaderTdElementVue2 };
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// @ts-ignore
|
|
2
|
+
import * as Vue from 'vue';
|
|
3
|
+
var allVue = Vue;
|
|
4
|
+
var gh = allVue.h;
|
|
5
|
+
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
|
+
var inject = allVue.inject;
|
|
7
|
+
import { getDefaultSlots, noop } from '@progress/kendo-vue-common';
|
|
8
|
+
import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '../navigation/constants';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
var HeaderTdElementVue2 = {
|
|
13
|
+
name: 'KendoHeaderTdElement',
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
emits: {
|
|
16
|
+
keydown: null
|
|
17
|
+
},
|
|
18
|
+
props: {
|
|
19
|
+
ariaColumnIndex: Number,
|
|
20
|
+
role: String,
|
|
21
|
+
columnId: String,
|
|
22
|
+
navigatable: Boolean
|
|
23
|
+
},
|
|
24
|
+
computed: {
|
|
25
|
+
tdClass: function tdClass() {
|
|
26
|
+
var _a;
|
|
27
|
+
var className = this.$props.className;
|
|
28
|
+
return _a = {
|
|
29
|
+
'k-table-td': true
|
|
30
|
+
}, _a[className] = className, _a;
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
inject: {
|
|
34
|
+
getKeyboardNavigationAttributes: {
|
|
35
|
+
default: noop
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
// @ts-ignore
|
|
39
|
+
setup: !isV3 ? undefined : function () {
|
|
40
|
+
var v3 = !!isV3;
|
|
41
|
+
var kendoIntlService = inject('kendoIntlService', {});
|
|
42
|
+
var kendoLocalizationService = inject('kendoLocalizationService', {});
|
|
43
|
+
return {
|
|
44
|
+
v3: v3,
|
|
45
|
+
kendoIntlService: kendoIntlService,
|
|
46
|
+
kendoLocalizationService: kendoLocalizationService
|
|
47
|
+
};
|
|
48
|
+
},
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
render: function render(createElement) {
|
|
51
|
+
var h = gh || createElement;
|
|
52
|
+
var _a = this.$props,
|
|
53
|
+
columnId = _a.columnId,
|
|
54
|
+
navigatable = _a.navigatable,
|
|
55
|
+
ariaColumnIndex = _a.ariaColumnIndex,
|
|
56
|
+
role = _a.role;
|
|
57
|
+
var navAttrs = this.getKeyboardNavigationAttributes(columnId, navigatable);
|
|
58
|
+
var defaultSlot = getDefaultSlots(this);
|
|
59
|
+
return h("td", {
|
|
60
|
+
style: {
|
|
61
|
+
top: '0px'
|
|
62
|
+
},
|
|
63
|
+
"aria-colindex": ariaColumnIndex,
|
|
64
|
+
attrs: this.v3 ? undefined : {
|
|
65
|
+
"aria-colindex": ariaColumnIndex,
|
|
66
|
+
role: role,
|
|
67
|
+
tabindex: navAttrs.tabIndex,
|
|
68
|
+
"data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
|
|
69
|
+
"data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
|
|
70
|
+
},
|
|
71
|
+
"class": this.tdClass,
|
|
72
|
+
onKeydown: this.onKeyDown,
|
|
73
|
+
on: this.v3 ? undefined : {
|
|
74
|
+
"keydown": this.onKeyDown
|
|
75
|
+
},
|
|
76
|
+
role: role,
|
|
77
|
+
tabindex: navAttrs.tabIndex,
|
|
78
|
+
"data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
|
|
79
|
+
"data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
|
|
80
|
+
}, [defaultSlot]);
|
|
81
|
+
},
|
|
82
|
+
methods: {
|
|
83
|
+
onKeyDown: function onKeyDown(e) {
|
|
84
|
+
this.$emit('keydown', e);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* @hidden
|
|
90
|
+
*/
|
|
91
|
+
var HeaderTdElement = HeaderTdElementVue2;
|
|
92
|
+
export { HeaderTdElement, HeaderTdElementVue2 };
|
|
@@ -20,6 +20,13 @@ export interface HeaderThElementProps {
|
|
|
20
20
|
export interface HeaderThElementMethods extends Vue2type {
|
|
21
21
|
onKeydown: (event: any) => void;
|
|
22
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* @hidden
|
|
25
|
+
*/
|
|
26
|
+
export interface HeaderThElementComputed {
|
|
27
|
+
[key: string]: any;
|
|
28
|
+
thClass: object;
|
|
29
|
+
}
|
|
23
30
|
/**
|
|
24
31
|
* @hidden
|
|
25
32
|
*/
|
|
@@ -29,7 +36,7 @@ export interface HeaderThElementState {
|
|
|
29
36
|
/**
|
|
30
37
|
* @hidden
|
|
31
38
|
*/
|
|
32
|
-
export interface HeaderThElementAll extends HeaderThElementMethods, HeaderThElementState {
|
|
39
|
+
export interface HeaderThElementAll extends HeaderThElementMethods, HeaderThElementState, HeaderThElementComputed {
|
|
33
40
|
}
|
|
34
41
|
/**
|
|
35
42
|
* @hidden
|
|
@@ -31,6 +31,15 @@ var HeaderThElementVue2 = {
|
|
|
31
31
|
columnId: String,
|
|
32
32
|
navigatable: Boolean
|
|
33
33
|
},
|
|
34
|
+
computed: {
|
|
35
|
+
thClass: function thClass() {
|
|
36
|
+
var _a;
|
|
37
|
+
var className = this.$props.className;
|
|
38
|
+
return _a = {
|
|
39
|
+
'k-table-th': true
|
|
40
|
+
}, _a[className] = className, _a;
|
|
41
|
+
}
|
|
42
|
+
},
|
|
34
43
|
inject: {
|
|
35
44
|
getKeyboardNavigationAttributes: {
|
|
36
45
|
default: noop
|
|
@@ -54,7 +63,6 @@ var HeaderThElementVue2 = {
|
|
|
54
63
|
ariaSort = _a.ariaSort,
|
|
55
64
|
colSpan = _a.colSpan,
|
|
56
65
|
rowSpan = _a.rowSpan,
|
|
57
|
-
className = _a.className,
|
|
58
66
|
columnId = _a.columnId,
|
|
59
67
|
navigatable = _a.navigatable,
|
|
60
68
|
ariaColumnIndex = _a.ariaColumnIndex,
|
|
@@ -85,7 +93,7 @@ var HeaderThElementVue2 = {
|
|
|
85
93
|
"aria-selected": ariaSelected,
|
|
86
94
|
colspan: colSpan,
|
|
87
95
|
rowspan: rowSpan,
|
|
88
|
-
"class":
|
|
96
|
+
"class": this.thClass,
|
|
89
97
|
onKeydown: this.onKeyDown,
|
|
90
98
|
on: this.v3 ? undefined : {
|
|
91
99
|
"keydown": this.onKeyDown
|
package/dist/es/header/main.d.ts
CHANGED
package/dist/es/header/main.js
CHANGED
|
@@ -69,4 +69,16 @@ export interface FilterCellProps {
|
|
|
69
69
|
* The ariaLabel of the filter editor.
|
|
70
70
|
*/
|
|
71
71
|
ariaLabel?: string;
|
|
72
|
+
/**
|
|
73
|
+
* Configures the `size` of the cell.
|
|
74
|
+
*
|
|
75
|
+
* The available options are:
|
|
76
|
+
* - small
|
|
77
|
+
* - medium
|
|
78
|
+
* - large
|
|
79
|
+
* - null—Does not set a size `class`.
|
|
80
|
+
*
|
|
81
|
+
* @default `medium`
|
|
82
|
+
*/
|
|
83
|
+
size?: null | 'small' | 'medium' | 'large' | string;
|
|
72
84
|
}
|
|
@@ -254,6 +254,10 @@ export declare const columnMenuFilterOrLogic = "columnMenu.filterOrLogic";
|
|
|
254
254
|
* @hidden
|
|
255
255
|
*/
|
|
256
256
|
export declare const searchPlaceholder = "grid.searchPlaceholder";
|
|
257
|
+
/**
|
|
258
|
+
* @hidden
|
|
259
|
+
*/
|
|
260
|
+
export declare const selectAllRows = "grid.selectAllRows";
|
|
257
261
|
/**
|
|
258
262
|
* @hidden
|
|
259
263
|
*/
|
|
@@ -317,6 +321,7 @@ export declare const messages: {
|
|
|
317
321
|
"pager.of": string;
|
|
318
322
|
"pager.totalPages": string;
|
|
319
323
|
"grid.searchPlaceholder": string;
|
|
324
|
+
"grid.selectAllRows": string;
|
|
320
325
|
"grid.filterCheckAll": string;
|
|
321
326
|
"sort.ariaLabel": string;
|
|
322
327
|
"filter.ariaLabel": string;
|
package/dist/es/messages/main.js
CHANGED
|
@@ -255,6 +255,10 @@ export var columnMenuFilterOrLogic = 'columnMenu.filterOrLogic';
|
|
|
255
255
|
* @hidden
|
|
256
256
|
*/
|
|
257
257
|
export var searchPlaceholder = 'grid.searchPlaceholder';
|
|
258
|
+
/**
|
|
259
|
+
* @hidden
|
|
260
|
+
*/
|
|
261
|
+
export var selectAllRows = 'grid.selectAllRows';
|
|
258
262
|
/**
|
|
259
263
|
* @hidden
|
|
260
264
|
*/
|
|
@@ -318,6 +322,7 @@ export var messages = (_a = {},
|
|
|
318
322
|
_a[pagerOf] = 'Of',
|
|
319
323
|
_a[pagerTotalPages] = '{0}',
|
|
320
324
|
_a[searchPlaceholder] = 'Search',
|
|
325
|
+
_a[selectAllRows] = 'Select All Rows',
|
|
321
326
|
_a[filterCheckAll] = 'Check All',
|
|
322
327
|
_a[sortAriaLabel] = 'Sortable',
|
|
323
328
|
_a[filterAriaLabel] = 'Filter',
|