@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
@@ -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 = "".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';
8
8
  import { ColumnDraggable } from '../drag/ColumnDraggable';
9
9
  import { HeaderCell } from './HeaderCell';
10
10
  import { ColumnMenu } from '../columnmenu/ColumnMenu';
11
- import { templateRendering, hasListener, getListeners, Keys, noop } from '@progress/kendo-vue-common';
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 ".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';
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 };
@@ -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": className,
96
+ "class": this.thClass,
89
97
  onKeydown: this.onKeyDown,
90
98
  on: this.v3 ? undefined : {
91
99
  "keydown": this.onKeyDown
@@ -8,3 +8,4 @@ export * from './HeaderSelectionCell';
8
8
  export * from '../interfaces/SortSettings';
9
9
  export * from './utils/main';
10
10
  export * from './HeaderThElement';
11
+ export * from './HeaderTdElement';
@@ -8,3 +8,4 @@ export * from './HeaderSelectionCell';
8
8
  export * from '../interfaces/SortSettings';
9
9
  export * from './utils/main';
10
10
  export * from './HeaderThElement';
11
+ export * from './HeaderTdElement';
@@ -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&mdash;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;
@@ -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',