@progress/kendo-vue-grid
Version:
1,877 lines • 75.9 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 bt, createVNode as d, h as Le, Fragment as Ke, createTextVNode as St, ref as R, inject as xt, computed as _e, markRaw as k } from "vue";
import { isObject as Y, cloneArray as It, canUseDOM as B, WatermarkOverlay as vt, getter as E, getTemplate as Ae, setRef as w, hasListener as K, getComponentElementRef as Be, getRef as x, RowHeightService as $t, setScrollbarWidth as wt, kendoThemeMaps as Ve, uGrid as yt, isRtl as Oe, validatePackage as kt, shouldShowValidationUI as Ht, getLicenseMessage as Tt, guid as Ne } from "@progress/kendo-vue-common";
import { tableKeyboardNavigationTools as M, combineFilters as Et, Pager as Mt, normalize as Pt, TableKeyboardNavigationProvider as We, HeaderCell as zt, updateLeft as Dt, updateRight as Gt, groupExpandReducer as Ft, detailExpandReducer as Lt, getSelectedState as Ue, getSelectedStateFromKeyDown as Kt, closestTagName as je, getColumnIndex as _t, getRowIndex as At, ClipboardActionType as he, populateClipboardData as Bt, getDetailExpandableOptions as Vt, getSelectionOptions as Ot, getGroupExpandableOptions as Nt, ClipboardService as qe } from "@progress/kendo-vue-data-tools";
import { Loader as Wt } from "@progress/kendo-vue-indicators";
import { GridNav as Je } from "./GridNav.mjs";
import { GridSelectionCell as Xe } from "./cells/GridSelectionCell.mjs";
import { GridHierarchyCell as Ye } from "./cells/GridHierarchyCell.mjs";
import { GridDetailHierarchyCell as Ut } from "./cells/GridDetailHierarchyCell.mjs";
import { GridDetailCell as jt } from "./cells/GridDetailCell.mjs";
import { Header as qt } from "./header/Header.mjs";
import { HeaderRow as Jt } from "./header/HeaderRow.mjs";
import { FilterRow as Xt } from "./header/FilterRow.mjs";
import { GroupPanel as Yt } from "./header/GroupPanel.mjs";
import { Footer as Qt } from "./footer/Footer.mjs";
import { FooterRow as Zt } from "./footer/FooterRow.mjs";
import { GridTable as es } from "./components/table/GridTable.mjs";
import { GridTableScrollable as ts } from "./components/table/GridTableScrollable.mjs";
import { operators as Qe } from "./filterCommon.mjs";
import { VirtualScroll as ss } from "./VirtualScroll.mjs";
import { ColumnResize as is } from "./drag/ColumnResize.mjs";
import { CommonDragLogic as os } from "./drag/CommonDragLogic.mjs";
import { DragClue as ns } from "./drag/DragClue.mjs";
import { DropClue as rs } from "./drag/DropClue.mjs";
import { applyExpandedState as as, getColSpan as ls, autoGenerateColumns as ds, mapColumns as hs, getFlatColumnsState as Ze, getRowSpanOptions as et, getDataAsArray as cs, groupedFirstItemValue as ps, calcRowHeight as us, flatData as fs, readColumns as ms } from "./utils/main.mjs";
import { GridGroupCell as tt } from "./cells/GridGroupCell.mjs";
import { GridRow as gs } from "./rows/GridRow.mjs";
import { gridProps as Rs } from "./common.mjs";
import { GridHeaderSelectionCell as st } from "./header/GridHeaderSelectionCell.mjs";
import { GridNoRecords as it } from "./components/noRecords/GridNoRecords.mjs";
import { GridNoRecordsContainer as ot } from "./components/noRecords/GridNoRecordsContainer.mjs";
import { packageMetadata as ce } from "./package-metadata.mjs";
import { pagerMessagesMap as nt } from "./messages/messagesMap.mjs";
import { process as Cs, orderBy as rt } from "@progress/kendo-data-query";
import { KendoKey as bs } from "./key.mjs";
import { getVirtualCellsToRender as Ss } from "./utils/virtualColumns.mjs";
import { StickyGroupTable as at } from "./components/StickyGroupTable.mjs";
import { getRowContents as xs } from "./getRowContents.mjs";
import { useStickyGroups as Is } from "./hooks/useStickyGroups.mjs";
import { PinnedRowsTable as lt } from "./components/PinnedRowsTable.mjs";
import { GridPinCell as vs } from "./cells/pincell/GridPinCell.mjs";
import { BaseCSVExport as $s } from "./BaseCSVExport.mjs";
import { contextMenuItemsMap as ws, GridContextMenu as ys, getDefaultBodyContextMenuItems as ks, getDefaultHeadContextMenuItems as Hs } from "./contextMenu/GridContextMenu.mjs";
import { GridContextMenuItemNames as Q, GridContextMenuAnchorPart as dt } from "./contextMenu/enums.mjs";
const bi = /* @__PURE__ */ bt({
name: "KendoGrid",
inheritAttrs: !1,
props: {
...Rs,
toolbar: {
type: Object
},
noRecords: {
type: Object
}
},
data() {
return {
isRtl: !1,
context: void 0,
navigation: void 0,
showLicenseWatermark: !1,
licenseMessage: void 0,
notHiddenColumns: [],
contextMenuState: {
show: !1,
offset: {
left: 0,
top: 0
},
dataItem: void 0,
field: void 0
}
};
},
watch: {
clipboard: function(e) {
e ? this.clipboardServiceRef || (this.clipboardServiceRef = new qe(this.handleClipboardEvent), this.clipboardServiceRef.addEventListeners(document)) : this.clipboardServiceRef && (this.clipboardServiceRef.removeEventListeners(document), this.clipboardServiceRef = null);
},
rowHeight: function(e, t) {
var s;
this.onRowHeightChanged(e, t), (s = this.vsRef) == null || s.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() {
kt(ce), this.showLicenseWatermark = Ht(ce), this.licenseMessage = Tt(ce), this.initialHeight = null, this.columnsRef = [], this.dragLogic = new os(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new is(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Ne(), this._gridRoleElementId = Ne(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0, this.previousCopiedItems = [], this.clipboardServiceRef = null;
},
mounted() {
var t, s;
this.setRefs();
const e = Oe(this._element);
if (this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((s = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : s.height) || null, this.resizeObserver = B && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body), B) {
const i = {
rootMargin: "0px",
threshold: 0.9
};
this.observerRef = window.IntersectionObserver && new window.IntersectionObserver(this.handleIntersection, i) || null;
}
this.$props.clipboard && (this.clipboardServiceRef = new qe(this.handleClipboardEvent), this.clipboardServiceRef.addEventListeners(document));
},
updated() {
var s;
this.setRefs();
const e = Oe(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 = "");
const t = this.updateStickyGroups();
this.sticky.headerItems = t == null ? void 0 : t.stickyHeaderItems, this.sticky.footerItems = t == null ? void 0 : t.stickyFooterItems, this.isVirtualScroll && (this.setContainerHeight(), this.setMinRowHeight(), (s = this.vsRef) == null || s.update());
},
unmounted() {
this.gridUnmounted();
},
computed: {
gridId() {
return this.$props.id + "-role-element-id";
},
idPrefix() {
return this.$props.navigatable ? this.gridId : "";
},
groupExpandable() {
return Nt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
},
hierarchClass() {
return yt.hierarchyCell({});
},
computedRowSpannable() {
return et(this.$props.rowSpannable);
},
computedSelectable() {
return Ot(this.$props.selectable);
},
detailExpandable() {
return Vt(!!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.gridStateContext.group) == null ? void 0 : t.value;
return this.$props.groupable === !0 && (e == null ? void 0 : e.length) || Y(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() {
var s, i;
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.columnsRef.some((o) => {
var n;
return !!(o.footerCell || (n = o.cells) != null && n.footerCell);
}) || (s = this.$props.cells) != null && s.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.columnsRef.some((o) => {
var n;
return !!(o.footerCell || (n = o.cells) != null && n.footerCell);
}) || (i = this.$props.cells) != null && 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, s = (e == null ? void 0 : e.filter((i) => i.hidden !== void 0).length) !== 0;
if (t || s)
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;
},
pinnedSourceSet() {
var t, s;
const e = /* @__PURE__ */ new Set();
return (t = this.gridStateContext.pinnedTopRows) != null && t.value && this.gridStateContext.pinnedTopRows.value.forEach((i) => e.add(i)), (s = this.gridStateContext.pinnedBottomRows) != null && s.value && this.gridStateContext.pinnedBottomRows.value.forEach((i) => e.add(i)), e;
},
sortedPinnedTopRows() {
var s, i;
const e = ((s = this.gridStateContext.pinnedTopRows) == null ? void 0 : s.value) || [], t = (i = this.gridStateContext.sort) == null ? void 0 : i.value;
return this.autoProcessData && (t != null && t.length) ? rt([...e], t) : e;
},
sortedPinnedBottomRows() {
var s, i;
const e = ((s = this.gridStateContext.pinnedBottomRows) == null ? void 0 : s.value) || [], t = (i = this.gridStateContext.sort) == null ? void 0 : i.value;
return this.autoProcessData && (t != null && t.length) ? rt([...e], t) : e;
},
hasPinnedTopRows() {
return this.$props.pinnable && this.sortedPinnedTopRows.length > 0;
},
hasPinnedBottomRows() {
return this.$props.pinnable && this.sortedPinnedBottomRows.length > 0;
},
contextMenuColumn() {
return this.columnsRef.find((e) => e.field === this.contextMenuState.field);
},
headMenuItems() {
var t;
const e = this.$props.sortable && ((t = this.contextMenuColumn) == null ? void 0 : t.sortable);
return Hs({
sortable: !!e,
selectable: this.computedSelectable.enabled
});
},
bodyMenuItems() {
var e;
return this.$props.sortable && ((e = this.contextMenuColumn) == null || e.sortable), ks({
selectable: this.computedSelectable.enabled,
pinnable: !!this.$props.pinnable,
clipboard: !!this.$props.clipboard
});
},
contextMenuItems() {
var s;
const e = ((s = this.contextMenuColumn) == null ? void 0 : s.contextMenu) || this.$props.contextMenu, t = typeof e == "function" ? e(this.contextMenuState) : e;
if (t && this.contextMenuState.offset) {
const i = this.contextMenuState.dataItem ? dt.body : dt.head, o = t[i], n = this.contextMenuState.dataItem ? this.bodyMenuItems : this.headMenuItems;
let r;
return o === !0 || o === void 0 ? r = n : o !== !1 && (r = o), this.$props.pinnable && r && this.contextMenuState.dataItem ? this.filterPinContextMenuItems(r) : r;
}
}
},
methods: {
getCellPositionStyle(e, t) {
return e.left !== void 0 ? t ? {
left: e.right + "px",
right: e.left + "px"
} : {
left: e.left + "px",
right: e.right + "px"
} : {};
},
handleContextMenuOpen(e, t, s) {
e.preventDefault(), this.contextMenuState = {
show: !0,
offset: {
left: e.pageX,
top: e.pageY
},
dataItem: t,
field: s
};
},
handleContextMenuClose() {
this.contextMenuState = {
show: !1,
offset: {
left: 0,
top: 0
},
dataItem: void 0,
field: void 0
};
},
inActiveElement() {
var o;
if (!B)
return !1;
const e = document == null ? void 0 : document.activeElement;
let t = document == null ? void 0 : document.body;
e != null && e.matches(".k-table-td") && (t = e);
const s = t == null ? void 0 : t.closest(".k-grid-container"), i = t && ((o = this._element) == null ? void 0 : o.contains(t));
return !!(t && i && s);
},
handleClipboardEvent(e, t, s, i, o) {
var h, u, p;
if (!this.inActiveElement() && !s || !e)
return;
const n = {
type: e,
nativeEvent: t,
columns: this.columnsRef,
dataItemKey: this.$props.dataItemKey || "",
dataItem: i,
field: o,
...typeof this.$props.clipboard != "boolean" ? this.$props.clipboard : {},
...s
}, r = this.getLeafDataItems(), a = Bt({
event: n,
data: r,
selectedState: (p = (u = this.$props.select) != null ? u : (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? p : {},
previousCopiedItems: this.previousCopiedItems
});
e !== he.paste && (this.previousCopiedItems = a.copiedItems), K.call(this, "clipboard") && this.$emit("clipboard", {
...n,
...a
});
},
handleContextMenuSelect(e) {
this.handleContextMenuItemClick({
event: e,
dataItem: this.contextMenuState.dataItem,
field: this.contextMenuState.field
});
},
renderContextMenu() {
var e;
return d(ys, {
show: !!(this.contextMenuState.show && ((e = this.contextMenuItems) != null && e.length)),
dataItem: this.contextMenuState.dataItem,
field: this.contextMenuState.field,
items: this.contextMenuItems,
offset: this.contextMenuState.offset,
onClose: this.handleContextMenuClose,
onSelect: this.handleContextMenuSelect
}, null);
},
filterPinContextMenuItems(e) {
var h, u;
const t = this.$props.dataItemKey || "", s = this.contextMenuState.dataItem, i = ((h = this.gridStateContext.pinnedTopRows) == null ? void 0 : h.value) || [], o = ((u = this.gridStateContext.pinnedBottomRows) == null ? void 0 : u.value) || [], n = t && s ? s[t] : void 0, r = n !== void 0 && i.some((p) => p[t] === n), a = n !== void 0 && o.some((p) => p[t] === n);
return e.map((p) => {
const c = typeof p == "string" ? ws[p] : p;
return (c == null ? void 0 : c.name) === Q.pinRow && c.items ? {
...c,
items: c.items.filter((f) => f.name === Q.pinTop ? !r : f.name === Q.pinBottom ? !a : f.name === Q.unpin ? r || a : !0)
} : p;
});
},
handleContextMenuItemClick(e) {
var i, o, n, r, a, h, u, p;
const t = e.event.event.item, s = {
event: e.event,
menuItem: t,
dataItem: e.dataItem,
field: e.field
};
switch (this.$emit("contextmenuitemclick", s), (i = t.data) == null ? void 0 : i.action) {
case "SortCommand":
if (this.contextMenuColumn) {
const c = (o = t.name) == null ? void 0 : o.toLowerCase().includes("asc"), m = ((n = t.name) == null ? void 0 : n.toLowerCase().includes("desc")) ? "desc" : void 0, I = c ? "asc" : m, C = t.name ? I : void 0, v = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((H) => {
var b;
return H.field !== ((b = this.contextMenuColumn) == null ? void 0 : b.field);
});
C && ((a = this.contextMenuColumn) != null && a.field) && v.push({
field: this.contextMenuColumn.field,
dir: C
}), this.sortChangeHandler(v, {
event: e.event
});
}
break;
case "SelectRowCommand": {
const c = e.dataItem;
if (this.computedSelectable.enabled && c && this.$props.dataItemKey) {
const m = E(this.$props.dataItemKey)(c), I = this.getLeafDataItems(), C = I.findIndex((P) => P[this.$props.dataItemKey] === c[this.$props.dataItemKey]), $ = 0, v = this.columnsRef.length - 1, H = {
...this.getArguments(e.event),
dataItem: c,
startDataItem: C,
endDataItem: C,
startRowIndex: C,
endRowIndex: C,
startColIndex: $,
endColIndex: v,
dataItems: I,
ctrlKey: !1,
altKey: !1,
metaKey: !1,
shiftKey: !1,
isDrag: !1,
mode: this.computedSelectable.mode,
cell: this.computedSelectable.cell,
componentId: this.$props.id || this._gridId,
selectedField: this.$props.selectedField || ""
}, b = this.computedSelectable.mode === "multiple" ? {
...(u = (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? u : {}
} : {};
b[m] === !0 || Array.isArray(b[m]) && b[m].length === this.columnsRef.length ? delete b[m] : b[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(H, b);
}
break;
}
case "SelectAllRowsCommand": {
if (this.computedSelectable.enabled && this.$props.dataItemKey) {
const c = this.getLeafDataItems(), f = {}, m = c[0], I = c[c.length - 1];
c.forEach((C) => {
const $ = E(this.$props.dataItemKey)(C);
f[$] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
}), this.raiseSelectionEvent({
...this.getArguments(e.event),
dataItems: c,
dataItem: m,
startDataItem: m,
endDataItem: I,
startRowIndex: 0,
endRowIndex: c.length - 1,
startColIndex: 0,
endColIndex: this.columnsRef.length - 1,
ctrlKey: !1,
altKey: !1,
metaKey: !1,
shiftKey: !1,
isDrag: !1,
mode: this.computedSelectable.mode,
cell: this.computedSelectable.cell,
componentId: this.$props.id || this._gridId,
selectedField: this.$props.selectedField || ""
}, f);
}
break;
}
case "ClearSelectionCommand":
this.computedSelectable.enabled && this.clearSelection({
...this.getArguments(e.event),
dataItems: this.getLeafDataItems(),
startRowIndex: -1,
endRowIndex: -1,
startColIndex: -1,
endColIndex: -1,
ctrlKey: !1,
altKey: !1,
metaKey: !1,
shiftKey: !1,
isDrag: !1,
mode: this.computedSelectable.mode,
cell: this.computedSelectable.cell,
componentId: this.$props.id || this._gridId,
selectedField: this.$props.selectedField || ""
});
break;
case "PinTopCommand":
this.handleRowPin("pinTop", e.dataItem);
break;
case "PinBottomCommand":
this.handleRowPin("pinBottom", e.dataItem);
break;
case "UnpinCommand":
this.handleRowPin("unpin", e.dataItem);
break;
case "CopySelectionCommand":
this.handleClipboardEvent(he.copy, e.event.nativeEvent, {
copyHeaders: !((p = t.name) != null && p.toLowerCase().includes("noheaders"))
}, e.dataItem, e.field);
break;
case "PasteCommand":
this.handleClipboardEvent(he.paste, e.event.nativeEvent, {}, e.dataItem, e.field);
break;
}
this.handleContextMenuClose();
},
triggerCellContextMenu(e, t, s) {
this.$emit("contextmenu", {
dataItem: t,
field: s,
event: e
}), this.$props.contextMenu && this.handleContextMenuOpen(e, t, s);
},
handleIntersection(e) {
const t = {
rowIndex: this.rowIndexRef.value
};
e.forEach((s) => {
s.boundingClientRect.height !== s.intersectionRect.height && this.setCurrentOnTop(t);
});
},
scrollIntoView(e) {
var i;
if (!((i = this.vsRef) != null && i.container) || this.$props.scrollable === "none")
return;
const {
rowIndex: t
} = e;
this.rowIndexRef.value = t;
const s = this._element;
if (this.observerRef && s) {
this.observerRef.disconnect();
const o = s.querySelector(`[absolute-row-index="${this.rowIndexRef.value}"]`);
o ? this.observerRef.observe(o) : this.setCurrentOnTop(e);
}
},
setCurrentOnTop(e) {
var i, o;
if (!((i = this.vsRef) != null && i.container) || this.$props.scrollable === "none")
return;
this.observerRef && this.observerRef.disconnect();
const {
rowIndex: t
} = e, s = this._element;
if (this.isVirtualScroll) {
const n = ((o = this.vsRef.rowHeightService) == null ? void 0 : o.offset(t)) || 0;
this.vsRef.container.scroll(0, n);
} else if (s) {
const n = t < 1 ? s.querySelector("tbody > tr:nth-child(1)") : s.querySelector(`tbody > tr:nth-child(${t + 1})`);
n && this.containerElementRef && (this.containerElementRef.scrollTop = n.offsetTop);
}
},
getTotal() {
let e = this.$props.total || 0;
return Array.isArray(this.$props.dataItems) ? e = e || this.$props.dataItems.length : this.$props.dataItems && (e = e || this.$props.dataItems.total), e;
},
exportAsCsv() {
this.csvExportRef && this.csvExportRef.save();
},
getCsvBlob() {
return this.csvExportRef ? this.csvExportRef.getBlob() : null;
},
readColumnElements() {
return ms(this.$props.columns, this.currentColumnsState, {
prevId: 0,
idPrefix: this.idPrefix
});
},
getResolvedFlatColumnsState() {
const e = [], t = (s, i) => s == null ? void 0 : s.forEach((o) => {
const n = o.hidden || i;
e.push({
...o,
hidden: n
}), t(o.children, n);
});
return t(this.currentColumnsState, !1), e;
},
filterColumns(e) {
const t = this.getResolvedFlatColumnsState();
return [e.filter((s) => {
var i;
return !s.hidden && !((i = t.find((o) => o.id === s.id)) != null && i.hidden);
}), e.filter((s) => {
var i;
return s.hidden || ((i = t.find((o) => o.id === s.id)) == null ? void 0 : i.hidden);
})];
},
getFlatData(e, t, s, i, o, n, r) {
const a = [], h = fs(a, e, t, {
index: s
}, i !== void 0, o, n, this.groupExpandable.defaultExpand, r, this.$props.expandField);
return {
flattedData: a,
resolvedGroupsCount: h
};
},
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 = (s) => ({
...s,
children: s.children && s.children.length > 0 ? this.filterHiddenColumns(s.children) : s.children
});
return [...e].filter((s) => !s.hidden).filter((s) => B && s && s.media ? window.matchMedia(s.media).matches : s).map((s) => t(s));
},
/**
* 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.columnsRef.filter((s) => s.declarationIndex >= 0 && s.parentIndex === -1), t = (s) => (s.sort((i, o) => i.declarationIndex - o.declarationIndex), s.map((i) => {
const {
declarationIndex: o,
parentIndex: n,
depth: r,
colSpan: a,
rowSpan: h,
index: u,
kFirst: p,
children: c,
...f
} = i;
return c.length ? {
children: t(c),
...f
} : f;
}));
return t(e);
},
setRefs() {
var n, r, a, h;
let e = "$el";
const t = x(this, "gridNav");
t && (this._element = t[e]);
const s = x(this, "groupPanelDiv");
if (s) {
let u = s[e] || null;
this.dragLogic.refGroupPanelDiv(u);
}
this.stickyHeaderRef = x(this, "stickyHeader"), this.stickyFooterRef = x(this, "stickyFooter"), this.pinnedTopRef = x(this, "pinnedTop"), this.pinnedBottomRef = x(this, "pinnedBottom");
const i = x(this, "dropElementClue"), o = x(this, "dragElementClue");
this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = x(this, "colGroup"), this.columnResize.colGroupStickyHeader = (n = this.stickyHeaderRef) == null ? void 0 : n.colGroupRef, this.columnResize.colGroupStickyFooter = (r = this.stickyFooterRef) == null ? void 0 : r.colGroupRef, this.columnResize.colGroupPinnedTop = (a = this.pinnedTopRef) == null ? void 0 : a.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = x(this, "header"), this._footer = x(this, "footer"), this.resetTableWidth(), wt();
},
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.dataRef = [], this.columnsRef = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect(), this.observerRef && (this.observerRef.disconnect(), this.observerRef = null), this.clipboardServiceRef && (this.clipboardServiceRef.removeEventListeners(document), this.clipboardServiceRef = null);
},
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;
const s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
this.$props.pageable || s != null && s.length ? (this.virtualSkipRef = e.skip, this.$forceUpdate()) : this.pageChangeHandler(e, t);
},
initializeVirtualization() {
const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
this.tableBodyRef = x(this, "tableBody"), this.scrollTableRef = Be(this, "table"), e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, this.scrollContainerRef = e.container = x(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = x(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new $t(this._virtualTotal, t)));
},
setContainerHeight() {
const e = x(this, "scrollContainer");
this._containerHeightRef = (e == null ? void 0 : e.offsetHeight) || 0;
},
setMinRowHeight() {
if (!this._minRowHeightRef && !this.$props.rowHeight) {
const t = us(x(this, "tableBody"));
t && (this._minRowHeightRef = t, this.$forceUpdate());
}
},
onRowHeightChanged(e, t) {
this.setRefs();
},
onHeaderScroll(e) {
const s = e.target.scrollLeft, i = x(this, "scrollContainer");
i && (i.scrollLeft = s), this.scrollLeftRef = s;
},
scrollHandler(e) {
clearTimeout(this.forceUpdateTimeout);
const t = e.currentTarget.scrollLeft, s = e.currentTarget.scrollTop;
this.$props.columnVirtualization && (!this.isVirtualScroll || s === 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.stickyHeaderRef && this.stickyHeaderRef.setScrollLeft(e.currentTarget.scrollLeft), this.stickyFooterRef && this.stickyFooterRef.setScrollLeft(e.currentTarget.scrollLeft), this.pinnedTopRef && this.pinnedTopRef.setScrollLeft(t), this.pinnedBottomRef && this.pinnedBottomRef.setScrollLeft(t), this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
const i = this.virtualSkipRef;
this.vsRef && s !== this.wrapperScrollTopRef && this.vsRef.scrollHandler(e);
const o = this.isVirtualScroll && this.virtualSkipRef !== i;
if (this.$emit("scroll", e), this.wrapperScrollTopRef = s, !o) {
const n = this.updateStickyGroups();
this.sticky.headerItems = n == null ? void 0 : n.stickyHeaderItems, this.sticky.footerItems = n == null ? void 0 : n.stickyFooterItems;
}
},
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, s = 0, i = null) {
return e.forEach((o) => {
!i && t(o, s) && (i = o), o.items && o.items.length && !i && (i = this.loopGroupedItems(o.items, t, s + 1, i));
}), i;
},
updateGroupCollapsed(e) {
let t = this.computedCollapsed, s = t[e.level];
const i = this.$props.uniqueField, o = function(a, h) {
return a.value === e.dataItem.value && h === e.level;
}, n = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, o, 0, null) : e.dataItem, r = ps(n || e.dataItem, i);
if (e.value) {
if (s && s.length) {
const a = s.indexOf(r);
a > -1 && s.splice(a, 1);
}
} else
s ? s.includes(r) || s.push(r) : s = [r];
return t;
},
itemChange(e) {
var i;
const t = K.call(this, "itemchange"), s = (i = this.gridStateContext.group) == null ? void 0 : i.value;
if (e.field === this.$props.expandField || (s || this.$props.detail) && e.field === void 0) {
K.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);
},
navigationActionHandler(e) {
this.$emit("navigationaction", 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) {
var t, s, i;
if (this.computedSelectable.enabled) {
const {
event: o,
dataItem: n,
dataIndex: r,
columnIndex: a
} = e, h = {
...this.getArguments(o),
dataItem: n,
startColIndex: a,
endColIndex: a,
startRowIndex: r,
endRowIndex: r,
dataItems: this.getLeafDataItems(),
altKey: !1,
ctrlKey: !1,
shiftKey: !1,
metaKey: !1,
mode: this.computedSelectable.mode,
cell: this.computedSelectable.cell,
isDrag: !1,
componentId: this.$props.id || this._gridId,
selectedField: this.$props.selectedField || ""
};
this.gridStateContext.selectionchange({
...h,
select: this.$props.dataItemKey ? Ue({
event: h,
selectedState: (i = (s = this.$props.select) != null ? s : (t = this.gridStateContext.select) == null ? void 0 : t.value) != null ? i : {},
dataItemKey: this.$props.dataItemKey
}) : {}
});
}
},
onKeyboardSelectionChangeHandler(e) {
var u, p;
if (!this.computedSelectable.enabled || !this.$props.dataItemKey)
return;
const t = (u = this.gridStateContext.select) == null ? void 0 : u.value, s = {
dataItems: this.getLeafDataItems(),
mode: this.computedSelectable.mode,
cell: this.computedSelectable.cell,
componentId: this.$props.id,
selectedField: "",
...this.getArguments(e)
}, i = Kt({
event: s,
selectedState: t != null ? t : {},
dataItemKey: this.$props.dataItemKey
});
if (i === t)
return;
const o = e.target, n = je(o, "TD"), r = je(o, "TR"), a = _t(n), h = At(r);
if (a !== void 0 && h !== void 0) {
const c = (p = cs(this.$props.dataItems)) == null ? void 0 : p[h];
this.gridStateContext.selectionchange({
...s,
select: i,
dataItem: c,
startRowIndex: h,
startColIndex: a,
startDataItem: c,
endDataItem: c,
endRowIndex: h,
endColIndex: a,
ctrlKey: e.ctrlKey,
altKey: e.altKey,
metaKey: e.metaKey,
shiftKey: e.shiftKey,
isDrag: !1
});
}
},
onHeaderSelectionChangeHandler(e) {
if (this.computedSelectable.enabled) {
const t = this.getLeafDataItems();
this.gridStateContext.headerselectionchange({
select: e.event.target.checked ? t.reduce((s, i) => (this.$props.dataItemKey && E(this.$props.dataItemKey)(i) !== void 0 && (s[E(this.$props.dataItemKey)(i)] = !0), s), {}) : {},
field: e.field,
event: e.event,
target: this,
dataItems: t
});
}
},
selectionRelease(e) {
var t, s, i;
if (this.computedSelectable.enabled) {
const o = this.getLeafDataItems(), n = o[e.startRowIndex], r = o[e.endRowIndex], a = {
event: void 0,
target: this,
selectedField: "",
componentId: this.$props.id || this._gridId,
dataItems: o,
dataItem: null,
startDataItem: n,
endDataItem: r,
...e
}, h = Ue({
event: a,
selectedState: (i = (s = this.$props.select) != null ? s : (t = this.gridStateContext.select) == null ? void 0 : t.value) != null ? i : {},
// Thats kinda strange, even through the `dataItemKey` is required by the `getSelectedState`
// it does work correctly even without it
dataItemKey: this.$props.dataItemKey
});
this.raiseSelectionEvent(a, h);
}
},
clearSelection(e) {
this.computedSelectable.enabled && this.raiseSelectionEvent(e, {});
},
raiseSelectionEvent(e, t) {
this.computedSelectable.enabled && this.gridStateContext.selectionchange({
...e,
select: t
});
},
moveToNextPage(e) {
var o, n, r, a;
const t = (r = (n = (o = this.gridStateContext.take) == null ? void 0 : o.value) != null ? n : this.$props.pageSize) != null ? r : 0, s = (((a = this.gridStateContext.skip) == null ? void 0 : a.value) || 0) + t, i = this.getTotal();
s < i && this.pageChangeHandler({
skip: s,
take: t
}, e);
},
moveToPrevPage(e) {
var i, o, n, r;
const t = (n = (o = (i = this.gridStateContext.take) == null ? void 0 : i.value) != null ? o : this.$props.pageSize) != null ? n : 0, s = (((r = this.gridStateContext.skip) == null ? void 0 : r.value) || 0) - t;
s >= 0 && this.pageChangeHandler({
skip: s,
take: t
}, e);
},
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 s;
if (this.detailExpandable.enabled) {
const i = (s = this.gridStateContext.detailExpand) == null ? void 0 : s.value, o = Lt(i != null ? i : {}, e);
this.gridStateContext.detailexpandchange({
...this.getArguments(t),
detailExpand: o
});
}
},
handleGroupExpandAction(e, t) {
var s;
if (this.groupExpandable.enabled) {
const i = (s = this.gridStateContext.groupExpand) == null ? void 0 : s.value, o = Ft(i != null ? i : [], e, this.groupExpandable);
this.$props.expandField || this.gridStateContext.groupexpandchange({
...this.getArguments(t),
groupExpand: o
});
}
this.scrollToStickyGroup(e.group);
},
raiseDataEvent(e, t, s, i) {
if (this.resetVirtualSkip(), this.$props.autoProcessData)
this.gridStateContext[e]({
...this.getArguments(i),
...t
});
else if (K.call(this, e))
this.$emit(e, {
...this.getArguments(i),
...t
});
else if (K.call(this, "datastatechange")) {
const o = {
...this.getDataState(),
...s
};
this.gridStateContext.datastatechange({
...this.getArguments(i),
data: o,
dataState: o
});
}
},
columnReorder(e, t, s) {
const i = this.columnsRef[e], o = Ze(this.currentColumnsState), n = i.depth, r = (p) => {
do
p++;
while (p < this.columnsRef.length && this.columnsRef[p].depth > n);
return p;
}, a = this.columnsRef.splice(e, r(e) - e);
this.columnsRef.splice(e < t ? r(t - a.length) : t, 0, ...a), this.columnsRef.filter((p) => p.declarationIndex >= 0).forEach((p, c) => {
p.orderIndex = c;
const f = o.find((m) => m.id === p.id);
f && (f.orderIndex = c);
});
const h = this.columnsRef[e].locked && this.columnsRef[t].locked;
Dt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), Gt(this._columnsMap, this.columnsRef, h || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
const u = this.getColumns();
this.$emit("columnreorder", {
target: this,
columns: u,
event: s,
prev: e,
next: t
}), this.gridStateContext.columnsstatechange({
columnsState: this.currentColumnsState
});
},
groupReorder(e, t, s) {
var o;
const i = (o = this.gridStateContext.group) == null ? void 0 : o.value;
i !== void 0 && (i.splice(t, 0, ...i.splice(e, 1)), this.groupChangeHandler(i, s));
},
columnToGroup(e, t, s) {
var n;
const i = this.columnsRef[e].field;
if (!i)
return;
const o = (((n = this.gridStateContext.group) == null ? void 0 : n.value) || []).slice();
o.splice(t, 0, {
field: i
}), this.groupChangeHandler(o, s);
},
resetTableWidth() {
var i;
let e = 0;
if (!this.columnResize.colGroupMain)
return;
const t = (i = this.columnResize.colGroupMain) == null ? void 0 : i.children;
for (let o = 0; o < t.length; o++) {
const n = t[o].width;
if (!n)
return;
e += parseFloat(n.toString());
}
e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.stickyHeaderRef && this.stickyHeaderRef.setWidth(e), this.stickyFooterRef && this.stickyFooterRef.setWidth(e), this.pinnedTopRef && this.pinnedTopRef.setWidth(e), this.pinnedBottomRef && this.pinnedBottomRef.setWidth(e);
const s = Be(this, "table");
s && e && (s.style.width = e + "px"), this.stickyFooterRef && this.setStickyFooterOffset();
},
setStickyFooterOffset() {
const e = this.containerElementRef, t = e ? e.scrollWidth > e.clientWidth : !1;
this.stickyFooterRef && (this.stickyFooterRef.$el.style.marginBlockEnd = t ? "var(--kendo-scrollbar-width, 0px)" : "");
},
onResize(e, t, s, i, o, n, r) {
this.resetTableWidth(), this.shouldUpdateLeftRightRef = !0, this.resizedRef = !0, this.$emit("columnresize", {
columns: this.getColumns(),
index: e,
targetColumnId: r,
event: i,
newWidth: t,
oldWidth: s,
end: o,
target: this
}), o && this.gridStateContext.columnsstatechange({
columnsState: n
});
},
initColumnsState(e, t) {
const s = (i) => {
var n;
const o = t.find((r) => r.id === i.id);
if (o) {
const r = {
...o
};
return r.children = (n = i.children) == null ? void 0 : n.map(s), r;
}
return i;
};
this.currentColumnsState = e.filter((i) => i.parentIndex === -1).map(s);
},
configureColumns(e, t) {
e.filter((n) => n.columnType === "checkbox").forEach((n) => {
n.width = n.width || "50px", n.defaultCell = k(Xe), n.defaultHeaderCell = k(st), n._type = "edit", n.columnMenu = !1;
}), this.$props.selectedField && this.columnsRef.filter((n) => n.field === this.$props.selectedField).forEach((n) => {
n.width = n.width || "50px", n.defaultCell = k(Xe), n.defaultHeaderCell = k(st), n.columnMenu = !1;
}), this.$props.pinnable && e.filter((n) => n.columnType === "pin").forEach((n) => {
n.width = n.width || "48px", n.defaultCell = k(vs), n.defaultHeaderCell = k(zt), n.sortable = !1, n.filterable = !1, n.editable = !1;
});
const s = Ze(this.currentColumnsState);
this.initColumnsState(e, s);
const i = {
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 o = 0;
if (this.detailExpandable.enabled && this.$props.detail && !this.$props.expandField) {
const n = {
...i,
_type: "expand",
id: M.generateNavigatableId(`${o++}`, "expand", "column"),
defaultCell: k(Ye),
field: this.detailExpandable.column,
headerClassName: this.hierarchClass
};
e.unshift(n), this.currentColumnsState.unshift(s.find((r) => r.id === n.id) || n);
}
this.$props.expandField && K.call(this, "expandchange") && this.$props.detail && (e.unshift({
...i,
defaultCell: k(Ye),
field: this.$props.expandField,
headerClassName: "k-hierarchy-cell k-header",
id: M.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
...this.expandColumn
}), o++);
for (let n = 0; n < t; n++) {
const r = {
...i,
isAccessible: !1,
defaultCell: k(tt),
id: M.generateNavigatableId(`${o++}`, "group", "column"),
field: "value",
locked: this.$props.lockGroups,
columnMenu: !1
};
e.unshift(r), this.currentColumnsState.unshift(s.find((a) => a.id === r.id) || r);
}
e.slice(o).forEach((n) => {
n.parentIndex >= 0 && (n.parentIndex += o), n.rowSpannable = n.rowSpannable !== void 0 ? et(n.rowSpannable) : this.computedRowSpannable;
});
},
initColumns(e, t) {
var n;
this.columnsRef = this.readColumnElements();
const s = (n = this.gridStateContext.group) == null ? void 0 : n.value;
this.columnsRef.filter((r) => !r.hidden).length === 0 && (this.columnsRef = ds(e, s, {
column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
}, {
prevId: 0,
idPrefix: this.idPrefix
})), this.configureColumns(this.columnsRef, t);
const [i, o] = this.filterColumns(this.columnsRef);
this.columnsRef = i, this.hiddenColumnsRef = o, this._columnsMap = hs(this.columnsRef, !0);
},
resolveTitle(e) {
const t = this.findColumnByField(e), s = t && (t.title || t.field);
return s === void 0 ? e : s;
},
findColumnByField(e) {
let t;
return this.$props.columns.forEach((s) => {
const i = this.searchColumn(s, e);
i && (t = i);
}), t;
},
searchColumn(e, t) {
if (e.field === t)
return e;
if (e.children) {
let s, i = null;
for (s = 0; i == null && s < e.children.length; s++)
i = this.searchColumn(e.children[s], t);
return i;
}
return null;
},
getDataState() {
var n, r, a, h, u;
const e = (n = this.gridStateContext.sort) == null ? void 0 : n.value, t = (r = this.gridStateContext.filter) == null ? void 0 : r.value, s = (a = this.gridStateContext.skip) == null ? void 0 : a.value, i = (h = this.gridStateContext.take) == null ? void 0 : h.value, o = (u = this.gridStateContext.group) == null ? void 0 : u.value;
return {
filter: t,
sort: e,
skip: s,
take: i !== void 0 ? i : this.$props.pageSize,
group: o
};
},
getArguments(e) {
return {
event: e,
target: this
};
},
getLeafDataItems() {
return this.dataRef.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((s) => {
t++, s.expanded !== !1 && s.items && (t = this.addSubItems(s.items, t)), this.group && this.group.length && (this.$props.groupable.footer === "always" || s.expanded !== !1 && s.items && this.$props.groupable.footer === "visible") && t++;
}), t;
},
searchChange(e) {
const t = this.$props.searchFields || this.columnsRef.map((o) => o.field) || [], s = e.event.target.value, i = {
logic: "or",
filters: t.filter((o) => o !== void 0).map((o) => {
var n;
return typeof o == "string" ? {
field: o,
value: s,
operator: "contains"
} : {
value: s,
operator: (n = o.operator) != null ? n : "contains",
field: o.field,
ignoreCase: o.ignoreCase
};
})
};
this.raiseDataEvent("searchchange", {
search: i
}, {
skip: 0
}, e);
},
getCellsToRender(e, t) {
var n;
const s = [];
let i = null, o = 0;
if (t.forEach((r, a) => {
const h = parseFloat((r.width || "").toString()) || 10;
if (o) {
o--, i && (i.width += h);
return;
}
const u = Math.min(ls(r, e), t.length - a);
o = u - 1, i = {
width: h,
colSpan: u,
columnIndex: a
}, s.push(i);
}), this.$props.columnVirtualization) {
const r = this.scrollLeftRef || 0, a = this.tableWidth || parseFloat((((n = this.$attrs.style) == null ? void 0 : n.width) || "").toString());
return Ss({
cellModels: s,
columns: t,
tableViewPortWidth: a,
scrollLeft: r
});
}
return s;
},
calcVirtualPageSize() {
const {
pageable: e,
take: t,
pageSize: s
} = this.$props;
if (!this.isVirtualScroll)
return 0;
if (!e) {
if (t)
return t;
if (s)
return s;
}
const i = this.$props.rowHeight || this._minRowHeightRef, o = this._containerHeightRef;
return o && i ? Math.ceil(o / i * 1.5) : 0;
},
getRowPinPosition(e) {
var n, r;
const {
dataItemKey: t = ""
} = this.$props, s = ((n = this.gridStateContext.pinnedTopRows) == null ? void 0 : n.value) || [], i = ((r = this.gridStateContext.pinnedBottomRows) == null ? void 0 : r.value) || [];
if (!t || !e)
return "none";
const o = e[t];
return s != null && s.some((a) => a[t] === o) ? "top" : i != null && i.some((a) => a[t] === o) ? "bottom" : "none";
},
handleRowPin(e, t) {
var u, p, c, f;
if (!this.$props.pinnable)
return;
const {
dataItemKey: s = ""
} = this.$props, i = ((u = this.gridStateContext.pinnedTopRows) == null ? void 0 : u.value) || [], o = ((p = this.gridStateContext.pinnedBottomRows) == null ? void 0 : p.value) || [], n = t[s], r = i.filter((m) => m[s] !== n), a = o.filter((m) => m[s] !== n);
let h;
switch (e) {
case "pinTop":
h = {
pinnedTopRows: [...r, t],
pinnedBottomRows: a,
dataItem: t
};
break;
case "pinBottom":
h = {
pinnedTopRows: r,
pinnedBottomRows: [...a, t],
dataItem: t
};
break;
case "unpin":
h = {
pinnedTopRows: r,
pinnedBottomRows: a,
dataItem: t
};
break;
default:
return;
}
(f = (c = this.gridStateContext).rowpinchange) == null || f.call(c, h);
},
pinnedSelectionRelease(e, t) {
const s = this.$props.dataItemKey;
if (!s || !t)
return;
const i = E(s), o = this.getLeafDataItems().findIndex((n) => i(n) === i(t));
o !== -1 && this.selectionRelease({
...e,
startRowIndex: o,
endRowIndex: o
});
}
},
provide() {
return {
gridContext: {
dataItemKey: this.$props.dataItemKey,
searchChange: this.searchChange,
selectionRelease: this.selectionRelease,
pinnedSelectionRelease: this.pinnedSelectionRelease,
dispatchGroupExpand: this.handleGroupExpandAction,
dispatchDetailExpand: this.handleDetailExpandAction,
scrollToStickyGroup: this.scrollToStickyGroup,
getCellPositionStyle: this.getCellPositionStyle,
onRowPin: this.handleRowPin,
getRowPinPosition: this.getRowPinPosition,
onContextMenu: this.triggerCellContextMenu,
exportAsCsv: this.exportAsCsv
},
sticky: this.sticky
};
},
setup(e) {
const t = R(null), s = R(null), i = R(null), o = R(null), n = R(null), r = R(null), a = R(null), h = R([]), u = R([]), p = R(null), c = R(null), f = R(null), m = R(null), I = R(null), C = R(null), $ = R(null), v = R(!0), H = R(!1), b = new ss(), P = R(0), V = xt(bs, {}), Z = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, z = typeof e.groupable == "object" && !!e.groupable.stickyFooters, O = R([]), N = _e(() => {
var q, G;
return !!((G = (q = V.group) == null ? void 0 : q.value) != null && G.length);
}), D = null, T = R(void 0), W = R({
headerItems: [],
footerItems: []
}), {
scrollToStickyGroup: U,
update: j
} = Is({
enabled: Z,
enabledFooters: z,
flatData: O,
containerRef: p,
stickyHeaderRef: c,
stickyFooterRef: f,
tableBodyRef: C,
rowHeight: e.rowHeight,
isGrouped: N,
virtualSkipRef: P,
rowHeightServiceRef: _e(() => b == null ? void 0 : b.rowHeightService)
});
return {
rowIndexRef: T,
observerRef: D,
dataRef: O,
groupPanelDivRef: t,
dropElementClueRef: s,
dragElementClueRef: i,
headerRef: o,
footerRef: n,
gridNavRef: r,
colGroupRef: a,
scrollContainerRef: p,
tableBodyRef: C,
gridStateContext: V,
shouldUpdateLeftRightRef: v,
resizedRef: H,
currentColumnsState: e.columnsState,
vsRef: b,
virtualSkipRef: P,
stickyHeaderItems: h,
stickyHeaderRef: c,
stickyFooterItems: u,
stickyFooterRef: f,
pinnedTopRef: m,
pinnedBottomRef: I,
csvExportRef: $,
sticky: W,
scrollToStickyGroup: U,
updateStickyGroups: j
};
},
render() {
var Ce, be, Se, xe, Ie, ve, $e, we, ye, ke, He, Te, Ee, Me, Pe, ze, De, Ge;
const e = (Ce = this.gridStateContext.sort) == null ? void 0 : Ce.value, t = (be = this.gridStateContext.filter) == null ? void 0 : be.value, s = (Se = this.gridStateContext.search) == null ? void 0 : Se.value, i = (xe = this.gridStateContext.select) == null ? void 0 : xe.value, o = (Ie = this.gridStateContext.skip) == null ? void 0 : Ie.value, n = (ve = this.gridStateContext.take) == null ? void 0 : ve.value, r = ($e = this.gridStateContext.group) == null ? void 0 : $e.value, a = (we = this.gridStateContext.groupExpand) == null ? void 0 : we.value, h = (ye = this.gridStateContext.detailExpand) == null ? void 0 : ye.value, u = (r == null ? void 0 : r.length) || 0, p = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyHeaders, c = typeof this.$props.groupable == "object" && !!this.$props.groupable.stickyFooters, f = !!(r != null && r.length);
let m;
this.currentColumnsState = (ke = this.gridStateContext.columnsState) == null ? void 0 : ke.value;
const I = this.$props.autoProcessData === !0 ? {
group: !0,
sort: !0,
filter: !0,
search: !0,
page: !0
} : this.$props.autoProcessData;
let C;
const $ = M.getIdPrefix(this.navigation);
let v = [];
Array.isArray(this.$props.dataItems) ? (v = this.$props.dataItems, C = (He = this.$props.total) != null ? He : v.length) : (v = ((Te = as(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Me = this.$props.total) != null ? Me : (Ee = this.$props.dataItems) == null ? void 0 : Ee.total) != null ? Pe : v.length);
const H = this.$props.groupable === !0 || Y(this.$props.groupable) && this.$props.groupable.enabled !== !1;
this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = H, this._virtualPageSize = this.calcVirtualPageSize();
const b = v.length === C, P = Y(this.$props.groupable) && this.$props.groupable.footer || "none";
if (I) {
const l = I.page && !(this.isVirtualScroll && !this.$props.pageable), {
data: S,
total: y
} = Cs(v, {
group: I.group ? r : void 0,
sort: I.sort ? e : void 0,
filter: Et(I.filter ? t : void 0, I.search ? s : void 0),
...l ? {
take: this.$props.pageable ? n || 10 : n,
skip: o || 0
} : {}
});
v = S, C = (ze = this.$props.total) != null ? ze : y;
}
const {
resolvedGroupsCount: V,
flattedData: Z
} = this.getFlatData(v, P, b ? 0 : this.$props.skip || 0, r, h, a, this.$props.dataItemKey);
this.dataRef = Z;
const z = this.virtualSkipRef || 0;
if (this._virtualTotal = C, this.isVirtualScroll) {
let l = o || 0;
if ((f || this.$props.pageable) && (l = z, this._virtualTotal = this.dataRef.length), b || f || this.$props.pageable)
if (this._virtualPageSize === 0) {
const S = Math.min(n || this.$props.pageSize || 20, this.dataRef.length);
m = this.dataRef.slice(l, l + S);
} else
m = this.dataRef.slice(l, l + this._virtualPageSize);
}
this.initializeVirtualization();
const O = (De = this.selectable) != null && De.drag ? "none" : void 0;
this.initColumns(this.$props.dataItems, V), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = It(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
const N = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), W = H && d(Yt, {
ref: (l) => {
this.groupPanelDivRef = l;
},
group: r || [],
ariaControls: this._gridRoleElementId,
onGroupChange: this.groupChangeHandler,
onPressHandler: this.dragLogic.pressHandler,
onDragHandler: this.dragLogic.dragHandler,
onReleaseHandler: this.dragLogic.releaseHandler,
resolveTitle: this.resolveTitle
}, null), U = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, j = [U && d(rs, {
ref: (l) => {
this.dropElementClueRef = l;
}
}, null), U && d(ns, {
ref: (l) => {
this.dragElementClueRef = l;
}
}, null)], q = this.showLicenseWatermark ? d(vt, {
message: this.licenseMessage
}, null) : null, G = this.$attrs.style, ht = G && Y(G) && G["width"] || "";
this.tableWidth = parseFloat(ht.toString());
const ct = T.findIndex((l) => typeof l.colSpan == "function") > -1;
let J;
J = this.getCellsToRender({}, T);
const F = T.map(function(l, S) {
return d("col", {
key: l.id || `col-${S}`,
width: l.width !== void 0 ? Math.floor(parseFloat(l.width.toString())) : void 0
}, null);
}, this), pe = d(qt, {
size: this.$props.size,
columnResize: this.columnResize,
staticHeaders: this.$props.scrollable !== "none",
ref: (l) => {
this.headerRef = l;
},
onHeaderscroll: this.onHeaderScroll,
headerRow: d(Jt, {
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 || Qe,
onFilterChange: this.filterChangeHandler,
columnMenu: this.$props.columnMenu,
columnMenuIcon: this.$props.columnMenuIcon,
columnMenuAnimate: this.$props.columnMenuAnimate,
onSelectionchange: this.onHeaderSelectionChangeHandler,
columns: this.columnsRef,
cellsToRender: J,
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,
cells: this.$props.cells,
isRtl: this.isRtl,
isColCountDefined: this.getAriaColCount !== void 0,
headerSelectionValue: !!(i && this.dataRef.filter((l) => l.rowType === "data").every((l) => i && this.$props.dataItemKey && E(this.$props.dataItemKey)(l.dataItem) !== void 0 ? i[E(this.$props.dataItemKey)(l.dataItem)] : void 0)),
filterRow: this.$props.filterable && d(Xt, {
grid: this,
size: this.$props.size,
columns: this.columnsRef,
columnsMap: this._columnsMap,
cellsToRender: J,
columnVirtualization: this.$props.columnVirtualization,
filter: t,
filterOperators: this.$props.filterOperators || Qe,
onFilterchange: this.filterChangeHandler,
sort: this.$props.sort,
cellRender: this.$props.filterCellRender,
cells: this.$props.cells,
isRtl: this.isRtl,
ariaRowIndex: this._columnsMap.length + 1
}, null) || void 0
}, null),
cols: F
}, null), ue = this.columnsRef.some((l) => {
var S;
return !!(l.footerCell || (S = l.cells) != null && S.footerCell);
}) || (Ge = this.$props.cells) != null && Ge.footerCell ? d(Qt, {
size: this.$props.size,
columnResize: this.columnResize,
staticHeaders: this.$props.scrollable !== "none",
ref: (l) => {
this.footerRef = l;
},
row: d(Zt, {
isRtl: this.isRtl,
rowIndex: this.getAriaRowCount + 1,
columns: this.columnsRef,
cells: this.$props.cells
}, null),
cols: F
}, null) : d("span", null, null), _ = {
leafColumns: T,
cellsToRender: J,
selectedField: this.$props.selectedField,
dataItemKey: this.$props.dataItemKey,
select: i,
highlight: this.$props.highlight,
editField: this.$props.editField,
cellRender: this.$props.cellRender,
cells: this.$props.cells,
getCellsToRender: this.getCellsToRender,
hasDynamicColSpan: ct,
itemChange: this.itemChange,
selectionChangeHandler: this.selectionChangeHandler,
editHandler: this.editHandler,
removeHandler: this.removeHandler,
saveHandler: this.saveHandler,
cancelHandler: this.cancelHandler,
cellClickHandler: this.cellClickHandler,
cellKeydownHandler: this.cellKeydownHandler,
computedCollapsed: this.computedCollapsed,
uniqueField: this.$props.uniqueField,
columnsRef: this.columnsRef,
isRtl: this.isRtl,
idPrefix: $
}, pt = function(l, S, y, oe, ne) {
return xs(_, l, S, y, oe, ne);
};
let ut = 0, ee = [];
const te = !this.dataRef.length, fe = (l) => l >= this.dataRef.length - ut;
let se = 0;
if (this.dataRef.length) {
const l = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
let S = this.$props.skip || 0, y = -1, oe = 0;
const ne = this.computedRowSpannable.enabled ? {} : void 0;
if (this.isVirtualScroll) {
if (z > 0) {
const g = this.dataRef.slice(0, z).filter((A) => A.rowType === "data").length;
y += g, S += z;
}
!this.$props.pageable && b && (y += this.$props.skip || 0);
}
ee = (m || this.dataRef).map(function(g, A) {
g.rowType === "data" && y++;
const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && E(this.$props.dataItemKey)(g.dataItem), ae = A + S, le = Fe || "ai" + ae, de = le + "_1", X = pt.call(this, g, le, y, re, ne), Rt = g.rowType === "data" ? this.pinnedSourceSet.has(g.dataItem) : !1, Ct = T.length - (this.detailExpandable.enabled ? 1 : 0) - ((r == null ? void 0 : r.length) || 0) || 1;
return se = ae + l + oe, [d(gs, {
key: le,
item: g,
dataIndex: y,
ariaRowIndex: se,
absoluteRowIndex: ae,
isAltRow: re,
isHidden: fe(A),
rowHeight: this.$props.rowHeight,
isSelected: X.isSelected,
isHighlighted: X.isHighlighted,
isInEdit: X.isInEdit,
rowType: g.rowType,
onRowclick: (L) => this.rowClick(L, g),
onRowdblclick: (L) => this.rowDoubleClick(L, g),
render: this.$props.rowRender,
class: this.$props.rowClass ? this.$props.rowClass(g) : "",
isPinned: Rt,
rows: this.$props.rows
}, {
default: () => [X.row]
}), this.$props.detail && g.rowType === "data" && (g.expanded || g.dataItem.expanded) && d("tr", {
key: de,
class: re ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
style: {
visibility: fe(A) ? "hidden" : "",
height: this.$props.detailRowHeight + "px"
},
role: "row",
"aria-rowindex": se
}, [r == null ? void 0 : r.map(function(L) {
return d(tt, {
id: "",
dataIndex: g.dataIndex,
field: L.field,
dataItem: g.dataItem,
key: `group-${L.field}-${g.dataIndex}`,
locked: this.$props.lockGroups,
group: g.group
}, null);
}, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Ut, {
id: M.generateNavigatableId(`${de}-dhcell`, $)
}, null), d(jt, {
dataItem: g.dataItem,
dataIndex: g.dataIndex,
colSpan: Ct,
ariaColIndex: 2 + (r ? r.length : 0),
detail: this.$props.detail,
id: M.generateNavigatableId(`${de}-dcell`, $)
}, null)])];
}, this);
}
const ft = this.$props.pageable && d(Mt, {
class: "k-grid-pager",
onPagesizechange: this.pageChangeHandler,
onPagechange: this.pageChangeHandler,
size: this.$props.size,
total: C,
skip: o || 0,
pageSize: (n !== void 0 ? n : this.$props.pageSize) || 10,
messagesMap: nt,
settings: Pt(this.$props.pageable || {})
}, null), me = Ae.call(this, {
h: Le,
template: this.$props.pager,
defaultRendering: ft,
additionalProps: {
...this.$props,
skip: this.$props.skip || 0,
messagesMap: nt
},
additionalListeners: {
pagesizechange: this.pageChangeHandler,
pagechange: this.pageChangeHandler
}
}), mt = (l) => e && e.filter((S) => S.field === l).length > 0, ge = d("colgroup", {
ref: w(this, "colGroup")
}, [T.map(function(l, S) {
return d("col", {
key: l.id || `col-${S}`,
class: mt(l.field) ? "k-sorted" : void 0,
width: l.width !== void 0 ? l.width.toString().indexOf("%") !== -1 ? l.width : Math.floor(parseFloat(l.width.toString())) + "px" : void 0
}, null);
}, this)]), Re = {
height: this.getCorrectHeight,
...this.$attrs.style
}, gt = d("div", {
class: "k-loading-mask"
}, [d("div", {
class: "k-loading-color"
}, null), d("div", {
style: {
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}, [d(Wt, {
size: "large",
type: "converging-spinner"
}, null)])]), ie = this.$props.showLoader && Ae.call(this, {
h: Le,
template: this.$props.loader,
defaultRendering: gt
});
return this.$props.scrollable === "none" ? d(Ke, null, [d(We, {
ref: "navRef",
id: this._gridId,
navigatable: this.$props.navigatable,
scrollable: this.$props.scrollable,
columnVirtualization: this.$props.columnVirtualization
}, {
default: () => [d(Je, {
ref: (l) => {
this.gridNavRef = l;
},
columnsRef: this.columnsRef,
dataRef: this.dataRef,
id: this.$props.id,
dir: this.$props.dir,
style: Re,
class: this.nonscrollableWrapperClass,
onMovetonextpage: this.moveToNextPage,
onMovetoprevpage: this.moveToPrevPage,
onColumnreorder: this.columnReorder,
onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
onNavigationaction: this.navigationActionHandler
}, {
default: () => [N, W, d("div", {
role: "grid",
class: "k-grid-aria-root",
id: this._gridRoleElementId,
"aria-colcount": this.getAriaColCount,
"aria-rowcount": this.getAriaRowCount
}, [d(es, {
selectable: this.computedSelectable,
class: "k-table",
ref: w(this, "table")
}, {
default: () => [ge, pe, d("tbody", {
class: "k-table-tbody",
"data-keyboardnavbody": !0,
ref: w(this, "tableBody")
}, [ee, St(" "), ie]), ue]
}), te && d(ot, {
id: M.generateNavigatableId("no-records", $)
}, {
default: () => [D.length ? D : d(it, null, null)]
})]), me, ie, j]
})]
}), this.renderContextMenu()]) : d(Ke, null, [d(We, {
ref: "navRef",
id: this._gridId,
navigatable: this.$props.navigatable,
scrollable: this.$props.scrollable,
columnVirtualization: this.$props.columnVirtualization
}, {
default: () => [d(Je, {
ref: (l) => {
this.gridNavRef = l;
},
dataRef: this.dataRef,
id: this.$props.id,
dir: this.$props.dir,
style: Re,
class: this.scrollableWrapperClass,
onMovetonextpage: this.moveToNextPage,
onMovetoprevpage: this.moveToPrevPage,
onColumnreorder: this.columnReorder,
onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
onSetcurrentontop: this.setCurrentOnTop,
onNavigationaction: this.navigationActionHandler
}, {
default: () => [N, W, d("div", {
role: "grid",
class: "k-grid-aria-root",
id: this._gridRoleElementId,
"aria-colcount": this.getAriaColCount,
"aria-rowcount": this.getAriaRowCount
}, [pe, this.hasPinnedTopRows && d(lt, {
ref: w(this, "pinnedTop"),
size: this.$props.size,
cols: F,
dataRowContext: _,
position: "top",
pinnedItems: this.sortedPinnedTopRows,
rowHeight: this.$props.rowHeight,
rows: this.$props.rows,
selectable: this.computedSelectable
}, null), d("div", {
class: "k-grid-container",
role: "presentation"
}, [f && p && d(at, {
ref: w(this, "stickyHeader"),
size: this.$props.size,
cols: F,
dataRowContext: _,
position: "top",
groupLevelCount: u,
rowHeight: this.$props.rowHeight
}, null), d("div", {
role: "presentation",
ref: w(this, "scrollContainer"),
class: "k-grid-content k-virtual-content",
onScroll: this.scrollHandler
}, [d("div", {
class: "k-grid-table-wrap",
role: "presentation"
}, [d(ts, {
selectable: this.computedSelectable,
tableClassName: this.gridTableClass,
tableStyle: {
userSelect: O
},
ref: w(this, "table")
}, {
default: () => [ge, d("tbody", {
class: "k-table-tbody",
role: "rowgroup",
"data-keyboardnavbody": !0,
ref: w(this, "tableBody")
}, [ee])]
}), te && d(ot, {
id: M.generateNavigatableId("no-records", $)
}, {
default: () => [D.length ? D : d(it, null, null)]
})]), !te && d("div", {
class: "k-height-container",
role: "presentation"
}, [d("div", {
ref: w(this, "scrollHeightContainer"),
style: this.$props.scrollable === "virtual" ? {
height: this._containerHeightRef + "px"
} : {}
}, null)])]), f && c && d(at, {
ref: w(this, "stickyFooter"),
size: this.$props.size,
cols: F,
dataRowContext: _,
position: "bottom",
groupLevelCount: u,
rowHeight: this.$props.rowHeight
}, null)]), this.hasPinnedBottomRows && d(lt, {
ref: w(this, "pinnedBottom"),
size: this.$props.size,
cols: F,
dataRowContext: _,
position: "bottom",
pinnedItems: this.sortedPinnedBottomRows,
rowHeight: this.$props.rowHeight,
rows: this.$props.rows,
selectable: this.computedSelectable
}, null), ue, q]), me, ie, j]
})]
}), this.renderContextMenu(), this.$props.csv && d($s, {
ref: (l) => {
this.csvExportRef = l;
},
gridProps: this.$props,
csv: this.$props.csv,
fileName: typeof this.$props.csv == "object" ? this.$props.csv.fileName : void 0,
onCsvexport: this.$props.onCsvexport,
columnsState: this.currentColumnsState
}, null)]);
}
});
export {
bi as Grid
};