@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.
Files changed (123) hide show
  1. package/README.md +1 -1
  2. package/dist/cdn/js/kendo-vue-data-tools.js +1 -1
  3. package/dist/es/cells/FilterCell.js +35 -21
  4. package/dist/es/columnmenu/ColumnMenu.js +9 -3
  5. package/dist/es/columnmenu/ColumnMenuCheckboxFilter.js +10 -3
  6. package/dist/es/columnmenu/ColumnMenuItem.js +3 -3
  7. package/dist/es/columnmenu/ColumnMenuSort.js +8 -8
  8. package/dist/es/drag/ColumnDraggable.js +6 -2
  9. package/dist/es/drag/DragClue.js +6 -2
  10. package/dist/es/filter/Expression.js +17 -8
  11. package/dist/es/filter/Filter.js +20 -4
  12. package/dist/es/filter/GroupFilters.js +10 -2
  13. package/dist/es/filter/GroupToolbar.js +33 -8
  14. package/dist/es/header/FilterRow.d.ts +1 -0
  15. package/dist/es/header/FilterRow.js +9 -6
  16. package/dist/es/header/Header.d.ts +1 -0
  17. package/dist/es/header/Header.js +12 -2
  18. package/dist/es/header/HeaderRow.d.ts +2 -0
  19. package/dist/es/header/HeaderRow.js +78 -8
  20. package/dist/es/header/HeaderSelectionCell.d.ts +1 -0
  21. package/dist/es/header/HeaderSelectionCell.js +43 -13
  22. package/dist/es/header/HeaderTdElement.d.ts +46 -0
  23. package/dist/es/header/HeaderTdElement.js +92 -0
  24. package/dist/es/header/HeaderThElement.d.ts +8 -1
  25. package/dist/es/header/HeaderThElement.js +10 -2
  26. package/dist/es/header/main.d.ts +1 -0
  27. package/dist/es/header/main.js +1 -0
  28. package/dist/es/interfaces/FilterCellProps.d.ts +12 -0
  29. package/dist/es/messages/main.d.ts +5 -0
  30. package/dist/es/messages/main.js +5 -0
  31. package/dist/es/package-metadata.js +1 -1
  32. package/dist/es/pager/Pager.d.ts +13 -1
  33. package/dist/es/pager/Pager.js +66 -28
  34. package/dist/es/pager/PagerInput.d.ts +9 -1
  35. package/dist/es/pager/PagerInput.js +16 -2
  36. package/dist/es/pager/PagerNavigationButton.d.ts +13 -0
  37. package/dist/es/pager/PagerNavigationButton.js +31 -22
  38. package/dist/es/pager/PagerNumericButtons.d.ts +5 -1
  39. package/dist/es/pager/PagerNumericButtons.js +61 -27
  40. package/dist/es/pager/PagerPageSizes.d.ts +1 -0
  41. package/dist/es/pager/PagerPageSizes.js +3 -0
  42. package/dist/es/selection/utils.js +6 -8
  43. package/dist/esm/cells/FilterCell.js +35 -21
  44. package/dist/esm/columnmenu/ColumnMenu.js +9 -3
  45. package/dist/esm/columnmenu/ColumnMenuCheckboxFilter.js +10 -3
  46. package/dist/esm/columnmenu/ColumnMenuItem.js +3 -3
  47. package/dist/esm/columnmenu/ColumnMenuSort.js +8 -8
  48. package/dist/esm/drag/ColumnDraggable.js +6 -2
  49. package/dist/esm/drag/DragClue.js +6 -2
  50. package/dist/esm/filter/Expression.js +17 -8
  51. package/dist/esm/filter/Filter.js +20 -4
  52. package/dist/esm/filter/GroupFilters.js +10 -2
  53. package/dist/esm/filter/GroupToolbar.js +33 -8
  54. package/dist/esm/header/FilterRow.d.ts +1 -0
  55. package/dist/esm/header/FilterRow.js +9 -6
  56. package/dist/esm/header/Header.d.ts +1 -0
  57. package/dist/esm/header/Header.js +12 -2
  58. package/dist/esm/header/HeaderRow.d.ts +2 -0
  59. package/dist/esm/header/HeaderRow.js +78 -8
  60. package/dist/esm/header/HeaderSelectionCell.d.ts +1 -0
  61. package/dist/esm/header/HeaderSelectionCell.js +43 -13
  62. package/dist/esm/header/HeaderTdElement.d.ts +46 -0
  63. package/dist/esm/header/HeaderTdElement.js +92 -0
  64. package/dist/esm/header/HeaderThElement.d.ts +8 -1
  65. package/dist/esm/header/HeaderThElement.js +10 -2
  66. package/dist/esm/header/main.d.ts +1 -0
  67. package/dist/esm/header/main.js +1 -0
  68. package/dist/esm/interfaces/FilterCellProps.d.ts +12 -0
  69. package/dist/esm/messages/main.d.ts +5 -0
  70. package/dist/esm/messages/main.js +5 -0
  71. package/dist/esm/package-metadata.js +1 -1
  72. package/dist/esm/pager/Pager.d.ts +13 -1
  73. package/dist/esm/pager/Pager.js +66 -28
  74. package/dist/esm/pager/PagerInput.d.ts +9 -1
  75. package/dist/esm/pager/PagerInput.js +16 -2
  76. package/dist/esm/pager/PagerNavigationButton.d.ts +13 -0
  77. package/dist/esm/pager/PagerNavigationButton.js +31 -22
  78. package/dist/esm/pager/PagerNumericButtons.d.ts +5 -1
  79. package/dist/esm/pager/PagerNumericButtons.js +61 -27
  80. package/dist/esm/pager/PagerPageSizes.d.ts +1 -0
  81. package/dist/esm/pager/PagerPageSizes.js +3 -0
  82. package/dist/esm/selection/utils.js +6 -8
  83. package/dist/npm/cells/FilterCell.js +34 -20
  84. package/dist/npm/columnmenu/ColumnMenu.js +8 -2
  85. package/dist/npm/columnmenu/ColumnMenuCheckboxFilter.js +9 -2
  86. package/dist/npm/columnmenu/ColumnMenuItem.js +2 -2
  87. package/dist/npm/columnmenu/ColumnMenuSort.js +8 -8
  88. package/dist/npm/drag/ColumnDraggable.js +6 -2
  89. package/dist/npm/drag/DragClue.js +6 -2
  90. package/dist/npm/filter/Expression.js +17 -8
  91. package/dist/npm/filter/Filter.js +20 -4
  92. package/dist/npm/filter/GroupFilters.js +10 -2
  93. package/dist/npm/filter/GroupToolbar.js +33 -8
  94. package/dist/npm/header/FilterRow.d.ts +1 -0
  95. package/dist/npm/header/FilterRow.js +9 -6
  96. package/dist/npm/header/Header.d.ts +1 -0
  97. package/dist/npm/header/Header.js +11 -1
  98. package/dist/npm/header/HeaderRow.d.ts +2 -0
  99. package/dist/npm/header/HeaderRow.js +77 -7
  100. package/dist/npm/header/HeaderSelectionCell.d.ts +1 -0
  101. package/dist/npm/header/HeaderSelectionCell.js +42 -12
  102. package/dist/npm/header/HeaderTdElement.d.ts +46 -0
  103. package/dist/npm/header/HeaderTdElement.js +99 -0
  104. package/dist/npm/header/HeaderThElement.d.ts +8 -1
  105. package/dist/npm/header/HeaderThElement.js +10 -2
  106. package/dist/npm/header/main.d.ts +1 -0
  107. package/dist/npm/header/main.js +1 -0
  108. package/dist/npm/interfaces/FilterCellProps.d.ts +12 -0
  109. package/dist/npm/messages/main.d.ts +5 -0
  110. package/dist/npm/messages/main.js +6 -1
  111. package/dist/npm/package-metadata.js +1 -1
  112. package/dist/npm/pager/Pager.d.ts +13 -1
  113. package/dist/npm/pager/Pager.js +65 -27
  114. package/dist/npm/pager/PagerInput.d.ts +9 -1
  115. package/dist/npm/pager/PagerInput.js +16 -2
  116. package/dist/npm/pager/PagerNavigationButton.d.ts +13 -0
  117. package/dist/npm/pager/PagerNavigationButton.js +31 -22
  118. package/dist/npm/pager/PagerNumericButtons.d.ts +5 -1
  119. package/dist/npm/pager/PagerNumericButtons.js +61 -27
  120. package/dist/npm/pager/PagerPageSizes.d.ts +1 -0
  121. package/dist/npm/pager/PagerPageSizes.js +3 -0
  122. package/dist/npm/selection/utils.js +5 -7
  123. 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: "close",
300
+ icon: "x",
301
+ svgIcon: xIcon,
292
302
  look: "flat",
293
303
  type: "button"
294
304
  },
295
- icon: "close",
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: "close",
318
+ icon: "x",
319
+ svgIcon: xIcon,
308
320
  look: "flat",
309
321
  type: "button"
310
322
  },
311
- icon: "close",
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: "close",
527
+ icon: "x",
528
+ svgIcon: xIcon,
507
529
  look: "flat",
508
530
  type: "button"
509
531
  },
510
- icon: "close",
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: "close",
545
+ icon: "x",
546
+ svgIcon: xIcon,
523
547
  look: "flat",
524
548
  type: "button"
525
549
  },
526
- icon: "close",
550
+ icon: "x",
551
+ svgIcon: xIcon,
527
552
  look: "flat",
528
553
  type: "button",
529
554
  onClick: _this.onGroupRemove,
@@ -18,6 +18,7 @@ export interface FilterRowProps {
18
18
  cellRender?: any;
19
19
  isRtl?: boolean;
20
20
  ariaRowIndex?: number;
21
+ size?: string;
21
22
  }
22
23
  /**
23
24
  * @hidden
@@ -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 = "".concat(locked ? 'k-grid-header-sticky' : '');
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,
@@ -16,6 +16,7 @@ export interface HeaderProps {
16
16
  };
17
17
  cols: Element[];
18
18
  draggable: boolean;
19
+ size?: string;
19
20
  }
20
21
  /**
21
22
  * @hidden
@@ -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 { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
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 ".concat(locked ? 'k-grid-header-sticky' : '') + customClass;
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 (!_this.$props.sort) {
203
+ if (!this.$props.sort) {
199
204
  return null;
200
205
  }
201
- return iconSortIndex >= 0 && [h("span", {
206
+ var currentDir = this.$props.sort[iconSortIndex].dir;
207
+ return iconSortIndex >= 0 && [h(Icon, {
202
208
  key: 1,
203
- "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-sm'
204
- }), _this.$props.sort.length > 1 && h("span", {
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'
@@ -9,6 +9,7 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
9
9
  */
10
10
  export interface HeaderSelectionCellMethods extends Vue2type {
11
11
  changeHandle: (e: any) => void;
12
+ clickHandler: (e: any) => void;
12
13
  }
13
14
  /**
14
15
  * @hidden
@@ -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 defaultRendering = h("span", [[h("input", {
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
- }), h("label", {
57
- key: 1,
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: 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 };