@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
|
@@ -28,6 +28,7 @@ import { Button, Toolbar, ToolbarItem, ButtonGroup } from '@progress/kendo-vue-b
|
|
|
28
28
|
import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
29
29
|
import { stringOperator } from './operators.js';
|
|
30
30
|
import { messages, filterAndLogic, filterOrLogic, filterAddExpression, filterAddGroup, filterClose } from '../messages/main.js';
|
|
31
|
+
import { filterAddExpressionIcon, filterAddGroupIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
31
32
|
/**
|
|
32
33
|
* @hidden
|
|
33
34
|
*/
|
|
@@ -225,9 +226,11 @@ var GroupToolbarVue2 = {
|
|
|
225
226
|
attrs: _this.v3 ? undefined : {
|
|
226
227
|
title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
|
|
227
228
|
icon: "filter-add-expression",
|
|
229
|
+
svgIcon: filterAddExpressionIcon,
|
|
228
230
|
type: "button"
|
|
229
231
|
},
|
|
230
232
|
icon: "filter-add-expression",
|
|
233
|
+
svgIcon: filterAddExpressionIcon,
|
|
231
234
|
type: "button",
|
|
232
235
|
onClick: _this.onAddExpression,
|
|
233
236
|
on: _this.v3 ? undefined : {
|
|
@@ -239,9 +242,11 @@ var GroupToolbarVue2 = {
|
|
|
239
242
|
attrs: _this.v3 ? undefined : {
|
|
240
243
|
title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
|
|
241
244
|
icon: "filter-add-expression",
|
|
245
|
+
svgIcon: filterAddExpressionIcon,
|
|
242
246
|
type: "button"
|
|
243
247
|
},
|
|
244
248
|
icon: "filter-add-expression",
|
|
249
|
+
svgIcon: filterAddExpressionIcon,
|
|
245
250
|
type: "button",
|
|
246
251
|
onClick: _this.onAddExpression,
|
|
247
252
|
on: _this.v3 ? undefined : {
|
|
@@ -257,9 +262,11 @@ var GroupToolbarVue2 = {
|
|
|
257
262
|
attrs: _this.v3 ? undefined : {
|
|
258
263
|
title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
|
|
259
264
|
icon: "filter-add-group",
|
|
265
|
+
svgIcon: filterAddGroupIcon,
|
|
260
266
|
type: "button"
|
|
261
267
|
},
|
|
262
268
|
icon: "filter-add-group",
|
|
269
|
+
svgIcon: filterAddGroupIcon,
|
|
263
270
|
type: "button",
|
|
264
271
|
onClick: _this.onAddGroup,
|
|
265
272
|
on: _this.v3 ? undefined : {
|
|
@@ -271,9 +278,11 @@ var GroupToolbarVue2 = {
|
|
|
271
278
|
attrs: _this.v3 ? undefined : {
|
|
272
279
|
title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
|
|
273
280
|
icon: "filter-add-group",
|
|
281
|
+
svgIcon: filterAddGroupIcon,
|
|
274
282
|
type: "button"
|
|
275
283
|
},
|
|
276
284
|
icon: "filter-add-group",
|
|
285
|
+
svgIcon: filterAddGroupIcon,
|
|
277
286
|
type: "button",
|
|
278
287
|
onClick: _this.onAddGroup,
|
|
279
288
|
on: _this.v3 ? undefined : {
|
|
@@ -288,11 +297,13 @@ var GroupToolbarVue2 = {
|
|
|
288
297
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
289
298
|
attrs: _this.v3 ? undefined : {
|
|
290
299
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
291
|
-
icon: "
|
|
300
|
+
icon: "x",
|
|
301
|
+
svgIcon: xIcon,
|
|
292
302
|
look: "flat",
|
|
293
303
|
type: "button"
|
|
294
304
|
},
|
|
295
|
-
icon: "
|
|
305
|
+
icon: "x",
|
|
306
|
+
svgIcon: xIcon,
|
|
296
307
|
look: "flat",
|
|
297
308
|
type: "button",
|
|
298
309
|
onClick: _this.onGroupRemove,
|
|
@@ -304,11 +315,13 @@ var GroupToolbarVue2 = {
|
|
|
304
315
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
305
316
|
attrs: _this.v3 ? undefined : {
|
|
306
317
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
307
|
-
icon: "
|
|
318
|
+
icon: "x",
|
|
319
|
+
svgIcon: xIcon,
|
|
308
320
|
look: "flat",
|
|
309
321
|
type: "button"
|
|
310
322
|
},
|
|
311
|
-
icon: "
|
|
323
|
+
icon: "x",
|
|
324
|
+
svgIcon: xIcon,
|
|
312
325
|
look: "flat",
|
|
313
326
|
type: "button",
|
|
314
327
|
onClick: _this.onGroupRemove,
|
|
@@ -448,9 +461,11 @@ var GroupToolbarVue2 = {
|
|
|
448
461
|
attrs: _this.v3 ? undefined : {
|
|
449
462
|
title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
|
|
450
463
|
icon: "filter-add-expression",
|
|
464
|
+
svgIcon: filterAddExpressionIcon,
|
|
451
465
|
type: "button"
|
|
452
466
|
},
|
|
453
467
|
icon: "filter-add-expression",
|
|
468
|
+
svgIcon: filterAddExpressionIcon,
|
|
454
469
|
type: "button",
|
|
455
470
|
onClick: _this.onAddExpression,
|
|
456
471
|
on: _this.v3 ? undefined : {
|
|
@@ -462,9 +477,11 @@ var GroupToolbarVue2 = {
|
|
|
462
477
|
attrs: _this.v3 ? undefined : {
|
|
463
478
|
title: locService.toLanguageString(filterAddExpression, messages[filterAddExpression]),
|
|
464
479
|
icon: "filter-add-expression",
|
|
480
|
+
svgIcon: filterAddExpressionIcon,
|
|
465
481
|
type: "button"
|
|
466
482
|
},
|
|
467
483
|
icon: "filter-add-expression",
|
|
484
|
+
svgIcon: filterAddExpressionIcon,
|
|
468
485
|
type: "button",
|
|
469
486
|
onClick: _this.onAddExpression,
|
|
470
487
|
on: _this.v3 ? undefined : {
|
|
@@ -476,9 +493,11 @@ var GroupToolbarVue2 = {
|
|
|
476
493
|
attrs: _this.v3 ? undefined : {
|
|
477
494
|
title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
|
|
478
495
|
icon: "filter-add-group",
|
|
496
|
+
svgIcon: filterAddGroupIcon,
|
|
479
497
|
type: "button"
|
|
480
498
|
},
|
|
481
499
|
icon: "filter-add-group",
|
|
500
|
+
svgIcon: filterAddGroupIcon,
|
|
482
501
|
type: "button",
|
|
483
502
|
onClick: _this.onAddGroup,
|
|
484
503
|
on: _this.v3 ? undefined : {
|
|
@@ -490,9 +509,11 @@ var GroupToolbarVue2 = {
|
|
|
490
509
|
attrs: _this.v3 ? undefined : {
|
|
491
510
|
title: locService.toLanguageString(filterAddGroup, messages[filterAddGroup]),
|
|
492
511
|
icon: "filter-add-group",
|
|
512
|
+
svgIcon: filterAddGroupIcon,
|
|
493
513
|
type: "button"
|
|
494
514
|
},
|
|
495
515
|
icon: "filter-add-group",
|
|
516
|
+
svgIcon: filterAddGroupIcon,
|
|
496
517
|
type: "button",
|
|
497
518
|
onClick: _this.onAddGroup,
|
|
498
519
|
on: _this.v3 ? undefined : {
|
|
@@ -503,11 +524,13 @@ var GroupToolbarVue2 = {
|
|
|
503
524
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
504
525
|
attrs: _this.v3 ? undefined : {
|
|
505
526
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
506
|
-
icon: "
|
|
527
|
+
icon: "x",
|
|
528
|
+
svgIcon: xIcon,
|
|
507
529
|
look: "flat",
|
|
508
530
|
type: "button"
|
|
509
531
|
},
|
|
510
|
-
icon: "
|
|
532
|
+
icon: "x",
|
|
533
|
+
svgIcon: xIcon,
|
|
511
534
|
look: "flat",
|
|
512
535
|
type: "button",
|
|
513
536
|
onClick: _this.onGroupRemove,
|
|
@@ -519,11 +542,13 @@ var GroupToolbarVue2 = {
|
|
|
519
542
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
520
543
|
attrs: _this.v3 ? undefined : {
|
|
521
544
|
title: locService.toLanguageString(filterClose, messages[filterClose]),
|
|
522
|
-
icon: "
|
|
545
|
+
icon: "x",
|
|
546
|
+
svgIcon: xIcon,
|
|
523
547
|
look: "flat",
|
|
524
548
|
type: "button"
|
|
525
549
|
},
|
|
526
|
-
icon: "
|
|
550
|
+
icon: "x",
|
|
551
|
+
svgIcon: xIcon,
|
|
527
552
|
look: "flat",
|
|
528
553
|
type: "button",
|
|
529
554
|
onClick: _this.onGroupRemove,
|
|
@@ -10,6 +10,7 @@ import { provideLocalizationService } from '@progress/kendo-vue-intl';
|
|
|
10
10
|
import { filterAriaLabel, messages } from '../messages/main.js';
|
|
11
11
|
import { tableKeyboardNavigationTools as navigationTools } from '../navigation/utils.js';
|
|
12
12
|
import { HeaderThElement } from './HeaderThElement.js';
|
|
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,
|
|
@@ -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.js';
|
|
|
8
8
|
import { ColumnDraggable } from '../drag/ColumnDraggable.js';
|
|
9
9
|
import { HeaderCell } from './HeaderCell.js';
|
|
10
10
|
import { ColumnMenu } from '../columnmenu/ColumnMenu.js';
|
|
11
|
-
import {
|
|
11
|
+
import { HeaderSelectionCell } from './HeaderSelectionCell.js';
|
|
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.js';
|
|
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.js';
|
|
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 };
|