@progress/kendo-vue-grid 8.1.0-develop.5 → 8.1.0-develop.7
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/Grid.d.ts +32 -17
- package/Grid.js +1 -1
- package/Grid.mjs +568 -449
- package/GridState.d.ts +17 -1
- package/GridState.js +1 -1
- package/GridState.mjs +84 -71
- package/RootGrid.d.ts +29 -0
- package/RootGrid.js +1 -1
- package/RootGrid.mjs +23 -8
- package/cells/GridCell.d.ts +2 -0
- package/cells/GridCell.js +1 -1
- package/cells/GridCell.mjs +35 -30
- package/cells/GridDetailCell.js +1 -1
- package/cells/GridDetailCell.mjs +20 -20
- package/cells/GridFilterCell.js +1 -1
- package/cells/GridFilterCell.mjs +42 -37
- package/cells/GridGroupCell.d.ts +2 -0
- package/cells/GridGroupCell.js +1 -1
- package/cells/GridGroupCell.mjs +69 -55
- package/cells/GridHierarchyCell.d.ts +2 -0
- package/cells/GridHierarchyCell.js +1 -1
- package/cells/GridHierarchyCell.mjs +51 -41
- package/cells/GridSelectionCell.d.ts +2 -0
- package/cells/GridSelectionCell.js +1 -1
- package/cells/GridSelectionCell.mjs +35 -24
- package/cells/pincell/GridPinCell.d.ts +72 -0
- package/cells/pincell/GridPinCell.js +8 -0
- package/cells/pincell/GridPinCell.mjs +111 -0
- package/cells/pincell/GridPinDropdownButton.d.ts +27 -0
- package/cells/pincell/GridPinDropdownButton.js +8 -0
- package/cells/pincell/GridPinDropdownButton.mjs +111 -0
- package/common.d.ts +6 -0
- package/common.js +1 -1
- package/common.mjs +8 -2
- package/components/PinnedRowsTable.d.ts +62 -0
- package/components/PinnedRowsTable.js +8 -0
- package/components/PinnedRowsTable.mjs +135 -0
- package/components/StickyGroupTable.d.ts +0 -1
- package/components/StickyGroupTable.js +1 -1
- package/components/StickyGroupTable.mjs +24 -30
- package/constants/main.d.ts +15 -0
- package/dist/cdn/js/kendo-vue-grid.js +1 -1
- package/drag/ColumnResize.d.ts +2 -0
- package/drag/ColumnResize.js +1 -1
- package/drag/ColumnResize.mjs +139 -123
- package/footer/FooterCell.js +1 -1
- package/footer/FooterCell.mjs +22 -20
- package/getRowContents.js +1 -1
- package/getRowContents.mjs +50 -48
- package/header/FilterRow.d.ts +4 -0
- package/header/FilterRow.js +1 -1
- package/header/FilterRow.mjs +52 -50
- package/header/HeaderRow.d.ts +4 -0
- package/header/HeaderRow.js +1 -1
- package/header/HeaderRow.mjs +114 -105
- package/index.js +1 -1
- package/index.mjs +15 -14
- package/interfaces/ColumnType.d.ts +1 -1
- package/interfaces/GridCellProps.d.ts +5 -0
- package/interfaces/GridCellsSettings.d.ts +23 -0
- package/interfaces/GridColumnProps.d.ts +2 -2
- package/interfaces/GridProps.d.ts +102 -31
- package/interfaces/GridRowProps.d.ts +13 -4
- package/interfaces/GridRowsSettings.d.ts +48 -0
- package/interfaces/events.d.ts +19 -2
- package/messages/main.d.ts +30 -0
- package/messages/main.js +2 -2
- package/messages/main.mjs +108 -96
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +13 -12
- package/rows/GridRow.d.ts +6 -10
- package/rows/GridRow.js +1 -1
- package/rows/GridRow.mjs +31 -26
- package/utils/main.d.ts +5 -0
- package/utils/main.js +1 -1
- package/utils/main.mjs +199 -167
- package/utils/virtualColumns.js +1 -1
- package/utils/virtualColumns.mjs +121 -105
package/getRowContents.mjs
CHANGED
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
import { createVNode as x } from "vue";
|
|
9
9
|
import { GridCell as ae } from "./cells/GridCell.mjs";
|
|
10
10
|
import { GridEditCell as oe } from "./cells/GridEditCell.mjs";
|
|
11
|
-
import { getter as i, getNestedValue as
|
|
12
|
-
import { groupedFirstItemValue as re } from "./utils/main.mjs";
|
|
13
|
-
import { tableKeyboardNavigationTools as
|
|
14
|
-
const
|
|
11
|
+
import { getter as i, getNestedValue as p } from "@progress/kendo-vue-common";
|
|
12
|
+
import { resolveCells as de, groupedFirstItemValue as re } from "./utils/main.mjs";
|
|
13
|
+
import { tableKeyboardNavigationTools as ie } from "@progress/kendo-vue-data-tools";
|
|
14
|
+
const ce = ({
|
|
15
15
|
leafColumns: t,
|
|
16
16
|
editField: l,
|
|
17
17
|
item: o
|
|
@@ -20,27 +20,27 @@ const ie = ({
|
|
|
20
20
|
return !1;
|
|
21
21
|
for (const n of t)
|
|
22
22
|
if (n.editable) {
|
|
23
|
-
const
|
|
24
|
-
if (
|
|
23
|
+
const d = p(l, o.dataItem);
|
|
24
|
+
if (d === !0 || d === n.field)
|
|
25
25
|
return !0;
|
|
26
26
|
}
|
|
27
27
|
return !1;
|
|
28
|
-
},
|
|
28
|
+
}, se = ({
|
|
29
29
|
selectedField: t,
|
|
30
30
|
dataItemKey: l,
|
|
31
31
|
select: o,
|
|
32
32
|
item: n
|
|
33
33
|
}) => {
|
|
34
34
|
if (t) {
|
|
35
|
-
const
|
|
36
|
-
return typeof
|
|
35
|
+
const d = p(t, n.dataItem);
|
|
36
|
+
return typeof d == "boolean" && d;
|
|
37
37
|
}
|
|
38
38
|
if (o && l && i(l)(n.dataItem) !== void 0) {
|
|
39
|
-
const
|
|
40
|
-
return typeof
|
|
39
|
+
const d = o[i(l)(n.dataItem)];
|
|
40
|
+
return typeof d == "boolean" && d;
|
|
41
41
|
}
|
|
42
42
|
return !1;
|
|
43
|
-
},
|
|
43
|
+
}, fe = ({
|
|
44
44
|
highlight: t,
|
|
45
45
|
dataItemKey: l,
|
|
46
46
|
item: o
|
|
@@ -50,16 +50,16 @@ const ie = ({
|
|
|
50
50
|
return typeof n == "boolean" && n;
|
|
51
51
|
}
|
|
52
52
|
return !1;
|
|
53
|
-
},
|
|
53
|
+
}, ve = (t, l, o, n, d, c) => {
|
|
54
54
|
const {
|
|
55
|
-
leafColumns:
|
|
56
|
-
selectedField:
|
|
57
|
-
dataItemKey:
|
|
58
|
-
select:
|
|
55
|
+
leafColumns: g,
|
|
56
|
+
selectedField: I,
|
|
57
|
+
dataItemKey: r,
|
|
58
|
+
select: h,
|
|
59
59
|
highlight: y,
|
|
60
|
-
editField:
|
|
61
|
-
cellRender:
|
|
62
|
-
cells:
|
|
60
|
+
editField: m,
|
|
61
|
+
cellRender: $,
|
|
62
|
+
cells: A,
|
|
63
63
|
itemChange: G,
|
|
64
64
|
selectionChangeHandler: B,
|
|
65
65
|
editHandler: D,
|
|
@@ -73,30 +73,30 @@ const ie = ({
|
|
|
73
73
|
columnsRef: J,
|
|
74
74
|
isRtl: H,
|
|
75
75
|
idPrefix: K
|
|
76
|
-
} = t, L =
|
|
77
|
-
leafColumns:
|
|
78
|
-
editField:
|
|
76
|
+
} = t, L = h && r && i(r)(l.dataItem) !== void 0 ? h[i(r)(l.dataItem)] : void 0, v = I ? p(I, l.dataItem) : L, S = y && r && i(r)(l.dataItem) !== void 0 ? y[i(r)(l.dataItem)] : void 0, M = ce({
|
|
77
|
+
leafColumns: g,
|
|
78
|
+
editField: m,
|
|
79
79
|
item: l
|
|
80
|
-
}), Q =
|
|
81
|
-
selectedField:
|
|
82
|
-
dataItemKey:
|
|
83
|
-
select:
|
|
80
|
+
}), Q = se({
|
|
81
|
+
selectedField: I,
|
|
82
|
+
dataItemKey: r,
|
|
83
|
+
select: h,
|
|
84
84
|
item: l
|
|
85
|
-
}), U =
|
|
85
|
+
}), U = fe({
|
|
86
86
|
highlight: y,
|
|
87
|
-
dataItemKey:
|
|
87
|
+
dataItemKey: r,
|
|
88
88
|
item: l
|
|
89
89
|
});
|
|
90
90
|
return {
|
|
91
|
-
row: (t.hasDynamicColSpan ? t.getCellsToRender(l.dataItem,
|
|
92
|
-
columnIndex:
|
|
91
|
+
row: (t.hasDynamicColSpan ? t.getCellsToRender(l.dataItem, g) : t.cellsToRender).map(({
|
|
92
|
+
columnIndex: f,
|
|
93
93
|
colSpan: W
|
|
94
94
|
}) => {
|
|
95
|
-
var E,
|
|
96
|
-
const e =
|
|
95
|
+
var E, V, F, N, R;
|
|
96
|
+
const e = g[f];
|
|
97
97
|
let u;
|
|
98
98
|
if ((E = e.rowSpannable) != null && E.enabled && l.rowType === "data" && e.field && c) {
|
|
99
|
-
const a = e.field ? (
|
|
99
|
+
const a = e.field ? (F = (V = e.rowSpannable).valueGetter) == null ? void 0 : F.call(V, l.dataItem, e.field) : null;
|
|
100
100
|
u = {
|
|
101
101
|
value: a,
|
|
102
102
|
count: 1
|
|
@@ -108,15 +108,16 @@ const ie = ({
|
|
|
108
108
|
} : {
|
|
109
109
|
left: e.left + "px",
|
|
110
110
|
right: e.right + "px"
|
|
111
|
-
}, Z = e.locked && e.left !== void 0 ? Y : void 0;
|
|
111
|
+
}, Z = e.locked && (e.left !== void 0 || e.right !== void 0) ? Y : void 0;
|
|
112
112
|
let k = !1;
|
|
113
|
-
if (e.editable &&
|
|
114
|
-
const a =
|
|
113
|
+
if (e.editable && m) {
|
|
114
|
+
const a = p(m, l.dataItem);
|
|
115
115
|
(a === !0 || a === e.field) && (k = !0);
|
|
116
116
|
}
|
|
117
|
+
const s = de(A, e.cells);
|
|
117
118
|
let b;
|
|
118
|
-
l.rowType === "groupFooter" ? b = (
|
|
119
|
-
const w = (
|
|
119
|
+
l.rowType === "groupFooter" ? b = (s == null ? void 0 : s.groupFooter) || e.cell : (e.cell || s != null && s.data) && (b = e.cell);
|
|
120
|
+
const w = (R = C == null ? void 0 : C[l.level]) == null ? void 0 : R.some((a) => a === re(l.dataItem, z)), ee = e.id ? e.id : f, le = w ? !w : l.expanded || l.dataItem.expanded, te = e._type === "expand", ne = ie.generateNavigatableId(`${o}-${String(f)}`, K, te || l.rowType === "groupHeader" || l.rowType === "groupFooter" || e.field === "value" ? "nodata" : "cell"), T = {
|
|
120
121
|
locked: e.locked,
|
|
121
122
|
key: ee,
|
|
122
123
|
id: ne,
|
|
@@ -129,13 +130,13 @@ const ie = ({
|
|
|
129
130
|
type: e.type,
|
|
130
131
|
columnType: e.columnType,
|
|
131
132
|
className: X,
|
|
132
|
-
render: b ||
|
|
133
|
+
render: b || $,
|
|
133
134
|
onChange: G,
|
|
134
135
|
onSelectionchange: (a) => B({
|
|
135
136
|
event: a,
|
|
136
137
|
dataItem: l.dataItem,
|
|
137
138
|
dataIndex: n,
|
|
138
|
-
columnIndex:
|
|
139
|
+
columnIndex: f
|
|
139
140
|
}),
|
|
140
141
|
onCellclick: O,
|
|
141
142
|
onCellkeydown: j,
|
|
@@ -143,7 +144,8 @@ const ie = ({
|
|
|
143
144
|
onRemove: P,
|
|
144
145
|
onSave: _,
|
|
145
146
|
onCancel: q,
|
|
146
|
-
|
|
147
|
+
cells: s,
|
|
148
|
+
columnIndex: f,
|
|
147
149
|
columnsCount: J.filter((a) => !a.children.length).length,
|
|
148
150
|
rowType: l.rowType,
|
|
149
151
|
level: l.level,
|
|
@@ -152,12 +154,12 @@ const ie = ({
|
|
|
152
154
|
style: Z,
|
|
153
155
|
ariaColumnIndex: e.ariaColumnIndex,
|
|
154
156
|
isRtl: H,
|
|
155
|
-
isSelected: !!((e == null ? void 0 : e._type) === "edit" ? v : Array.isArray(v) && v.indexOf(
|
|
157
|
+
isSelected: !!((e == null ? void 0 : e._type) === "edit" ? v : Array.isArray(v) && v.indexOf(f) > -1),
|
|
156
158
|
isHighlighted: !!(typeof S != "boolean" && S && e.field && S[e.field] === !0),
|
|
157
159
|
group: l.group,
|
|
158
160
|
rowSpan: u
|
|
159
161
|
};
|
|
160
|
-
return e.
|
|
162
|
+
return e.defaultCell ? x(e.defaultCell, T, null) : k ? x(oe, T, null) : x(ae, T, null);
|
|
161
163
|
}),
|
|
162
164
|
isInEdit: M,
|
|
163
165
|
isSelected: Q,
|
|
@@ -165,8 +167,8 @@ const ie = ({
|
|
|
165
167
|
};
|
|
166
168
|
};
|
|
167
169
|
export {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
170
|
+
fe as calculateIsHighlighted,
|
|
171
|
+
ce as calculateIsInEdit,
|
|
172
|
+
se as calculateIsSelected,
|
|
173
|
+
ve as getRowContents
|
|
172
174
|
};
|
package/header/FilterRow.d.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-query';
|
|
9
9
|
import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
|
|
10
10
|
import { GridFilterOperators } from '../interfaces/GridFilterOperators';
|
|
11
|
+
import { GridCellsSettings } from '../interfaces/GridCellsSettings';
|
|
11
12
|
import { PropType } from 'vue';
|
|
12
13
|
import { GridCellRenderModel } from '../interfaces/GridCellRenderModel';
|
|
13
14
|
/**
|
|
@@ -20,6 +21,7 @@ export interface FilterRowProps {
|
|
|
20
21
|
filterOperators: GridFilterOperators;
|
|
21
22
|
sort?: SortDescriptor[];
|
|
22
23
|
cellRender?: any;
|
|
24
|
+
cells?: GridCellsSettings;
|
|
23
25
|
isRtl?: boolean;
|
|
24
26
|
ariaRowIndex?: number;
|
|
25
27
|
size?: null | 'small' | 'medium' | 'large';
|
|
@@ -38,6 +40,7 @@ declare const FilterRow: import('vue').DefineComponent<import('vue').ExtractProp
|
|
|
38
40
|
filterOperators: PropType<GridFilterOperators>;
|
|
39
41
|
sort: PropType<SortDescriptor[]>;
|
|
40
42
|
cellRender: PropType<any>;
|
|
43
|
+
cells: PropType<GridCellsSettings>;
|
|
41
44
|
isRtl: PropType<boolean>;
|
|
42
45
|
ariaRowIndex: PropType<number>;
|
|
43
46
|
size: PropType<"small" | "medium" | "large">;
|
|
@@ -57,6 +60,7 @@ declare const FilterRow: import('vue').DefineComponent<import('vue').ExtractProp
|
|
|
57
60
|
filterOperators: PropType<GridFilterOperators>;
|
|
58
61
|
sort: PropType<SortDescriptor[]>;
|
|
59
62
|
cellRender: PropType<any>;
|
|
63
|
+
cells: PropType<GridCellsSettings>;
|
|
60
64
|
isRtl: PropType<boolean>;
|
|
61
65
|
ariaRowIndex: PropType<number>;
|
|
62
66
|
size: PropType<"small" | "medium" | "large">;
|
package/header/FilterRow.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),f=require("../filterCommon.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),f=require("../filterCommon.js"),V=require("../cells/GridFilterCell.js"),L=require("@progress/kendo-vue-intl"),$=require("../messages/main.js"),h=require("@progress/kendo-vue-data-tools"),j=require("../utils/main.js"),z=require("../utils/virtualColumns.js");function O(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!o.isVNode(t)}const N=o.defineComponent({name:"kendoFilterRow",props:{grid:Object,columns:Array,filter:Object,filterOperators:Object,sort:[Object,Array],cellRender:[String,Function,Object],cells:Object,isRtl:Boolean,ariaRowIndex:Number,size:String,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,onFilterchange:Function},inject:{kendoLocalizationService:{default:null}},methods:{headerCellClassName(t,r){let l=r?" k-grid-header-sticky":"";return this.$props.sort&&this.$props.sort.filter(d=>d.field===t).length>0&&(l+=" k-sorted"),l},setFilter(t,r,l,d){const n=[];(t!==""&&t!==null||r!=="")&&n.push({field:l,operator:r,value:t}),this.$props.filter&&this.$props.filter.filters&&(this.$props.filter.filters||[]).forEach(c=>{const p=c;p&&p.field!==l&&n.push(p)});const g=n.length>0?{logic:"and",filters:n}:null;this.$emit("filterchange",g,d)}},setup(){return{kendoLocalizationService:o.inject("kendoLocalizationService",{})}},render(){const t=L.provideLocalizationService(this),r=this.$props.filter&&this.$props.filter.filters||[],l=(e,i=null)=>{const a=r.filter(s=>s.field===e)[0];return a?a.value:i},d=e=>{const i=r.filter(a=>a.field===e)[0];return i?i.operator:null};let n=0,g=-1;const u=z.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:0,enableVirtualization:this.$props.columnVirtualization,columnsMap:this.$props.columnsMap}),c=u.columnsToRender.length>0,p=this.$props.columns.filter(e=>e.children.length===0),T=c?u.columnsToRender.map(e=>this.$props.columns[e]).filter(e=>e.children.length===0):p,y=c?u.colSpans:[],m=T.map(function(e,i){const a=F=>{this.setFilter(F.value,F.operator,e.field,F)},s=f.getFilterType(e.filter),b=(e.title||e.field)+" "+f.getAriaLabel(s,t),C=j.resolveCells(this.$props.cells,e.cells),v=o.createVNode(V.GridFilterCell,{grid:this.$props.grid,field:e.field,title:e.filterTitle,value:l(e.field,s==="text"?"":null),operator:d(e.field),operators:f.operatorMap(this.$props.filterOperators[s]||[],t),booleanValues:f.operatorMap(f.booleanFilterValues,t),filterType:s,onChange:a,render:e.filterCell||(C==null?void 0:C.filterCell)||this.$props.cellRender,"aria-label":b,size:this.$props.size},null),R=e.declarationIndex>=0?++g:--n,k={ariaLabel:e.filterable?t.toLanguageString($.filterAriaLabel,$.messages[$.filterAriaLabel]):void 0,ariaColumnIndex:e.ariaColumnIndex},x=e.locked&&(e.left!==void 0||e.right!==void 0)?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:void 0,S=c&&y[i]!==void 0?y[i]:void 0,I=o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:x,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:k.ariaColumnIndex,"aria-label":b,colSpan:S},O(v)?v:{default:()=>[v]});return e.filterable&&I||o.createVNode(h.HeaderTdElement,{key:R,role:"gridcell",columnId:h.tableKeyboardNavigationTools.getFilterColumnId(e.id),navigatable:e.navigatable,style:x,class:this.headerCellClassName(e.field,e.locked)||void 0,ariaColumnIndex:k.ariaColumnIndex,"aria-label":b,colSpan:S},null)},this);return o.createVNode("tr",{class:"k-table-row k-filter-row","aria-rowindex":this.ariaRowIndex,role:"row"},[m])}});exports.FilterRow=N;
|
package/header/FilterRow.mjs
CHANGED
|
@@ -5,17 +5,18 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { defineComponent as
|
|
9
|
-
import { getFilterType as
|
|
10
|
-
import { GridFilterCell as
|
|
11
|
-
import { provideLocalizationService as
|
|
12
|
-
import { filterAriaLabel as
|
|
13
|
-
import { HeaderTdElement as
|
|
14
|
-
import {
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
import { defineComponent as L, createVNode as c, inject as j, isVNode as O } from "vue";
|
|
9
|
+
import { getFilterType as V, getAriaLabel as w, operatorMap as R, booleanFilterValues as A } from "../filterCommon.mjs";
|
|
10
|
+
import { GridFilterCell as N } from "../cells/GridFilterCell.mjs";
|
|
11
|
+
import { provideLocalizationService as M } from "@progress/kendo-vue-intl";
|
|
12
|
+
import { filterAriaLabel as y, messages as B } from "../messages/main.mjs";
|
|
13
|
+
import { HeaderTdElement as k, tableKeyboardNavigationTools as I } from "@progress/kendo-vue-data-tools";
|
|
14
|
+
import { resolveCells as E } from "../utils/main.mjs";
|
|
15
|
+
import { getVirtualHeaderCellsToRender as H } from "../utils/virtualColumns.mjs";
|
|
16
|
+
function P(t) {
|
|
17
|
+
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !O(t);
|
|
17
18
|
}
|
|
18
|
-
const
|
|
19
|
+
const X = /* @__PURE__ */ L({
|
|
19
20
|
name: "kendoFilterRow",
|
|
20
21
|
props: {
|
|
21
22
|
grid: Object,
|
|
@@ -24,6 +25,7 @@ const Q = /* @__PURE__ */ z({
|
|
|
24
25
|
filterOperators: Object,
|
|
25
26
|
sort: [Object, Array],
|
|
26
27
|
cellRender: [String, Function, Object],
|
|
28
|
+
cells: Object,
|
|
27
29
|
isRtl: Boolean,
|
|
28
30
|
ariaRowIndex: Number,
|
|
29
31
|
size: String,
|
|
@@ -40,9 +42,9 @@ const Q = /* @__PURE__ */ z({
|
|
|
40
42
|
methods: {
|
|
41
43
|
headerCellClassName(t, r) {
|
|
42
44
|
let l = r ? " k-grid-header-sticky" : "";
|
|
43
|
-
return this.$props.sort && this.$props.sort.filter((
|
|
45
|
+
return this.$props.sort && this.$props.sort.filter((a) => a.field === t).length > 0 && (l += " k-sorted"), l;
|
|
44
46
|
},
|
|
45
|
-
setFilter(t, r, l,
|
|
47
|
+
setFilter(t, r, l, a) {
|
|
46
48
|
const o = [];
|
|
47
49
|
(t !== "" && t !== null || r !== "") && o.push({
|
|
48
50
|
field: l,
|
|
@@ -52,81 +54,81 @@ const Q = /* @__PURE__ */ z({
|
|
|
52
54
|
const p = d;
|
|
53
55
|
p && p.field !== l && o.push(p);
|
|
54
56
|
});
|
|
55
|
-
const
|
|
57
|
+
const h = o.length > 0 ? {
|
|
56
58
|
logic: "and",
|
|
57
59
|
filters: o
|
|
58
60
|
} : null;
|
|
59
|
-
this.$emit("filterchange",
|
|
61
|
+
this.$emit("filterchange", h, a);
|
|
60
62
|
}
|
|
61
63
|
},
|
|
62
64
|
setup() {
|
|
63
65
|
return {
|
|
64
|
-
kendoLocalizationService:
|
|
66
|
+
kendoLocalizationService: j("kendoLocalizationService", {})
|
|
65
67
|
};
|
|
66
68
|
},
|
|
67
69
|
render() {
|
|
68
|
-
const t =
|
|
69
|
-
const n = r.filter((
|
|
70
|
+
const t = M(this), r = this.$props.filter && this.$props.filter.filters || [], l = (e, i = null) => {
|
|
71
|
+
const n = r.filter((s) => s.field === e)[0];
|
|
70
72
|
return n ? n.value : i;
|
|
71
|
-
},
|
|
73
|
+
}, a = (e) => {
|
|
72
74
|
const i = r.filter((n) => n.field === e)[0];
|
|
73
75
|
return i ? i.operator : null;
|
|
74
76
|
};
|
|
75
|
-
let o = 0,
|
|
76
|
-
const f =
|
|
77
|
+
let o = 0, h = -1;
|
|
78
|
+
const f = H({
|
|
77
79
|
cellsToRender: this.$props.cellsToRender || [],
|
|
78
80
|
columns: this.$props.columns,
|
|
79
81
|
rowIndex: 0,
|
|
80
82
|
// FilterRow is always a single row
|
|
81
83
|
enableVirtualization: this.$props.columnVirtualization,
|
|
82
84
|
columnsMap: this.$props.columnsMap
|
|
83
|
-
}), d = f.columnsToRender.length > 0, p = this.$props.columns.filter((e) => e.children.length === 0),
|
|
84
|
-
const n = (
|
|
85
|
-
this.setFilter(
|
|
86
|
-
},
|
|
85
|
+
}), d = f.columnsToRender.length > 0, p = this.$props.columns.filter((e) => e.children.length === 0), S = d ? f.columnsToRender.map((e) => this.$props.columns[e]).filter((e) => e.children.length === 0) : p, C = d ? f.colSpans : [], T = S.map(function(e, i) {
|
|
86
|
+
const n = (m) => {
|
|
87
|
+
this.setFilter(m.value, m.operator, e.field, m);
|
|
88
|
+
}, s = V(e.filter), u = (e.title || e.field) + " " + w(s, t), g = E(this.$props.cells, e.cells), b = c(N, {
|
|
87
89
|
grid: this.$props.grid,
|
|
88
90
|
field: e.field,
|
|
89
91
|
title: e.filterTitle,
|
|
90
|
-
value: l(e.field,
|
|
91
|
-
operator:
|
|
92
|
-
operators: R(this.$props.filterOperators[
|
|
93
|
-
booleanValues: R(
|
|
94
|
-
filterType:
|
|
92
|
+
value: l(e.field, s === "text" ? "" : null),
|
|
93
|
+
operator: a(e.field),
|
|
94
|
+
operators: R(this.$props.filterOperators[s] || [], t),
|
|
95
|
+
booleanValues: R(A, t),
|
|
96
|
+
filterType: s,
|
|
95
97
|
onChange: n,
|
|
96
|
-
render: e.filterCell || this.$props.cellRender,
|
|
97
|
-
"aria-label":
|
|
98
|
+
render: e.filterCell || (g == null ? void 0 : g.filterCell) || this.$props.cellRender,
|
|
99
|
+
"aria-label": u,
|
|
98
100
|
size: this.$props.size
|
|
99
|
-
}, null),
|
|
100
|
-
ariaLabel: e.filterable ? t.toLanguageString(
|
|
101
|
+
}, null), F = e.declarationIndex >= 0 ? ++h : --o, $ = {
|
|
102
|
+
ariaLabel: e.filterable ? t.toLanguageString(y, B[y]) : void 0,
|
|
101
103
|
ariaColumnIndex: e.ariaColumnIndex
|
|
102
|
-
},
|
|
104
|
+
}, v = e.locked && (e.left !== void 0 || e.right !== void 0) ? this.$props.isRtl ? {
|
|
103
105
|
left: e.right + "px",
|
|
104
106
|
right: e.left + "px"
|
|
105
107
|
} : {
|
|
106
108
|
left: e.left + "px",
|
|
107
109
|
right: e.right + "px"
|
|
108
|
-
} : void 0, x = d &&
|
|
109
|
-
key:
|
|
110
|
+
} : void 0, x = d && C[i] !== void 0 ? C[i] : void 0, z = c(k, {
|
|
111
|
+
key: F,
|
|
110
112
|
role: "gridcell",
|
|
111
|
-
columnId:
|
|
113
|
+
columnId: I.getFilterColumnId(e.id),
|
|
112
114
|
navigatable: e.navigatable,
|
|
113
|
-
style:
|
|
115
|
+
style: v,
|
|
114
116
|
class: this.headerCellClassName(e.field, e.locked) || void 0,
|
|
115
|
-
ariaColumnIndex:
|
|
116
|
-
"aria-label":
|
|
117
|
+
ariaColumnIndex: $.ariaColumnIndex,
|
|
118
|
+
"aria-label": u,
|
|
117
119
|
colSpan: x
|
|
118
|
-
},
|
|
119
|
-
default: () => [
|
|
120
|
+
}, P(b) ? b : {
|
|
121
|
+
default: () => [b]
|
|
120
122
|
});
|
|
121
|
-
return e.filterable &&
|
|
122
|
-
key:
|
|
123
|
+
return e.filterable && z || c(k, {
|
|
124
|
+
key: F,
|
|
123
125
|
role: "gridcell",
|
|
124
|
-
columnId:
|
|
126
|
+
columnId: I.getFilterColumnId(e.id),
|
|
125
127
|
navigatable: e.navigatable,
|
|
126
|
-
style:
|
|
128
|
+
style: v,
|
|
127
129
|
class: this.headerCellClassName(e.field, e.locked) || void 0,
|
|
128
|
-
ariaColumnIndex:
|
|
129
|
-
"aria-label":
|
|
130
|
+
ariaColumnIndex: $.ariaColumnIndex,
|
|
131
|
+
"aria-label": u,
|
|
130
132
|
colSpan: x
|
|
131
133
|
}, null);
|
|
132
134
|
}, this);
|
|
@@ -134,9 +136,9 @@ const Q = /* @__PURE__ */ z({
|
|
|
134
136
|
class: "k-table-row k-filter-row",
|
|
135
137
|
"aria-rowindex": this.ariaRowIndex,
|
|
136
138
|
role: "row"
|
|
137
|
-
}, [
|
|
139
|
+
}, [T]);
|
|
138
140
|
}
|
|
139
141
|
});
|
|
140
142
|
export {
|
|
141
|
-
|
|
143
|
+
X as FilterRow
|
|
142
144
|
};
|
package/header/HeaderRow.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ import { ExtendedColumnProps } from '../interfaces/ExtendedColumnProps';
|
|
|
12
12
|
import { GridColumnProps } from '../interfaces/GridColumnProps';
|
|
13
13
|
import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
|
|
14
14
|
import { SVGIcon } from '@progress/kendo-vue-common';
|
|
15
|
+
import { GridCellsSettings } from '../interfaces/GridCellsSettings';
|
|
15
16
|
import { GridFilterOperators } from '../interfaces/GridFilterOperators';
|
|
16
17
|
import { PopupAnimation } from '@progress/kendo-vue-popup';
|
|
17
18
|
import { PropType } from 'vue';
|
|
@@ -37,6 +38,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
|
|
|
37
38
|
columnsMap: number[][];
|
|
38
39
|
onSelectionchange?: any;
|
|
39
40
|
cellRender?: ((h: any, defaultRendering: any | null, props: GridHeaderCellProps) => any) | string | null;
|
|
41
|
+
cells?: GridCellsSettings;
|
|
40
42
|
columnMenu?: any;
|
|
41
43
|
columnMenuAnimate?: boolean | PopupAnimation;
|
|
42
44
|
columnMenuIcon?: SVGIcon;
|
|
@@ -53,6 +55,7 @@ export interface HeaderRowProps extends ColumnDraggableProps {
|
|
|
53
55
|
declare const HeaderRow: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
54
56
|
grid: PropType<any>;
|
|
55
57
|
cellRender: PropType<string | ((h: any, defaultRendering: any | null, props: GridHeaderCellProps) => any)>;
|
|
58
|
+
cells: PropType<GridCellsSettings>;
|
|
56
59
|
groupable: PropType<any>;
|
|
57
60
|
reorderable: PropType<boolean>;
|
|
58
61
|
sortable: PropType<GridSortSettings>;
|
|
@@ -105,6 +108,7 @@ declare const HeaderRow: import('vue').DefineComponent<import('vue').ExtractProp
|
|
|
105
108
|
}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
106
109
|
grid: PropType<any>;
|
|
107
110
|
cellRender: PropType<string | ((h: any, defaultRendering: any | null, props: GridHeaderCellProps) => any)>;
|
|
111
|
+
cells: PropType<GridCellsSettings>;
|
|
108
112
|
groupable: PropType<any>;
|
|
109
113
|
reorderable: PropType<boolean>;
|
|
110
114
|
sortable: PropType<GridSortSettings>;
|
package/header/HeaderRow.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),E=require("../interfaces/GridSortSettings.js"),U=require("../drag/ColumnResizer.js"),W=require("../drag/ColumnDraggable.js"),J=require("./GridHeaderCell.js"),Q=require("../columnMenu/ColumnMenu.js"),c=require("@progress/kendo-vue-common"),X=require("@progress/kendo-vue-data-tools"),Y=require("../utils/main.js"),s=require("../messages/main.js"),Z=require("@progress/kendo-vue-intl"),D=require("@progress/kendo-svg-icons"),ee=require("../utils/virtualColumns.js");function S(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!n.isVNode(t)}const M={none:"none",asc:"ascending",desc:"descending"},te={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},le=n.defineComponent({name:"KendoHeaderRow",props:{grid:Object,cellRender:[String,Function,Object],cells:Object,groupable:[Boolean,Object],reorderable:Boolean,sortable:[Boolean,Object],sort:{type:Array},filter:Object,filterable:Boolean,filterOperators:Object,filterChange:Function,filterRow:Object,columns:Array,cellsToRender:Array,columnVirtualization:Boolean,columnsMap:Array,columnResize:Object,columnMenu:[Boolean,String,Function,Object],columnMenuAnimate:{type:[Boolean,Object],default:function(){return!0}},columnMenuIcon:Object,isRtl:Boolean,isColCountDefined:Boolean,headerSelectionValue:[Boolean,Array],columnsInitial:Array,onSortChange:Function,onFilterChange:Function,onSelectionchange:Function,onPressHandler:Function,onDragHandler:Function,onReleaseHandler:Function},inject:{onNavFocus:{default:c.noop},kendoLocalizationService:{default:null}},data(){return{columnMenuOpened:{}}},created(){this.serviceIndex=0,this.index=-1,this._element=null,this.cellClick=this.cellClick.bind(this)},methods:{pressHandler(t,l){this.$emit("pressHandler",t,l)},dragHandler(t,l){this.$emit("dragHandler",t,l)},releaseHandler(t){this.$emit("releaseHandler",t)},selectionChangeHandler(t){this.$emit("selectionchange",t)},cellClick(t,l){if(t.preventDefault(),!c.hasListener.call(this,"sortChange"))return;const{allowUnsort:m,mode:g}=E.normalize(this.$props.sortable||!1,l.sortable||!1),a=(this.$props.sort||[]).filter(o=>o.field===l.field)[0],d=te[m][a&&a.dir||""],u=g==="single"?[]:(this.$props.sort||[]).filter(o=>o.field!==l.field);d!==""&&l.field&&u.push({field:l.field,dir:d}),this.sortChangeHandler(u,{event:t,field:l.field})},sortChangeHandler(t,l){this.$emit("sortChange",t,l)},filterChangeHandler(t,l){this.$emit("filterChange",t,l)},cellClass(t,l,m){const g=l?" "+l:"";let a="k-header"+(m?" k-grid-header-sticky":"")+g;return this.$props.sort&&this.$props.sort.filter(d=>d.field===t).length>0&&(a+=" k-sorted"),a},cellKeyDown(t,l){t.defaultPrevented||(t.keyCode===c.Keys.enter&&this.cellClick(t,l),t.altKey&&t.keyCode===c.Keys.down&&l.field&&(t.preventDefault(),this.columnMenuOpened={[l.field]:!0}))},getTemplate(t){return c.templateRendering.call(this.$props.grid,t,c.getListeners.call(this.$props.grid))},columnMenuClose(){this.onNavFocus({}),this.columnMenuOpened={}}},computed:{element(){return this._element},theadClasses(){return{"k-table-thead":!0}}},render(){const t=Z.provideLocalizationService(this),l=t.toLanguageString(s.sortableColumnAriaLabel,s.messages[s.sortableColumnAriaLabel]),m=t.toLanguageString(s.sortableColumnAscendingAriaLabel,s.messages[s.sortableColumnAscendingAriaLabel]),g=t.toLanguageString(s.sortableColumnDescendingAriaLabel,s.messages[s.sortableColumnDescendingAriaLabel]);this.serviceIndex=0,this.index=-1;const a=this.$props.columnVirtualization,d=function(u,o){const i=ee.getVirtualHeaderCellsToRender({cellsToRender:this.$props.cellsToRender||[],columns:this.$props.columns,rowIndex:o,enableVirtualization:a,columnsMap:this.$props.columnsMap}),V=a;let k=V&&i.columnsToRender?i.columnsToRender:u;const z=V?i.colSpans:[];return!k||k.length===0?[]:k.map(function(v,w){var I,A,L;const e=this.$props.columns[v],b=this.$props.sortable&&e.sortable,R=this.$props.sort?this.$props.sort.findIndex(r=>r.field===e.field):-1,H=R>=0&&this.$props.sort[R].dir||"none",h=function(r){if(!this.$props.sort)return null;const $=r>=0?this.$props.sort[r].dir:"";return r>=0&&[n.createVNode("span",{key:1,class:"k-sort-icon"},[n.createVNode(c.Icon,{name:"sort-"+$+"-small",icon:$==="asc"?D.sortAscSmallIcon:D.sortDescSmallIcon},null)]),this.$props.sort.length>1&&n.createVNode("span",{key:2,class:"k-sort-icon"},[n.createVNode("span",{class:"k-sort-order"},[r+1])])]}.call(this,R),p=e.columnMenu||e.columnMenu===!1?e.columnMenu:this.$props.columnMenu,N=e.menuIcon||this.$props.columnMenuIcon,j=(e.kFirst?"k-first ":"")+this.cellClass(e.field,e.headerClassName,e.locked)+(p?" k-filterable":""),T=!p||typeof p=="boolean"?!!p:this.getTemplate(p),F=i.skipOffset?{borderLeftWidth:"1px"}:void 0,q=e.locked&&(e.left!==void 0||e.right!==void 0)?this.$props.isRtl?{left:e.right+"px",right:e.left+"px"}:{left:e.left+"px",right:e.right+"px"}:F,x=M[H]==="none"?l:M[H]==="ascending"?m:g;let f=e.isAccessible?{ariaSort:M[H],ariaLabel:x,role:"columnheader",ariaColumnIndex:this.$props.isColCountDefined?this.$props.columnsInitial.findIndex(r=>r.field===e.field)+1:void 0,ariaSelected:!1,ariaHaspopup:p?"menu":this.$props.filterable&&e.filterable?"dialog":void 0}:{role:"columnheader"};const B=e.declarationIndex>=0?++this.index:--this.serviceIndex,K=e.columnMenuOpened!==void 0?e.columnMenuOpened:this.columnMenuOpened[e.field],P=(I=z[w])!=null?I:e.headerColSpan,y=Y.resolveCells(this.$props.cells,e.cells),O={ariaSort:b?f.ariaSort:void 0,ariaLabel:b?f.ariaLabel:void 0,role:f.role,ariaColumnIndex:f.ariaColumnIndex,ariaSelected:f.ariaSelected,ariaHaspopup:f.ariaHaspopup,key:B,colSpan:P,rowSpan:e.rowSpan,class:j,style:q,columnId:e.id,navigatable:e.navigatable,onKeydown:r=>this.cellKeyDown(r,e)},C=[e.children.length===0&&p&&n.createVNode(Q.ColumnMenu,{key:0,column:{field:e.field,filter:e.filter},opened:K,animate:this.$props.columnMenuAnimate,sortable:b,sort:this.$props.sort,onClose:this.columnMenuClose,onSortchange:this.sortChangeHandler,filter:this.$props.filter,filterable:this.$props.filterable&&e.filterable,filterOperators:this.$props.filterOperators,onFilterchange:this.filterChangeHandler,render:T,columnMenuIcon:N},null),e.defaultHeaderCell&&n.createVNode("span",{class:"k-cell-inner"},[n.createVNode(e.defaultHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:r=>this.cellClick(r,e),onSelectionchange:this.selectionChangeHandler,selectionValue:(A=e.headerSelectionValue)!=null?A:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(h)?h:{default:()=>[h]})])||n.createVNode("span",{class:"k-cell-inner"},[n.createVNode(J.GridHeaderCell,{key:1,field:e.field,sortable:b,onHeadercellclick:r=>this.cellClick(r,e),selectionValue:(L=e.headerSelectionValue)!=null?L:this.$props.headerSelectionValue,title:e.title,render:(e.headerCell||this.$props.cellRender)&&this.getTemplate(e.headerCell||this.$props.cellRender)},S(h)?h:{default:()=>[h]})]),this.$props.columnResize&&this.$props.columnResize.resizable&&e.resizable&&n.createVNode(U.ColumnResizer,{key:2,onResize:(r,$,G)=>this.$props.columnResize&&this.$props.columnResize.dragHandler(r,e,$,G)},null)],_=n.createVNode(X.HeaderThElement,O,S(C)?C:{default:()=>[C]});return c.getTemplate.call(this,{h:n.h,template:y==null?void 0:y.headerCell,defaultRendering:_,additionalProps:{field:e.field,thProps:O},defaultSlots:C,swapDefaultSlots:!0})},this)};return n.createVNode("thead",{role:"rowgroup",class:this.theadClasses,"data-keyboardnavheader":!0},[this.$props.columnsMap.map(function(u,o){let i;return(this.$props.groupable||this.$props.reorderable)&&n.createVNode(W.ColumnDraggable,{key:o,onPressHandler:this.pressHandler,onDragHandler:this.dragHandler,onReleaseHandler:this.releaseHandler},S(i=d.call(this,u,o))?i:{default:()=>[i]})||n.createVNode("tr",{class:"k-table-row",role:"row","aria-rowindex":o+1},[d.call(this,u,o)])},this),this.$props.filterRow])}});exports.HeaderRow=le;
|