@progress/kendo-vue-grid 3.7.4-dev.202211301436 → 3.7.4-dev.202212020747

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 (44) hide show
  1. package/dist/cdn/js/kendo-vue-grid.js +1 -1
  2. package/dist/es/Grid.js +47 -12
  3. package/dist/es/GridToolbar.d.ts +13 -1
  4. package/dist/es/GridToolbar.js +21 -2
  5. package/dist/es/cells/GridFilterCell.js +4 -2
  6. package/dist/es/footer/Footer.d.ts +1 -0
  7. package/dist/es/footer/Footer.js +12 -2
  8. package/dist/es/header/FilterRow.js +3 -2
  9. package/dist/es/header/Header.d.ts +1 -0
  10. package/dist/es/header/Header.js +11 -1
  11. package/dist/es/header/HeaderRow.js +6 -2
  12. package/dist/es/interfaces/GridColumnProps.d.ts +3 -3
  13. package/dist/es/interfaces/GridProps.d.ts +10 -0
  14. package/dist/es/interfaces/GridToolbarProps.d.ts +8 -2
  15. package/dist/es/package-metadata.js +1 -1
  16. package/dist/esm/Grid.js +47 -12
  17. package/dist/esm/GridToolbar.d.ts +13 -1
  18. package/dist/esm/GridToolbar.js +21 -2
  19. package/dist/esm/cells/GridFilterCell.js +4 -2
  20. package/dist/esm/footer/Footer.d.ts +1 -0
  21. package/dist/esm/footer/Footer.js +12 -2
  22. package/dist/esm/header/FilterRow.js +3 -2
  23. package/dist/esm/header/Header.d.ts +1 -0
  24. package/dist/esm/header/Header.js +11 -1
  25. package/dist/esm/header/HeaderRow.js +6 -2
  26. package/dist/esm/interfaces/GridColumnProps.d.ts +3 -3
  27. package/dist/esm/interfaces/GridProps.d.ts +10 -0
  28. package/dist/esm/interfaces/GridToolbarProps.d.ts +8 -2
  29. package/dist/esm/package-metadata.js +1 -1
  30. package/dist/npm/Grid.js +46 -11
  31. package/dist/npm/GridToolbar.d.ts +13 -1
  32. package/dist/npm/GridToolbar.js +20 -1
  33. package/dist/npm/cells/GridFilterCell.js +4 -2
  34. package/dist/npm/footer/Footer.d.ts +1 -0
  35. package/dist/npm/footer/Footer.js +11 -1
  36. package/dist/npm/header/FilterRow.js +3 -2
  37. package/dist/npm/header/Header.d.ts +1 -0
  38. package/dist/npm/header/Header.js +10 -0
  39. package/dist/npm/header/HeaderRow.js +6 -2
  40. package/dist/npm/interfaces/GridColumnProps.d.ts +3 -3
  41. package/dist/npm/interfaces/GridProps.d.ts +10 -0
  42. package/dist/npm/interfaces/GridToolbarProps.d.ts +8 -2
  43. package/dist/npm/package-metadata.js +1 -1
  44. package/package.json +15 -15
@@ -3,12 +3,31 @@ 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 { getDefaultSlots } from '@progress/kendo-vue-common';
6
+ import { getDefaultSlots, kendoThemeMaps } from '@progress/kendo-vue-common';
7
7
  /**
8
8
  * @hidden
9
9
  */
10
10
  var GridToolbarVue2 = {
11
11
  name: 'GridToolbar',
12
+ props: {
13
+ size: {
14
+ type: String,
15
+ default: 'medium',
16
+ validator: function validator(value) {
17
+ return ['small', 'medium'].includes(value);
18
+ }
19
+ }
20
+ },
21
+ computed: {
22
+ wrapperClass: function wrapperClass() {
23
+ var _a;
24
+ var size = this.$props.size;
25
+ return _a = {
26
+ 'k-toolbar': true,
27
+ 'k-grid-toolbar': true
28
+ }, _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
29
+ }
30
+ },
12
31
  // @ts-ignore
13
32
  setup: !isV3 ? undefined : function () {
14
33
  var v3 = !!isV3;
@@ -21,7 +40,7 @@ var GridToolbarVue2 = {
21
40
  var h = gh || createElement;
22
41
  var defaultSlot = getDefaultSlots(this);
23
42
  return h("div", {
24
- "class": "k-toolbar k-grid-toolbar"
43
+ "class": this.wrapperClass
25
44
  }, [defaultSlot]);
26
45
  }
27
46
  };
@@ -221,8 +221,10 @@ var GridFilterCellVue2 = {
221
221
  }
222
222
  };
223
223
  var defaultRendering = h("div", {
224
- "class": "k-filtercell"
225
- }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
224
+ "class": "k-cell-inner"
225
+ }, [h("span", {
226
+ "class": "k-link"
227
+ }, [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
226
228
  "class": "k-filtercell-operator"
227
229
  }, [renderOperatorEditor.call(this),
228
230
  // @ts-ignore function children
@@ -13,6 +13,7 @@ export interface FooterProps {
13
13
  colGroupFooter: HTMLTableColElement | null;
14
14
  };
15
15
  cols: any[];
16
+ size: string;
16
17
  }
17
18
  export interface FooterComputed {
18
19
  [key: string]: any;
@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  var ref = allVue.ref;
7
7
  import { BrowserSupportService } from '../utils/browser-support.service.js';
8
8
  import { isRtl } from '../utils/main.js';
9
- import { getRef, setRef } from '@progress/kendo-vue-common';
9
+ import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
10
10
  /**
11
11
  * @hidden
12
12
  */
@@ -16,7 +16,8 @@ var FooterVue2 = {
16
16
  staticHeaders: Boolean,
17
17
  row: Object,
18
18
  columnResize: Object,
19
- cols: Array
19
+ cols: Array,
20
+ size: String
20
21
  },
21
22
  data: function data() {
22
23
  return {
@@ -26,6 +27,14 @@ var FooterVue2 = {
26
27
  };
27
28
  },
28
29
  computed: {
30
+ tableClass: function tableClass() {
31
+ var _a;
32
+ var size = this.$props.size;
33
+ return _a = {
34
+ 'k-table': true,
35
+ 'k-grid-footer-table': true
36
+ }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
37
+ },
29
38
  divStyle: {
30
39
  get: function get() {
31
40
  var padding = this.$data.scrollbarWidth + 'px';
@@ -86,6 +95,7 @@ var FooterVue2 = {
86
95
  "class": "k-grid-footer-wrap",
87
96
  ref: setRef(this, 'footerWrap')
88
97
  }, [h("table", {
98
+ "class": this.tableClass,
89
99
  style: this.tableStyle
90
100
  }, [h("colgroup", {
91
101
  ref: setRef(this, 'colGroupHeader')
@@ -9,6 +9,7 @@ import { GridFilterCell } from '../cells/GridFilterCell.js';
9
9
  import { provideLocalizationService } from '@progress/kendo-vue-intl';
10
10
  import { filterAriaLabel, messages } from '../messages/main.js';
11
11
  import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-vue-data-tools';
12
+ import { classNames } from '@progress/kendo-vue-common';
12
13
  /**
13
14
  * @hidden
14
15
  */
@@ -156,7 +157,7 @@ var FilterRowVue2 = {
156
157
  },
157
158
  navigatable: column.navigatable,
158
159
  style: style,
159
- "class": this.headerCellClassName(column.field, column.locked) || undefined,
160
+ "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
160
161
  ariaLabel: ariaAttrs.ariaLabel,
161
162
  ariaColumnIndex: ariaAttrs.ariaColumnIndex
162
163
  }, this.v3 ? function () {
@@ -175,7 +176,7 @@ var FilterRowVue2 = {
175
176
  },
176
177
  navigatable: column.navigatable,
177
178
  style: style,
178
- "class": this.headerCellClassName(column.field, column.locked) || undefined,
179
+ "class": classNames('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
179
180
  ariaLabel: ariaAttrs.ariaLabel,
180
181
  ariaColumnIndex: ariaAttrs.ariaColumnIndex
181
182
  });
@@ -10,6 +10,7 @@ export interface HeaderProps {
10
10
  ref?: string;
11
11
  staticHeaders: boolean;
12
12
  headerRow: any;
13
+ size: string;
13
14
  columnResize: {
14
15
  colGroupHeader: any | null;
15
16
  setIsRtl: (isRtl: boolean) => void;
@@ -6,7 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
6
6
  var ref = allVue.ref;
7
7
  import { BrowserSupportService } from '../utils/browser-support.service.js';
8
8
  import { isRtl } from '../utils/main.js';
9
- import { getRef, setRef } from '@progress/kendo-vue-common';
9
+ import { getRef, kendoThemeMaps, setRef } from '@progress/kendo-vue-common';
10
10
  /**
11
11
  * @hidden
12
12
  */
@@ -16,6 +16,7 @@ var HeaderVue2 = {
16
16
  headerRow: Object,
17
17
  columnResize: Object,
18
18
  cols: Array,
19
+ size: String,
19
20
  draggable: Boolean
20
21
  },
21
22
  data: function data() {
@@ -32,6 +33,14 @@ var HeaderVue2 = {
32
33
  'k-grid-header': true,
33
34
  'k-grid-draggable-header': this.$props.draggable
34
35
  };
36
+ },
37
+ tableClass: function tableClass() {
38
+ var _a;
39
+ var size = this.$props.size;
40
+ return _a = {
41
+ 'k-table': true,
42
+ 'k-grid-header-table': true
43
+ }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
35
44
  }
36
45
  },
37
46
  mounted: function mounted() {
@@ -96,6 +105,7 @@ var HeaderVue2 = {
96
105
  role: "presentation"
97
106
  }
98
107
  }, [h("table", {
108
+ "class": this.tableClass,
99
109
  ref: setRef(this, 'table'),
100
110
  role: "presentation",
101
111
  attrs: this.v3 ? undefined : {
@@ -200,11 +200,15 @@ var HeaderRowVue2 = {
200
200
  }
201
201
  return iconSortIndex >= 0 && [h("span", {
202
202
  key: 1,
203
+ "class": 'k-sort-icon'
204
+ }, [h("span", {
203
205
  "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-small'
204
- }), _this.$props.sort.length > 1 && h("span", {
206
+ })]), _this.$props.sort.length > 1 && h("span", {
205
207
  key: 2,
208
+ "class": 'k-sort-icon'
209
+ }, [h("span", {
206
210
  "class": "k-sort-order"
207
- }, [iconSortIndex + 1])];
211
+ }, [iconSortIndex + 1])])];
208
212
  };
209
213
  var sortIcon = sortIconRenderer(sortIndex);
210
214
  var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
@@ -140,8 +140,8 @@ export interface GridColumnProps {
140
140
  locked?: boolean;
141
141
  /**
142
142
  * The type of the data which will be used when formatting the cell data.
143
- * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
144
- * Defaults to `text`.
143
+ * Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
144
+ * Defaults to `string`.
145
145
  */
146
- type?: 'text' | 'numeric' | 'boolean' | 'date';
146
+ type?: 'string' | 'number' | 'boolean' | 'date';
147
147
  }
@@ -207,6 +207,16 @@ export interface GridProps {
207
207
  * while the user is scrolling the content.
208
208
  */
209
209
  scrollable?: string;
210
+ /**
211
+ * Configures the `size` of the Grid.
212
+ *
213
+ * The available options are:
214
+ * - small
215
+ * - medium
216
+ *
217
+ * @default `medium`
218
+ */
219
+ size?: 'small' | 'medium' | string;
210
220
  /**
211
221
  * Defines the row height and forces an equal height to all rows
212
222
  * ([see example]({% slug scrollmmodes_grid %})).
@@ -3,7 +3,13 @@
3
3
  */
4
4
  export interface GridToolbarProps {
5
5
  /**
6
- * The Vue slot elements that will be rendered inside the toolbar of the Grid.
6
+ * Configures the `size` of the Grid.
7
+ *
8
+ * The available options are:
9
+ * - small
10
+ * - medium
11
+ *
12
+ * @default `medium`
7
13
  */
8
- children?: any;
14
+ size?: 'small' | 'medium' | string;
9
15
  }
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-vue-grid',
6
6
  productName: 'Kendo UI for Vue',
7
7
  productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
8
- publishDate: 1669818600,
8
+ publishDate: 1669966840,
9
9
  version: '',
10
10
  licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
11
11
  };
package/dist/npm/Grid.js CHANGED
@@ -123,6 +123,13 @@ var GridVue2 = {
123
123
  type: String,
124
124
  default: 'scrollable'
125
125
  },
126
+ size: {
127
+ type: String,
128
+ default: 'medium',
129
+ validator: function validator(value) {
130
+ return ['small', 'medium'].includes(value);
131
+ }
132
+ },
126
133
  pager: kendo_vue_common_1.templateDefinition,
127
134
  rowHeight: Number,
128
135
  detail: kendo_vue_common_1.templateDefinition,
@@ -194,6 +201,29 @@ var GridVue2 = {
194
201
  this.gridUnmounted();
195
202
  },
196
203
  computed: {
204
+ nonscrollableWrapperClass: function nonscrollableWrapperClass() {
205
+ var _a;
206
+ var size = this.$props.size;
207
+ return _a = {
208
+ 'k-grid': true,
209
+ 'k-grid-md': !size
210
+ }, _a["k-grid-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
211
+ },
212
+ scrollableWrapperClass: function scrollableWrapperClass() {
213
+ var scrollable = this.$props.scrollable;
214
+ return __assign(__assign({}, this.nonscrollableWrapperClass), {
215
+ 'k-grid-virtual': scrollable === 'virtual'
216
+ });
217
+ },
218
+ gridTableClass: function gridTableClass() {
219
+ var _a;
220
+ var size = this.$props.size;
221
+ return _a = {
222
+ 'k-table': true,
223
+ 'k-grid-table': true,
224
+ 'k-grid-md': !size
225
+ }, _a["k-table-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
226
+ },
197
227
  getCorrectHeight: {
198
228
  get: function get() {
199
229
  if (this.$props.scrollable === 'virtual') {
@@ -727,7 +757,7 @@ var GridVue2 = {
727
757
  if (item.expanded !== false && item.items) {
728
758
  allRowsCount = _this.addSubItems(item.items, allRowsCount);
729
759
  }
730
- if (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible') {
760
+ if (_this.group && _this.group.length && (_this.$props.groupable.footer === 'always' || item.expanded !== false && _this.$props.groupable.footer === 'visible')) {
731
761
  allRowsCount++;
732
762
  }
733
763
  });
@@ -851,8 +881,9 @@ var GridVue2 = {
851
881
  })];
852
882
  // @ts-ignore
853
883
  var header = h(Header_1.Header, {
854
- columnResize: this.columnResize,
884
+ size: this.$props.size,
855
885
  attrs: this.v3 ? undefined : {
886
+ size: this.$props.size,
856
887
  columnResize: this.columnResize,
857
888
  staticHeaders: this.$props.scrollable !== 'none',
858
889
  // @ts-ignore
@@ -964,6 +995,7 @@ var GridVue2 = {
964
995
  });
965
996
  }, this)
966
997
  },
998
+ columnResize: this.columnResize,
967
999
  staticHeaders: this.$props.scrollable !== 'none',
968
1000
  ref: this.v3 ? function (el) {
969
1001
  _this.headerRef = el;
@@ -1079,8 +1111,9 @@ var GridVue2 = {
1079
1111
  }) ?
1080
1112
  // @ts-ignore
1081
1113
  h(Footer_1.Footer, {
1082
- columnResize: this.columnResize,
1114
+ size: this.$props.size,
1083
1115
  attrs: this.v3 ? undefined : {
1116
+ size: this.$props.size,
1084
1117
  columnResize: this.columnResize,
1085
1118
  staticHeaders: this.$props.scrollable !== 'none',
1086
1119
  row:
@@ -1111,6 +1144,7 @@ var GridVue2 = {
1111
1144
  });
1112
1145
  }, this)
1113
1146
  },
1147
+ columnResize: this.columnResize,
1114
1148
  staticHeaders: this.$props.scrollable !== 'none',
1115
1149
  ref: this.v3 ? function (el) {
1116
1150
  _this.footerRef = el;
@@ -1548,6 +1582,7 @@ var GridVue2 = {
1548
1582
  var _this = this;
1549
1583
  if (item.rowType === 'data') {
1550
1584
  absoluteDataIndex++;
1585
+ dataIndex++;
1551
1586
  }
1552
1587
  if (this.$props.alternatePerGroup && item.rowType === 'groupHeader') {
1553
1588
  absoluteDataIndex = 0;
@@ -1774,7 +1809,7 @@ var GridVue2 = {
1774
1809
  },
1775
1810
  style: wrapperStyle,
1776
1811
  role: "grid",
1777
- "class": "k-widget k-grid"
1812
+ "class": _this3.nonscrollableWrapperClass
1778
1813
  }, _this3.v3 ? function () {
1779
1814
  return [toolbar, groupingPanel, h("table", {
1780
1815
  style: {
@@ -1807,7 +1842,7 @@ var GridVue2 = {
1807
1842
  },
1808
1843
  style: wrapperStyle,
1809
1844
  role: "grid",
1810
- "class": "k-widget k-grid"
1845
+ "class": _this3.nonscrollableWrapperClass
1811
1846
  }, _this3.v3 ? function () {
1812
1847
  return [toolbar, groupingPanel, h("table", {
1813
1848
  style: {
@@ -1855,7 +1890,7 @@ var GridVue2 = {
1855
1890
  },
1856
1891
  style: wrapperStyle,
1857
1892
  role: "grid",
1858
- "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
1893
+ "class": _this3.scrollableWrapperClass
1859
1894
  }, _this3.v3 ? function () {
1860
1895
  return [toolbar, groupingPanel, header, h("div", {
1861
1896
  "class": "k-grid-container",
@@ -1885,7 +1920,7 @@ var GridVue2 = {
1885
1920
  tabindex: -1
1886
1921
  },
1887
1922
  tabindex: -1,
1888
- "class": 'k-grid-table',
1923
+ "class": _this3.gridTableClass,
1889
1924
  ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
1890
1925
  }, [colGroups, h("tbody", {
1891
1926
  role: "presentation",
@@ -1934,7 +1969,7 @@ var GridVue2 = {
1934
1969
  tabindex: -1
1935
1970
  },
1936
1971
  tabindex: -1,
1937
- "class": 'k-grid-table',
1972
+ "class": _this3.gridTableClass,
1938
1973
  ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
1939
1974
  }, [colGroups, h("tbody", {
1940
1975
  role: "presentation",
@@ -1966,7 +2001,7 @@ var GridVue2 = {
1966
2001
  },
1967
2002
  style: wrapperStyle,
1968
2003
  role: "grid",
1969
- "class": 'k-widget k-grid' + (_this3.$props.scrollable === 'virtual' ? ' k-grid-virtual' : '')
2004
+ "class": _this3.scrollableWrapperClass
1970
2005
  }, _this3.v3 ? function () {
1971
2006
  return [toolbar, groupingPanel, header, h("div", {
1972
2007
  "class": "k-grid-container",
@@ -1996,7 +2031,7 @@ var GridVue2 = {
1996
2031
  tabindex: -1
1997
2032
  },
1998
2033
  tabindex: -1,
1999
- "class": 'k-grid-table',
2034
+ "class": _this3.gridTableClass,
2000
2035
  ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
2001
2036
  }, [colGroups, h("tbody", {
2002
2037
  role: "presentation",
@@ -2045,7 +2080,7 @@ var GridVue2 = {
2045
2080
  tabindex: -1
2046
2081
  },
2047
2082
  tabindex: -1,
2048
- "class": 'k-grid-table',
2083
+ "class": _this3.gridTableClass,
2049
2084
  ref: (0, kendo_vue_common_1.setRef)(_this3, 'scrollTable')
2050
2085
  }, [colGroups, h("tbody", {
2051
2086
  role: "presentation",
@@ -7,7 +7,19 @@ import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } fr
7
7
  /**
8
8
  * @hidden
9
9
  */
10
- declare let GridToolbarVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
10
+ export interface GridToolbarComputed {
11
+ [key: string]: any;
12
+ wrapperClass: object;
13
+ }
14
+ /**
15
+ * @hidden
16
+ */
17
+ export interface GridToolbarAll extends GridToolbarProps, GridToolbarComputed, Vue2type {
18
+ }
19
+ /**
20
+ * @hidden
21
+ */
22
+ declare let GridToolbarVue2: ComponentOptions<GridToolbarAll, DefaultData<{}>, DefaultMethods<{}>, {}, RecordPropsDefinition<GridToolbarProps>>;
11
23
  /**
12
24
  * Represents the GridToolbar component.
13
25
  *
@@ -15,6 +15,25 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
15
15
  */
16
16
  var GridToolbarVue2 = {
17
17
  name: 'GridToolbar',
18
+ props: {
19
+ size: {
20
+ type: String,
21
+ default: 'medium',
22
+ validator: function validator(value) {
23
+ return ['small', 'medium'].includes(value);
24
+ }
25
+ }
26
+ },
27
+ computed: {
28
+ wrapperClass: function wrapperClass() {
29
+ var _a;
30
+ var size = this.$props.size;
31
+ return _a = {
32
+ 'k-toolbar': true,
33
+ 'k-grid-toolbar': true
34
+ }, _a["k-toolbar-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
35
+ }
36
+ },
18
37
  // @ts-ignore
19
38
  setup: !isV3 ? undefined : function () {
20
39
  var v3 = !!isV3;
@@ -27,7 +46,7 @@ var GridToolbarVue2 = {
27
46
  var h = gh || createElement;
28
47
  var defaultSlot = (0, kendo_vue_common_1.getDefaultSlots)(this);
29
48
  return h("div", {
30
- "class": "k-toolbar k-grid-toolbar"
49
+ "class": this.wrapperClass
31
50
  }, [defaultSlot]);
32
51
  }
33
52
  };
@@ -227,8 +227,10 @@ var GridFilterCellVue2 = {
227
227
  }
228
228
  };
229
229
  var defaultRendering = h("div", {
230
- "class": "k-filtercell"
231
- }, [h("span", [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
230
+ "class": "k-cell-inner"
231
+ }, [h("span", {
232
+ "class": "k-link"
233
+ }, [filterComponent.call(this, this.$props.filterType, this.$props.value), h("div", {
232
234
  "class": "k-filtercell-operator"
233
235
  }, [renderOperatorEditor.call(this),
234
236
  // @ts-ignore function children
@@ -13,6 +13,7 @@ export interface FooterProps {
13
13
  colGroupFooter: HTMLTableColElement | null;
14
14
  };
15
15
  cols: any[];
16
+ size: string;
16
17
  }
17
18
  export interface FooterComputed {
18
19
  [key: string]: any;
@@ -22,7 +22,8 @@ var FooterVue2 = {
22
22
  staticHeaders: Boolean,
23
23
  row: Object,
24
24
  columnResize: Object,
25
- cols: Array
25
+ cols: Array,
26
+ size: String
26
27
  },
27
28
  data: function data() {
28
29
  return {
@@ -32,6 +33,14 @@ var FooterVue2 = {
32
33
  };
33
34
  },
34
35
  computed: {
36
+ tableClass: function tableClass() {
37
+ var _a;
38
+ var size = this.$props.size;
39
+ return _a = {
40
+ 'k-table': true,
41
+ 'k-grid-footer-table': true
42
+ }, _a["k-table-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
43
+ },
35
44
  divStyle: {
36
45
  get: function get() {
37
46
  var padding = this.$data.scrollbarWidth + 'px';
@@ -92,6 +101,7 @@ var FooterVue2 = {
92
101
  "class": "k-grid-footer-wrap",
93
102
  ref: (0, kendo_vue_common_1.setRef)(this, 'footerWrap')
94
103
  }, [h("table", {
104
+ "class": this.tableClass,
95
105
  style: this.tableStyle
96
106
  }, [h("colgroup", {
97
107
  ref: (0, kendo_vue_common_1.setRef)(this, 'colGroupHeader')
@@ -15,6 +15,7 @@ var GridFilterCell_1 = require("../cells/GridFilterCell");
15
15
  var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
16
16
  var main_1 = require("../messages/main");
17
17
  var kendo_vue_data_tools_1 = require("@progress/kendo-vue-data-tools");
18
+ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
18
19
  /**
19
20
  * @hidden
20
21
  */
@@ -162,7 +163,7 @@ var FilterRowVue2 = {
162
163
  },
163
164
  navigatable: column.navigatable,
164
165
  style: style,
165
- "class": this.headerCellClassName(column.field, column.locked) || undefined,
166
+ "class": (0, kendo_vue_common_1.classNames)('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
166
167
  ariaLabel: ariaAttrs.ariaLabel,
167
168
  ariaColumnIndex: ariaAttrs.ariaColumnIndex
168
169
  }, this.v3 ? function () {
@@ -181,7 +182,7 @@ var FilterRowVue2 = {
181
182
  },
182
183
  navigatable: column.navigatable,
183
184
  style: style,
184
- "class": this.headerCellClassName(column.field, column.locked) || undefined,
185
+ "class": (0, kendo_vue_common_1.classNames)('k-header', this.headerCellClassName(column.field, column.locked) || undefined),
185
186
  ariaLabel: ariaAttrs.ariaLabel,
186
187
  ariaColumnIndex: ariaAttrs.ariaColumnIndex
187
188
  });
@@ -10,6 +10,7 @@ export interface HeaderProps {
10
10
  ref?: string;
11
11
  staticHeaders: boolean;
12
12
  headerRow: any;
13
+ size: string;
13
14
  columnResize: {
14
15
  colGroupHeader: any | null;
15
16
  setIsRtl: (isRtl: boolean) => void;
@@ -22,6 +22,7 @@ var HeaderVue2 = {
22
22
  headerRow: Object,
23
23
  columnResize: Object,
24
24
  cols: Array,
25
+ size: String,
25
26
  draggable: Boolean
26
27
  },
27
28
  data: function data() {
@@ -38,6 +39,14 @@ var HeaderVue2 = {
38
39
  'k-grid-header': true,
39
40
  'k-grid-draggable-header': this.$props.draggable
40
41
  };
42
+ },
43
+ tableClass: function tableClass() {
44
+ var _a;
45
+ var size = this.$props.size;
46
+ return _a = {
47
+ 'k-table': true,
48
+ 'k-grid-header-table': true
49
+ }, _a["k-table-".concat(kendo_vue_common_1.kendoThemeMaps.sizeMap[size] || size)] = size, _a;
41
50
  }
42
51
  },
43
52
  mounted: function mounted() {
@@ -102,6 +111,7 @@ var HeaderVue2 = {
102
111
  role: "presentation"
103
112
  }
104
113
  }, [h("table", {
114
+ "class": this.tableClass,
105
115
  ref: (0, kendo_vue_common_1.setRef)(this, 'table'),
106
116
  role: "presentation",
107
117
  attrs: this.v3 ? undefined : {
@@ -206,11 +206,15 @@ var HeaderRowVue2 = {
206
206
  }
207
207
  return iconSortIndex >= 0 && [h("span", {
208
208
  key: 1,
209
+ "class": 'k-sort-icon'
210
+ }, [h("span", {
209
211
  "class": 'k-icon k-i-sort-' + _this.$props.sort[iconSortIndex].dir + '-small'
210
- }), _this.$props.sort.length > 1 && h("span", {
212
+ })]), _this.$props.sort.length > 1 && h("span", {
211
213
  key: 2,
214
+ "class": 'k-sort-icon'
215
+ }, [h("span", {
212
216
  "class": "k-sort-order"
213
- }, [iconSortIndex + 1])];
217
+ }, [iconSortIndex + 1])])];
214
218
  };
215
219
  var sortIcon = sortIconRenderer(sortIndex);
216
220
  var className = (column.kFirst ? 'k-first ' : '') + this.cellClass(column.field, column.headerClassName, column.locked);
@@ -140,8 +140,8 @@ export interface GridColumnProps {
140
140
  locked?: boolean;
141
141
  /**
142
142
  * The type of the data which will be used when formatting the cell data.
143
- * Could be one of the following values 'text' | 'numeric' | 'boolean' | 'date'.
144
- * Defaults to `text`.
143
+ * Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
144
+ * Defaults to `string`.
145
145
  */
146
- type?: 'text' | 'numeric' | 'boolean' | 'date';
146
+ type?: 'string' | 'number' | 'boolean' | 'date';
147
147
  }
@@ -207,6 +207,16 @@ export interface GridProps {
207
207
  * while the user is scrolling the content.
208
208
  */
209
209
  scrollable?: string;
210
+ /**
211
+ * Configures the `size` of the Grid.
212
+ *
213
+ * The available options are:
214
+ * - small
215
+ * - medium
216
+ *
217
+ * @default `medium`
218
+ */
219
+ size?: 'small' | 'medium' | string;
210
220
  /**
211
221
  * Defines the row height and forces an equal height to all rows
212
222
  * ([see example]({% slug scrollmmodes_grid %})).