@progress/kendo-vue-grid 8.3.0-develop.3 → 8.3.0-develop.5

package/Grid.mjs

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { defineComponent as bt, createVNode as d, h as Le, Fragment as Ke, createTextVNode as St, ref as R, inject as It, computed as _e, markRaw as H } from "vue";
-import { isObject as q, cloneArray as xt, canUseDOM as B, WatermarkOverlay as $t, getter as M, getTemplate as Ae, setRef as y, hasListener as L, getComponentElementRef as Be, getRef as S, RowHeightService as wt, setScrollbarWidth as vt, 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 { isObject as q, cloneArray as xt, canUseDOM as B, WatermarkOverlay as $t, getter as M, getTemplate as Ae, setRef as y, hasListener as L, getComponentElementRef as Be, getRef as S, RowHeightService as vt, 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 E, combineFilters as Mt, Pager as Et, 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";
@@ -28,7 +28,7 @@ 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 ls, getColSpan as as, 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 { 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";
@@ -40,12 +40,12 @@ 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 lt } from "./components/StickyGroupTable.mjs";
+import { StickyGroupTable as at } from "./components/StickyGroupTable.mjs";
 import { getRowContents as Is } from "./getRowContents.mjs";
 import { useStickyGroups as xs } from "./hooks/useStickyGroups.mjs";
-import { PinnedRowsTable as at } from "./components/PinnedRowsTable.mjs";
+import { PinnedRowsTable as lt } from "./components/PinnedRowsTable.mjs";
 import { GridPinCell as $s } from "./cells/pincell/GridPinCell.mjs";
-import { contextMenuItemsMap as ws, GridContextMenu as vs, getDefaultBodyContextMenuItems as ys, getDefaultHeadContextMenuItems as ks } from "./contextMenu/GridContextMenu.mjs";
+import { contextMenuItemsMap as vs, GridContextMenu as ws, getDefaultBodyContextMenuItems as ys, getDefaultHeadContextMenuItems as ks } from "./contextMenu/GridContextMenu.mjs";
 import { GridContextMenuItemNames as J, GridContextMenuAnchorPart as dt } from "./contextMenu/enums.mjs";
 const Ri = /* @__PURE__ */ bt({
   name: "KendoGrid",
@@ -329,15 +329,15 @@ const Ri = /* @__PURE__ */ bt({
         field: o,
         ...typeof this.$props.clipboard != "boolean" ? this.$props.clipboard : {},
         ...s
-      }, r = this.getLeafDataItems(), l = Bt({
+      }, 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 = l.copiedItems), L.call(this, "clipboard") && this.$emit("clipboard", {
+      e !== he.paste && (this.previousCopiedItems = a.copiedItems), L.call(this, "clipboard") && this.$emit("clipboard", {
         ...n,
-        ...l
+        ...a
       });
     },
     handleContextMenuSelect(e) {
@@ -349,7 +349,7 @@ const Ri = /* @__PURE__ */ bt({
     },
     renderContextMenu() {
       var e;
-      return d(vs, {
+      return d(ws, {
         show: !!(this.contextMenuState.show && ((e = this.contextMenuItems) != null && e.length)),
         dataItem: this.contextMenuState.dataItem,
         field: this.contextMenuState.field,
@@ -361,17 +361,17 @@ const Ri = /* @__PURE__ */ bt({
     },
     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[t] : void 0, r = n !== void 0 && i.some((p) => p[t] === n), l = n !== void 0 && o.some((p) => p[t] === n);
+      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[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;
+        const c = typeof p == "string" ? vs[p] : p;
         return (c == null ? void 0 : c.name) === J.pinRow && c.items ? {
           ...c,
-          items: c.items.filter((f) => f.name === J.pinTop ? !r : f.name === J.pinBottom ? !l : f.name === J.unpin ? r || l : !0)
+          items: c.items.filter((f) => f.name === J.pinTop ? !r : f.name === J.pinBottom ? !a : f.name === J.unpin ? r || a : !0)
         } : p;
       });
     },
     handleContextMenuItemClick(e) {
-      var i, o, n, r, l, h, u, p;
+      var i, o, n, r, a, h, u, p;
       const t = e.event.event.item, s = {
         event: e.event,
         menuItem: t,
@@ -381,11 +381,11 @@ const Ri = /* @__PURE__ */ bt({
       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, x = c ? "asc" : m, C = t.name ? x : void 0, $ = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((v) => {
+            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, x = c ? "asc" : m, C = t.name ? x : void 0, $ = (((r = this.gridStateContext.sort) == null ? void 0 : r.value) || []).filter((w) => {
               var I;
-              return v.field !== ((I = this.contextMenuColumn) == null ? void 0 : I.field);
+              return w.field !== ((I = this.contextMenuColumn) == null ? void 0 : I.field);
             });
-            C && ((l = this.contextMenuColumn) != null && l.field) && $.push({
+            C && ((a = this.contextMenuColumn) != null && a.field) && $.push({
               field: this.contextMenuColumn.field,
               dir: C
             }), this.sortChangeHandler($, {
@@ -396,14 +396,14 @@ const Ri = /* @__PURE__ */ bt({
         case "SelectRowCommand": {
           const c = e.dataItem;
           if (this.computedSelectable.enabled && c && this.$props.dataItemKey) {
-            const m = M(this.$props.dataItemKey)(c), x = this.getLeafDataItems(), C = x.findIndex((z) => z[this.$props.dataItemKey] === c[this.$props.dataItemKey]), w = 0, $ = this.columnsRef.length - 1, v = {
+            const m = M(this.$props.dataItemKey)(c), x = this.getLeafDataItems(), C = x.findIndex((z) => z[this.$props.dataItemKey] === c[this.$props.dataItemKey]), v = 0, $ = this.columnsRef.length - 1, w = {
               ...this.getArguments(e.event),
               dataItem: c,
               startDataItem: C,
               endDataItem: C,
               startRowIndex: C,
               endRowIndex: C,
-              startColIndex: w,
+              startColIndex: v,
               endColIndex: $,
               dataItems: x,
               ctrlKey: !1,
@@ -418,7 +418,7 @@ const Ri = /* @__PURE__ */ bt({
             }, I = this.computedSelectable.mode === "multiple" ? {
               ...(u = (h = this.gridStateContext.select) == null ? void 0 : h.value) != null ? u : {}
             } : {};
-            I[m] === !0 || Array.isArray(I[m]) && I[m].length === this.columnsRef.length ? delete I[m] : I[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(v, I);
+            I[m] === !0 || Array.isArray(I[m]) && I[m].length === this.columnsRef.length ? delete I[m] : I[m] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0, this.raiseSelectionEvent(w, I);
           }
           break;
         }
@@ -426,8 +426,8 @@ const Ri = /* @__PURE__ */ bt({
           if (this.computedSelectable.enabled && this.$props.dataItemKey) {
             const c = this.getLeafDataItems(), f = {}, m = c[0], x = c[c.length - 1];
             c.forEach((C) => {
-              const w = M(this.$props.dataItemKey)(C);
-              f[w] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
+              const v = M(this.$props.dataItemKey)(C);
+              f[v] = this.computedSelectable.cell ? [...Array(this.columnsRef.length).keys()] : !0;
             }), this.raiseSelectionEvent({
               ...this.getArguments(e.event),
               dataItems: c,
@@ -567,11 +567,11 @@ const Ri = /* @__PURE__ */ bt({
       })];
     },
     getFlatData(e, t, s, i, o, n, r) {
-      const l = [], h = fs(l, e, t, {
+      const a = [], h = fs(a, e, t, {
         index: s
       }, i !== void 0, o, n, this.groupExpandable.defaultExpand, r, this.$props.expandField);
       return {
-        flattedData: l,
+        flattedData: a,
         resolvedGroupsCount: h
       };
     },
@@ -609,7 +609,7 @@ const Ri = /* @__PURE__ */ bt({
           declarationIndex: o,
           parentIndex: n,
           depth: r,
-          colSpan: l,
+          colSpan: a,
           rowSpan: h,
           index: u,
           kFirst: p,
@@ -624,7 +624,7 @@ const Ri = /* @__PURE__ */ bt({
       return t(e);
     },
     setRefs() {
-      var n, r, l, h;
+      var n, r, a, h;
       let e = "$el";
       const t = S(this, "gridNav");
       t && (this._element = t[e]);
@@ -635,7 +635,7 @@ const Ri = /* @__PURE__ */ bt({
       }
       this.stickyHeaderRef = S(this, "stickyHeader"), this.stickyFooterRef = S(this, "stickyFooter"), this.pinnedTopRef = S(this, "pinnedTop"), this.pinnedBottomRef = S(this, "pinnedBottom");
       const i = S(this, "dropElementClue"), o = S(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = S(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 = (l = this.pinnedTopRef) == null ? void 0 : l.colGroupRef, this.columnResize.colGroupPinnedBottom = (h = this.pinnedBottomRef) == null ? void 0 : h.colGroupRef, this._header = S(this, "header"), this._footer = S(this, "footer"), this.resetTableWidth(), vt();
+      this.dragLogic.refDropElementClue(i), this.dragLogic.refDragElementClue(o), this.columnResize.colGroupMain = S(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 = S(this, "header"), this._footer = S(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);
@@ -657,7 +657,7 @@ const Ri = /* @__PURE__ */ bt({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      this.tableBodyRef = S(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 = S(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = S(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new wt(this._virtualTotal, t)));
+      this.tableBodyRef = S(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 = S(this, "scrollContainer"), e.tableBody = this.tableBodyRef, e.scrollHeightContainer = S(this, "scrollHeightContainer"), e.table = this.scrollTableRef, (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new vt(this._virtualTotal, t)));
     },
     setContainerHeight() {
       const e = S(this, "scrollContainer");
@@ -709,13 +709,13 @@ const Ri = /* @__PURE__ */ bt({
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, s = t[e.level];
-      const i = this.$props.uniqueField, o = function(l, h) {
-        return l.value === e.dataItem.value && h === 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 l = s.indexOf(r);
-          l > -1 && s.splice(l, 1);
+          const a = s.indexOf(r);
+          a > -1 && s.splice(a, 1);
         }
       } else
         s ? s.includes(r) || s.push(r) : s = [r];
@@ -749,6 +749,9 @@ const Ri = /* @__PURE__ */ bt({
     cellKeydownHandler(e) {
       this.$emit("cellkeydown", e);
     },
+    navigationActionHandler(e) {
+      this.$emit("navigationaction", e);
+    },
     editHandler(e) {
       this.$emit("edit", {
         dataItem: e
@@ -776,12 +779,12 @@ const Ri = /* @__PURE__ */ bt({
           event: o,
           dataItem: n,
           dataIndex: r,
-          columnIndex: l
+          columnIndex: a
         } = e, h = {
           ...this.getArguments(o),
           dataItem: n,
-          startColIndex: l,
-          endColIndex: l,
+          startColIndex: a,
+          endColIndex: a,
           startRowIndex: r,
           endRowIndex: r,
           dataItems: this.getLeafDataItems(),
@@ -823,19 +826,19 @@ const Ri = /* @__PURE__ */ bt({
       });
       if (i === t)
         return;
-      const o = e.target, n = je(o, "TD"), r = je(o, "TR"), l = _t(n), h = At(r);
-      if (l !== void 0 && h !== void 0) {
+      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: l,
+          startColIndex: a,
           startDataItem: c,
           endDataItem: c,
           endRowIndex: h,
-          endColIndex: l,
+          endColIndex: a,
           ctrlKey: e.ctrlKey,
           altKey: e.altKey,
           metaKey: e.metaKey,
@@ -859,7 +862,7 @@ const Ri = /* @__PURE__ */ bt({
     selectionRelease(e) {
       var t, s, i;
       if (this.computedSelectable.enabled) {
-        const o = this.getLeafDataItems(), n = o[e.startRowIndex], r = o[e.endRowIndex], l = {
+        const o = this.getLeafDataItems(), n = o[e.startRowIndex], r = o[e.endRowIndex], a = {
           event: void 0,
           target: this,
           selectedField: "",
@@ -870,13 +873,13 @@ const Ri = /* @__PURE__ */ bt({
           endDataItem: r,
           ...e
         }, h = Ue({
-          event: l,
+          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(l, h);
+        this.raiseSelectionEvent(a, h);
       }
     },
     clearSelection(e) {
@@ -889,8 +892,8 @@ const Ri = /* @__PURE__ */ bt({
       });
     },
     moveToNextPage(e) {
-      var o, n, r, l;
-      const t = (r = (n = (o = this.gridStateContext.take) == null ? void 0 : o.value) != null ? n : this.$props.pageSize) != null ? r : 0, s = (((l = this.gridStateContext.skip) == null ? void 0 : l.value) || 0) + t, i = this.getTotal();
+      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
@@ -986,8 +989,8 @@ const Ri = /* @__PURE__ */ bt({
           p++;
         while (p < this.columnsRef.length && this.columnsRef[p].depth > n);
         return p;
-      }, l = this.columnsRef.splice(e, r(e) - e);
-      this.columnsRef.splice(e < t ? r(t - l.length) : t, 0, ...l), this.columnsRef.filter((p) => p.declarationIndex >= 0).forEach((p, c) => {
+      }, 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);
@@ -1128,7 +1131,7 @@ const Ri = /* @__PURE__ */ bt({
           locked: this.$props.lockGroups,
           columnMenu: !1
         };
-        e.unshift(r), this.currentColumnsState.unshift(s.find((l) => l.id === r.id) || r);
+        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;
@@ -1170,8 +1173,8 @@ const Ri = /* @__PURE__ */ bt({
       return null;
     },
     getDataState() {
-      var n, r, l, h, u;
-      const e = (n = this.gridStateContext.sort) == null ? void 0 : n.value, t = (r = this.gridStateContext.filter) == null ? void 0 : r.value, s = (l = this.gridStateContext.skip) == null ? void 0 : l.value, i = (h = this.gridStateContext.take) == null ? void 0 : h.value, o = (u = this.gridStateContext.group) == null ? void 0 : u.value;
+      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,
@@ -1225,24 +1228,24 @@ const Ri = /* @__PURE__ */ bt({
       var n;
       const s = [];
       let i = null, o = 0;
-      if (t.forEach((r, l) => {
+      if (t.forEach((r, a) => {
         const h = parseFloat((r.width || "").toString()) || 10;
         if (o) {
           o--, i && (i.width += h);
           return;
         }
-        const u = Math.min(as(r, e), t.length - l);
+        const u = Math.min(ls(r, e), t.length - a);
         o = u - 1, i = {
           width: h,
           colSpan: u,
-          columnIndex: l
+          columnIndex: a
         }, s.push(i);
       }), this.$props.columnVirtualization) {
-        const r = this.scrollLeftRef || 0, l = this.tableWidth || parseFloat((((n = this.$attrs.style) == null ? void 0 : n.width) || "").toString());
+        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: l,
+          tableViewPortWidth: a,
           scrollLeft: r
         });
       }
@@ -1273,7 +1276,7 @@ const Ri = /* @__PURE__ */ bt({
       if (!t || !e)
         return "none";
       const o = e[t];
-      return s != null && s.some((l) => l[t] === o) ? "top" : i != null && i.some((l) => l[t] === o) ? "bottom" : "none";
+      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;
@@ -1281,27 +1284,27 @@ const Ri = /* @__PURE__ */ bt({
         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), l = o.filter((m) => m[s] !== n);
+      } = 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: l,
+            pinnedBottomRows: a,
             dataItem: t
           };
           break;
         case "pinBottom":
           h = {
             pinnedTopRows: r,
-            pinnedBottomRows: [...l, t],
+            pinnedBottomRows: [...a, t],
             dataItem: t
           };
           break;
         case "unpin":
           h = {
             pinnedTopRows: r,
-            pinnedBottomRows: l,
+            pinnedBottomRows: a,
             dataItem: t
           };
           break;
@@ -1341,7 +1344,7 @@ const Ri = /* @__PURE__ */ bt({
     };
   },
   setup(e) {
-    const t = R(null), s = R(null), i = R(null), o = R(null), n = R(null), r = R(null), l = R(null), h = R([]), u = R([]), p = R(null), c = R(null), f = R(null), m = R(null), x = R(null), C = R(null), w = R(!0), $ = R(!1), v = new ss(), I = R(0), z = It(bs, {}), X = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Y = typeof e.groupable == "object" && !!e.groupable.stickyFooters, P = R([]), Q = _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), x = R(null), C = R(null), v = R(!0), $ = R(!1), w = new ss(), I = R(0), z = It(bs, {}), X = typeof e.groupable == "object" && !!e.groupable.stickyHeaders, Y = typeof e.groupable == "object" && !!e.groupable.stickyFooters, P = R([]), Q = _e(() => {
       var K, W;
       return !!((W = (K = z.group) == null ? void 0 : K.value) != null && W.length);
     }), V = null, D = R(void 0), T = R({
@@ -1361,7 +1364,7 @@ const Ri = /* @__PURE__ */ bt({
       rowHeight: e.rowHeight,
       isGrouped: Q,
       virtualSkipRef: I,
-      rowHeightServiceRef: _e(() => v == null ? void 0 : v.rowHeightService)
+      rowHeightServiceRef: _e(() => w == null ? void 0 : w.rowHeightService)
     });
     return {
       rowIndexRef: D,
@@ -1373,14 +1376,14 @@ const Ri = /* @__PURE__ */ bt({
       headerRef: o,
       footerRef: n,
       gridNavRef: r,
-      colGroupRef: l,
+      colGroupRef: a,
       scrollContainerRef: p,
       tableBodyRef: C,
       gridStateContext: z,
-      shouldUpdateLeftRightRef: w,
+      shouldUpdateLeftRightRef: v,
       resizedRef: $,
       currentColumnsState: e.columnsState,
-      vsRef: v,
+      vsRef: w,
       virtualSkipRef: I,
       stickyHeaderItems: h,
       stickyHeaderRef: c,
@@ -1394,8 +1397,8 @@ const Ri = /* @__PURE__ */ bt({
     };
   },
   render() {
-    var Ce, be, Se, Ie, xe, $e, we, ve, ye, ke, He, Te, Me, Ee, 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 = (Ie = this.gridStateContext.select) == null ? void 0 : Ie.value, o = (xe = this.gridStateContext.skip) == null ? void 0 : xe.value, n = ($e = this.gridStateContext.take) == null ? void 0 : $e.value, r = (we = this.gridStateContext.group) == null ? void 0 : we.value, l = (ve = this.gridStateContext.groupExpand) == null ? void 0 : ve.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);
+    var Ce, be, Se, Ie, xe, $e, ve, we, ye, ke, He, Te, Me, Ee, 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 = (Ie = this.gridStateContext.select) == null ? void 0 : Ie.value, o = (xe = this.gridStateContext.skip) == null ? void 0 : xe.value, n = ($e = this.gridStateContext.take) == null ? void 0 : $e.value, r = (ve = this.gridStateContext.group) == null ? void 0 : ve.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 x = this.$props.autoProcessData === !0 ? {
@@ -1406,21 +1409,21 @@ const Ri = /* @__PURE__ */ bt({
       page: !0
     } : this.$props.autoProcessData;
     let C;
-    const w = E.getIdPrefix(this.navigation);
+    const v = E.getIdPrefix(this.navigation);
     let $ = [];
-    Array.isArray(this.$props.dataItems) ? ($ = this.$props.dataItems, C = (He = this.$props.total) != null ? He : $.length) : ($ = ((Te = ls(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Ee = this.$props.total) != null ? Ee : (Me = this.$props.dataItems) == null ? void 0 : Me.total) != null ? Pe : $.length);
-    const v = this.$props.groupable === !0 || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = v, this._virtualPageSize = this.calcVirtualPageSize();
+    Array.isArray(this.$props.dataItems) ? ($ = this.$props.dataItems, C = (He = this.$props.total) != null ? He : $.length) : ($ = ((Te = as(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField)) == null ? void 0 : Te.data) || [], C = (Pe = (Ee = this.$props.total) != null ? Ee : (Me = this.$props.dataItems) == null ? void 0 : Me.total) != null ? Pe : $.length);
+    const w = this.$props.groupable === !0 || q(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = w, this._virtualPageSize = this.calcVirtualPageSize();
     const I = $.length === C, z = q(this.$props.groupable) && this.$props.groupable.footer || "none";
     if (x) {
-      const a = x.page && !(this.isVirtualScroll && !this.$props.pageable), {
+      const l = x.page && !(this.isVirtualScroll && !this.$props.pageable), {
         data: b,
         total: k
       } = Cs($, {
         group: x.group ? r : void 0,
         sort: x.sort ? e : void 0,
         filter: Mt(x.filter ? t : void 0, x.search ? s : void 0),
-        ...a ? {
+        ...l ? {
           take: this.$props.pageable ? n || 10 : n,
           skip: o || 0
         } : {}
@@ -1430,24 +1433,24 @@ const Ri = /* @__PURE__ */ bt({
     const {
       resolvedGroupsCount: X,
       flattedData: Y
-    } = this.getFlatData($, z, I ? 0 : this.$props.skip || 0, r, h, l, this.$props.dataItemKey);
+    } = this.getFlatData($, z, I ? 0 : this.$props.skip || 0, r, h, a, this.$props.dataItemKey);
     this.dataRef = Y;
     const P = this.virtualSkipRef || 0;
     if (this._virtualTotal = C, this.isVirtualScroll) {
-      let a = o || 0;
-      if ((f || this.$props.pageable) && (a = P, this._virtualTotal = this.dataRef.length), I || f || this.$props.pageable)
+      let l = o || 0;
+      if ((f || this.$props.pageable) && (l = P, this._virtualTotal = this.dataRef.length), I || f || this.$props.pageable)
         if (this._virtualPageSize === 0) {
           const b = Math.min(n || this.$props.pageSize || 20, this.dataRef.length);
-          m = this.dataRef.slice(a, a + b);
+          m = this.dataRef.slice(l, l + b);
         } else
-          m = this.dataRef.slice(a, a + this._virtualPageSize);
+          m = this.dataRef.slice(l, l + this._virtualPageSize);
     }
     this.initializeVirtualization();
     const Q = (De = this.selectable) != null && De.drag ? "none" : void 0;
     this.initColumns(this.$props.dataItems, X), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this.columnsRef, this.columnResize.columnsState = xt(this.currentColumnsState || []), this.dragLogic.columns = this.columnsRef;
-    const V = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((a) => a.children.length === 0), O = v && d(Yt, {
-      ref: (a) => {
-        this.groupPanelDivRef = a;
+    const V = this.$props.toolbar, D = this.$props.noRecords, T = this.columnsRef.filter((l) => l.children.length === 0), O = w && d(Yt, {
+      ref: (l) => {
+        this.groupPanelDivRef = l;
       },
       group: r || [],
       ariaControls: this._gridRoleElementId,
@@ -1457,31 +1460,31 @@ const Ri = /* @__PURE__ */ bt({
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
     }, null), N = (this.dragLogic.reorderable || this.dragLogic.groupable) && B && document && document.body, K = [N && d(rs, {
-      ref: (a) => {
-        this.dropElementClueRef = a;
+      ref: (l) => {
+        this.dropElementClueRef = l;
       }
     }, null), N && d(ns, {
-      ref: (a) => {
-        this.dragElementClueRef = a;
+      ref: (l) => {
+        this.dragElementClueRef = l;
       }
     }, null)], W = this.showLicenseWatermark ? d($t, {
       message: this.licenseMessage
     }, null) : null, Z = this.$attrs.style, ht = Z && q(Z) && Z["width"] || "";
     this.tableWidth = parseFloat(ht.toString());
-    const ct = T.findIndex((a) => typeof a.colSpan == "function") > -1;
+    const ct = T.findIndex((l) => typeof l.colSpan == "function") > -1;
     let U;
     U = this.getCellsToRender({}, T);
-    const G = T.map(function(a, b) {
+    const G = T.map(function(l, b) {
       return d("col", {
-        key: a.id || `col-${b}`,
-        width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
+        key: l.id || `col-${b}`,
+        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: (a) => {
-        this.headerRef = a;
+      ref: (l) => {
+        this.headerRef = l;
       },
       onHeaderscroll: this.onHeaderScroll,
       headerRow: d(Jt, {
@@ -1512,7 +1515,7 @@ const Ri = /* @__PURE__ */ bt({
         cells: this.$props.cells,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        headerSelectionValue: !!(i && this.dataRef.filter((a) => a.rowType === "data").every((a) => i && this.$props.dataItemKey && M(this.$props.dataItemKey)(a.dataItem) !== void 0 ? i[M(this.$props.dataItemKey)(a.dataItem)] : void 0)),
+        headerSelectionValue: !!(i && this.dataRef.filter((l) => l.rowType === "data").every((l) => i && this.$props.dataItemKey && M(this.$props.dataItemKey)(l.dataItem) !== void 0 ? i[M(this.$props.dataItemKey)(l.dataItem)] : void 0)),
         filterRow: this.$props.filterable && d(Xt, {
           grid: this,
           size: this.$props.size,
@@ -1531,15 +1534,15 @@ const Ri = /* @__PURE__ */ bt({
         }, null) || void 0
       }, null),
       cols: G
-    }, null), ue = this.columnsRef.some((a) => {
+    }, null), ue = this.columnsRef.some((l) => {
       var b;
-      return !!(a.footerCell || (b = a.cells) != null && b.footerCell);
+      return !!(l.footerCell || (b = l.cells) != null && b.footerCell);
     }) || (Ge = this.$props.cells) != null && Ge.footerCell ? d(Qt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
-      ref: (a) => {
-        this.footerRef = a;
+      ref: (l) => {
+        this.footerRef = l;
       },
       row: d(Zt, {
         isRtl: this.isRtl,
@@ -1572,15 +1575,15 @@ const Ri = /* @__PURE__ */ bt({
       uniqueField: this.$props.uniqueField,
       columnsRef: this.columnsRef,
       isRtl: this.isRtl,
-      idPrefix: w
-    }, pt = function(a, b, k, oe, ne) {
-      return Is(_, a, b, k, oe, ne);
+      idPrefix: v
+    }, pt = function(l, b, k, oe, ne) {
+      return Is(_, l, b, k, oe, ne);
     };
     let ut = 0, ee = [];
-    const te = !this.dataRef.length, fe = (a) => a >= this.dataRef.length - ut;
+    const te = !this.dataRef.length, fe = (l) => l >= this.dataRef.length - ut;
     let se = 0;
     if (this.dataRef.length) {
-      const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+      const l = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
       let b = this.$props.skip || 0, k = -1, oe = 0;
       const ne = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
@@ -1592,13 +1595,13 @@ const Ri = /* @__PURE__ */ bt({
       }
       ee = (m || this.dataRef).map(function(g, A) {
         g.rowType === "data" && k++;
-        const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && M(this.$props.dataItemKey)(g.dataItem), le = A + b, ae = Fe || "ai" + le, de = ae + "_1", j = pt.call(this, g, ae, k, 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 = le + a + oe, [d(gs, {
-          key: ae,
+        const re = g.dataIndex % 2 !== 0, Fe = this.$props.dataItemKey && M(this.$props.dataItemKey)(g.dataItem), ae = A + b, le = Fe || "ai" + ae, de = le + "_1", j = pt.call(this, g, le, k, 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: k,
           ariaRowIndex: se,
-          absoluteRowIndex: le,
+          absoluteRowIndex: ae,
           isAltRow: re,
           isHidden: fe(A),
           rowHeight: this.$props.rowHeight,
@@ -1634,14 +1637,14 @@ const Ri = /* @__PURE__ */ bt({
             group: g.group
           }, null);
         }, this), (this.$props.expandField || this.detailExpandable.enabled) && d(Ut, {
-          id: E.generateNavigatableId(`${de}-dhcell`, w)
+          id: E.generateNavigatableId(`${de}-dhcell`, v)
         }, null), d(jt, {
           dataItem: g.dataItem,
           dataIndex: g.dataIndex,
           colSpan: Ct,
           ariaColIndex: 2 + (r ? r.length : 0),
           detail: this.$props.detail ? this.$props.detail : void 0,
-          id: E.generateNavigatableId(`${de}-dcell`, w)
+          id: E.generateNavigatableId(`${de}-dcell`, v)
         }, null)])];
       }, this);
     }
@@ -1668,13 +1671,13 @@ const Ri = /* @__PURE__ */ bt({
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), mt = (a) => e && e.filter((b) => b.field === a).length > 0, ge = d("colgroup", {
+    }), mt = (l) => e && e.filter((b) => b.field === l).length > 0, ge = d("colgroup", {
       ref: y(this, "colGroup")
-    }, [T.map(function(a, b) {
+    }, [T.map(function(l, b) {
       return d("col", {
-        key: a.id || `col-${b}`,
-        class: mt(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
+        key: l.id || `col-${b}`,
+        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,
@@ -1706,8 +1709,8 @@ const Ri = /* @__PURE__ */ bt({
       columnVirtualization: this.$props.columnVirtualization
     }, {
       default: () => [d(Je, {
-        ref: (a) => {
-          this.gridNavRef = a;
+        ref: (l) => {
+          this.gridNavRef = l;
         },
         columnsRef: this.columnsRef,
         dataRef: this.dataRef,
@@ -1718,7 +1721,8 @@ const Ri = /* @__PURE__ */ bt({
         onMovetonextpage: this.moveToNextPage,
         onMovetoprevpage: this.moveToPrevPage,
         onColumnreorder: this.columnReorder,
-        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler
+        onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
+        onNavigationaction: this.navigationActionHandler
       }, {
         default: () => [V, O, d("div", {
           role: "grid",
@@ -1737,7 +1741,7 @@ const Ri = /* @__PURE__ */ bt({
             ref: y(this, "tableBody")
           }, [ee, St("  "), ie]), ue]
         }), te && d(ot, {
-          id: E.generateNavigatableId("no-records", w)
+          id: E.generateNavigatableId("no-records", v)
         }, {
           default: () => [D.length ? D : d(it, null, null)]
         })]), me, ie, K]
@@ -1750,8 +1754,8 @@ const Ri = /* @__PURE__ */ bt({
       columnVirtualization: this.$props.columnVirtualization
     }, {
       default: () => [d(Je, {
-        ref: (a) => {
-          this.gridNavRef = a;
+        ref: (l) => {
+          this.gridNavRef = l;
         },
         dataRef: this.dataRef,
         id: this.$props.id,
@@ -1762,7 +1766,8 @@ const Ri = /* @__PURE__ */ bt({
         onMovetoprevpage: this.moveToPrevPage,
         onColumnreorder: this.columnReorder,
         onKeyboardselectionchange: this.onKeyboardSelectionChangeHandler,
-        onSetcurrentontop: this.setCurrentOnTop
+        onSetcurrentontop: this.setCurrentOnTop,
+        onNavigationaction: this.navigationActionHandler
       }, {
         default: () => [V, O, d("div", {
           role: "grid",
@@ -1770,7 +1775,7 @@ const Ri = /* @__PURE__ */ bt({
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [pe, this.hasPinnedTopRows && d(at, {
+        }, [pe, this.hasPinnedTopRows && d(lt, {
           ref: y(this, "pinnedTop"),
           size: this.$props.size,
           cols: G,
@@ -1783,7 +1788,7 @@ const Ri = /* @__PURE__ */ bt({
         }, null), d("div", {
           class: "k-grid-container",
           role: "presentation"
-        }, [f && p && d(lt, {
+        }, [f && p && d(at, {
           ref: y(this, "stickyHeader"),
           size: this.$props.size,
           cols: G,
@@ -1814,7 +1819,7 @@ const Ri = /* @__PURE__ */ bt({
             ref: y(this, "tableBody")
           }, [ee])]
         }), te && d(ot, {
-          id: E.generateNavigatableId("no-records", w)
+          id: E.generateNavigatableId("no-records", v)
         }, {
           default: () => [D.length ? D : d(it, null, null)]
         })]), !te && d("div", {
@@ -1825,7 +1830,7 @@ const Ri = /* @__PURE__ */ bt({
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), f && c && d(lt, {
+        }, null)])]), f && c && d(at, {
           ref: y(this, "stickyFooter"),
           size: this.$props.size,
           cols: G,
@@ -1833,7 +1838,7 @@ const Ri = /* @__PURE__ */ bt({
           position: "bottom",
           groupLevelCount: u,
           rowHeight: this.$props.rowHeight
-        }, null)]), this.hasPinnedBottomRows && d(at, {
+        }, null)]), this.hasPinnedBottomRows && d(lt, {
           ref: y(this, "pinnedBottom"),
           size: this.$props.size,
           cols: G,