@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.
- package/dist/cdn/js/kendo-vue-grid.js +1 -1
- package/dist/es/Grid.js +47 -12
- package/dist/es/GridToolbar.d.ts +13 -1
- package/dist/es/GridToolbar.js +21 -2
- package/dist/es/cells/GridFilterCell.js +4 -2
- package/dist/es/footer/Footer.d.ts +1 -0
- package/dist/es/footer/Footer.js +12 -2
- package/dist/es/header/FilterRow.js +3 -2
- package/dist/es/header/Header.d.ts +1 -0
- package/dist/es/header/Header.js +11 -1
- package/dist/es/header/HeaderRow.js +6 -2
- package/dist/es/interfaces/GridColumnProps.d.ts +3 -3
- package/dist/es/interfaces/GridProps.d.ts +10 -0
- package/dist/es/interfaces/GridToolbarProps.d.ts +8 -2
- package/dist/es/package-metadata.js +1 -1
- package/dist/esm/Grid.js +47 -12
- package/dist/esm/GridToolbar.d.ts +13 -1
- package/dist/esm/GridToolbar.js +21 -2
- package/dist/esm/cells/GridFilterCell.js +4 -2
- package/dist/esm/footer/Footer.d.ts +1 -0
- package/dist/esm/footer/Footer.js +12 -2
- package/dist/esm/header/FilterRow.js +3 -2
- package/dist/esm/header/Header.d.ts +1 -0
- package/dist/esm/header/Header.js +11 -1
- package/dist/esm/header/HeaderRow.js +6 -2
- package/dist/esm/interfaces/GridColumnProps.d.ts +3 -3
- package/dist/esm/interfaces/GridProps.d.ts +10 -0
- package/dist/esm/interfaces/GridToolbarProps.d.ts +8 -2
- package/dist/esm/package-metadata.js +1 -1
- package/dist/npm/Grid.js +46 -11
- package/dist/npm/GridToolbar.d.ts +13 -1
- package/dist/npm/GridToolbar.js +20 -1
- package/dist/npm/cells/GridFilterCell.js +4 -2
- package/dist/npm/footer/Footer.d.ts +1 -0
- package/dist/npm/footer/Footer.js +11 -1
- package/dist/npm/header/FilterRow.js +3 -2
- package/dist/npm/header/Header.d.ts +1 -0
- package/dist/npm/header/Header.js +10 -0
- package/dist/npm/header/HeaderRow.js +6 -2
- package/dist/npm/interfaces/GridColumnProps.d.ts +3 -3
- package/dist/npm/interfaces/GridProps.d.ts +10 -0
- package/dist/npm/interfaces/GridToolbarProps.d.ts +8 -2
- package/dist/npm/package-metadata.js +1 -1
- package/package.json +15 -15
package/dist/esm/GridToolbar.js
CHANGED
|
@@ -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":
|
|
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-
|
|
225
|
-
}, [h("span",
|
|
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
|
|
@@ -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
|
});
|
|
@@ -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 '
|
|
144
|
-
* Defaults to `
|
|
143
|
+
* Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
|
|
144
|
+
* Defaults to `string`.
|
|
145
145
|
*/
|
|
146
|
-
type?: '
|
|
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
|
-
*
|
|
6
|
+
* Configures the `size` of the Grid.
|
|
7
|
+
*
|
|
8
|
+
* The available options are:
|
|
9
|
+
* - small
|
|
10
|
+
* - medium
|
|
11
|
+
*
|
|
12
|
+
* @default `medium`
|
|
7
13
|
*/
|
|
8
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
-
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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":
|
|
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
|
-
|
|
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
|
*
|
package/dist/npm/GridToolbar.js
CHANGED
|
@@ -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":
|
|
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-
|
|
231
|
-
}, [h("span",
|
|
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
|
|
@@ -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
|
});
|
|
@@ -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 '
|
|
144
|
-
* Defaults to `
|
|
143
|
+
* Could be one of the following values 'string' | 'number' | 'boolean' | 'date'.
|
|
144
|
+
* Defaults to `string`.
|
|
145
145
|
*/
|
|
146
|
-
type?: '
|
|
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 %})).
|