@progress/kendo-vue-grid
Version:
1,280 lines • 51 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as ut, createVNode as n, h as Pe, createTextVNode as Me, ref as v, inject as ct, markRaw as E } from "vue";
import { isObject as V, cloneArray as gt, canUseDOM as X, WatermarkOverlay as ft, getter as Y, getTemplate as Ae, setRef as G, hasListener as P, getRef as $, RowHeightService as mt, setScrollbarWidth as Ct, kendoThemeMaps as Ve, uGrid as bt, isRtl as Ne, validatePackage as $t, shouldShowValidationUI as Rt, getLicenseMessage as xt, guid as Oe, getNestedValue as We } from "@progress/kendo-vue-common";
import { tableKeyboardNavigationTools as z, combineFilters as vt, Pager as It, normalize as wt, TableKeyboardNavigationProvider as Ke, updateLeft as St, updateRight as yt, groupExpandReducer as Ht, detailExpandReducer as kt, getDetailExpandableOptions as _t, getGroupExpandableOptions as Et } from "@progress/kendo-vue-data-tools";
import { Loader as zt } from "@progress/kendo-vue-indicators";
import { GridNav as Ue } from "./GridNav.mjs";
import { GridSelectionCell as Be } from "./cells/GridSelectionCell.mjs";
import { GridHierarchyCell as Z } from "./cells/GridHierarchyCell.mjs";
import { GridDetailHierarchyCell as Tt } from "./cells/GridDetailHierarchyCell.mjs";
import { GridDetailCell as Dt } from "./cells/GridDetailCell.mjs";
import { GridEditCell as Gt } from "./cells/GridEditCell.mjs";
import { Header as Ft } from "./header/Header.mjs";
import { HeaderRow as Lt } from "./header/HeaderRow.mjs";
import { FilterRow as Pt } from "./header/FilterRow.mjs";
import { GroupPanel as Mt } from "./header/GroupPanel.mjs";
import { Footer as At } from "./footer/Footer.mjs";
import { FooterRow as Vt } from "./footer/FooterRow.mjs";
import { operators as je } from "./filterCommon.mjs";
import { VirtualScroll as Nt } from "./VirtualScroll.mjs";
import { ColumnResize as Ot } from "./drag/ColumnResize.mjs";
import { CommonDragLogic as Wt } from "./drag/CommonDragLogic.mjs";
import { DragClue as Kt } from "./drag/DragClue.mjs";
import { DropClue as Ut } from "./drag/DropClue.mjs";
import { applyExpandedState as Bt, getColSpan as jt, autoGenerateColumns as qt, mapColumns as Jt, getFlatColumnsState as qe, getRowSpanOptions as Je, groupedFirstItemValue as Qe, calcRowHeight as Qt, flatData as Xt, readColumns as Yt } from "./utils/main.mjs";
import { GridCell as Zt } from "./cells/GridCell.mjs";
import { GridGroupCell as ee } from "./cells/GridGroupCell.mjs";
import { GridRow as ei } from "./rows/GridRow.mjs";
import { gridProps as ti } from "./common.mjs";
import { GridHeaderSelectionCell as Xe } from "./header/GridHeaderSelectionCell.mjs";
import { GridNoRecords as Ye } from "./components/noRecords/GridNoRecords.mjs";
import { GridNoRecordsContainer as Ze } from "./components/noRecords/GridNoRecordsContainer.mjs";
import { packageMetadata as te } from "./package-metadata.mjs";
import { pagerMessagesMap as et } from "./messages/messagesMap.mjs";
import { process as ii } from "@progress/kendo-data-query";
import { KendoKey as si } from "./key.mjs";
import { getVirtualCellsToRender as ri } from "./utils/virtualColumns.mjs";
const Oi = /* @__PURE__ */ ut({
name: "KendoGrid",
inheritAttrs: !1,
props: {
...ti,
toolbar: {
type: Object
},
noRecords: {
type: Object
}
},
data() {
return {
isRtl: !1,
context: void 0,
navigation: void 0,
showLicenseWatermark: !1,
licenseMessage: void 0,
notHiddenColumns: []
};
},
watch: {
rowHeight: function(e, t) {
var i;
this.onRowHeightChanged(e, t), (i = this.vsRef) == null || i.reset();
},
scrollable: function() {
var e;
(e = this.vsRef) == null || e.reset();
},
filter: function() {
var e;
(e = this.vsRef) == null || e.reset();
},
group: function() {
var e;
(e = this.vsRef) == null || e.reset();
},
currentGroupable: function() {
var e;
(e = this.vsRef) == null || e.reset();
},
sort: function() {
var e;
(e = this.vsRef) == null || e.reset();
}
},
created() {
$t(te), this.showLicenseWatermark = Rt(te), this.licenseMessage = xt(te), this.initialHeight = null, this._columns = [], this.vsRef = new Nt(), this.dragLogic = new Wt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Ot(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Oe(), this._gridRoleElementId = Oe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
},
mounted() {
var t, i;
this.setRefs();
const e = Ne(this._element);
this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = X && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
},
updated() {
var t;
this.setRefs();
const e = Ne(this._element);
this.isRtl = e, this._prevTotal = this.$props.total, this.vsRef.tableTransform && this.vsRef.table && (this.vsRef.table.style.transform = this.vsRef.tableTransform, this.vsRef.tableTransform = ""), this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (t = this.vsRef) == null || t.update());
},
unmounted() {
this.gridUnmounted();
},
computed: {
gridId() {
return this.$props.id + "-role-element-id";
},
idPrefix() {
return this.$props.navigatable ? this.gridId : "";
},
groupExpandable() {
return Et(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
},
hierarchClass() {
return bt.hierarchyCell({});
},
computedRowSpannable() {
return Je(this.$props.rowSpannable);
},
detailExpandable() {
return _t(!!this.$props.detail);
},
nonscrollableWrapperClass() {
const {
size: e
} = this.$props, t = this.$attrs.class;
return {
"k-grid": !0,
"k-grid-md": !e,
[`k-grid-${Ve.sizeMap[e] || e}`]: e,
[t]: !!t
};
},
scrollableWrapperClass() {
const {
scrollable: e
} = this.$props;
return {
...this.nonscrollableWrapperClass,
"k-grid-virtual": e === "virtual"
};
},
gridTableClass() {
const {
size: e
} = this.$props;
return {
"k-table": !0,
"k-grid-table": !0,
"k-grid-md": !e,
[`k-table-${Ve.sizeMap[e] || e}`]: e
};
},
getCorrectHeight() {
return this.$props.scrollable === "virtual" ? this.initialHeight || "450px" : null;
},
currentGroupable() {
var t;
const e = (t = this.gridContext.group) == null ? void 0 : t.value;
return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
},
computedCollapsed() {
let e = [];
if (this.$props.group)
for (let t = 0; t < this.$props.group.length; t++)
this.$props.collapsedGroups[t] ? e.push(this.$props.collapsedGroups[t]) : e.push([]);
return e;
},
// Calculates the value of the ariaRowcount attribute.
getAriaRowCount() {
const e = this.$props.dataItems, t = this.$props.total || (e == null ? void 0 : e.total) || (e == null ? void 0 : e.length) || 0;
return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this._columns.some((i) => !!i.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this._columns.some((i) => !!i.footerCell) ? 1 : 0);
},
// Calculates the value of the ariaColcount attribute.
// Based on the result of this method the ariaColIndex is rendered or not in the HeaderRow TH elements
getAriaColCount() {
const e = this.$props.columns, t = this.$props.columnVirtualization, i = (e == null ? void 0 : e.filter((s) => s.hidden !== void 0).length) !== 0;
if (t || i)
return (e == null ? void 0 : e.length) !== 0 ? e == null ? void 0 : e.length : -1;
},
isVirtualScroll() {
return this.$props.scrollable === "virtual" || this.$props.scrollable === void 0 || !1;
}
},
methods: {
readColumnElements() {
return Yt(this.$props.columns, this.currentColumnsState, {
prevId: 0,
idPrefix: this.idPrefix
});
},
getResolvedFlatColumnsState() {
const e = [], t = (i, s) => i == null ? void 0 : i.forEach((r) => {
const l = r.hidden || s;
e.push({
...r,
hidden: l
}), t(r.children, l);
});
return t(this.currentColumnsState, !1), e;
},
filterColumns(e) {
const t = this.getResolvedFlatColumnsState();
return [e.filter((i) => {
var s;
return !i.hidden && !((s = t.find((r) => r.id === i.id)) != null && s.hidden);
}), e.filter((i) => {
var s;
return i.hidden || ((s = t.find((r) => r.id === i.id)) == null ? void 0 : s.hidden);
})];
},
getFlatData(e, t, i, s, r, l, d) {
const h = [], c = Xt(h, e, t, {
index: i
}, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
return {
flattedData: h,
resolvedGroupsCount: c
};
},
getColumnsEssentialProps(e) {
return e && JSON.stringify(e.map((t) => ({
id: t.id,
field: t.field,
title: t.title,
children: t.children
})));
},
calculateMedia() {
const e = this.filterHiddenColumns(this.$props.columns || []);
this.getColumnsEssentialProps(this.notHiddenColumns) !== this.getColumnsEssentialProps(e) && this.$forceUpdate();
},
filterHiddenColumns(e) {
if (!e || e.length === 0)
return e;
const t = (i) => ({
...i,
children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
});
return [...e].filter((i) => !i.hidden).filter((i) => X && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
},
/**
* A getter of the current columns. Gets the current column width or current columns,
* or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
* Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref`
* callback. The following example demonstrates how to reorder the columns by dragging their handlers
* and check the properties afterwards. You can check the result in the browser console.
*/
getColumns() {
const e = this._columns.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((s, r) => s.declarationIndex - r.declarationIndex), i.map((s) => {
const {
declarationIndex: r,
parentIndex: l,
depth: d,
colSpan: h,
rowSpan: c,
index: f,
kFirst: u,
children: m,
...R
} = s;
return m.length ? {
children: t(m),
...R
} : R;
}));
return t(e);
},
setRefs() {
let e = "$el";
const t = $(this, "gridNav");
t && (this._element = t[e]);
const i = $(this, "groupPanelDiv");
if (i) {
let l = i[e] || null;
this.dragLogic.refGroupPanelDiv(l);
}
const s = $(this, "dropElementClue"), r = $(this, "dragElementClue");
this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), Ct();
},
gridUnmounted() {
clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this._columns = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
},
isAllData() {
const {
dataItems: e,
total: t
} = this.$props;
return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
},
resetVirtualSkip() {
this.isVirtualScroll && this._virtualSkipRef && (this._virtualSkipRef = 0);
},
virtualPageChange(e, t) {
var i;
this.$props.pageable || (i = this.$props.group) != null && i.length ? (this._virtualSkipRef = e.skip, this.$forceUpdate()) : this.pageChangeHandler(e, t);
},
initializeVirtualization() {
const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new mt(this._virtualTotal, t)));
},
setContainerHeight() {
const e = $(this, "scrollContainer");
this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
},
setMinRowHeight() {
if (!this._minRowHeightRef && !this.$props.rowHeight) {
const t = Qt($(this, "tableBody"));
t && (this._minRowHeightRef = t, this.$forceUpdate());
}
},
onRowHeightChanged(e, t) {
this.setRefs();
},
scrollHandler(e) {
clearTimeout(this.forceUpdateTimeout);
const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop;
this.$props.columnVirtualization && (!this.isVirtualScroll || i === this.wrapperScrollTopRef) && (this.forceUpdateTimeout = setTimeout(() => {
this.$forceUpdate();
}, 0)), this.scrollLeftRef = t, this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.vsRef && i !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e), this.$emit("scroll", e), this.wrapperScrollTopRef = i;
},
rowClick(e, t) {
e.target.type !== "checkbox" && this.$emit("rowclick", {
dataItem: t.dataItem,
...this.getArguments(e)
});
},
rowDoubleClick(e, t) {
e.target.type !== "checkbox" && this.$emit("rowdblclick", {
dataItem: t.dataItem,
...this.getArguments(e)
});
},
loopGroupedItems(e, t, i = 0, s = null) {
return e.forEach((r) => {
!s && t(r, i) && (s = r), r.items && r.items.length && !s && (s = this.loopGroupedItems(r.items, t, i + 1, s));
}), s;
},
updateGroupCollapsed(e) {
let t = this.computedCollapsed, i = t[e.level];
const s = this.$props.uniqueField, r = function(h, c) {
return h.value === e.dataItem.value && c === e.level;
}, l = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, r, 0, null) : e.dataItem, d = Qe(l || e.dataItem, s);
if (e.value) {
if (i && i.length) {
const h = i.indexOf(d);
h > -1 && i.splice(h, 1);
}
} else
i ? i.includes(d) || i.push(d) : i = [d];
return t;
},
itemChange(e) {
var s;
const t = P.call(this, "itemchange"), i = (s = this.gridContext.group) == null ? void 0 : s.value;
if (e.field === this.$props.expandField || (i || this.$props.detail) && e.field === void 0) {
P.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
...this.getArguments(e.event),
collapsedGroups: this.updateGroupCollapsed(e),
dataItem: e.dataItem,
value: e.value
});
return;
}
t && this.$emit("itemchange", {
...this.getArguments(e.event),
dataItem: e.dataItem,
field: e.field,
value: e.value
});
},
cellClickHandler(e) {
this.$emit("cellclick", {
dataItem: e.dataItem,
field: e.field
});
},
cellKeydownHandler(e) {
this.$emit("cellkeydown", e);
},
editHandler(e) {
this.$emit("edit", {
dataItem: e
});
},
removeHandler(e) {
this.$emit("remove", {
dataItem: e
});
},
saveHandler(e) {
this.$emit("save", {
dataItem: e
});
},
cancelHandler(e) {
this.$emit("cancel", {
dataItem: e
});
},
selectionChangeHandler(e) {
const {
event: t,
dataItem: i,
dataIndex: s,
columnIndex: r
} = e;
this.$emit("selectionchange", {
...this.getArguments(t.event),
dataItem: i,
startColIndex: r,
endColIndex: r,
startRowIndex: s,
endRowIndex: s,
dataItems: this.getLeafDataItems(),
altKey: !1,
ctrlKey: !1,
shiftKey: !1,
metaKey: !1,
isDrag: !1,
componentId: this._gridId,
selectedField: this.$props.selectedField || ""
});
},
onHeaderSelectionChangeHandler(e) {
this.$emit("headerselectionchange", {
field: e.field,
event: e.event,
target: this
});
},
pageChangeHandler(e, t) {
this.raiseDataEvent("pagechange", {
page: e,
event: t
}, {
skip: e.skip,
take: e.take
}, t);
},
sortChangeHandler(e, t) {
this.raiseDataEvent("sortchange", {
sort: e
}, {
sort: e
}, t);
},
filterChangeHandler(e, t) {
this.raiseDataEvent("filterchange", {
filter: e
}, {
filter: e,
skip: 0
}, t);
},
groupChangeHandler(e, t) {
this.raiseDataEvent("groupchange", {
group: e
}, {
group: e,
skip: 0
}, t);
},
handleDetailExpandAction(e, t) {
var i;
if (this.detailExpandable.enabled) {
const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = kt(s != null ? s : {}, e);
this.gridContext.detailexpandchange({
...this.getArguments(t),
detailExpand: r
});
}
},
handleGroupExpandAction(e, t) {
var i;
if (this.groupExpandable.enabled) {
const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = Ht(s != null ? s : [], e, this.groupExpandable);
this.$props.expandField || this.gridContext.groupexpandchange({
...this.getArguments(t),
groupExpand: r
});
}
},
raiseDataEvent(e, t, i, s) {
if (this.resetVirtualSkip(), this.$props.autoProcessData)
this.gridContext[e]({
...this.getArguments(s),
...t
});
else if (P.call(this, e))
this.$emit(e, {
...this.getArguments(s),
...t
});
else if (P.call(this, "datastatechange")) {
const r = {
...this.getDataState(),
...i
};
this.gridContext.datastatechange({
...this.getArguments(s),
data: r,
dataState: r
});
}
},
columnReorder(e, t, i) {
const s = this._columns[e], r = qe(this.currentColumnsState), l = s.depth, d = (u) => {
do
u++;
while (u < this._columns.length && this._columns[u].depth > l);
return u;
}, h = this._columns.splice(e, d(e) - e);
this._columns.splice(e < t ? d(t - h.length) : t, 0, ...h), this._columns.filter((u) => u.declarationIndex >= 0).forEach((u, m) => {
u.orderIndex = m;
const R = r.find((x) => x.id === u.id);
R && (R.orderIndex = m);
});
const c = this._columns[e].locked && this._columns[t].locked;
St(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), yt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
const f = this.getColumns();
this.$emit("columnreorder", {
target: this,
columns: f,
event: i,
prev: e,
next: t
}), this.gridContext.columnsstatechange({
columnsState: this.currentColumnsState
});
},
groupReorder(e, t, i) {
var r;
const s = (r = this.gridContext.group) == null ? void 0 : r.value;
s !== void 0 && (s.splice(t, 0, ...s.splice(e, 1)), this.groupChangeHandler(s, i));
},
columnToGroup(e, t, i) {
var l;
const s = this._columns[e].field;
if (!s)
return;
const r = (((l = this.gridContext.group) == null ? void 0 : l.value) || []).slice();
r.splice(t, 0, {
field: s
}), this.groupChangeHandler(r, i);
},
resetTableWidth() {
var s;
let e = 0;
if (!this.columnResize.colGroupMain)
return;
const t = (s = this.columnResize.colGroupMain) == null ? void 0 : s.children;
for (let r = 0; r < t.length; r++) {
const l = t[r].width;
if (!l)
return;
e += parseFloat(l.toString());
}
e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e);
const i = $(this, "table");
i && e && (i.style.width = e + "px");
},
onResize(e, t, i, s, r, l, d) {
this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
columns: this.getColumns(),
index: e,
targetColumnId: d,
event: s,
newWidth: t,
oldWidth: i,
end: r,
target: this
}), r && this.gridContext.columnsstatechange({
columnsState: l
});
},
initColumnsState(e, t) {
const i = (s) => {
var l;
const r = t.find((d) => d.id === s.id);
if (r) {
const d = {
...r
};
return d.children = (l = s.children) == null ? void 0 : l.map(i), d;
}
return s;
};
this.currentColumnsState = e.filter((s) => s.parentIndex === -1).map(i);
},
configureColumns(e, t) {
e.filter((l) => l.columnType === "checkbox").forEach((l) => {
l.width = l.width || "50px", l.defaultCell = E(Be), l.defaultHeaderCell = E(Xe), l._type = "edit";
}), this.$props.selectedField && this._columns.filter((l) => l.field === this.$props.selectedField).forEach((l) => {
l.width = l.width || "50px", l.internalCell = E(Be), l.internalHeaderCell = E(Xe);
});
const i = qe(this.currentColumnsState);
this.initColumnsState(e, i);
const s = {
id: "",
resizable: !0,
width: "32px",
title: " ",
declarationIndex: -1,
orderIndex: -1,
children: [],
parentIndex: -1,
depth: 0,
colSpan: 0,
headerColSpan: 0,
rowSpan: 0,
left: 0,
right: 0,
index: 0,
rightBorder: !1,
ariaColumnIndex: 0,
isAccessible: !0
};
let r = 0;
if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
const l = {
...s,
_type: "expand",
id: z.generateNavigatableId(`${r++}`, "expand", "column"),
defaultCell: E(Z),
internalCell: E(Z),
field: this.detailExpandable.column,
headerClassName: this.hierarchClass
};
e.unshift(l), this.currentColumnsState.unshift(i.find((d) => d.id === l.id) || l);
}
this.$props.expandField && P.call(this, "expandchange") && this.$props.detail && (e.unshift({
...s,
internalCell: E(Z),
field: this.$props.expandField,
headerClassName: "k-hierarchy-cell k-header",
id: z.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
...this.expandColumn
}), r++);
for (let l = 0; l < t; l++) {
const d = {
...s,
isAccessible: !1,
defaultCell: E(ee),
internalCell: E(ee),
id: z.generateNavigatableId(`${r++}`, "group", "column"),
field: "value",
locked: this.$props.lockGroups
};
e.unshift(d), this.currentColumnsState.unshift(i.find((h) => h.id === d.id) || d);
}
e.slice(r).forEach((l) => {
l.parentIndex >= 0 && (l.parentIndex += r), l.rowSpannable = l.rowSpannable !== void 0 ? Je(l.rowSpannable) : this.computedRowSpannable;
});
},
initColumns(e, t) {
var l;
this._columns = this.readColumnElements();
const i = (l = this.gridContext.group) == null ? void 0 : l.value;
this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = qt(e, i, {
column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
}, {
prevId: 0,
idPrefix: this.idPrefix
})), this.configureColumns(this._columns, t);
const [s, r] = this.filterColumns(this._columns);
this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Jt(this._columns, !0);
},
resolveTitle(e) {
const t = this.findColumnByField(e), i = t && (t.title || t.field);
return i === void 0 ? e : i;
},
findColumnByField(e) {
let t;
return this.$props.columns.forEach((i) => {
const s = this.searchColumn(i, e);
s && (t = s);
}), t;
},
searchColumn(e, t) {
if (e.field === t)
return e;
if (e.children) {
let i, s = null;
for (i = 0; s == null && i < e.children.length; i++)
s = this.searchColumn(e.children[i], t);
return s;
}
return null;
},
getDataState() {
var l, d, h, c, f;
const e = (l = this.gridContext.sort) == null ? void 0 : l.value, t = (d = this.gridContext.filter) == null ? void 0 : d.value, i = (h = this.gridContext.skip) == null ? void 0 : h.value, s = (c = this.gridContext.take) == null ? void 0 : c.value, r = (f = this.gridContext.group) == null ? void 0 : f.value;
return {
filter: t,
sort: e,
skip: i,
take: s !== void 0 ? s : this.$props.pageSize,
group: r
};
},
getArguments(e) {
return {
event: e,
target: this
};
},
getLeafDataItems() {
return this.currentData.filter((e) => e.rowType === "data").map((e) => e.dataItem);
},
totalGroupedRows(e) {
let t = 0;
return e && (t = this.addSubItems(e, t)), t;
},
addSubItems(e, t) {
return e.forEach((i) => {
t++, i.expanded !== !1 && i.items && (t = this.addSubItems(i.items, t)), this.group && this.group.length && (this.$props.groupable.footer === "always" || i.expanded !== !1 && i.items && this.$props.groupable.footer === "visible") && t++;
}), t;
},
searchChange(e) {
const t = this.$props.searchFields || this._columns.map((r) => r.field) || [], i = e.event.target.value, s = {
logic: "or",
filters: t.filter((r) => r !== void 0).map((r) => {
var l;
return typeof r == "string" ? {
field: r,
value: i,
operator: "contains"
} : {
value: i,
operator: (l = r.operator) != null ? l : "contains",
field: r.field,
ignoreCase: r.ignoreCase
};
})
};
this.raiseDataEvent("searchchange", {
search: s
}, {
skip: 0
}, e);
},
getCellsToRender(e, t) {
var l;
const i = [];
let s = null, r = 0;
if (t.forEach((d, h) => {
const c = parseFloat((d.width || "").toString()) || 10;
if (r) {
r--, s && (s.width += c);
return;
}
const f = Math.min(jt(d, e), t.length - h);
r = f - 1, s = {
width: c,
colSpan: f,
columnIndex: h
}, i.push(s);
}), this.$props.columnVirtualization) {
const d = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
return ri({
cellModels: i,
columns: t,
tableViewPortWidth: h,
scrollLeft: d
});
}
return i;
},
calcVirtualPageSize() {
const {
pageable: e,
take: t,
pageSize: i
} = this.$props;
if (!this.isVirtualScroll)
return 0;
if (!e) {
if (t)
return t;
if (i)
return i;
}
const s = this.$props.rowHeight || this._minRowHeightRef, r = this._containerHeightRef;
return r && s ? Math.ceil(r / s * 1.5) : 0;
}
},
provide() {
return {
kendo: {
dataItemKey: this.$props.dataItemKey,
searchChange: this.searchChange,
dispatchGroupExpand: this.handleGroupExpandAction,
dispatchDetailExpand: this.handleDetailExpandAction
}
};
},
setup(e) {
const t = v(null), i = v(null), s = v(null), r = v(null), l = v(null), d = v(null), h = v(null), c = v(null), f = v(null), u = v(null), m = v(!0), R = v(!1), x = ct(si, {});
return {
groupPanelDivRef: t,
dropElementClueRef: i,
dragElementClueRef: s,
headerRef: r,
footerRef: l,
gridNavRef: d,
colGroupRef: h,
scrollContainerRef: c,
scrollTableRef: f,
scrollTableBodyRef: u,
gridContext: x,
shouldUpdateLeftRightRef: m,
resizedRef: R,
currentColumnsState: e.columnsState
};
},
render() {
var fe, me, Ce, be, $e, Re, xe, ve, Ie, we, Se, ye, He, ke, _e;
const e = (fe = this.gridContext.sort) == null ? void 0 : fe.value, t = (me = this.gridContext.filter) == null ? void 0 : me.value, i = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, s = (be = this.gridContext.skip) == null ? void 0 : be.value, r = ($e = this.gridContext.take) == null ? void 0 : $e.value, l = (Re = this.gridContext.group) == null ? void 0 : Re.value, d = (xe = this.gridContext.groupExpand) == null ? void 0 : xe.value, h = (ve = this.gridContext.detailExpand) == null ? void 0 : ve.value, c = !!(l != null && l.length);
let f;
this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value;
const u = this.$props.autoProcessData === !0 ? {
group: !0,
sort: !0,
filter: !0,
search: !0,
page: !0
} : this.$props.autoProcessData;
let m;
const R = z.getIdPrefix(this.navigation);
let x = [];
Array.isArray(this.$props.dataItems) ? (x = this.$props.dataItems, m = (we = this.$props.total) != null ? we : x.length) : (x = ((Se = Bt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Se.data) || [], m = (ke = (He = this.$props.total) != null ? He : (ye = this.$props.dataItems) == null ? void 0 : ye.total) != null ? ke : x.length);
const ie = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ie, this._virtualPageSize = this.calcVirtualPageSize();
const N = x.length === m, tt = V(this.$props.groupable) && this.$props.groupable.footer || "none";
if (this.currentData = [], u) {
const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
data: C,
total: S
} = ii(x, {
group: u.group ? l : void 0,
sort: u.sort ? e : void 0,
filter: vt(u.filter ? t : void 0, u.search ? i : void 0),
...a ? {
take: this.$props.pageable ? r || 10 : r,
skip: s || 0
} : {}
});
x = C, m = (_e = this.$props.total) != null ? _e : S;
}
const {
resolvedGroupsCount: it,
flattedData: st
} = this.getFlatData(x, tt, N ? 0 : this.$props.skip || 0, l, h, d, this.$props.dataItemKey);
this.currentData = st;
const O = this._virtualSkipRef || 0;
if (this._virtualTotal = m, this.isVirtualScroll) {
let a = s || 0;
if ((c || this.$props.pageable) && (a = O, this._virtualTotal = this.currentData.length), N || c || this.$props.pageable)
if (this._virtualPageSize === 0) {
const C = Math.min(r || this.$props.pageSize || 20, this.currentData.length);
f = this.currentData.slice(a, a + C);
} else
f = this.currentData.slice(a, a + this._virtualPageSize);
}
this.initializeVirtualization(), this.initColumns(this.$props.dataItems, it), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = gt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
const se = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), re = ie && n(Mt, {
ref: (a) => {
this.groupPanelDivRef = a;
},
group: l || [],
ariaControls: this._gridRoleElementId,
onGroupChange: this.groupChangeHandler,
onPressHandler: this.dragLogic.pressHandler,
onDragHandler: this.dragLogic.dragHandler,
onReleaseHandler: this.dragLogic.releaseHandler,
resolveTitle: this.resolveTitle
}, null), le = (this.dragLogic.reorderable || this.dragLogic.groupable) && X && document && document.body, ae = [le && n(Ut, {
ref: (a) => {
this.dropElementClueRef = a;
}
}, null), le && n(Kt, {
ref: (a) => {
this.dragElementClueRef = a;
}
}, null)], rt = this.showLicenseWatermark ? n(ft, {
message: this.licenseMessage
}, null) : null, W = this.$attrs.style, lt = W && V(W) && W["width"] || "";
this.tableWidth = parseFloat(lt.toString());
const oe = k.findIndex((a) => typeof a.colSpan == "function") > -1;
let F;
oe || (F = this.getCellsToRender(null, k));
const ne = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
columnIndex: a
}) => k[a]) : k).map(function(a, C) {
return n("col", {
key: a.id || `col-${C}`,
width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
}, null);
}, this), de = n(Ft, {
size: this.$props.size,
columnResize: this.columnResize,
staticHeaders: this.$props.scrollable !== "none",
ref: (a) => {
this.headerRef = a;
},
headerRow: n(Lt, {
grid: this,
sort: e,
groupable: this.$props.groupable,
reorderable: this.$props.reorderable,
sortable: this.$props.sortable,
onSortChange: this.sortChangeHandler,
filter: t,
filterable: this.$props.filterable,
filterOperators: this.$props.filterOperators || je,
onFilterChange: this.filterChangeHandler,
columnMenu: this.$props.columnMenu,
columnMenuIcon: this.$props.columnMenuIcon,
columnMenuAnimate: this.$props.columnMenuAnimate,
onSelectionchange: this.onHeaderSelectionChangeHandler,
columns: this._columns,
cellsToRender: F,
columnVirtualization: this.$props.columnVirtualization,
columnsInitial: this.$props.columns,
columnResize: this.columnResize,
onPressHandler: this.dragLogic.pressHandler,
onDragHandler: this.dragLogic.dragHandler,
onReleaseHandler: this.dragLogic.releaseHandler,
columnsMap: this._columnsMap,
cellRender: this.$props.headerCellRender,
isRtl: this.isRtl,
isColCountDefined: this.getAriaColCount !== void 0,
filterRow: this.$props.filterable && n(Pt, {
grid: this,
size: this.$props.size,
columns: this._columns,
cellsToRender: F,
columnVirtualization: this.$props.columnVirtualization,
filter: t,
filterOperators: this.$props.filterOperators || je,
onFilterchange: this.filterChangeHandler,
sort: this.$props.sort,
cellRender: this.$props.filterCellRender,
isRtl: this.isRtl,
ariaRowIndex: this._columnsMap.length + 1
}, null) || void 0
}, null),
cols: ne
}, null), he = this._columns.some((a) => !!a.footerCell) ? n(At, {
size: this.$props.size,
columnResize: this.columnResize,
staticHeaders: this.$props.scrollable !== "none",
ref: (a) => {
this.footerRef = a;
},
row: n(Vt, {
isRtl: this.isRtl,
rowIndex: this.getAriaRowCount + 1,
columns: this._columns
}, null),
cols: ne
}, null) : n("span", null, null), at = function(a, C, S, Ee, _) {
let p = !1;
const T = this.$props.selectedField, y = T ? We(T, a.dataItem) : void 0, I = this.$props.highlight && this.$props.dataItemKey && Y(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[Y(this.$props.dataItemKey)(a.dataItem)] : void 0;
return oe && (F = this.getCellsToRender(a.dataItem, k)), {
row: F.map(function({
columnIndex: b,
colSpan: D
}) {
var De, Ge, Fe, Le;
const o = k[b];
let w;
if ((De = o.rowSpannable) != null && De.enabled && a.rowType === "data" && o.field && _) {
const g = o.field ? (Fe = (Ge = o.rowSpannable).valueGetter) == null ? void 0 : Fe.call(Ge, a.dataItem, o.field) : null;
w = {
value: g,
count: 1
}, _[o.field] && ((Le = _[o.field]) == null ? void 0 : Le.value) === g && _[o.field] !== null ? (_[o.field].count++, w.count = null) : _[o.field] = w;
}
const L = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.locked && o.left !== void 0 ? this.isRtl ? {
left: o.right + "px",
right: o.left + "px"
} : {
left: o.left + "px",
right: o.right + "px"
} : void 0;
let ze = !1;
if (o.editable && this.$props.editField) {
const g = We(this.$props.editField, a.dataItem);
(g === !0 || g === o.field) && (p = !0, ze = !0);
}
let A;
o.cell && (A = o.cell);
const Te = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Qe(a.dataItem, this.$props.uniqueField)), q = o.id ? o.id : b, J = Te ? !Te : a.expanded || a.dataItem.expanded, pt = o._type === "expand", Q = z.generateNavigatableId(`${C}-${String(b)}`, R, pt || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
return o.internalCell ? n(o.internalCell, {
key: q,
id: Q,
colSpan: D,
dataItem: a.dataItem,
field: o.field || "",
editor: o.editor,
format: o.format,
readFormat: o.readFormat,
type: o.type,
className: L,
render: A || this.$props.cellRender,
onChange: this.itemChange,
onSelectionchange: (g) => this.selectionChangeHandler({
event: g,
dataItem: a.dataItem,
dataIndex: S,
columnIndex: b
}),
columnIndex: b,
columnsCount: this._columns.filter((g) => !g.children.length).length,
rowType: a.rowType,
level: a.level,
expanded: J,
dataIndex: a.dataIndex,
style: H,
ariaColumnIndex: o.ariaColumnIndex,
isRtl: this.isRtl,
isSelected: Array.isArray(y) && y.indexOf(b) > -1,
isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0),
group: a.group,
rowSpan: w
}, null) : ze ? n(Gt, {
id: Q,
key: q,
colSpan: D,
dataItem: a.dataItem,
field: o.field || "",
editor: o.editor,
format: o.format,
readFormat: o.readFormat,
type: o.type,
className: L,
render: A || this.$props.cellRender,
onEdit: this.editHandler,
onRemove: this.removeHandler,
onSave: this.saveHandler,
onCancel: this.cancelHandler,
onChange: this.itemChange,
columnIndex: b,
columnsCount: this._columns.filter((g) => !g.children.length).length,
rowType: a.rowType,
level: a.level,
expanded: J,
dataIndex: a.dataIndex,
style: H
}, null) : n(Zt, {
key: q,
id: Q,
colSpan: D,
dataItem: a.dataItem,
field: o.field || "",
editor: o.editor,
format: o.format,
readFormat: o.readFormat,
type: o.type,
className: L,
render: A || this.$props.cellRender,
onCellclick: this.cellClickHandler,
onCellkeydown: this.cellKeydownHandler,
onEdit: this.editHandler,
onRemove: this.removeHandler,
onSave: this.saveHandler,
onCancel: this.cancelHandler,
onChange: this.itemChange,
onSelectionchange: (g) => this.selectionChangeHandler({
event: g,
dataItem: a.dataItem,
dataIndex: S,
columnIndex: b
}),
columnIndex: b,
columnsCount: this._columns.filter((g) => !g.children.length).length,
rowType: a.rowType,
level: a.level,
expanded: J,
dataIndex: a.dataIndex,
style: H,
rowSpan: w,
isSelected: Array.isArray(y) && y.indexOf(b) > -1,
isHighlighted: !!(typeof I != "boolean" && I && o.field && I[o.field] === !0)
}, null);
}, this),
isInEdit: p,
isSelected: typeof y == "boolean" && y,
isHighlighted: typeof I == "boolean" && I
};
};
let ot = 0, K = [];
const U = !this.currentData.length, pe = (a) => a >= this.currentData.length - ot;
let B = 0;
if (this.currentData.length) {
const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
let C = this.$props.skip || 0, S = -1, Ee = 0;
const _ = this.computedRowSpannable.enabled ? {} : void 0;
if (this.isVirtualScroll) {
if (O > 0) {
const p = this.currentData.slice(0, O).filter((T) => T.rowType === "data").length;
S += p, C += p;
}
!this.$props.pageable && N && (S += this.$props.skip || 0);
}
K = (f || this.currentData).map(function(p, T) {
p.rowType === "data" && S++;
const y = p.dataIndex % 2 !== 0, I = this.$props.dataItemKey && Y(this.$props.dataItemKey)(p.dataItem), b = T + C, D = I || "ai" + b, o = D + "_1", w = at.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
return B = b + a + Ee, [n(ei, {
key: D,
item: p,
dataIndex: S,
ariaRowIndex: B,
absoluteRowIndex: b,
isAltRow: y,
isHidden: pe(T),
rowHeight: this.$props.rowHeight,
isSelected: w.isSelected,
isHighlighted: w.isHighlighted,
isInEdit: w.isInEdit,
rowType: p.rowType,
onRowclick: (H) => this.rowClick(H, p),
onRowdblclick: (H) => this.rowDoubleClick(H, p),
render: this.$props.rowRender,
class: this.$props.rowClass ? this.$props.rowClass(p) : ""
}, {
default: () => [w.row]
}), this.$props.detail && p.rowType === "data" && (p.expanded || p.dataItem.expanded) && n("tr", {
key: o,
class: y ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
style: {
visibility: pe(T) ? "hidden" : "",
height: this.$props.detailRowHeight + "px"
},
role: "row",
"aria-rowindex": B
}, [l == null ? void 0 : l.map(function(H) {
return n(ee, {
id: "",
dataIndex: p.dataIndex,
field: H.field,
dataItem: p.dataItem,
key: `group-${H.field}-${p.dataIndex}`,
group: p.group
}, null);
}, this), (this.$props.expandField || this.detailExpandable.enabled) && n(Tt, {
id: z.generateNavigatableId(`${o}-dhcell`, R)
}, null), n(Dt, {
dataItem: p.dataItem,
dataIndex: p.dataIndex,
colSpan: L,
ariaColIndex: 2 + (l ? l.length : 0),
detail: this.$props.detail ? this.$props.detail : void 0,
id: z.generateNavigatableId(`${o}-dcell`, R)
}, null)])];
}, this);
}
const nt = this.$props.pageable && n(It, {
class: "k-grid-pager",
onPagesizechange: this.pageChangeHandler,
onPagechange: this.pageChangeHandler,
size: this.$props.size,
total: m,
skip: s || 0,
pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
messagesMap: et,
settings: wt(this.$props.pageable || {})
}, null), ue = Ae.call(this, {
h: Pe,
template: this.$props.pager,
defaultRendering: nt,
additionalProps: {
...this.$props,
skip: this.$props.skip || 0,
messagesMap: et
},
additionalListeners: {
pagesizechange: this.pageChangeHandler,
pagechange: this.pageChangeHandler
}
}), dt = (a) => e && e.filter((C) => C.field === a).length > 0, ce = n("colgroup", {
ref: G(this, "colGroup")
}, [k.map(function(a, C) {
return n("col", {
key: a.id || `col-${C}`,
class: dt(a.field) ? "k-sorted" : void 0,
width: a.width !== void 0 ? a.width.toString().indexOf("%") !== -1 ? a.width : Math.floor(parseFloat(a.width.toString())) + "px" : void 0
}, null);
}, this)]), ge = {
height: this.getCorrectHeight,
...this.$attrs.style
}, ht = n("div", {
class: "k-loading-mask"
}, [n("div", {
class: "k-loading-color"
}, null), n("div", {
style: {
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}, [n(zt, {
size: "large",
type: "converging-spinner"
}, null)])]), j = this.$props.showLoader && Ae.call(this, {
h: Pe,
template: this.$props.loader,
defaultRendering: ht
});
return this.$props.scrollable === "none" ? n(Ke, {
ref: "navRef",
id: this._gridId,
navigatable: this.$props.navigatable
}, {
default: () => [n(Ue, {
ref: (a) => {
this.gridNavRef = a;
},
currentData: this.currentData,
id: this.$props.id,
style: ge,
class: this.nonscrollableWrapperClass
}, {
default: () => [se, re, n("div", {
role: "grid",
class: "k-grid-aria-root",
id: this._gridRoleElementId,
"aria-colcount": this.getAriaColCount,
"aria-rowcount": this.getAriaRowCount
}, [n("table", {
class: "k-table",
style: {
tableLayout: "fixed"
},
ref: G(this, "table"),
role: "none"
}, [Me(" "), ce, de, n("tbody", {
class: "k-table-tbody",
"data-keyboardnavbody": !0
}, [K, Me(" "), j]), he]), U && n(Ze, {
id: z.generateNavigatableId("no-records", R)
}, {
default: () => [M.length ? M : n(Ye, null, null)]
})]), ue, j, ae]
})]
}) : n(Ke, {
ref: "navRef",
id: this._gridId,
navigatable: this.$props.navigatable
}, {
default: () => [n(Ue, {
ref: (a) => {
this.gridNavRef = a;
},
currentData: this.currentData,
id: this.$props.id,
style: ge,
class: this.scrollableWrapperClass
}, {
default: () => [se, re, n("div", {
role: "grid",
class: "k-grid-aria-root",
id: this._gridRoleElementId,
"aria-colcount": this.getAriaColCount,
"aria-rowcount": this.getAriaRowCount
}, [de, n("div", {
class: "k-grid-container",
role: "presentation"
}, [n("div", {
role: "presentation",
ref: G(this, "scrollContainer"),
class: "k-grid-content k-virtual-con