@progress/kendo-vue-grid/Grid.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as Fe, markRaw as L, ref as f, createVNode as o, h as oe } from "vue";
import { SvgIcon as ze, validatePackage as Ge, shouldShowValidationUI as De, guid as le, isRtl as ae, canUseDOM as U, kendoThemeMaps as ne, isObject as E, getRef as m, hasListener as z, getDefaultSlots as Te, templateRendering as I, getListeners as w, WatermarkOverlay as Oe, getter as Le, getTemplate as de, setRef as M, 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, firefox as rt, firefoxMaxHeight as ot, groupedFirstItemValue as fe, readColumns as lt, autoGenerateColumns as at, mapColumns as nt, flatData 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 { pagerMessagesMap as Ce } from "./messages/main.mjs";
const Ut = /* @__PURE__ */ Fe({
  name: "KendoGrid",
  props: {
    topCacheCount: {
      type: Number,
      default: 0
    },
    collapsedGroups: {
      type: Array,
      default: function() {
        return [];
      }
    },
    uniqueField: String,
    totalGroupedHeight: Number,
    allGroupedItems: Object,
    alternatePerGroup: Boolean,
    columns: Array,
    columnVirtualization: Boolean,
    dataItems: [Array, Object],
    sortable: [Boolean, Object],
    sort: Array,
    filterable: Boolean,
    filterOperators: Object,
    filterCellRender: [String, Function, Object],
    headerCellRender: [String, Function, Object],
    loader: [String, Function, Object, Boolean],
    filter: Object,
    pageable: [Boolean, Object],
    pageSize: Number,
    total: Number,
    skip: Number,
    take: Number,
    expandField: String,
    expandColumn: Object,
    selectedField: String,
    cellRender: [String, Function, Object],
    rowRender: [String, Function, Object],
    resizable: Boolean,
    reorderable: Boolean,
    group: Array,
    groupable: [Boolean, Object],
    editField: String,
    rowClass: Function,
    scrollable: {
      type: String,
      default: "scrollable"
    },
    size: {
      type: String,
      default: "medium",
      validator: function(e) {
        return ["small", "medium"].includes(e);
      }
    },
    pager: [String, Function, Object],
    rowHeight: Number,
    detailRowHeight: Number,
    detail: [String, Function, Object],
    columnMenu: [Boolean, String, Function, Object],
    columnMenuAnimate: {
      type: [Boolean, Object],
      default: function() {
        return !0;
      }
    },
    columnMenuIcon: ze,
    dataItemKey: String,
    navigatable: {
      type: Boolean,
      default: !1
    },
    onItemchange: Function,
    onExpandchange: Function,
    onDatastatechange: Function,
    onPagechange: Function,
    onSortchange: Function,
    onFilterchange: Function,
    onGroupchange: Function
  },
  data() {
    return {
      isRtl: !1,
      context: void 0,
      navigation: void 0,
      showLicenseWatermark: !1,
      notHiddenColumns: []
    };
  },
  watch: {
    skip: function(e, t) {
      this.onSkipChanged(e, t);
    },
    total: function(e, t) {
      this.onTotalChanged(e, t);
    },
    rowHeight: function(e, t) {
      this.onRowHeightChanged(e, t);
    }
  },
  created() {
    Ge($e), this.showLicenseWatermark = De($e), 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 = le(), this._gridRoleElementId = le(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
  },
  mounted() {
    this.setRefs();
    const e = ae(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 = ae(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() {
    this.gridUnmounted();
  },
  computed: {
    nonscrollableWrapperClass() {
      const {
        size: e
      } = this.$props;
      return {
        "k-grid": !0,
        "k-grid-md": !e,
        [`k-grid-${ne.sizeMap[e] || e}`]: e
      };
    },
    scrollableWrapperClass() {
      const {
        scrollable: e
      } = this.$props;
      return {
        ...this.nonscrollableWrapperClass,
        "k-grid-virtual": e === "virtual"
      };
    },
    gridTableClass() {
      const {
        size: e
      } = this.$props;
      return {
        "k-table": !0,
        "k-grid-table": !0,
        "k-grid-md": !e,
        [`k-table-${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;
    },
    computedCollapsed() {
      let e = [];
      if (this.$props.group)
        for (let t = 0; t < this.$props.group.length; t++)
          this.$props.collapsedGroups[t] ? e.push(this.$props.collapsedGroups[t]) : e.push([]);
      return e;
    },
    // Calculates the value of the ariaRowcount attribute.
    getAriaRowCount() {
      const e = this.$props.dataItems, t = this.$props.total !== void 0 && this.$props.total || e != null && e.total !== void 0 && e.total || e != null && e.length !== void 0 && e.length || 0;
      return this.$props.detail ? this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t * 2 + (this._columns.some((i) => !!i.footerCell) ? 1 : 0) : !this.$props.pageable && this.$props.scrollable === "scrollable" ? void 0 : this.$props.groupable ? -1 : this._columnsMap.length + (this.$props.filterable ? 1 : 0) + t + (this._columns.some((i) => !!i.footerCell) ? 1 : 0);
    },
    // Calculates the value of the ariaColcount attribute.
    // Based on the result of this method the ariaColIndex is rendered or not in the HeaderRow TH elements
    getAriaColCount() {
      const e = this.$props.columns, t = this.$props.columnVirtualization, i = e && e.filter((r) => r.hidden !== void 0).length !== 0;
      if (t || i)
        return e.length !== 0 ? e.length : -1;
    }
  },
  methods: {
    getColumnsEssentialProps(e) {
      return e && JSON.stringify(e.map((t) => ({
        id: t.id,
        field: t.field,
        title: t.title,
        children: t.children
      })));
    },
    calculateMedia() {
      const e = this.filterHiddenColumns(this.$props.columns || []);
      this.getColumnsEssentialProps(this.notHiddenColumns) !== this.getColumnsEssentialProps(e) && this.$forceUpdate();
    },
    filterHiddenColumns(e) {
      if (!e || e.length === 0)
        return e;
      const t = (i) => ({
        ...i,
        children: i.children && i.children.length > 0 ? this.filterHiddenColumns(i.children) : i.children
      });
      return [...e].filter((i) => !i.hidden).filter((i) => U && i && i.media ? window.matchMedia(i.media).matches : i).map((i) => t(i));
    },
    /**
     * A getter of the current columns. Gets the current column width or current columns,
     * or any other [`GridColumnProps`]({% slug api_grid_gridcolumnprops %}) for each defined column.
     * Can be used on each Grid instance. To obtain the instance of the rendered Grid, use the `ref`
     * callback. The following example demonstrates how to reorder the columns by dragging their handlers
     * and check the properties afterwards. You can check the result in the browser console.
     */
    getColumns() {
      const e = this._columns.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1), t = (i) => (i.sort((r, l) => r.declarationIndex - l.declarationIndex), i.map((r) => {
        const {
          declarationIndex: l,
          parentIndex: n,
          depth: u,
          colSpan: h,
          rowSpan: $,
          index: y,
          kFirst: H,
          children: S,
          ...x
        } = r;
        return S.length ? {
          children: t(S),
          ...x
        } : x;
      }));
      return t(e);
    },
    setRefs() {
      let e = "$el";
      const t = m(this, "gridNav");
      t && (this._element = t[e]);
      const i = m(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");
    },
    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();
    },
    resetVirtual() {
      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;
    },
    isAllData() {
      const {
        dataItems: e,
        total: t
      } = this.$props;
      return Array.isArray(e) ? e.length === t : e ? t === e.total : !1;
    },
    initializeVirtualization(e) {
      if ((this.$props.total !== this._prevTotal || this.$props.scrollable === "virtual" !== this.vs.scrollableVirtual) && this.vs.reset(), this.resetVirtual(), this.vs.total = e, this.$props.rowHeight !== void 0 && this.$props.rowHeight > 0 && !this.currentGroupable)
        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * (e || 0));
      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);
        this.vs.containerHeight = Math.min(1533915, this.$props.rowHeight * t);
      } else
        this.vs.containerHeight = 1533915;
      if (this.slicedCurrentData = void 0, this.vs instanceof Ye) {
        const {
          rowHeight: t = 0,
          detail: i,
          expandField: r
        } = this.$props;
        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);
        const n = this.vs.rowHeightService.totalHeight();
        this.vs.containerHeight = rt ? Math.min(ot, n) : n;
      }
    },
    onSkipChanged(e, t) {
      Math.max(0, this.vs.attendedSkip) !== e && e !== void 0 && (this.vs.attendedSkip = e, this.vs.propsSkip = (e || 0) + (this.$props.scrollable === "virtual" ? this.vs.topCacheCount + (this.vs.attendedSkip - (e || 0)) : 0));
    },
    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();
    },
    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();
    },
    scrollHandler(e) {
      clearTimeout(this.forceUpdateTimeout), this.$props.columnVirtualization && !this.vs.scrollableVirtual && (this.forceUpdateTimeout = setTimeout(() => {
        this.$forceUpdate();
      }, 0)), this._header && this._header.setScrollLeft(e.currentTarget.scrollLeft), this._footer && this._footer.setScrollLeft(e.currentTarget.scrollLeft), this.vs && this.vs.scrollHandler(e), this.$emit("scroll", e);
    },
    rowClick(e, t) {
      e.target.type !== "checkbox" && this.$emit("rowclick", {
        dataItem: t.dataItem,
        ...this.getArguments(e)
      });
    },
    rowDoubleClick(e, t) {
      e.target.type !== "checkbox" && this.$emit("rowdblclick", {
        dataItem: t.dataItem,
        ...this.getArguments(e)
      });
    },
    loopGroupedItems(e, t, i = 0, r = null) {
      return e.forEach((l) => {
        !r && t(l, i) && (r = l), l.items && l.items.length && !r && (r = this.loopGroupedItems(l.items, t, i + 1, r));
      }), r;
    },
    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);
      if (e.value) {
        if (i && i.length) {
          const h = i.indexOf(u);
          h > -1 && i.splice(h, 1);
        }
      } else
        i ? i.includes(u) || i.push(u) : i = [u];
      return t;
    },
    itemChange(e) {
      const t = z.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", {
          ...this.getArguments(e.event),
          collapsedGroups: this.updateGroupCollapsed(e),
          dataItem: e.dataItem,
          value: e.value
        });
        return;
      }
      t && this.$emit("itemchange", {
        ...this.getArguments(e.event),
        dataItem: e.dataItem,
        field: e.field,
        value: e.value
      });
    },
    cellClickHandler(e) {
      this.$emit("cellclick", {
        dataItem: e.dataItem,
        field: e.field
      });
    },
    cellKeydownHandler(e) {
      this.$emit("cellkeydown", e);
    },
    editHandler(e) {
      this.$emit("edit", {
        dataItem: e
      });
    },
    removeHandler(e) {
      this.$emit("remove", {
        dataItem: e
      });
    },
    saveHandler(e) {
      this.$emit("save", {
        dataItem: e
      });
    },
    cancelHandler(e) {
      this.$emit("cancel", {
        dataItem: e
      });
    },
    selectionChangeHandler(e) {
      const {
        event: t,
        dataItem: i,
        dataIndex: r,
        columnIndex: l
      } = e;
      this.$emit("selectionchange", {
        ...this.getArguments(t.event),
        dataItem: i,
        startColIndex: l,
        endColIndex: l,
        startRowIndex: r,
        endRowIndex: r,
        dataItems: this.getLeafDataItems(),
        altKey: !1,
        ctrlKey: !1,
        shiftKey: !1,
        metaKey: !1,
        isDrag: !1,
        componentId: this._gridId,
        selectedField: this.$props.selectedField || ""
      });
    },
    onHeaderSelectionChangeHandler(e) {
      this.$emit("headerselectionchange", {
        field: e.field,
        event: e.event,
        target: this
      });
    },
    pageChangeHandler(e, t) {
      this.raiseDataEvent("pagechange", {
        page: e,
        event: t
      }, {
        skip: e.skip,
        take: e.take
      }, t);
    },
    sortChangeHandler(e, t) {
      this.raiseDataEvent("sortchange", {
        sort: e
      }, {
        sort: e
      }, t);
    },
    filterChangeHandler(e, t) {
      this.raiseDataEvent("filterchange", {
        filter: e
      }, {
        filter: e,
        skip: 0
      }, t);
    },
    groupChangeHandler(e, t) {
      this.raiseDataEvent("groupchange", {
        group: e
      }, {
        group: e,
        skip: 0
      }, t);
    },
    raiseDataEvent(e, t, i, r) {
      z.call(this, e) ? this.$emit(e, {
        ...this.getArguments(r),
        ...t
      }) : z.call(this, "datastatechange") && this.$emit("datastatechange", {
        ...this.getArguments(r),
        data: {
          ...this.getDataState(),
          ...i
        }
      });
    },
    columnReorder(e, t, i) {
      const r = this._columns[e].depth, l = (h) => {
        do
          h++;
        while (h < this._columns.length && this._columns[h].depth > r);
        return h;
      }, 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.$emit("columnreorder", {
        target: this,
        columns: u,
        event: i,
        prev: e,
        next: t
      });
    },
    groupReorder(e, t, i) {
      if (this.$props.group === void 0)
        return;
      const r = this.$props.group.slice();
      r.splice(t, 0, ...r.splice(e, 1)), this.groupChangeHandler(r, i);
    },
    columnToGroup(e, t, i) {
      const r = this._columns[e].field;
      if (!r)
        return;
      const l = (this.$props.group || []).slice();
      l.splice(t, 0, {
        field: r
      }), this.groupChangeHandler(l, i);
    },
    resetTableWidth() {
      let e = 0;
      if (!this.columnResize.colGroupMain)
        return;
      const t = this.columnResize.colGroupMain.children;
      for (let i = 0; i < t.length; i++) {
        const r = t[i].width;
        if (!r)
          return;
        e += parseFloat(r.toString());
      }
      e = Math.round(e), this._header && this._header.setWidth(e), this._footer && this._footer.setWidth(e), this.vs.table && (this.vs.table.style.width = e + "px");
    },
    onResize(e, t, i, r, l) {
      this.resetTableWidth(), this.$emit("columnresize", {
        columns: this.getColumns(),
        index: e,
        event: r,
        newWidth: t,
        oldWidth: i,
        end: l,
        target: this
      });
    },
    initColumns(e, t) {
      const i = v.getIdPrefix(this.navigation);
      if (this._columns = lt(e, this.getColumns(), {
        prevId: 0,
        idPrefix: i
      }), this._columns.length === 0) {
        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);
      });
      const r = {
        id: "",
        resizable: !0,
        width: "32px",
        title: " ",
        declarationIndex: -1,
        orderIndex: -1,
        children: [],
        parentIndex: -1,
        depth: 0,
        colSpan: 0,
        rowSpan: 0,
        left: 0,
        right: 0,
        // position: 'sticky',
        index: 0,
        rightBorder: !1,
        ariaColumnIndex: 1,
        isAccessible: !0
      };
      let l = 0;
      this.$props.expandField && z.call(this, "expandchange") && this.$props.detail && (this._columns.unshift({
        ...r,
        internalCell: L(Ve),
        field: this.$props.expandField,
        headerClassName: "k-hierarchy-cell k-header",
        id: v.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),
          field: "value"
        }), l++;
      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);
      return i === void 0 ? e : i;
    },
    findColumnByField(e) {
      let t;
      return this.$props.columns.forEach((i) => {
        const r = this.searchColumn(i, e);
        r && (t = r);
      }), t;
    },
    searchColumn(e, t) {
      if (e.field === t)
        return e;
      if (e.children) {
        let i, r = null;
        for (i = 0; r == null && i < e.children.length; i++)
          r = this.searchColumn(e.children[i], t);
        return r;
      }
      return null;
    },
    getDataState() {
      return {
        filter: this.$props.filter,
        sort: this.$props.sort,
        skip: this.$props.skip,
        take: this.$props.take !== void 0 ? this.$props.take : this.$props.pageSize,
        group: this.$props.group
      };
    },
    getArguments(e) {
      return {
        event: e,
        target: this
      };
    },
    getLeafDataItems() {
      return this.currentData.filter((e) => e.rowType === "data").map((e) => e.dataItem);
    },
    totalGroupedRows(e) {
      let t = 0;
      return e && (t = this.addSubItems(e, t)), t;
    },
    addSubItems(e, t) {
      return e.forEach((i) => {
        t++, i.expanded !== !1 && i.items && (t = this.addSubItems(i.items, t)), this.group && this.group.length && (this.$props.groupable.footer === "always" || i.expanded !== !1 && i.items && this.$props.groupable.footer === "visible") && t++;
      }), t;
    }
  },
  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);
    return {
      groupPanelDivRef: e,
      dropElementClueRef: t,
      dragElementClueRef: i,
      headerRef: r,
      footerRef: l,
      gridNavRef: n,
      colGroupRef: u,
      scrollContainerRef: h,
      scrollTableRef: $,
      scrollTableBodyRef: y
    };
  },
  render() {
    const e = Te(this);
    let t = this.$props.total || 0;
    const i = v.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;
    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";
    this.currentData = [];
    const u = dt(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, {
      ref: (s) => {
        this.groupPanelDivRef = s;
      },
      group: this.$props.group || [],
      ariaControls: this._gridRoleElementId,
      onGroupChange: this.groupChangeHandler,
      onPressHandler: this.dragLogic.pressHandler,
      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, {
      ref: (s) => {
        this.dropElementClueRef = s;
      }
    }, null), x && o(st, {
      ref: (s) => {
        this.dragElementClueRef = s;
      }
    }, null)], Q = o(Ke, {
      size: this.$props.size,
      columnResize: this.columnResize,
      staticHeaders: this.$props.scrollable !== "none",
      ref: (s) => {
        this.headerRef = s;
      },
      headerRow: o(Ue, {
        grid: this,
        sort: this.$props.sort,
        groupable: this.$props.groupable,
        reorderable: this.$props.reorderable,
        sortable: this.$props.sortable,
        onSortChange: this.sortChangeHandler,
        filter: this.$props.filter,
        filterable: this.$props.filterable,
        filterOperators: this.$props.filterOperators || ue,
        onFilterChange: this.filterChangeHandler,
        columnMenu: this.$props.columnMenu,
        columnMenuIcon: this.$props.columnMenuIcon,
        columnMenuAnimate: this.$props.columnMenuAnimate,
        onSelectionchange: this.onHeaderSelectionChangeHandler,
        columns: this._columns,
        columnsInitial: this.$props.columns,
        columnResize: this.columnResize,
        onPressHandler: this.dragLogic.pressHandler,
        onDragHandler: this.dragLogic.dragHandler,
        onReleaseHandler: this.dragLogic.releaseHandler,
        columnsMap: this._columnsMap,
        cellRender: this.$props.headerCellRender,
        isRtl: this.isRtl,
        isColCountDefined: this.getAriaColCount !== void 0,
        filterRow: this.$props.filterable && o(qe, {
          grid: this,
          size: this.$props.size,
          columns: this._columns,
          filter: this.$props.filter,
          filterOperators: this.$props.filterOperators || ue,
          onFilterchange: this.filterChangeHandler,
          sort: this.$props.sort,
          cellRender: this.$props.filterCellRender,
          isRtl: this.isRtl,
          ariaRowIndex: this._columnsMap.length + 1
        }, null) || void 0
      }, null),
      cols: H.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, {
      size: this.$props.size,
      columnResize: this.columnResize,
      staticHeaders: this.$props.scrollable !== "none",
      ref: (s) => {
        this.footerRef = s;
      },
      row: o(Xe, {
        isRtl: this.isRtl,
        rowIndex: this.getAriaRowCount + 1,
        columns: this._columns.map(function(s) {
          return {
            ...s,
            footerCell: I.call(this, s.footerCell, w.call(this))
          };
        }, this)
      }, null),
      cols: H.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(Oe, 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,
      hiddenColumns: Re
    } = Ee({
      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;
      return {
        row: this._columns.map(function(a, p) {
          if (Re[p])
            return null;
          const k = `${a.className ? a.className + " " : ""}${a.locked ? "k-grid-content-sticky" : ""}`, F = 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;
          if (a.editable && this.$props.editField) {
            const c = he(this.$props.editField, s.dataItem);
            (c === !0 || c === a.field) && (_ = !0, T = !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;
          return a.internalCell ? o(a.internalCell, {
            key: p,
            id: v.generateNavigatableId(`${d}-${String(p)}`, i),
            colSpan: N[p],
            dataItem: s.dataItem,
            field: a.field || "",
            editor: a.editor,
            format: a.format,
            readFormat: a.readFormat,
            type: a.type,
            className: k,
            render: g || A,
            onChange: this.itemChange,
            onSelectionchange: (c) => this.selectionChangeHandler({
              event: c,
              dataItem: s.dataItem,
              dataIndex: C,
              columnIndex: p
            }),
            columnIndex: p,
            columnsCount: this._columns.filter((c) => !c.children.length).length,
            rowType: s.rowType,
            level: s.level,
            expanded: K,
            dataIndex: s.dataIndex,
            style: F,
            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],
            dataItem: s.dataItem,
            field: a.field || "",
            editor: a.editor,
            format: a.format,
            readFormat: a.readFormat,
            type: a.type,
            className: k,
            render: g || A,
            onEdit: this.editHandler,
            onRemove: this.removeHandler,
            onSave: this.saveHandler,
            onCancel: this.cancelHandler,
            onChange: this.itemChange,
            columnIndex: p,
            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],
            dataItem: s.dataItem,
            field: a.field || "",
            editor: a.editor,
            format: a.format,
            readFormat: a.readFormat,
            type: a.type,
            className: k,
            render: g || A,
            onCellclick: this.cellClickHandler,
            onCellkeydown: this.cellKeydownHandler,
            onEdit: this.editHandler,
            onRemove: this.removeHandler,
            onSave: this.saveHandler,
            onCancel: this.cancelHandler,
            onChange: this.itemChange,
            onSelectionchange: (c) => this.selectionChangeHandler({
              event: c,
              dataItem: s.dataItem,
              dataIndex: C,
              columnIndex: p
            }),
            columnIndex: p,
            columnsCount: this._columns.filter((c) => !c.children.length).length,
            rowType: s.rowType,
            level: s.level,
            expanded: K,
            dataIndex: s.dataIndex,
            style: F
          }, null);
        }, this),
        isInEdit: _,
        isSelected: typeof b == "boolean" && b
      };
    };
    let Y = 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--;
        else
          break;
        d++;
      }
    }
    const Z = (s) => s >= this.currentData.length - Y, ke = I.call(this, this.$props.detail, w.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) {
      s.rowType === "data" && (B++, W++), this.$props.alternatePerGroup && s.rowType === "groupHeader" && (B = 0);
      const C = B % 2 === 0, _ = this.$props.dataItemKey && Le(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,
        dataItem: s.dataItem,
        isAltRow: C,
        isInEdit: V.isInEdit,
        isSelected: V.isSelected,
        rowType: s.rowType,
        isHidden: Z(d),
        onRowclick: (g) => this.rowClick(g, s),
        onRowdblclick: (g) => this.rowDoubleClick(g, s),
        selectedField: this.$props.selectedField,
        rowHeight: this.$props.rowHeight,
        render: p,
        ariaRowIndex: this.$props.detail ? F : D,
        dataIndex: W,
        class: this.$props.rowClass ? this.$props.rowClass(s) : ""
      }, {
        default: () => [V.call(this, s, b, 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",
        style: {
          visibility: Z(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, {
          id: "",
          dataIndex: s.dataIndex,
          field: g.field,
          dataItem: s.dataItem,
          key: O
        }, null);
      }, this), this.$props.expandField && o(Be, {
        id: v.generateNavigatableId(`${a}-dhcell`, i)
      }, null), o(We, {
        dataItem: s.dataItem,
        dataIndex: s.dataIndex,
        colSpan: k,
        ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
        detail: this.$props.detail ? ke : void 0,
        id: v.generateNavigatableId(`${a}-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, {
      class: "k-grid-pager",
      onPagesizechange: this.pageChangeHandler,
      onPagechange: this.pageChangeHandler,
      size: this.$props.size,
      total: t,
      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 = de.call(this, {
      h: oe,
      template: ye,
      defaultRendering: He,
      additionalProps: {
        ...this.$props,
        skip: this.vs.propsSkip || 0,
        messagesMap: Ce
      },
      additionalListeners: {
        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) {
      return o("col", {
        key: d.toString(),
        class: Se(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 = {
      height: this.getCorrectHeight
    }, xe = I.call(this, this.$props.loader, w.call(this)), _e = 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, {
      size: "large",
      type: "infinite-spinner"
    }, null)])]), re = de.call(this, {
      h: oe,
      template: xe,
      defaultRendering: _e
    });
    return this.$props.scrollable === "none" ? o(pe, {
      ref: "navRef",
      id: this._gridId,
      navigatable: this.$props.navigatable
    }, {
      default: () => [o(ce, {
        ref: (s) => {
          this.gridNavRef = s;
        },
        currentData: this.currentData,
        style: ie,
        class: this.nonscrollableWrapperClass
      }, {
        default: () => [$, S, o("div", {
          role: "grid",
          class: "k-grid-aria-root",
          id: this._gridRoleElementId,
          "aria-colcount": this.getAriaColCount,
          "aria-rowcount": this.getAriaRowCount
        }, [o("table", {
          class: "k-table",
          style: {
            tableLayout: "fixed"
          },
          role: "none"
        }, [se, Q, o("tbody", {
          class: "k-table-tbody",
          "data-keyboardnavbody": !0
        }, [ee, re]), X])]), te, J]
      })]
    }) : o(pe, {
      ref: "navRef",
      id: this._gridId,
      navigatable: this.$props.navigatable
    }, {
      default: () => [o(ce, {
        ref: (s) => {
          this.gridNavRef = s;
        },
        currentData: this.currentData,
        style: ie,
        class: this.scrollableWrapperClass
      }, {
        default: () => [$, S, o("div", {
          role: "grid",
          class: "k-grid-aria-root",
          id: this._gridRoleElementId,
          "aria-colcount": this.getAriaColCount,
          "aria-rowcount": this.getAriaRowCount
        }, [Q, o("div", {
          class: "k-grid-container",
          role: "presentation"
        }, [o("div", {
          role: "presentation",
          ref: M(this, "scrollContainer"),
          class: "k-grid-content k-virtual-content",
          onScroll: this.scrollHandler
        }, [o("div", {
          class: "k-grid-table-wrap",
          role: "presentation"
        }, [o("table", {
          role: "none",
          class: this.gridTableClass,
          ref: M(this, "scrollTable")
        }, [se, o("tbody", {
          class: "k-table-tbody",
          role: "rowgroup",
          "data-keyboardnavbody": !0,
          ref: M(this, "scrollTableBody")
        }, [ee])])]), 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]
      })]
    });
  }
});
export {
  Ut as Grid
};