@progress/kendo-vue-grid 8.0.0-develop.1 → 8.0.0-develop.2

package/Grid.mjs

@@ -5,46 +5,46 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as ot, createVNode as n, h as De, createTextVNode as nt, ref as x, inject as dt, markRaw as E } from "vue";
-import { isObject as V, cloneArray as ht, canUseDOM as Q, WatermarkOverlay as pt, getter as X, getTemplate as Ge, setRef as G, hasListener as P, getRef as $, RowHeightService as ut, setScrollbarWidth as ct, kendoThemeMaps as Fe, uGrid as gt, isRtl as Le, validatePackage as ft, shouldShowValidationUI as mt, getLicenseMessage as Ct, guid as Pe, getNestedValue as Me } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as z, combineFilters as bt, Pager as $t, normalize as Rt, TableKeyboardNavigationProvider as Ae, updateLeft as xt, updateRight as vt, groupExpandReducer as It, detailExpandReducer as wt, getDetailExpandableOptions as St, getGroupExpandableOptions as yt } from "@progress/kendo-vue-data-tools";
-import { Loader as Ht } from "@progress/kendo-vue-indicators";
+import { defineComponent as ot, createVNode as n, h as Te, createTextVNode as De, ref as x, inject as nt, markRaw as E } from "vue";
+import { isObject as V, cloneArray as dt, canUseDOM as X, WatermarkOverlay as ht, getter as Y, getTemplate as Ge, setRef as G, hasListener as P, getRef as $, RowHeightService as pt, setScrollbarWidth as ut, kendoThemeMaps as Fe, uGrid as ct, isRtl as Le, validatePackage as gt, shouldShowValidationUI as ft, getLicenseMessage as mt, guid as Pe, getNestedValue as Me } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as z, combineFilters as Ct, Pager as bt, normalize as $t, TableKeyboardNavigationProvider as Ae, updateLeft as Rt, updateRight as xt, groupExpandReducer as vt, detailExpandReducer as It, getDetailExpandableOptions as wt, getGroupExpandableOptions as St } from "@progress/kendo-vue-data-tools";
+import { Loader as yt } from "@progress/kendo-vue-indicators";
 import { GridNav as Ve } from "./GridNav.mjs";
 import { GridSelectionCell as Ne } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Y } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as kt } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as _t } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as Et } from "./cells/GridEditCell.mjs";
-import { Header as zt } from "./header/Header.mjs";
-import { HeaderRow as Tt } from "./header/HeaderRow.mjs";
-import { FilterRow as Dt } from "./header/FilterRow.mjs";
-import { GroupPanel as Gt } from "./header/GroupPanel.mjs";
-import { Footer as Ft } from "./footer/Footer.mjs";
-import { FooterRow as Lt } from "./footer/FooterRow.mjs";
+import { GridHierarchyCell as Z } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as Ht } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as kt } from "./cells/GridDetailCell.mjs";
+import { GridEditCell as _t } from "./cells/GridEditCell.mjs";
+import { Header as Et } from "./header/Header.mjs";
+import { HeaderRow as zt } from "./header/HeaderRow.mjs";
+import { FilterRow as Tt } from "./header/FilterRow.mjs";
+import { GroupPanel as Dt } from "./header/GroupPanel.mjs";
+import { Footer as Gt } from "./footer/Footer.mjs";
+import { FooterRow as Ft } from "./footer/FooterRow.mjs";
 import { operators as Oe } from "./filterCommon.mjs";
-import { VirtualScroll as Pt } from "./VirtualScroll.mjs";
-import { ColumnResize as Mt } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as At } from "./drag/CommonDragLogic.mjs";
-import { DragClue as Vt } from "./drag/DragClue.mjs";
-import { DropClue as Nt } from "./drag/DropClue.mjs";
-import { applyExpandedState as Ot, getColSpan as Wt, autoGenerateColumns as Kt, mapColumns as Ut, getFlatColumnsState as We, getRowSpanOptions as Ke, groupedFirstItemValue as Ue, calcRowHeight as Bt, flatData as jt, readColumns as qt } from "./utils/main.mjs";
-import { GridCell as Jt } from "./cells/GridCell.mjs";
-import { GridGroupCell as Z } from "./cells/GridGroupCell.mjs";
-import { GridRow as Qt } from "./rows/GridRow.mjs";
-import { gridProps as Xt } from "./common.mjs";
+import { VirtualScroll as Lt } from "./VirtualScroll.mjs";
+import { ColumnResize as Pt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as Mt } from "./drag/CommonDragLogic.mjs";
+import { DragClue as At } from "./drag/DragClue.mjs";
+import { DropClue as Vt } from "./drag/DropClue.mjs";
+import { applyExpandedState as Nt, getColSpan as Ot, autoGenerateColumns as Wt, mapColumns as Kt, getFlatColumnsState as We, getRowSpanOptions as Ke, groupedFirstItemValue as Ue, calcRowHeight as Ut, flatData as Bt, readColumns as jt } from "./utils/main.mjs";
+import { GridCell as qt } from "./cells/GridCell.mjs";
+import { GridGroupCell as ee } from "./cells/GridGroupCell.mjs";
+import { GridRow as Jt } from "./rows/GridRow.mjs";
+import { gridProps as Qt } from "./common.mjs";
 import { GridHeaderSelectionCell as Be } from "./header/GridHeaderSelectionCell.mjs";
 import { GridNoRecords as je } from "./components/noRecords/GridNoRecords.mjs";
 import { GridNoRecordsContainer as qe } from "./components/noRecords/GridNoRecordsContainer.mjs";
-import { packageMetadata as ee } from "./package-metadata.mjs";
+import { packageMetadata as te } from "./package-metadata.mjs";
 import { pagerMessagesMap as Je } from "./messages/messagesMap.mjs";
-import { process as Yt } from "@progress/kendo-data-query";
-import { KendoKey as Zt } from "./key.mjs";
-import { getVirtualCellsToRender as ei } from "./utils/virtualColumns.mjs";
-const Mi = /* @__PURE__ */ ot({
+import { process as Xt } from "@progress/kendo-data-query";
+import { KendoKey as Yt } from "./key.mjs";
+import { getVirtualCellsToRender as Zt } from "./utils/virtualColumns.mjs";
+const Pi = /* @__PURE__ */ ot({
   name: "KendoGrid",
   inheritAttrs: !1,
   props: {
-    ...Xt,
+    ...Qt,
     toolbar: {
       type: Object
     },
@@ -89,13 +89,13 @@ const Mi = /* @__PURE__ */ ot({
     }
   },
   created() {
-    ft(ee), this.showLicenseWatermark = mt(ee), this.licenseMessage = Ct(ee), this.initialHeight = null, this._columns = [], this.vsRef = new Pt(), this.dragLogic = new At(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Mt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Pe(), this._gridRoleElementId = Pe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
+    gt(te), this.showLicenseWatermark = ft(te), this.licenseMessage = mt(te), this.initialHeight = null, this._columns = [], this.vsRef = new Lt(), this.dragLogic = new Mt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new Pt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.tableBodyRef = null, this.tableRef = null, this.scrollHeightContainerRef = null, this.forceUpdateTimeout = void 0, this._gridId = Pe(), this._gridRoleElementId = Pe(), this.slicedCurrentData = void 0, this._prevTotal = void 0, this._containerHeightRef = 0, this._minRowHeightRef = 0, this._virtualSkipRef = 0, this.wrapperScrollTopRef = 0, this.scrollLeftRef = 0;
   },
   mounted() {
     var t, i;
     this.setRefs();
     const e = Le(this._element);
-    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = Q && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
+    this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = ((i = (t = this._element) == null ? void 0 : t.style) == null ? void 0 : i.height) || null, this.resizeObserver = X && (window == null ? void 0 : window.ResizeObserver) && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
   },
   updated() {
     var t;
@@ -114,16 +114,16 @@ const Mi = /* @__PURE__ */ ot({
       return this.$props.navigatable ? this.gridId : "";
     },
     groupExpandable() {
-      return yt(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
+      return St(typeof this.$props.groupable == "object" && this.$props.groupable.enabled !== !1 ? this.$props.groupable.expandable : this.$props.groupable);
     },
     hierarchClass() {
-      return gt.hierarchyCell({});
+      return ct.hierarchyCell({});
     },
     computedRowSpannable() {
       return Ke(this.$props.rowSpannable);
     },
     detailExpandable() {
-      return St(!!this.$props.detail);
+      return wt(!!this.$props.detail);
     },
     nonscrollableWrapperClass() {
       const {
@@ -189,7 +189,7 @@ const Mi = /* @__PURE__ */ ot({
   },
   methods: {
     readColumnElements() {
-      return qt(this.$props.columns, this.currentColumnsState, {
+      return jt(this.$props.columns, this.currentColumnsState, {
         prevId: 0,
         idPrefix: this.idPrefix
       });
@@ -215,7 +215,7 @@ const Mi = /* @__PURE__ */ ot({
       })];
     },
     getFlatData(e, t, i, s, r, l, d) {
-      const h = [], c = jt(h, e, t, {
+      const h = [], c = Bt(h, e, t, {
         index: i
       }, s !== void 0, r, l, this.groupExpandable.defaultExpand, d, this.$props.expandField);
       return {
@@ -242,7 +242,7 @@ const Mi = /* @__PURE__ */ ot({
         ...i,
         children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
       });
-      return [...e].filter((i) => !i.hidden).filter((i) => Q && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
+      return [...e].filter((i) => !i.hidden).filter((i) => X && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
     },
     /**
      * A getter of the current columns. Gets the current column width or current columns,
@@ -281,7 +281,7 @@ const Mi = /* @__PURE__ */ ot({
         this.dragLogic.refGroupPanelDiv(l);
       }
       const s = $(this, "dropElementClue"), r = $(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), ct();
+      this.dragLogic.refDropElementClue(s), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = $(this, "colGroup"), this._header = $(this, "header"), this._footer = $(this, "footer"), this.resetTableWidth(), ut();
     },
     gridUnmounted() {
       clearTimeout(this.forceUpdateTimeout), this.columnResize.columns = [], this.dragLogic.columns = [], this.dragLogic && this.dragLogic.dragElementClue && (this.dragLogic.dragElementClue.$el.remove(), this.dragLogic.dropElementClue.$el.remove()), this.currentData = [], this._columns = [], document != null && document.body && this.resizeObserver && this.resizeObserver.disconnect();
@@ -302,7 +302,7 @@ const Mi = /* @__PURE__ */ ot({
     },
     initializeVirtualization() {
       const e = this.vsRef, t = this.$props.rowHeight || this._minRowHeightRef || 0;
-      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new ut(this._virtualTotal, t)));
+      e && (e.fixedScroll = this.$props.fixedScroll || !1, e.PageChange = this.virtualPageChange, e.pageSize = this._virtualPageSize, e.scrollableVirtual = this.isVirtualScroll, e.container = $(this, "scrollContainer"), e.tableBody = $(this, "tableBody"), e.scrollHeightContainer = $(this, "scrollHeightContainer"), e.table = $(this, "table"), (!e.rowHeightService || e.total !== this._virtualTotal) && t && (e.total = this._virtualTotal, e.rowHeightService = new pt(this._virtualTotal, t)));
     },
     setContainerHeight() {
       const e = $(this, "scrollContainer");
@@ -310,7 +310,7 @@ const Mi = /* @__PURE__ */ ot({
     },
     setMinRowHeight() {
       if (!this._minRowHeightRef && !this.$props.rowHeight) {
-        const t = Bt($(this, "tableBody"));
+        const t = Ut($(this, "tableBody"));
         t && (this._minRowHeightRef = t, this.$forceUpdate());
       }
     },
@@ -469,7 +469,7 @@ const Mi = /* @__PURE__ */ ot({
     handleDetailExpandAction(e, t) {
       var i;
       if (this.detailExpandable.enabled) {
-        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = wt(s != null ? s : {}, e);
+        const s = (i = this.gridContext.detailExpand) == null ? void 0 : i.value, r = It(s != null ? s : {}, e);
         this.$emit("detailexpandchange", {
           ...this.getArguments(t),
           detailExpand: r
@@ -479,7 +479,7 @@ const Mi = /* @__PURE__ */ ot({
     handleGroupExpandAction(e, t) {
       var i;
       if (this.groupExpandable.enabled) {
-        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = It(s != null ? s : [], e, this.groupExpandable);
+        const s = (i = this.gridContext.groupExpand) == null ? void 0 : i.value, r = vt(s != null ? s : [], e, this.groupExpandable);
         this.$props.expandField || this.$emit("groupexpandchange", {
           ...this.getArguments(t),
           groupExpand: r
@@ -522,7 +522,7 @@ const Mi = /* @__PURE__ */ ot({
         R && (R.orderIndex = m);
       });
       const c = this._columns[e].locked && this._columns[t].locked;
-      xt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), vt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
+      Rt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), xt(this._columnsMap, this._columns, c || this.shouldUpdateLeftRightRef), this.resizedRef && (this.shouldUpdateLeftRightRef = !1, this.resizedRef = !1);
       const f = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
@@ -627,8 +627,8 @@ const Mi = /* @__PURE__ */ ot({
           ...s,
           _type: "expand",
           id: z.generateNavigatableId(`${r++}`, "expand", "column"),
-          defaultCell: E(Y),
-          internalCell: E(Y),
+          defaultCell: E(Z),
+          internalCell: E(Z),
           field: this.detailExpandable.column,
           headerClassName: this.hierarchClass
         };
@@ -636,7 +636,7 @@ const Mi = /* @__PURE__ */ ot({
       }
       this.$props.expandField && P.call(this, "expandchange") && this.$props.detail && (e.unshift({
         ...s,
-        internalCell: E(Y),
+        internalCell: E(Z),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
         id: z.generateNavigatableId(`${e.length}`, this.idPrefix, "column"),
@@ -646,8 +646,8 @@ const Mi = /* @__PURE__ */ ot({
         const d = {
           ...s,
           isAccessible: !1,
-          defaultCell: E(Z),
-          internalCell: E(Z),
+          defaultCell: E(ee),
+          internalCell: E(ee),
           id: z.generateNavigatableId(`${r++}`, "group", "column"),
           field: "value",
           locked: this.$props.lockGroups
@@ -662,14 +662,14 @@ const Mi = /* @__PURE__ */ ot({
       var l;
       this._columns = this.readColumnElements();
       const i = (l = this.gridContext.group) == null ? void 0 : l.value;
-      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Kt(e, i, {
+      this._columns.filter((d) => !d.hidden).length === 0 && (this._columns = Wt(e, i, {
         column: this.$props.expandField ? this.$props.expandField : this.groupExpandable.column
       }, {
         prevId: 0,
         idPrefix: this.idPrefix
       })), this.configureColumns(this._columns, t);
       const [s, r] = this.filterColumns(this._columns);
-      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Ut(this._columns, !0);
+      this._columns = s, this.hiddenColumnsRef = r, this._columnsMap = Kt(this._columns, !0);
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), i = t && (t.title || t.field);
@@ -755,7 +755,7 @@ const Mi = /* @__PURE__ */ ot({
           r--, s && (s.width += c);
           return;
         }
-        const f = Math.min(Wt(d, e), t.length - h);
+        const f = Math.min(Ot(d, e), t.length - h);
         r = f - 1, s = {
           width: c,
           colSpan: f,
@@ -763,7 +763,7 @@ const Mi = /* @__PURE__ */ ot({
         }, i.push(s);
       }), this.$props.columnVirtualization) {
         const d = this.scrollLeftRef || 0, h = this.tableWidth || parseFloat((((l = this.$attrs.style) == null ? void 0 : l.width) || "").toString());
-        return ei({
+        return Zt({
           cellModels: i,
           columns: t,
           tableViewPortWidth: h,
@@ -801,7 +801,7 @@ const Mi = /* @__PURE__ */ ot({
     };
   },
   setup(e) {
-    const t = x(null), i = x(null), s = x(null), r = x(null), l = x(null), d = x(null), h = x(null), c = x(null), f = x(null), u = x(null), m = x(!0), R = x(!1), w = dt(Zt, {});
+    const t = x(null), i = x(null), s = x(null), r = x(null), l = x(null), d = x(null), h = x(null), c = x(null), f = x(null), u = x(null), m = x(!0), R = x(!1), w = nt(Yt, {});
     return {
       groupPanelDivRef: t,
       dropElementClueRef: i,
@@ -820,7 +820,7 @@ const Mi = /* @__PURE__ */ ot({
     };
   },
   render() {
-    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we, Se;
+    var fe, me, Ce, be, $e, Re, xe, ve, Ie, we;
     const e = (fe = this.gridContext.sort) == null ? void 0 : fe.value, t = (me = this.gridContext.filter) == null ? void 0 : me.value, i = (Ce = this.gridContext.search) == null ? void 0 : Ce.value, s = (be = this.gridContext.skip) == null ? void 0 : be.value, r = ($e = this.gridContext.take) == null ? void 0 : $e.value, l = (Re = this.gridContext.group) == null ? void 0 : Re.value, d = (xe = this.gridContext.groupExpand) == null ? void 0 : xe.value, h = (ve = this.gridContext.detailExpand) == null ? void 0 : ve.value, c = !!(l != null && l.length);
     let f;
     this.currentColumnsState = (Ie = this.gridContext.columnsState) == null ? void 0 : Ie.value;
@@ -834,18 +834,18 @@ const Mi = /* @__PURE__ */ ot({
     let m = this.$props.total || 0;
     const R = z.getIdPrefix(this.navigation);
     let w = [];
-    Array.isArray(this.$props.dataItems) ? w = this.$props.dataItems : this.$props.dataItems && (w = Ot(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, m = m || this.$props.dataItems.total);
-    const te = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
-    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = te, this._virtualPageSize = this.calcVirtualPageSize();
+    Array.isArray(this.$props.dataItems) ? w = this.$props.dataItems : this.$props.dataItems && (w = Nt(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, m = m || this.$props.dataItems.total);
+    const ie = this.$props.groupable === !0 || V(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = ie, this._virtualPageSize = this.calcVirtualPageSize();
     const N = w.length === m, Qe = V(this.$props.groupable) && this.$props.groupable.footer || "none";
     if (this.currentData = [], u) {
       const a = u.page && !(this.isVirtualScroll && !this.$props.pageable), {
         data: C,
         total: S
-      } = Yt(w, {
+      } = Xt(w, {
         group: u.group ? l : void 0,
         sort: u.sort ? e : void 0,
-        filter: bt(u.filter ? t : void 0, u.search ? i : void 0),
+        filter: Ct(u.filter ? t : void 0, u.search ? i : void 0),
         ...a ? {
           take: this.$props.pageable ? r || 10 : r,
           skip: s || 0
@@ -868,8 +868,8 @@ const Mi = /* @__PURE__ */ ot({
         } else
           f = this.currentData.slice(a, a + this._virtualPageSize);
     }
-    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, Xe), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = ht(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
-    const ie = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), se = te && n(Gt, {
+    this.initializeVirtualization(), this.initColumns(this.$props.dataItems, Xe), this.columnResize.resizable = this.$props.resizable || !1, this.columnResize.columns = this._columns, this.columnResize.columnsState = dt(this.currentColumnsState || []), this.dragLogic.columns = this._columns;
+    const se = this.$props.toolbar, M = this.$props.noRecords, k = this._columns.filter((a) => a.children.length === 0), re = ie && n(Dt, {
       ref: (a) => {
         this.groupPanelDivRef = a;
       },
@@ -880,36 +880,36 @@ const Mi = /* @__PURE__ */ ot({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), re = (this.dragLogic.reorderable || this.dragLogic.groupable) && Q && document && document.body, le = [re && n(Nt, {
+    }, null), le = (this.dragLogic.reorderable || this.dragLogic.groupable) && X && document && document.body, ae = [le && n(Vt, {
       ref: (a) => {
         this.dropElementClueRef = a;
       }
-    }, null), re && n(Vt, {
+    }, null), le && n(At, {
       ref: (a) => {
         this.dragElementClueRef = a;
       }
-    }, null)], Ze = this.showLicenseWatermark ? n(pt, {
+    }, null)], Ze = this.showLicenseWatermark ? n(ht, {
       message: this.licenseMessage
     }, null) : null, W = this.$attrs.style, et = W && V(W) && W["width"] || "";
     this.tableWidth = parseFloat(et.toString());
-    const ae = k.findIndex((a) => typeof a.colSpan == "function") > -1;
+    const oe = k.findIndex((a) => typeof a.colSpan == "function") > -1;
     let F;
-    ae || (F = this.getCellsToRender(null, k));
-    const oe = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
+    oe || (F = this.getCellsToRender(null, k));
+    const ne = (this.$props.columnVirtualization ? this.getCellsToRender(null, k).map(({
       columnIndex: a
     }) => k[a]) : k).map(function(a, C) {
       return n("col", {
         key: a.id || `col-${C}`,
         width: a.width !== void 0 ? Math.floor(parseFloat(a.width.toString())) : void 0
       }, null);
-    }, this), ne = n(zt, {
+    }, this), de = n(Et, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.headerRef = a;
       },
-      headerRow: n(Tt, {
+      headerRow: n(zt, {
         grid: this,
         sort: e,
         groupable: this.$props.groupable,
@@ -936,7 +936,7 @@ const Mi = /* @__PURE__ */ ot({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && n(Dt, {
+        filterRow: this.$props.filterable && n(Tt, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
@@ -951,37 +951,37 @@ const Mi = /* @__PURE__ */ ot({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: oe
-    }, null), de = this._columns.some((a) => !!a.footerCell) ? n(Ft, {
+      cols: ne
+    }, null), he = this._columns.some((a) => !!a.footerCell) ? n(Gt, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (a) => {
         this.footerRef = a;
       },
-      row: n(Lt, {
+      row: n(Ft, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns
       }, null),
-      cols: oe
-    }, null) : n("span", null, null), tt = function(a, C, S, ye, _) {
+      cols: ne
+    }, null) : n("span", null, null), tt = function(a, C, S, Se, _) {
       let p = !1;
-      const T = this.$props.selectedField, y = T ? Me(T, a.dataItem) : void 0, v = this.$props.highlight && this.$props.dataItemKey && X(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[X(this.$props.dataItemKey)(a.dataItem)] : void 0;
-      return ae && (F = this.getCellsToRender(a.dataItem, k)), {
+      const T = this.$props.selectedField, y = T ? Me(T, a.dataItem) : void 0, v = this.$props.highlight && this.$props.dataItemKey && Y(this.$props.dataItemKey)(a.dataItem) !== void 0 ? this.$props.highlight[Y(this.$props.dataItemKey)(a.dataItem)] : void 0;
+      return oe && (F = this.getCellsToRender(a.dataItem, k)), {
         row: F.map(function({
           columnIndex: b,
           colSpan: D
         }) {
-          var _e, Ee, ze, Te;
+          var ke, _e, Ee, ze;
           const o = k[b];
           let I;
-          if ((_e = o.rowSpannable) != null && _e.enabled && a.rowType === "data" && o.field && _) {
-            const g = o.field ? (ze = (Ee = o.rowSpannable).valueGetter) == null ? void 0 : ze.call(Ee, a.dataItem, o.field) : null;
+          if ((ke = o.rowSpannable) != null && ke.enabled && a.rowType === "data" && o.field && _) {
+            const g = o.field ? (Ee = (_e = o.rowSpannable).valueGetter) == null ? void 0 : Ee.call(_e, a.dataItem, o.field) : null;
             I = {
               value: g,
               count: 1
-            }, _[o.field] && ((Te = _[o.field]) == null ? void 0 : Te.value) === g && _[o.field] !== null ? (_[o.field].count++, I.count = null) : _[o.field] = I;
+            }, _[o.field] && ((ze = _[o.field]) == null ? void 0 : ze.value) === g && _[o.field] !== null ? (_[o.field].count++, I.count = null) : _[o.field] = I;
           }
           const L = `${o.className ? o.className + " " : ""}${o.locked ? "k-grid-content-sticky" : ""}`, H = o.locked && o.left !== void 0 ? this.isRtl ? {
             left: o.right + "px",
@@ -990,17 +990,17 @@ const Mi = /* @__PURE__ */ ot({
             left: o.left + "px",
             right: o.right + "px"
           } : void 0;
-          let He = !1;
+          let ye = !1;
           if (o.editable && this.$props.editField) {
             const g = Me(this.$props.editField, a.dataItem);
-            (g === !0 || g === o.field) && (p = !0, He = !0);
+            (g === !0 || g === o.field) && (p = !0, ye = !0);
           }
           let A;
           o.cell && (A = o.cell);
-          const ke = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Ue(a.dataItem, this.$props.uniqueField)), j = o.id ? o.id : b, q = ke ? !ke : a.expanded || a.dataItem.expanded, at = o._type === "expand", J = z.generateNavigatableId(`${C}-${String(b)}`, R, at || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
+          const He = this.computedCollapsed && this.computedCollapsed[a.level] && this.computedCollapsed[a.level].some((g) => g === Ue(a.dataItem, this.$props.uniqueField)), q = o.id ? o.id : b, J = He ? !He : a.expanded || a.dataItem.expanded, at = o._type === "expand", Q = z.generateNavigatableId(`${C}-${String(b)}`, R, at || a.rowType === "groupHeader" || a.rowType === "groupFooter" || o.field === "value" ? "nodata" : "cell");
           return o.internalCell ? n(o.internalCell, {
-            key: j,
-            id: J,
+            key: q,
+            id: Q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1021,7 +1021,7 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
             ariaColumnIndex: o.ariaColumnIndex,
@@ -1030,9 +1030,9 @@ const Mi = /* @__PURE__ */ ot({
             isHighlighted: !!(typeof v != "boolean" && v && o.field && v[o.field] === !0),
             group: a.group,
             rowSpan: I
-          }, null) : He ? n(Et, {
-            id: J,
-            key: j,
+          }, null) : ye ? n(_t, {
+            id: Q,
+            key: q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1051,12 +1051,12 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H
-          }, null) : n(Jt, {
-            key: j,
-            id: J,
+          }, null) : n(qt, {
+            key: q,
+            id: Q,
             colSpan: D,
             dataItem: a.dataItem,
             field: o.field || "",
@@ -1083,7 +1083,7 @@ const Mi = /* @__PURE__ */ ot({
             columnsCount: this._columns.filter((g) => !g.children.length).length,
             rowType: a.rowType,
             level: a.level,
-            expanded: q,
+            expanded: J,
             dataIndex: a.dataIndex,
             style: H,
             rowSpan: I,
@@ -1097,11 +1097,11 @@ const Mi = /* @__PURE__ */ ot({
       };
     };
     let it = 0, K = [];
-    const U = !this.currentData.length, he = (a) => a >= this.currentData.length - it;
+    const U = !this.currentData.length, pe = (a) => a >= this.currentData.length - it;
     let B = 0;
     if (this.currentData.length) {
       const a = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-      let C = this.$props.skip || 0, S = -1, ye = 0;
+      let C = this.$props.skip || 0, S = -1, Se = 0;
       const _ = this.computedRowSpannable.enabled ? {} : void 0;
       if (this.isVirtualScroll) {
         if (O > 0) {
@@ -1112,15 +1112,15 @@ const Mi = /* @__PURE__ */ ot({
       }
       K = (f || this.currentData).map(function(p, T) {
         p.rowType === "data" && S++;
-        const y = p.dataIndex % 2 !== 0, v = this.$props.dataItemKey && X(this.$props.dataItemKey)(p.dataItem), b = T + C, D = v || "ai" + b, o = D + "_1", I = tt.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
-        return B = b + a + ye, [n(Qt, {
+        const y = p.dataIndex % 2 !== 0, v = this.$props.dataItemKey && Y(this.$props.dataItemKey)(p.dataItem), b = T + C, D = v || "ai" + b, o = D + "_1", I = tt.call(this, p, D, S, y, _), L = k.length - (this.detailExpandable.enabled ? 1 : 0) - ((l == null ? void 0 : l.length) || 0) || 1;
+        return B = b + a + Se, [n(Jt, {
           key: D,
           item: p,
           dataIndex: S,
           ariaRowIndex: B,
           absoluteRowIndex: b,
           isAltRow: y,
-          isHidden: he(T),
+          isHidden: pe(T),
           rowHeight: this.$props.rowHeight,
           isSelected: I.isSelected,
           isHighlighted: I.isHighlighted,
@@ -1136,13 +1136,13 @@ const Mi = /* @__PURE__ */ ot({
           key: o,
           class: y ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
           style: {
-            visibility: he(T) ? "hidden" : "",
+            visibility: pe(T) ? "hidden" : "",
             height: this.$props.detailRowHeight + "px"
           },
           role: "row",
           "aria-rowindex": B
         }, [l == null ? void 0 : l.map(function(H) {
-          return n(Z, {
+          return n(ee, {
             id: "",
             dataIndex: p.dataIndex,
             field: H.field,
@@ -1150,9 +1150,9 @@ const Mi = /* @__PURE__ */ ot({
             key: `group-${H.field}-${p.dataIndex}`,
             group: p.group
           }, null);
-        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(kt, {
+        }, this), (this.$props.expandField || this.detailExpandable.enabled) && n(Ht, {
           id: z.generateNavigatableId(`${o}-dhcell`, R)
-        }, null), n(_t, {
+        }, null), n(kt, {
           dataItem: p.dataItem,
           dataIndex: p.dataIndex,
           colSpan: L,
@@ -1162,7 +1162,7 @@ const Mi = /* @__PURE__ */ ot({
         }, null)])];
       }, this);
     }
-    const st = this.$props.pageable && n($t, {
+    const st = this.$props.pageable && n(bt, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
@@ -1171,9 +1171,9 @@ const Mi = /* @__PURE__ */ ot({
       skip: s || 0,
       pageSize: (r !== void 0 ? r : this.$props.pageSize) || 10,
       messagesMap: Je,
-      settings: Rt(this.$props.pageable || {})
-    }, null), pe = Ge.call(this, {
-      h: De,
+      settings: $t(this.$props.pageable || {})
+    }, null), ue = Ge.call(this, {
+      h: Te,
       template: this.$props.pager,
       defaultRendering: st,
       additionalProps: {
@@ -1185,7 +1185,7 @@ const Mi = /* @__PURE__ */ ot({
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), rt = (a) => e && e.filter((C) => C.field === a).length > 0, ue = n("colgroup", {
+    }), rt = (a) => e && e.filter((C) => C.field === a).length > 0, ce = n("colgroup", {
       ref: G(this, "colGroup")
     }, [k.map(function(a, C) {
       return n("col", {
@@ -1193,20 +1193,25 @@ const Mi = /* @__PURE__ */ ot({
         class: rt(a.field) ? "k-sorted" : void 0,
         width: a.width !== void 0 ? a.width.toString().indexOf("%") !== -1 ? a.width : Math.floor(parseFloat(a.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), ce = {
+    }, this)]), ge = {
       height: this.getCorrectHeight,
       ...this.$attrs.style
-    }, lt = this.$props.loader && n("div", {
-      class: "k-loader-container k-loader-container-md k-loader-top"
+    }, lt = n("div", {
+      class: "k-loading-mask"
     }, [n("div", {
-      class: "k-loader-container-overlay k-overlay-light"
+      class: "k-loading-color"
     }, null), n("div", {
-      class: "k-loader-container-inner"
-    }, [n(Ht, {
+      style: {
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }, [n(yt, {
       size: "large",
-      type: "infinite-spinner"
-    }, null)])]), ge = ((Se = this.$props.showLoader) != null ? Se : !!this.$props.loader) && Ge.call(this, {
-      h: De,
+      type: "converging-spinner"
+    }, null)])]), j = this.$props.showLoader && Ge.call(this, {
+      h: Te,
       template: this.$props.loader,
       defaultRendering: lt
     });
@@ -1221,10 +1226,10 @@ const Mi = /* @__PURE__ */ ot({
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ce,
+        style: ge,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1237,14 +1242,14 @@ const Mi = /* @__PURE__ */ ot({
           },
           ref: G(this, "table"),
           role: "none"
-        }, [nt(" "), ue, ne, n("tbody", {
+        }, [De(" "), ce, de, n("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [K, ge]), de]), U && n(qe, {
+        }, [K, De("  "), j]), he]), U && n(qe, {
           id: z.generateNavigatableId("no-records", R)
         }, {
           default: () => [M.length ? M : n(je, null, null)]
-        })]), pe, le]
+        })]), ue, j, ae]
       })]
     }) : n(Ae, {
       ref: "navRef",
@@ -1257,16 +1262,16 @@ const Mi = /* @__PURE__ */ ot({
         },
         currentData: this.currentData,
         id: this.$props.id,
-        style: ce,
+        style: ge,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [ie, se, n("div", {
+        default: () => [se, re, n("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [ne, n("div", {
+        }, [de, n("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [n("div", {
@@ -1281,7 +1286,7 @@ const Mi = /* @__PURE__ */ ot({
           role: "none",
           class: this.gridTableClass,
           ref: G(this, "table")
-        }, [ue, n("tbody", {
+        }, [ce, n("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
@@ -1298,11 +1303,11 @@ const Mi = /* @__PURE__ */ ot({
           style: this.$props.scrollable === "virtual" ? {
             height: this._containerHeightRef + "px"
           } : {}
-        }, null)])]), ge]), de, Ze]), pe, le]
+        }, null)])])]), he, Ze]), ue, j, ae]
       })]
     });
   }
 });
 export {
-  Mi as Grid
+  Pi as Grid
 };