@progress/kendo-vue-grid 6.4.2-develop.3 → 6.5.0-develop.2

package/Grid.mjs

@@ -5,38 +5,38 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as Fe, createVNode as o, h as oe, ref as f, markRaw as L } from "vue";
-import { SvgIcon as ze, getDefaultSlots as Ge, isObject as E, canUseDOM as U, templateRendering as I, getListeners as w, WatermarkOverlay as De, getter as Te, getTemplate as le, setRef as M, hasListener as z, getRef as m, kendoThemeMaps as ae, isRtl as ne, validatePackage as Oe, shouldShowValidationUI as Le, guid as de, getNestedValue as he } from "@progress/kendo-vue-common";
-import { tableKeyboardNavigationTools as v, tableColumnsVirtualization as Ee, Pager as Me, normalize as Ae, TableKeyboardNavigationProvider as pe } from "@progress/kendo-vue-data-tools";
-import { Loader as Pe } from "@progress/kendo-vue-indicators";
-import { GridNav as ce } from "./GridNav.mjs";
-import { GridSelectionCell as Ne } from "./cells/GridSelectionCell.mjs";
-import { GridHierarchyCell as Ve } from "./cells/GridHierarchyCell.mjs";
-import { GridDetailHierarchyCell as Be } from "./cells/GridDetailHierarchyCell.mjs";
-import { GridDetailCell as We } from "./cells/GridDetailCell.mjs";
-import { GridEditCell as je } from "./cells/GridEditCell.mjs";
-import { Header as Ke } from "./header/Header.mjs";
-import { HeaderRow as Ue } from "./header/HeaderRow.mjs";
-import { FilterRow as qe } from "./header/FilterRow.mjs";
-import { GroupPanel as Je } from "./header/GroupPanel.mjs";
-import { Footer as Qe } from "./footer/Footer.mjs";
-import { FooterRow as Xe } from "./footer/FooterRow.mjs";
-import { operators as ue } from "./filterCommon.mjs";
-import { VirtualScroll as q } from "./VirtualScroll.mjs";
-import { VirtualScrollFixed as Ye, RowHeightService as Ze } from "./VirtualScrollFixed.mjs";
-import { ColumnResize as et } from "./drag/ColumnResize.mjs";
-import { CommonDragLogic as tt } from "./drag/CommonDragLogic.mjs";
-import { DragClue as st } from "./drag/DragClue.mjs";
-import { DropClue as it } from "./drag/DropClue.mjs";
-import { applyExpandedState as ge, flatData as rt, readColumns as ot, autoGenerateColumns as lt, mapColumns as at, groupedFirstItemValue as fe, firefox as nt, firefoxMaxHeight as dt } from "./utils/main.mjs";
-import { GridCell as ht } from "./cells/GridCell.mjs";
-import { GridGroupCell as me } from "./cells/GridGroupCell.mjs";
-import { GridRow as pt } from "./rows/GridRow.mjs";
-import { GridHeaderSelectionCell as ct } from "./header/GridHeaderSelectionCell.mjs";
-import { GridNoRecords as ut } from "./GridNoRecords.mjs";
-import { packageMetadata as $e } from "./package-metadata.mjs";
+import { defineComponent as Ge, createVNode as o, h as le, ref as $, markRaw as E } from "vue";
+import { SvgIcon as De, getDefaultSlots as Te, isObject as M, canUseDOM as U, templateRendering as y, getListeners as R, WatermarkOverlay as Oe, getter as q, getTemplate as ae, setRef as A, hasListener as D, getRef as b, kendoThemeMaps as ne, isRtl as de, validatePackage as Le, shouldShowValidationUI as Ee, guid as he, getNestedValue as pe } from "@progress/kendo-vue-common";
+import { tableKeyboardNavigationTools as I, tableColumnsVirtualization as Me, Pager as Ae, normalize as Pe, TableKeyboardNavigationProvider as ce } from "@progress/kendo-vue-data-tools";
+import { Loader as Ne } from "@progress/kendo-vue-indicators";
+import { GridNav as ue } from "./GridNav.mjs";
+import { GridSelectionCell as Ve } from "./cells/GridSelectionCell.mjs";
+import { GridHierarchyCell as Be } from "./cells/GridHierarchyCell.mjs";
+import { GridDetailHierarchyCell as We } from "./cells/GridDetailHierarchyCell.mjs";
+import { GridDetailCell as je } from "./cells/GridDetailCell.mjs";
+import { GridEditCell as Ke } from "./cells/GridEditCell.mjs";
+import { Header as Ue } from "./header/Header.mjs";
+import { HeaderRow as qe } from "./header/HeaderRow.mjs";
+import { FilterRow as Je } from "./header/FilterRow.mjs";
+import { GroupPanel as Qe } from "./header/GroupPanel.mjs";
+import { Footer as Xe } from "./footer/Footer.mjs";
+import { FooterRow as Ye } from "./footer/FooterRow.mjs";
+import { operators as ge } from "./filterCommon.mjs";
+import { VirtualScroll as J } from "./VirtualScroll.mjs";
+import { VirtualScrollFixed as Ze, RowHeightService as et } from "./VirtualScrollFixed.mjs";
+import { ColumnResize as tt } from "./drag/ColumnResize.mjs";
+import { CommonDragLogic as st } from "./drag/CommonDragLogic.mjs";
+import { DragClue as it } from "./drag/DragClue.mjs";
+import { DropClue as rt } from "./drag/DropClue.mjs";
+import { applyExpandedState as fe, flatData as ot, readColumns as lt, autoGenerateColumns as at, mapColumns as nt, groupedFirstItemValue as me, firefox as dt, firefoxMaxHeight as ht } from "./utils/main.mjs";
+import { GridCell as pt } from "./cells/GridCell.mjs";
+import { GridGroupCell as $e } from "./cells/GridGroupCell.mjs";
+import { GridRow as ct } from "./rows/GridRow.mjs";
+import { GridHeaderSelectionCell as ut } from "./header/GridHeaderSelectionCell.mjs";
+import { GridNoRecords as gt } from "./GridNoRecords.mjs";
+import { packageMetadata as be } from "./package-metadata.mjs";
 import { pagerMessagesMap as Ce } from "./messages/main.mjs";
-const Ut = /* @__PURE__ */ Fe({
+const qt = /* @__PURE__ */ Ge({
   name: "KendoGrid",
   props: {
     topCacheCount: {
@@ -64,6 +64,7 @@ const Ut = /* @__PURE__ */ Fe({
     headerCellRender: [String, Function, Object],
     loader: [String, Function, Object, Boolean],
     filter: Object,
+    highlight: Object,
     pageable: [Boolean, Object],
     pageSize: Number,
     total: Number,
@@ -102,7 +103,7 @@ const Ut = /* @__PURE__ */ Fe({
         return !0;
       }
     },
-    columnMenuIcon: ze,
+    columnMenuIcon: De,
     dataItemKey: String,
     navigatable: {
       type: Boolean,
@@ -137,18 +138,18 @@ const Ut = /* @__PURE__ */ Fe({
     }
   },
   created() {
-    Oe($e), this.showLicenseWatermark = Le($e), this.initialHeight = null, this._columns = [];
+    Le(be), this.showLicenseWatermark = Ee(be), this.initialHeight = null, this._columns = [];
     const e = this.currentGroupable, t = this.getVirtualScroll();
-    this.vs = new t(e || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.dragLogic = new tt(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new et(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.forceUpdateTimeout = void 0, this._gridId = de(), this._gridRoleElementId = de(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
+    this.vs = new t(e || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.dragLogic = new st(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new tt(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.forceUpdateTimeout = void 0, this._gridId = he(), this._gridRoleElementId = he(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
   },
   mounted() {
     this.setRefs();
-    const e = ne(this._element);
+    const e = de(this._element);
     this._prevTotal = this.$props.total, this.isRtl = e, this.initialHeight = this._element.style ? this._element.style.height : null, this.resizeObserver = U && window.ResizeObserver && new ResizeObserver(this.calculateMedia), document != null && document.body && this.resizeObserver && this.resizeObserver.observe(document.body);
   },
   updated() {
     this.setRefs();
-    const e = ne(this._element);
+    const e = de(this._element);
     this.isRtl = e, this._prevTotal = this.$props.total, this.vs.tableTransform && this.vs.table && (this.vs.table.style.transform = this.vs.tableTransform, this.vs.tableTransform = "");
   },
   unmounted() {
@@ -162,7 +163,7 @@ const Ut = /* @__PURE__ */ Fe({
       return {
         "k-grid": !0,
         "k-grid-md": !e,
-        [`k-grid-${ae.sizeMap[e] || e}`]: e
+        [`k-grid-${ne.sizeMap[e] || e}`]: e
       };
     },
     scrollableWrapperClass() {
@@ -182,14 +183,14 @@ const Ut = /* @__PURE__ */ Fe({
         "k-table": !0,
         "k-grid-table": !0,
         "k-grid-md": !e,
-        [`k-table-${ae.sizeMap[e] || e}`]: e
+        [`k-table-${ne.sizeMap[e] || e}`]: e
       };
     },
     getCorrectHeight() {
       return this.$props.scrollable === "virtual" ? this.initialHeight || "450px" : null;
     },
     currentGroupable() {
-      return this.$props.groupable === !0 && this.$props.group && this.$props.group.length || E(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+      return this.$props.groupable === !0 && this.$props.group && this.$props.group.length || M(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     },
     computedCollapsed() {
       let e = [];
@@ -245,32 +246,32 @@ const Ut = /* @__PURE__ */ Fe({
         const {
           declarationIndex: l,
           parentIndex: n,
-          depth: u,
-          colSpan: h,
-          rowSpan: $,
-          index: y,
-          kFirst: H,
-          children: S,
-          ...x
+          depth: g,
+          colSpan: p,
+          rowSpan: C,
+          index: k,
+          kFirst: S,
+          children: x,
+          ..._
         } = r;
-        return S.length ? {
-          children: t(S),
-          ...x
-        } : x;
+        return x.length ? {
+          children: t(x),
+          ..._
+        } : _;
       }));
       return t(e);
     },
     setRefs() {
       let e = "$el";
-      const t = m(this, "gridNav");
+      const t = b(this, "gridNav");
       t && (this._element = t[e]);
-      const i = m(this, "groupPanelDiv");
+      const i = b(this, "groupPanelDiv");
       if (i) {
         let n = i[e] || null;
         this.dragLogic.refGroupPanelDiv(n);
       }
-      const r = m(this, "dropElementClue"), l = m(this, "dragElementClue");
-      this.dragLogic.refDropElementClue(r), this.dragLogic.refDragElementClue(l), this.columnResize.colGroupMain = m(this, "colGroup"), this._header = m(this, "header"), this._footer = m(this, "footer"), this.vs.containerRef = m(this, "scrollContainer"), this.vs.table = m(this, "scrollTable"), this.resetTableWidth(), this.vs.tableBodyRef = m(this, "scrollTableBody");
+      const r = b(this, "dropElementClue"), l = b(this, "dragElementClue");
+      this.dragLogic.refDropElementClue(r), this.dragLogic.refDragElementClue(l), this.columnResize.colGroupMain = b(this, "colGroup"), this._header = b(this, "header"), this._footer = b(this, "footer"), this.vs.containerRef = b(this, "scrollContainer"), this.vs.table = b(this, "scrollTable"), this.resetTableWidth(), this.vs.tableBodyRef = b(this, "scrollTableBody");
     },
     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();
@@ -279,7 +280,7 @@ const Ut = /* @__PURE__ */ Fe({
       this.vs.PageChange = this.pageChangeHandler, this.vs.realSkip = this.$props.skip || 0, this.vs.pageSize = (this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize) || 0, this.vs.scrollableVirtual = this.$props.scrollable === "virtual", this.vs.propsSkip = (this.$props.skip || 0) + (this.$props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (this.$props.skip || 0)) : 0);
     },
     getVirtualScroll() {
-      return q;
+      return J;
     },
     isAllData() {
       const {
@@ -294,11 +295,11 @@ const Ut = /* @__PURE__ */ Fe({
       else if (this.$props.totalGroupedHeight)
         this.vs.containerHeight = Math.min(1533915, this.$props.totalGroupedHeight);
       else if (this.$props.allGroupedItems && this.$props.allGroupedItems.data) {
-        const t = this.totalGroupedRows(ge(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
+        const t = this.totalGroupedRows(fe(this.$props.allGroupedItems, this.computedCollapsed, this.$props.uniqueField).data);
         this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * t);
       } else
         this.vs.containerHeight = 1533915;
-      if (this.slicedCurrentData = void 0, this.vs instanceof Ye) {
+      if (this.slicedCurrentData = void 0, this.vs instanceof Ze) {
         const {
           rowHeight: t = 0,
           detail: i,
@@ -307,9 +308,9 @@ const Ut = /* @__PURE__ */ Fe({
         let {
           detailRowHeight: l = 0
         } = this.$props;
-        l = i && r ? l : t, this.isAllData() ? (this.vs.total = this.currentData.length, this.slicedCurrentData = this.currentData.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this.currentData.length, t, l, this.currentData)) : this.vs.rowHeightService = new Ze(e, t, l);
+        l = i && r ? l : t, this.isAllData() ? (this.vs.total = this.currentData.length, this.slicedCurrentData = this.currentData.slice(this.vs.realSkip, this.vs.realSkip + this.vs.pageSize), this.vs.rowHeightService = this.rowHeightService(this.vs, this.currentData.length, t, l, this.currentData)) : this.vs.rowHeightService = new et(e, t, l);
         const n = this.vs.rowHeightService.totalHeight();
-        this.vs.containerHeight = nt ? Math.min(dt, n) : n;
+        this.vs.containerHeight = dt ? Math.min(ht, n) : n;
       }
     },
     onSkipChanged(e, t) {
@@ -317,11 +318,11 @@ const Ut = /* @__PURE__ */ Fe({
     },
     onTotalChanged(e, t) {
       const i = this.currentGroupable;
-      this.vs.reset(), this.vs = new q(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+      this.vs.reset(), this.vs = new J(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
     },
     onRowHeightChanged(e, t) {
       const i = this.currentGroupable;
-      this.vs.reset(), this.vs = new q(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
+      this.vs.reset(), this.vs = new J(i || this.$props.rowHeight === void 0 || this.$props.rowHeight === 0, this.$props.topCacheCount), this.resetVirtual(), this.setRefs();
     },
     scrollHandler(e) {
       clearTimeout(this.forceUpdateTimeout), this.$props.columnVirtualization && !this.vs.scrollableVirtual && (this.forceUpdateTimeout = setTimeout(() => {
@@ -347,22 +348,22 @@ const Ut = /* @__PURE__ */ Fe({
     },
     updateGroupCollapsed(e) {
       let t = this.computedCollapsed, i = t[e.level];
-      const r = this.$props.uniqueField, l = function(h, $) {
-        return h.value === e.dataItem.value && $ === e.level;
-      }, n = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, l, 0, null) : e.dataItem, u = fe(n || e.dataItem, r);
+      const r = this.$props.uniqueField, l = function(p, C) {
+        return p.value === e.dataItem.value && C === e.level;
+      }, n = this.allGroupedItems ? this.loopGroupedItems(this.allGroupedItems.data, l, 0, null) : e.dataItem, g = me(n || e.dataItem, r);
       if (e.value) {
         if (i && i.length) {
-          const h = i.indexOf(u);
-          h > -1 && i.splice(h, 1);
+          const p = i.indexOf(g);
+          p > -1 && i.splice(p, 1);
         }
       } else
-        i ? i.includes(u) || i.push(u) : i = [u];
+        i ? i.includes(g) || i.push(g) : i = [g];
       return t;
     },
     itemChange(e) {
-      const t = z.call(this, "itemchange");
+      const t = D.call(this, "itemchange");
       if (e.field === this.$props.expandField || (this.$props.group || this.$props.detail) && e.field === void 0) {
-        z.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
+        D.call(this, "expandchange") && e.dataItem && this.$emit("expandchange", {
           ...this.getArguments(e.event),
           collapsedGroups: this.updateGroupCollapsed(e),
           dataItem: e.dataItem,
@@ -470,10 +471,10 @@ const Ut = /* @__PURE__ */ Fe({
       }, t);
     },
     raiseDataEvent(e, t, i, r) {
-      z.call(this, e) ? this.$emit(e, {
+      D.call(this, e) ? this.$emit(e, {
         ...this.getArguments(r),
         ...t
-      }) : z.call(this, "datastatechange") && this.$emit("datastatechange", {
+      }) : D.call(this, "datastatechange") && this.$emit("datastatechange", {
         ...this.getArguments(r),
         data: {
           ...this.getDataState(),
@@ -482,17 +483,17 @@ const Ut = /* @__PURE__ */ Fe({
       });
     },
     columnReorder(e, t, i) {
-      const r = this._columns[e].depth, l = (h) => {
+      const r = this._columns[e].depth, l = (p) => {
         do
-          h++;
-        while (h < this._columns.length && this._columns[h].depth > r);
-        return h;
+          p++;
+        while (p < this._columns.length && this._columns[p].depth > r);
+        return p;
       }, n = this._columns.splice(e, l(e) - e);
-      this._columns.splice(e < t ? l(t - n.length) : t, 0, ...n), this._columns.filter((h) => h.declarationIndex >= 0).forEach((h, $) => h.orderIndex = $);
-      const u = this.getColumns();
+      this._columns.splice(e < t ? l(t - n.length) : t, 0, ...n), this._columns.filter((p) => p.declarationIndex >= 0).forEach((p, C) => p.orderIndex = C);
+      const g = this.getColumns();
       this.$emit("columnreorder", {
         target: this,
-        columns: u,
+        columns: g,
         event: i,
         prev: e,
         next: t
@@ -538,19 +539,19 @@ const Ut = /* @__PURE__ */ Fe({
       });
     },
     initColumns(e, t) {
-      const i = v.getIdPrefix(this.navigation);
-      if (this._columns = ot(e, this.getColumns(), {
+      const i = I.getIdPrefix(this.navigation);
+      if (this._columns = lt(e, this.getColumns(), {
         prevId: 0,
         idPrefix: i
       }), this._columns.length === 0) {
-        const n = lt(this.$props.dataItems, this.$props.group, this.$props.expandField, {
+        const n = at(this.$props.dataItems, this.$props.group, this.$props.expandField, {
           prevId: 0,
           idPrefix: i
         });
         this._columns = n;
       }
       this.$props.selectedField && this._columns.filter((n) => n.field === this.$props.selectedField).forEach((n) => {
-        n.width = n.width || "50px", n.internalCell = L(Ne), n.internalHeaderCell = L(ct);
+        n.width = n.width || "50px", n.internalCell = E(Ve), n.internalHeaderCell = E(ut);
       });
       const r = {
         id: "",
@@ -573,22 +574,22 @@ const Ut = /* @__PURE__ */ Fe({
         isAccessible: !0
       };
       let l = 0;
-      this.$props.expandField && z.call(this, "expandchange") && this.$props.detail && (this._columns.unshift({
+      this.$props.expandField && D.call(this, "expandchange") && this.$props.detail && (this._columns.unshift({
         ...r,
-        internalCell: L(Ve),
+        internalCell: E(Be),
         field: this.$props.expandField,
         headerClassName: "k-hierarchy-cell k-header",
-        id: v.generateNavigatableId(`${this._columns.length}`, i, "column"),
+        id: I.generateNavigatableId(`${this._columns.length}`, i, "column"),
         ...this.expandColumn
       }), l++);
       for (let n = 0; n < t; n++)
         this._columns.unshift({
           ...r,
           isAccessible: !1,
-          internalCell: L(me),
+          internalCell: E($e),
           field: "value"
         }), l++;
-      this._columns.slice(l).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += l)), this._columnsMap = at(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
+      this._columns.slice(l).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += l)), this._columnsMap = nt(this._columns), this.columnResize.columns = this._columns, this.dragLogic.columns = this._columns;
     },
     resolveTitle(e) {
       const t = this.findColumnByField(e), i = t && (t.title || t.field);
@@ -641,7 +642,7 @@ const Ut = /* @__PURE__ */ Fe({
     }
   },
   setup() {
-    const e = f(null), t = f(null), i = f(null), r = f(null), l = f(null), n = f(null), u = f(null), h = f(null), $ = f(null), y = f(null);
+    const e = $(null), t = $(null), i = $(null), r = $(null), l = $(null), n = $(null), g = $(null), p = $(null), C = $(null), k = $(null);
     return {
       groupPanelDivRef: e,
       dropElementClueRef: t,
@@ -649,27 +650,27 @@ const Ut = /* @__PURE__ */ Fe({
       headerRef: r,
       footerRef: l,
       gridNavRef: n,
-      colGroupRef: u,
-      scrollContainerRef: h,
-      scrollTableRef: $,
-      scrollTableBodyRef: y
+      colGroupRef: g,
+      scrollContainerRef: p,
+      scrollTableRef: C,
+      scrollTableBodyRef: k
     };
   },
   render() {
-    const e = Ge(this);
+    const e = Te(this);
     let t = this.$props.total || 0;
-    const i = v.getIdPrefix(this.navigation);
+    const i = I.getIdPrefix(this.navigation);
     let r = [];
-    Array.isArray(this.$props.dataItems) ? r = this.$props.dataItems : this.$props.dataItems && (r = ge(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, t = t || this.$props.dataItems.total);
-    const l = this.$props.groupable === !0 || E(this.$props.groupable) && this.$props.groupable.enabled !== !1;
+    Array.isArray(this.$props.dataItems) ? r = this.$props.dataItems : this.$props.dataItems && (r = fe(this.$props.dataItems, this.$props.collapsedGroups.length ? this.computedCollapsed : [], this.$props.uniqueField).data, t = t || this.$props.dataItems.total);
+    const l = this.$props.groupable === !0 || M(this.$props.groupable) && this.$props.groupable.enabled !== !1;
     this.columnResize.resizable = this.$props.resizable || !1, this.dragLogic.reorderable = this.$props.reorderable || !1, this.dragLogic.groupable = l, this.initializeVirtualization(t);
-    const n = E(this.$props.groupable) && this.$props.groupable.footer || "none";
+    const n = M(this.$props.groupable) && this.$props.groupable.footer || "none";
     this.currentData = [];
-    const u = rt(this.currentData, r, n, {
+    const g = ot(this.currentData, r, n, {
       index: this.$props.skip || 0
-    }, this.$props.group !== void 0, this.$props.expandField), h = e || [];
-    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns), this.initColumns(this.notHiddenColumns, u);
-    const $ = h.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("toolbar") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("toolbar") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("toolbar") !== -1), y = h.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("records") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("records") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("records") !== -1), H = this._columns.filter((s) => s.children.length === 0), S = l && o(Je, {
+    }, this.$props.group !== void 0, this.$props.expandField), p = e || [];
+    this.notHiddenColumns = this.filterHiddenColumns(this.$props.columns), this.initColumns(this.notHiddenColumns, g);
+    const C = p.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("toolbar") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("toolbar") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("toolbar") !== -1), k = p.filter((s) => s && s.tag && s.tag.toLowerCase().indexOf("records") !== -1 || s.componentOptions && s.componentOptions.tag && s.componentOptions.tag.toLowerCase().indexOf("records") !== -1 || s.type && s.type.name && s.type.name.toLowerCase().indexOf("records") !== -1), S = this._columns.filter((s) => s.children.length === 0), x = l && o(Qe, {
       ref: (s) => {
         this.groupPanelDivRef = s;
       },
@@ -680,22 +681,22 @@ const Ut = /* @__PURE__ */ Fe({
       onDragHandler: this.dragLogic.dragHandler,
       onReleaseHandler: this.dragLogic.releaseHandler,
       resolveTitle: this.resolveTitle
-    }, null), x = (this.dragLogic.reorderable || this.dragLogic.groupable) && U && document && document.body, J = [x && o(it, {
+    }, null), _ = (this.dragLogic.reorderable || this.dragLogic.groupable) && U && document && document.body, Q = [_ && o(rt, {
       ref: (s) => {
         this.dropElementClueRef = s;
       }
-    }, null), x && o(st, {
+    }, null), _ && o(it, {
       ref: (s) => {
         this.dragElementClueRef = s;
       }
-    }, null)], Q = o(Ke, {
+    }, null)], X = o(Ue, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (s) => {
         this.headerRef = s;
       },
-      headerRow: o(Ue, {
+      headerRow: o(qe, {
         grid: this,
         sort: this.$props.sort,
         groupable: this.$props.groupable,
@@ -704,7 +705,7 @@ const Ut = /* @__PURE__ */ Fe({
         onSortChange: this.sortChangeHandler,
         filter: this.$props.filter,
         filterable: this.$props.filterable,
-        filterOperators: this.$props.filterOperators || ue,
+        filterOperators: this.$props.filterOperators || ge,
         onFilterChange: this.filterChangeHandler,
         columnMenu: this.$props.columnMenu,
         columnMenuIcon: this.$props.columnMenuIcon,
@@ -720,12 +721,12 @@ const Ut = /* @__PURE__ */ Fe({
         cellRender: this.$props.headerCellRender,
         isRtl: this.isRtl,
         isColCountDefined: this.getAriaColCount !== void 0,
-        filterRow: this.$props.filterable && o(qe, {
+        filterRow: this.$props.filterable && o(Je, {
           grid: this,
           size: this.$props.size,
           columns: this._columns,
           filter: this.$props.filter,
-          filterOperators: this.$props.filterOperators || ue,
+          filterOperators: this.$props.filterOperators || ge,
           onFilterchange: this.filterChangeHandler,
           sort: this.$props.sort,
           cellRender: this.$props.filterCellRender,
@@ -733,130 +734,131 @@ const Ut = /* @__PURE__ */ Fe({
           ariaRowIndex: this._columnsMap.length + 1
         }, null) || void 0
       }, null),
-      cols: H.map(function(s, d) {
+      cols: S.map(function(s, d) {
         return o("col", {
           key: d.toString(),
           width: s.width !== void 0 ? Math.floor(parseFloat(s.width.toString())) + "px" : void 0
         }, null);
       }, this)
-    }, null), X = this._columns.some((s) => !!s.footerCell) ? o(Qe, {
+    }, null), Y = this._columns.some((s) => !!s.footerCell) ? o(Xe, {
       size: this.$props.size,
       columnResize: this.columnResize,
       staticHeaders: this.$props.scrollable !== "none",
       ref: (s) => {
         this.footerRef = s;
       },
-      row: o(Xe, {
+      row: o(Ye, {
         isRtl: this.isRtl,
         rowIndex: this.getAriaRowCount + 1,
         columns: this._columns.map(function(s) {
           return {
             ...s,
-            footerCell: I.call(this, s.footerCell, w.call(this))
+            footerCell: y.call(this, s.footerCell, R.call(this))
           };
         }, this)
       }, null),
-      cols: H.map(function(s, d) {
+      cols: S.map(function(s, d) {
         return o("col", {
           key: d.toString(),
           width: s.width !== void 0 ? Math.floor(parseFloat(s.width.toString())) + "px" : void 0
         }, null);
       }, this)
-    }, null) : o("span", null, null), A = I.call(this, this.$props.cellRender, w.call(this)), be = this.showLicenseWatermark ? o(De, null, null) : null, P = this.$attrs.style, ve = P && E(P) && P["width"] || "", Ie = parseFloat(ve.toString()), we = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, {
-      colSpans: N,
+    }, null) : o("span", null, null), P = y.call(this, this.$props.cellRender, R.call(this)), ve = this.showLicenseWatermark ? o(Oe, null, null) : null, N = this.$attrs.style, Ie = N && M(N) && N["width"] || "", we = parseFloat(Ie.toString()), ye = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, {
+      colSpans: V,
       hiddenColumns: Re
-    } = Ee({
+    } = Me({
       enabled: this.$props.columnVirtualization,
       columns: this._columns,
-      tableViewPortWidth: Ie,
-      scrollLeft: we
-    }), V = function(s, d, C) {
-      let _ = !1;
-      const R = this.$props.selectedField, b = R ? he(R, s.dataItem) : void 0;
+      tableViewPortWidth: we,
+      scrollLeft: ye
+    }), He = function(s, d, v) {
+      let F = !1;
+      const H = this.$props.selectedField, f = H ? pe(H, s.dataItem) : void 0, u = this.$props.highlight && this.$props.dataItemKey && q(this.$props.dataItemKey)(s.dataItem) !== void 0 ? this.$props.highlight[q(this.$props.dataItemKey)(s.dataItem)] : void 0;
       return {
-        row: this._columns.map(function(a, p) {
-          if (Re[p])
+        row: this._columns.map(function(a, h) {
+          if (Re[h])
             return null;
-          const k = `${a.className ? a.className + " " : ""}${a.locked ? "k-grid-content-sticky" : ""}`, F = a.left !== void 0 ? this.isRtl ? {
+          const z = `${a.className ? a.className + " " : ""}${a.locked ? "k-grid-content-sticky" : ""}`, G = a.left !== void 0 ? this.isRtl ? {
             left: a.right + "px",
             right: a.left + "px"
           } : {
             left: a.left + "px",
             right: a.right + "px"
           } : {};
-          let T = !1;
+          let w = !1;
           if (a.editable && this.$props.editField) {
-            const c = he(this.$props.editField, s.dataItem);
-            (c === !0 || c === a.field) && (_ = !0, T = !0);
+            const c = pe(this.$props.editField, s.dataItem);
+            (c === !0 || c === a.field) && (F = !0, w = !0);
           }
-          let g;
-          a.cell && (g = I.call(this, a.cell, w.call(this)));
-          const O = this.computedCollapsed && this.computedCollapsed[s.level] && this.computedCollapsed[s.level].some((c) => c === fe(s.dataItem, this.$props.uniqueField)), K = O ? !O : s.expanded;
+          let m;
+          a.cell && (m = y.call(this, a.cell, R.call(this)));
+          const L = this.computedCollapsed && this.computedCollapsed[s.level] && this.computedCollapsed[s.level].some((c) => c === me(s.dataItem, this.$props.uniqueField)), K = L ? !L : s.expanded;
           return a.internalCell ? o(a.internalCell, {
-            key: p,
-            id: v.generateNavigatableId(`${d}-${String(p)}`, i),
-            colSpan: N[p],
+            key: h,
+            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
+            colSpan: V[h],
             dataItem: s.dataItem,
             field: a.field || "",
             editor: a.editor,
             format: a.format,
             readFormat: a.readFormat,
             type: a.type,
-            className: k,
-            render: g || A,
+            className: z,
+            render: m || P,
             onChange: this.itemChange,
             onSelectionchange: (c) => this.selectionChangeHandler({
               event: c,
               dataItem: s.dataItem,
-              dataIndex: C,
-              columnIndex: p
+              dataIndex: v,
+              columnIndex: h
             }),
-            columnIndex: p,
+            columnIndex: h,
             columnsCount: this._columns.filter((c) => !c.children.length).length,
             rowType: s.rowType,
             level: s.level,
             expanded: K,
             dataIndex: s.dataIndex,
-            style: F,
+            style: G,
             ariaColumnIndex: a.ariaColumnIndex,
             isRtl: this.isRtl,
-            isSelected: Array.isArray(b) && b.indexOf(p) > -1
-          }, null) : T ? o(je, {
-            id: v.generateNavigatableId(`${d}-${String(p)}`, i),
-            key: p,
-            colSpan: N[p],
+            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
+            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
+          }, null) : w ? o(Ke, {
+            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
+            key: h,
+            colSpan: V[h],
             dataItem: s.dataItem,
             field: a.field || "",
             editor: a.editor,
             format: a.format,
             readFormat: a.readFormat,
             type: a.type,
-            className: k,
-            render: g || A,
+            className: z,
+            render: m || P,
             onEdit: this.editHandler,
             onRemove: this.removeHandler,
             onSave: this.saveHandler,
             onCancel: this.cancelHandler,
             onChange: this.itemChange,
-            columnIndex: p,
+            columnIndex: h,
             columnsCount: this._columns.filter((c) => !c.children.length).length,
             rowType: s.rowType,
             level: s.level,
             expanded: K,
             dataIndex: s.dataIndex,
-            style: F
-          }, null) : o(ht, {
-            key: p,
-            id: v.generateNavigatableId(`${d}-${String(p)}`, i),
-            colSpan: N[p],
+            style: G
+          }, null) : o(pt, {
+            key: h,
+            id: I.generateNavigatableId(`${d}-${String(h)}`, i),
+            colSpan: V[h],
             dataItem: s.dataItem,
             field: a.field || "",
             editor: a.editor,
             format: a.format,
             readFormat: a.readFormat,
             type: a.type,
-            className: k,
-            render: g || A,
+            className: z,
+            render: m || P,
             onCellclick: this.cellClickHandler,
             onCellkeydown: this.cellKeydownHandler,
             onEdit: this.editHandler,
@@ -867,97 +869,101 @@ const Ut = /* @__PURE__ */ Fe({
             onSelectionchange: (c) => this.selectionChangeHandler({
               event: c,
               dataItem: s.dataItem,
-              dataIndex: C,
-              columnIndex: p
+              dataIndex: v,
+              columnIndex: h
             }),
-            columnIndex: p,
+            columnIndex: h,
             columnsCount: this._columns.filter((c) => !c.children.length).length,
             rowType: s.rowType,
             level: s.level,
             expanded: K,
             dataIndex: s.dataIndex,
-            style: F
+            style: G,
+            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
+            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
           }, null);
         }, this),
-        isInEdit: _,
-        isSelected: typeof b == "boolean" && b
+        isInEdit: F,
+        isSelected: typeof f == "boolean" && f,
+        isHighlighted: typeof u == "boolean" && u
       };
     };
-    let Y = 0;
+    let Z = 0;
     if (this.$props.scrollable === "virtual" && this.totalGroupedRows(this.currentData) / 2 > this.$props.take) {
       const s = this.vs.topCacheCount + this.vs.attendedSkip - (this.$props.skip || 0);
       for (let d = 0; d < s; ) {
-        const C = this.currentData.shift();
-        if (C)
-          this.currentData.push(C), Y++, C.rowType === "groupHeader" && d--;
+        const v = this.currentData.shift();
+        if (v)
+          this.currentData.push(v), Z++, v.rowType === "groupHeader" && d--;
         else
           break;
         d++;
       }
     }
-    const Z = (s) => s >= this.currentData.length - Y, ke = I.call(this, this.$props.detail, w.call(this));
+    const ee = (s) => s >= this.currentData.length - Z, ke = y.call(this, this.$props.detail, R.call(this));
     let B = this.vs.propsSkip || 0;
-    const G = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
-    let D, W = -1, j = 0;
-    const ee = this.currentData.length && this.currentData.map(function(s, d) {
+    const T = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
+    let O, W = -1, j = 0;
+    const te = this.currentData.length && this.currentData.map(function(s, d) {
       s.rowType === "data" && (B++, W++), this.$props.alternatePerGroup && s.rowType === "groupHeader" && (B = 0);
-      const C = B % 2 === 0, _ = this.$props.dataItemKey && Te(this.$props.dataItemKey)(s.dataItem), R = d + (this.vs.propsSkip || 0), b = _ || "ai" + R, a = b + "_1";
-      D = R + G + j;
-      const p = I.call(this, this.$props.rowRender, w.call(this));
-      let k;
-      this.$props.detail && s.rowType === "data" && s.expanded && (k = H.length - (this.$props.expandField ? 1 : 0) - (this.$props.group ? this.$props.group.length : 0) || 1, j++, D = R + G + j);
-      const F = d * 2 + G, T = d * 2 + G + 1;
-      return [o(pt, {
-        key: b,
+      const v = B % 2 === 0, F = this.$props.dataItemKey && q(this.$props.dataItemKey)(s.dataItem), H = d + (this.vs.propsSkip || 0), f = F || "ai" + H, u = f + "_1";
+      O = H + T + j;
+      const a = y.call(this, this.$props.rowRender, R.call(this));
+      let h;
+      this.$props.detail && s.rowType === "data" && s.expanded && (h = S.length - (this.$props.expandField ? 1 : 0) - (this.$props.group ? this.$props.group.length : 0) || 1, j++, O = H + T + j);
+      const z = d * 2 + T, G = d * 2 + T + 1, w = He.call(this, s, f, W);
+      return [o(ct, {
+        key: f,
         dataItem: s.dataItem,
-        isAltRow: C,
-        isInEdit: V.isInEdit,
-        isSelected: V.isSelected,
+        isAltRow: v,
+        isInEdit: w.isInEdit,
+        isSelected: w.isSelected,
+        isHighlighted: w.isHighlighted,
         rowType: s.rowType,
-        isHidden: Z(d),
-        onRowclick: (g) => this.rowClick(g, s),
-        onRowdblclick: (g) => this.rowDoubleClick(g, s),
+        isHidden: ee(d),
+        onRowclick: (m) => this.rowClick(m, s),
+        onRowdblclick: (m) => this.rowDoubleClick(m, s),
         selectedField: this.$props.selectedField,
         rowHeight: this.$props.rowHeight,
-        render: p,
-        ariaRowIndex: this.$props.detail ? F : D,
+        render: a,
+        ariaRowIndex: this.$props.detail ? z : O,
         dataIndex: W,
         class: this.$props.rowClass ? this.$props.rowClass(s) : ""
       }, {
-        default: () => [V.call(this, s, b, W).row]
+        default: () => [w.row]
       }), this.$props.detail && s.rowType === "data" && s.expanded && o("tr", {
-        key: a,
-        class: C ? "k-table-row k-table-alt-row k-detail-row k-alt" : "k-table-row k-detail-row",
+        key: u,
+        class: v ? "k-table-row k-table-alt-row k-detail-row k-alt" : "k-table-row k-detail-row",
         style: {
-          visibility: Z(d) ? "hidden" : "",
+          visibility: ee(d) ? "hidden" : "",
           height: this.$props.detailRowHeight + "px"
         },
         role: "row",
-        "aria-rowindex": this.$props.detail ? T : D
-      }, [this.$props.group && this.$props.group.map(function(g, O) {
-        return o(me, {
+        "aria-rowindex": this.$props.detail ? G : O
+      }, [this.$props.group && this.$props.group.map(function(m, L) {
+        return o($e, {
           id: "",
           dataIndex: s.dataIndex,
-          field: g.field,
+          field: m.field,
           dataItem: s.dataItem,
-          key: O
+          key: L
         }, null);
-      }, this), this.$props.expandField && o(Be, {
-        id: v.generateNavigatableId(`${a}-dhcell`, i)
-      }, null), o(We, {
+      }, this), this.$props.expandField && o(We, {
+        id: I.generateNavigatableId(`${u}-dhcell`, i)
+      }, null), o(je, {
         dataItem: s.dataItem,
         dataIndex: s.dataIndex,
-        colSpan: k,
+        colSpan: h,
         ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
         detail: this.$props.detail ? ke : void 0,
-        id: v.generateNavigatableId(`${a}-dcell`, i)
+        id: I.generateNavigatableId(`${u}-dcell`, i)
       }, null)])];
     }, this) || o("tr", {
       class: "k-table-row k-grid-norecords"
     }, [o("td", {
       class: "k-table-td",
       colspan: this._columns.filter((s) => !s.children.length).length
-    }, [y.length ? y : o(ut, null, null)])]), ye = I.call(this, this.$props.pager, w.call(this)), He = this.$props.pageable && o(Me, {
+    }, [k.length ? k : o(gt, null, null)])]), Se = y.call(this, this.$props.pager, R.call(this)), xe = this.$props.pageable && o(Ae, {
       class: "k-grid-pager",
       onPagesizechange: this.pageChangeHandler,
       onPagechange: this.pageChangeHandler,
@@ -966,11 +972,11 @@ const Ut = /* @__PURE__ */ Fe({
       skip: this.vs.propsSkip || 0,
       pageSize: (this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize) || 10,
       messagesMap: Ce,
-      settings: Ae(this.$props.pageable || {})
-    }, null), te = le.call(this, {
-      h: oe,
-      template: ye,
-      defaultRendering: He,
+      settings: Pe(this.$props.pageable || {})
+    }, null), se = ae.call(this, {
+      h: le,
+      template: Se,
+      defaultRendering: xe,
       additionalProps: {
         ...this.$props,
         skip: this.vs.propsSkip || 0,
@@ -980,44 +986,44 @@ const Ut = /* @__PURE__ */ Fe({
         pagesizechange: this.pageChangeHandler,
         pagechange: this.pageChangeHandler
       }
-    }), Se = (s) => this.$props.sort && this.$props.sort.filter((d) => d.field === s).length > 0, se = o("colgroup", {
-      ref: M(this, "colGroup")
-    }, [H.map(function(s, d) {
+    }), _e = (s) => this.$props.sort && this.$props.sort.filter((d) => d.field === s).length > 0, ie = o("colgroup", {
+      ref: A(this, "colGroup")
+    }, [S.map(function(s, d) {
       return o("col", {
         key: d.toString(),
-        class: Se(s.field) ? "k-sorted" : void 0,
+        class: _e(s.field) ? "k-sorted" : void 0,
         width: s.width !== void 0 ? s.width.toString().indexOf("%") !== -1 ? s.width : Math.floor(parseFloat(s.width.toString())) + "px" : void 0
       }, null);
-    }, this)]), ie = {
+    }, this)]), re = {
       height: this.getCorrectHeight
-    }, xe = I.call(this, this.$props.loader, w.call(this)), _e = this.$props.loader && o("div", {
+    }, Fe = y.call(this, this.$props.loader, R.call(this)), ze = this.$props.loader && o("div", {
       class: "k-loader-container k-loader-container-md k-loader-top"
     }, [o("div", {
       class: "k-loader-container-overlay k-overlay-light"
     }, null), o("div", {
       class: "k-loader-container-inner"
-    }, [o(Pe, {
+    }, [o(Ne, {
       size: "large",
       type: "infinite-spinner"
-    }, null)])]), re = le.call(this, {
-      h: oe,
-      template: xe,
-      defaultRendering: _e
+    }, null)])]), oe = ae.call(this, {
+      h: le,
+      template: Fe,
+      defaultRendering: ze
     });
-    return this.$props.scrollable === "none" ? o(pe, {
+    return this.$props.scrollable === "none" ? o(ce, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(ce, {
+      default: () => [o(ue, {
         ref: (s) => {
           this.gridNavRef = s;
         },
         currentData: this.currentData,
-        style: ie,
+        style: re,
         class: this.nonscrollableWrapperClass
       }, {
-        default: () => [$, S, o("div", {
+        default: () => [C, x, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
@@ -1029,36 +1035,36 @@ const Ut = /* @__PURE__ */ Fe({
             tableLayout: "fixed"
           },
           role: "none"
-        }, [se, Q, o("tbody", {
+        }, [ie, X, o("tbody", {
           class: "k-table-tbody",
           "data-keyboardnavbody": !0
-        }, [ee, re]), X])]), te, J]
+        }, [te, oe]), Y])]), se, Q]
       })]
-    }) : o(pe, {
+    }) : o(ce, {
       ref: "navRef",
       id: this._gridId,
       navigatable: this.$props.navigatable
     }, {
-      default: () => [o(ce, {
+      default: () => [o(ue, {
         ref: (s) => {
           this.gridNavRef = s;
         },
         currentData: this.currentData,
-        style: ie,
+        style: re,
         class: this.scrollableWrapperClass
       }, {
-        default: () => [$, S, o("div", {
+        default: () => [C, x, o("div", {
           role: "grid",
           class: "k-grid-aria-root",
           id: this._gridRoleElementId,
           "aria-colcount": this.getAriaColCount,
           "aria-rowcount": this.getAriaRowCount
-        }, [Q, o("div", {
+        }, [X, o("div", {
           class: "k-grid-container",
           role: "presentation"
         }, [o("div", {
           role: "presentation",
-          ref: M(this, "scrollContainer"),
+          ref: A(this, "scrollContainer"),
           class: "k-grid-content k-virtual-content",
           onScroll: this.scrollHandler
         }, [o("div", {
@@ -1067,24 +1073,24 @@ const Ut = /* @__PURE__ */ Fe({
         }, [o("table", {
           role: "none",
           class: this.gridTableClass,
-          ref: M(this, "scrollTable")
-        }, [se, o("tbody", {
+          ref: A(this, "scrollTable")
+        }, [ie, o("tbody", {
           class: "k-table-tbody",
           role: "rowgroup",
           "data-keyboardnavbody": !0,
-          ref: M(this, "scrollTableBody")
-        }, [ee])])]), o("div", {
+          ref: A(this, "scrollTableBody")
+        }, [te])])]), o("div", {
           class: "k-height-container",
           role: "presentation"
         }, [o("div", {
           style: this.$props.scrollable === "virtual" ? {
             height: this.vs.containerHeight + "px"
           } : {}
-        }, null)])]), re]), X, be]), te, J]
+        }, null)])]), oe]), Y, ve]), se, Q]
       })]
     });
   }
 });
 export {
-  Ut as Grid
+  qt as Grid
 };