@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 Ge, createVNode as o, h as ae, ref as $, markRaw as M } from "vue";
import { SvgIcon as De, getDefaultSlots as Te, isObject as E, canUseDOM as U, templateRendering as y, getListeners as R, WatermarkOverlay as Oe, getter as q, getTemplate as ne, setRef as A, hasListener as D, getRef as b, kendoThemeMaps as de, isRtl as he, validatePackage as Le, shouldShowValidationUI as Me, getLicenseMessage as Ee, guid as pe, getNestedValue as ce } from "@progress/kendo-vue-common";
import { tableKeyboardNavigationTools as I, tableColumnsVirtualization as Ae, Pager as Pe, normalize as Ne, TableKeyboardNavigationProvider as ue } from "@progress/kendo-vue-data-tools";
import { Loader as Ve } from "@progress/kendo-vue-indicators";
import { GridNav as ge } from "./GridNav.mjs";
import { GridSelectionCell as Be } from "./cells/GridSelectionCell.mjs";
import { GridHierarchyCell as We } from "./cells/GridHierarchyCell.mjs";
import { GridDetailHierarchyCell as je } from "./cells/GridDetailHierarchyCell.mjs";
import { GridDetailCell as Ke } from "./cells/GridDetailCell.mjs";
import { GridEditCell as Ue } from "./cells/GridEditCell.mjs";
import { Header as qe } from "./header/Header.mjs";
import { HeaderRow as Je } from "./header/HeaderRow.mjs";
import { FilterRow as Qe } from "./header/FilterRow.mjs";
import { GroupPanel as Xe } from "./header/GroupPanel.mjs";
import { Footer as Ye } from "./footer/Footer.mjs";
import { FooterRow as Ze } from "./footer/FooterRow.mjs";
import { operators as fe } from "./filterCommon.mjs";
import { VirtualScroll as J } from "./VirtualScroll.mjs";
import { VirtualScrollFixed as et, RowHeightService as tt } from "./VirtualScrollFixed.mjs";
import { ColumnResize as st } from "./drag/ColumnResize.mjs";
import { CommonDragLogic as it } from "./drag/CommonDragLogic.mjs";
import { DragClue as rt } from "./drag/DragClue.mjs";
import { DropClue as ot } from "./drag/DropClue.mjs";
import { applyExpandedState as me, flatData as lt, readColumns as at, autoGenerateColumns as nt, mapColumns as dt, groupedFirstItemValue as $e, firefox as ht, firefoxMaxHeight as pt } from "./utils/main.mjs";
import { GridCell as ct } from "./cells/GridCell.mjs";
import { GridGroupCell as be } from "./cells/GridGroupCell.mjs";
import { GridRow as ut } from "./rows/GridRow.mjs";
import { GridHeaderSelectionCell as gt } from "./header/GridHeaderSelectionCell.mjs";
import { GridNoRecords as ft } from "./GridNoRecords.mjs";
import { packageMetadata as Q } from "./package-metadata.mjs";
import { pagerMessagesMap as Ce } from "./messages/main.mjs";
const Jt = /* @__PURE__ */ Ge({
  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,
    highlight: 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: De,
    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,
      licenseMessage: void 0,
      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() {
    Le(Q), this.showLicenseWatermark = Me(Q), this.licenseMessage = Ee(Q), 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 it(this.columnReorder.bind(this), this.groupReorder.bind(this), this.columnToGroup.bind(this)), this.columnResize = new st(this.onResize.bind(this)), this._columnsMap = [[]], this._header = null, this._footer = null, this.forceUpdateTimeout = void 0, this._gridId = pe(), this._gridRoleElementId = pe(), this.slicedCurrentData = void 0, this._prevTotal = void 0;
  },
  mounted() {
    this.setRefs();
    const e = he(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 = he(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-${de.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-${de.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: g,
          colSpan: p,
          rowSpan: C,
          index: k,
          kFirst: S,
          children: x,
          ..._
        } = r;
        return x.length ? {
          children: t(x),
          ..._
        } : _;
      }));
      return t(e);
    },
    setRefs() {
      let e = "$el";
      const t = b(this, "gridNav");
      t && (this._element = t[e]);
      const i = b(this, "groupPanelDiv");
      if (i) {
        let n = i[e] || null;
        this.dragLogic.refGroupPanelDiv(n);
      }
      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();
    },
    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 J;
    },
    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(me(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 et) {
        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 tt(e, t, l);
        const n = this.vs.rowHeightService.totalHeight();
        this.vs.containerHeight = ht ? Math.min(pt, 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 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 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(() => {
        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(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 = $e(n || e.dataItem, r);
      if (e.value) {
        if (i && i.length) {
          const p = i.indexOf(g);
          p > -1 && i.splice(p, 1);
        }
      } else
        i ? i.includes(g) || i.push(g) : i = [g];
      return t;
    },
    itemChange(e) {
      const t = D.call(this, "itemchange");
      if (e.field === this.$props.expandField || (this.$props.group || this.$props.detail) && e.field === void 0) {
        D.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) {
      D.call(this, e) ? this.$emit(e, {
        ...this.getArguments(r),
        ...t
      }) : D.call(this, "datastatechange") && this.$emit("datastatechange", {
        ...this.getArguments(r),
        data: {
          ...this.getDataState(),
          ...i
        }
      });
    },
    columnReorder(e, t, i) {
      const r = this._columns[e].depth, l = (p) => {
        do
          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((p) => p.declarationIndex >= 0).forEach((p, C) => p.orderIndex = C);
      const g = this.getColumns();
      this.$emit("columnreorder", {
        target: this,
        columns: g,
        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 = I.getIdPrefix(this.navigation);
      if (this._columns = at(e, this.getColumns(), {
        prevId: 0,
        idPrefix: i
      }), this._columns.length === 0) {
        const n = nt(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 = M(Be), n.internalHeaderCell = M(gt);
      });
      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 && D.call(this, "expandchange") && this.$props.detail && (this._columns.unshift({
        ...r,
        internalCell: M(We),
        field: this.$props.expandField,
        headerClassName: "k-hierarchy-cell k-header",
        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: M(be),
          field: "value"
        }), l++;
      this._columns.slice(l).forEach((n) => n.parentIndex >= 0 && (n.parentIndex += l)), this._columnsMap = dt(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 = $(null), t = $(null), i = $(null), r = $(null), l = $(null), n = $(null), g = $(null), p = $(null), C = $(null), k = $(null);
    return {
      groupPanelDivRef: e,
      dropElementClueRef: t,
      dragElementClueRef: i,
      headerRef: r,
      footerRef: l,
      gridNavRef: n,
      colGroupRef: g,
      scrollContainerRef: p,
      scrollTableRef: C,
      scrollTableBodyRef: k
    };
  },
  render() {
    const e = Te(this);
    let t = this.$props.total || 0;
    const i = I.getIdPrefix(this.navigation);
    let r = [];
    Array.isArray(this.$props.dataItems) ? r = this.$props.dataItems : this.$props.dataItems && (r = me(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 g = lt(this.currentData, r, n, {
      index: this.$props.skip || 0
    }, 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(Xe, {
      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), _ = (this.dragLogic.reorderable || this.dragLogic.groupable) && U && document && document.body, X = [_ && o(ot, {
      ref: (s) => {
        this.dropElementClueRef = s;
      }
    }, null), _ && o(rt, {
      ref: (s) => {
        this.dragElementClueRef = s;
      }
    }, null)], Y = o(qe, {
      size: this.$props.size,
      columnResize: this.columnResize,
      staticHeaders: this.$props.scrollable !== "none",
      ref: (s) => {
        this.headerRef = s;
      },
      headerRow: o(Je, {
        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 || fe,
        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 || fe,
          onFilterchange: this.filterChangeHandler,
          sort: this.$props.sort,
          cellRender: this.$props.filterCellRender,
          isRtl: this.isRtl,
          ariaRowIndex: this._columnsMap.length + 1
        }, null) || void 0
      }, null),
      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), Z = this._columns.some((s) => !!s.footerCell) ? o(Ye, {
      size: this.$props.size,
      columnResize: this.columnResize,
      staticHeaders: this.$props.scrollable !== "none",
      ref: (s) => {
        this.footerRef = s;
      },
      row: o(Ze, {
        isRtl: this.isRtl,
        rowIndex: this.getAriaRowCount + 1,
        columns: this._columns.map(function(s) {
          return {
            ...s,
            footerCell: y.call(this, s.footerCell, R.call(this))
          };
        }, this)
      }, null),
      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), P = y.call(this, this.$props.cellRender, R.call(this)), ve = this.showLicenseWatermark ? o(Oe, {
      message: this.licenseMessage
    }, null) : null, N = this.$attrs.style, Ie = N && E(N) && N["width"] || "", we = parseFloat(Ie.toString()), ye = this.vs && this.vs.container && this.vs.container.scrollLeft || 0, {
      colSpans: V,
      hiddenColumns: Re
    } = Ae({
      enabled: this.$props.columnVirtualization,
      columns: this._columns,
      tableViewPortWidth: we,
      scrollLeft: ye
    }), He = function(s, d, v) {
      let F = !1;
      const H = this.$props.selectedField, f = H ? ce(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, h) {
          if (Re[h])
            return null;
          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 w = !1;
          if (a.editable && this.$props.editField) {
            const c = ce(this.$props.editField, s.dataItem);
            (c === !0 || c === a.field) && (F = !0, w = !0);
          }
          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 === $e(s.dataItem, this.$props.uniqueField)), K = L ? !L : s.expanded;
          return a.internalCell ? o(a.internalCell, {
            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: z,
            render: m || P,
            onChange: this.itemChange,
            onSelectionchange: (c) => this.selectionChangeHandler({
              event: c,
              dataItem: s.dataItem,
              dataIndex: v,
              columnIndex: h
            }),
            columnIndex: h,
            columnsCount: this._columns.filter((c) => !c.children.length).length,
            rowType: s.rowType,
            level: s.level,
            expanded: K,
            dataIndex: s.dataIndex,
            style: G,
            ariaColumnIndex: a.ariaColumnIndex,
            isRtl: this.isRtl,
            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
          }, null) : w ? o(Ue, {
            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: z,
            render: m || P,
            onEdit: this.editHandler,
            onRemove: this.removeHandler,
            onSave: this.saveHandler,
            onCancel: this.cancelHandler,
            onChange: this.itemChange,
            columnIndex: h,
            columnsCount: this._columns.filter((c) => !c.children.length).length,
            rowType: s.rowType,
            level: s.level,
            expanded: K,
            dataIndex: s.dataIndex,
            style: G
          }, null) : o(ct, {
            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: z,
            render: m || P,
            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: v,
              columnIndex: h
            }),
            columnIndex: h,
            columnsCount: this._columns.filter((c) => !c.children.length).length,
            rowType: s.rowType,
            level: s.level,
            expanded: K,
            dataIndex: s.dataIndex,
            style: G,
            isSelected: Array.isArray(f) && f.indexOf(h) > -1,
            isHighlighted: !!(typeof u != "boolean" && u && a.field && u[a.field] === !0)
          }, null);
        }, this),
        isInEdit: F,
        isSelected: typeof f == "boolean" && f,
        isHighlighted: typeof u == "boolean" && u
      };
    };
    let ee = 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 v = this.currentData.shift();
        if (v)
          this.currentData.push(v), ee++, v.rowType === "groupHeader" && d--;
        else
          break;
        d++;
      }
    }
    const te = (s) => s >= this.currentData.length - ee, ke = y.call(this, this.$props.detail, R.call(this));
    let B = this.vs.propsSkip || 0;
    const T = this._columnsMap.length + (this.$props.filterable ? 1 : 0) + 1;
    let O, W = -1, j = 0;
    const se = this.currentData.length && this.currentData.map(function(s, d) {
      s.rowType === "data" && (B++, W++), this.$props.alternatePerGroup && s.rowType === "groupHeader" && (B = 0);
      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(ut, {
        key: f,
        dataItem: s.dataItem,
        isAltRow: v,
        isInEdit: w.isInEdit,
        isSelected: w.isSelected,
        isHighlighted: w.isHighlighted,
        rowType: s.rowType,
        isHidden: te(d),
        onRowclick: (m) => this.rowClick(m, s),
        onRowdblclick: (m) => this.rowDoubleClick(m, s),
        selectedField: this.$props.selectedField,
        rowHeight: this.$props.rowHeight,
        render: a,
        ariaRowIndex: this.$props.detail ? z : O,
        dataIndex: W,
        class: this.$props.rowClass ? this.$props.rowClass(s) : ""
      }, {
        default: () => [w.row]
      }), this.$props.detail && s.rowType === "data" && s.expanded && o("tr", {
        key: u,
        class: v ? "k-table-row k-table-alt-row k-detail-row" : "k-table-row k-detail-row",
        style: {
          visibility: te(d) ? "hidden" : "",
          height: this.$props.detailRowHeight + "px"
        },
        role: "row",
        "aria-rowindex": this.$props.detail ? G : O
      }, [this.$props.group && this.$props.group.map(function(m, L) {
        return o(be, {
          id: "",
          dataIndex: s.dataIndex,
          field: m.field,
          dataItem: s.dataItem,
          key: L
        }, null);
      }, this), this.$props.expandField && o(je, {
        id: I.generateNavigatableId(`${u}-dhcell`, i)
      }, null), o(Ke, {
        dataItem: s.dataItem,
        dataIndex: s.dataIndex,
        colSpan: h,
        ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
        detail: this.$props.detail ? ke : void 0,
        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
    }, [k.length ? k : o(ft, null, null)])]), Se = y.call(this, this.$props.pager, R.call(this)), xe = this.$props.pageable && o(Pe, {
      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: Ne(this.$props.pageable || {})
    }, null), ie = ne.call(this, {
      h: ae,
      template: Se,
      defaultRendering: xe,
      additionalProps: {
        ...this.$props,
        skip: this.vs.propsSkip || 0,
        messagesMap: Ce
      },
      additionalListeners: {
        pagesizechange: this.pageChangeHandler,
        pagechange: this.pageChangeHandler
      }
    }), _e = (s) => this.$props.sort && this.$props.sort.filter((d) => d.field === s).length > 0, re = o("colgroup", {
      ref: A(this, "colGroup")
    }, [S.map(function(s, d) {
      return o("col", {
        key: d.toString(),
        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)]), oe = {
      height: this.getCorrectHeight
    }, 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(Ve, {
      size: "large",
      type: "infinite-spinner"
    }, null)])]), le = ne.call(this, {
      h: ae,
      template: Fe,
      defaultRendering: ze
    });
    return this.$props.scrollable === "none" ? o(ue, {
      ref: "navRef",
      id: this._gridId,
      navigatable: this.$props.navigatable
    }, {
      default: () => [o(ge, {
        ref: (s) => {
          this.gridNavRef = s;
        },
        currentData: this.currentData,
        style: oe,
        class: this.nonscrollableWrapperClass
      }, {
        default: () => [C, x, 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"
        }, [re, Y, o("tbody", {
          class: "k-table-tbody",
          "data-keyboardnavbody": !0
        }, [se, le]), Z])]), ie, X]
      })]
    }) : o(ue, {
      ref: "navRef",
      id: this._gridId,
      navigatable: this.$props.navigatable
    }, {
      default: () => [o(ge, {
        ref: (s) => {
          this.gridNavRef = s;
        },
        currentData: this.currentData,
        style: oe,
        class: this.scrollableWrapperClass
      }, {
        default: () => [C, x, o("div", {
          role: "grid",
          class: "k-grid-aria-root",
          id: this._gridRoleElementId,
          "aria-colcount": this.getAriaColCount,
          "aria-rowcount": this.getAriaRowCount
        }, [Y, o("div", {
          class: "k-grid-container",
          role: "presentation"
        }, [o("div", {
          role: "presentation",
          ref: A(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: A(this, "scrollTable")
        }, [re, o("tbody", {
          class: "k-table-tbody",
          role: "rowgroup",
          "data-keyboardnavbody": !0,
          ref: A(this, "scrollTableBody")
        }, [se])])]), o("div", {
          class: "k-height-container",
          role: "presentation"
        }, [o("div", {
          style: this.$props.scrollable === "virtual" ? {
            height: this.vs.containerHeight + "px"
          } : {}
        }, null)])]), le]), Z, ve]), ie, X]
      })]
    });
  }
});
export {
  Jt as Grid
};