@progress/kendo-vue-treelist 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/TreeList.mjs

@@ -0,0 +1,722 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as me, createVNode as d, h as k, isVNode as be } from "vue";
+import { guid as Ce, validatePackage as we, noop as T, kendoThemeMaps as O, isRtl as $e, getRef as I, getDefaultSlots as Se, templateRendering as R, getListeners as v, getTemplate as D, getter as Re, setRef as E, canUseDOM as M, hasListener as j } from "@progress/kendo-vue-common";
+import { CommonDragLogic as ve, ColumnResize as xe, tableKeyboardNavigationTools as H, readColumns as ye, mapColumns as ke, Header as Ie, HeaderRow as De, operators as B, tableColumnsVirtualization as ze, Pager as Fe, normalize as Le, DropClue as Te, DragClue as Oe, TableKeyboardNavigationProvider as Ee, getSelectionOptions as Me, FilterRow as He } from "@progress/kendo-vue-data-tools";
+import { TreeListNav as Pe } from "./TreeListNav.mjs";
+import { tableRowsVirtualization as Ne, getNestedValue as x, setHeaderRowsTop as Ae } from "./utils/main.mjs";
+import { flatData as Ke } from "./utils/data-operations.mjs";
+import { TreeListCell as je } from "./cells/TreeListCell.mjs";
+import { TreeListDraggableRow as Be } from "./rows/TreeListDraggableRow.mjs";
+import { RowDragClue as Ve } from "./rows/RowDragClue.mjs";
+import { TreeListRow as _e } from "./rows/TreeListRow.mjs";
+import { packageMetadata as We } from "./package-metadata.mjs";
+import { noRecords as V, messages as Ge, pagerMessagesMap as _ } from "./messages/main.mjs";
+import { provideLocalizationService as Ue } from "@progress/kendo-vue-intl";
+import { TreeListSelectionCell as qe } from "./cells/TreeListSelectionCell.mjs";
+function W(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !be(e);
+}
+const ht = /* @__PURE__ */ me({
+  name: "KendoTreeList",
+  props: {
+    dataItems: Array,
+    resizable: Boolean,
+    reorderable: Boolean,
+    sortable: [Object, Boolean],
+    sort: Array,
+    columns: Array,
+    columnVirtualization: Boolean,
+    filter: [Array, Object],
+    filterable: Boolean,
+    filterOperators: Object,
+    filterRow: [String, Function, Object],
+    cellRender: [String, Function, Object],
+    toolbar: [String, Function, Object],
+    noRecords: [String, Function, Object],
+    expandField: String,
+    subItemsField: String,
+    selectedField: String,
+    editField: String,
+    scrollable: String,
+    rowHeight: Number,
+    tableProps: Object,
+    rowClass: Function,
+    pageable: [Boolean, Object],
+    pager: [String, Function, Object],
+    skip: Number,
+    take: Number,
+    wrapperStyle: Object,
+    dataItemKey: String,
+    navigatable: Boolean,
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return ["small", "medium"].includes(e);
+      }
+    },
+    reordableRows: Boolean,
+    onDatastatechange: Function,
+    onPagechange: Function,
+    onSortchange: Function,
+    onFilterchange: Function
+  },
+  created() {
+    this.prevData = [], this.prevColumns = void 0, this.flattedData = [], this.extendedColumn = [], this.columnsMap = [], this.element = null, this._treeListId = Ce(), we(We), this.dragLogic = new ve(this.columnReorder.bind(this), T, T), this.columnResize = new xe(this.onResize.bind(this));
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  computed: {
+    wrapperClass() {
+      const {
+        size: e,
+        scrollable: t
+      } = this.$props;
+      return {
+        "k-grid": !0,
+        [this.$props.className]: this.$props.className,
+        "k-grid-md": !e,
+        [`k-grid-${O.sizeMap[e] || e}`]: e,
+        "k-treelist": !0,
+        "k-treelist-scrollable": t !== "none"
+      };
+    },
+    toolbarClass() {
+      const {
+        size: e
+      } = this.$props;
+      return {
+        "k-toolbar": !0,
+        "k-grid-toolbar": !0,
+        [`k-toolbar-${O.sizeMap[e] || e}`]: e
+      };
+    },
+    gridTableClass() {
+      const {
+        size: e
+      } = this.$props;
+      return {
+        "k-table": !0,
+        "k-grid-table": !0,
+        "k-grid-md": !e,
+        [`k-table-${O.sizeMap[e] || e}`]: e
+      };
+    }
+  },
+  data() {
+    return {
+      wrapperScrollLeft: 0,
+      wrapperScrollTop: 0,
+      updateOnScroll: !1,
+      tbodyOffsetTop: 0,
+      isRtl: !1,
+      navigation: void 0,
+      rowClue: {}
+    };
+  },
+  /**
+   * @hidden
+   */
+  mounted() {
+    this.calculateSizes(this.$el);
+    const e = $e(this.$el);
+    this.isRtl = e;
+    let t = "$el";
+    const i = I(this, "gridNav"), o = I(this, "dropElementClue"), r = I(this, "dragElementClue");
+    this.dragLogic.refDropElementClue(o), this.dragLogic.refDragElementClue(r), this.columnResize.colGroupMain = I(this, "colGroup"), i && (this.element = i[t]);
+  },
+  /**
+   * @hidden
+   */
+  destroyed() {
+    this.columnResize.columns = [], this.dragLogic.columns = [], this.extendedColumn = [], this.columnsMap = [], this.prevData = [], this.flattedData = [], this.updateOnScroll = !1;
+  },
+  render() {
+    Se(this);
+    const {
+      columns: e = [],
+      filterRow: t,
+      scrollable: i = "scrollable",
+      resizable: o = !1,
+      reorderable: r = !1,
+      skip: a,
+      take: p,
+      filterable: n,
+      reordableRows: g
+    } = this.$props, G = t || He, z = H.getIdPrefix(this.navigation);
+    this.prevColumns !== e && (this.extendedColumn = ye(e, {
+      prevId: 0,
+      idPrefix: z
+    }), this.columnsMap = ke(this.extendedColumn)), this.prevColumns = this.$props.columns;
+    const C = this.extendedColumn.filter((s) => s.children.length === 0);
+    this.columnResize.columns = this.extendedColumn, this.columnResize.resizable = o, this.dragLogic.columns = this.extendedColumn, this.dragLogic.reorderable = r, this.dragLogic.groupable = !1;
+    const U = this.$props.filter && this.$props.filter.length === 0 ? void 0 : this.$props.filter && this.$props.filter.length !== void 0 ? {
+      logic: "and",
+      filters: this.$props.filter
+    } : this.$props.filter, q = d(Ie, {
+      size: this.$props.size,
+      headerRow: d(De, {
+        grid: this,
+        sort: this.$props.sort,
+        filter: U,
+        sortable: this.$props.sortable,
+        selectedField: this.$props.selectedField,
+        reorderable: r,
+        filterable: n,
+        filterOperators: this.$props.filterOperators || B,
+        onSortChange: this.sortChange,
+        onSelectionchange: this.onHeaderSelectionChange,
+        columns: this.extendedColumn,
+        columnsMap: this.columnsMap,
+        cellRender: this.$props.headerCellRender,
+        columnResize: this.columnResize,
+        columnMenu: this.$props.columnMenu,
+        onFilterChange: this.columnMenuFilterChange,
+        onPressHandler: this.dragLogic.pressHandler,
+        onDragHandler: this.dragLogic.dragHandler,
+        onReleaseHandler: this.dragLogic.releaseHandler,
+        filterRow: n ? d(G, {
+          size: this.$props.size,
+          columns: C,
+          filter: this.$props.filter || [],
+          onFilterchange: this.filterChange,
+          sort: this.$props.sort,
+          ariaRowIndex: this.columnsMap.length + 1,
+          grid: this,
+          filterOperators: this.$props.filterOperators || B,
+          cellRender: this.$props.filterCellRender,
+          isRtl: this.isRtl
+        }, null) : void 0
+      }, null),
+      columnResize: this.columnResize
+    }, null), F = this.$props.wrapperStyle || {}, {
+      colSpans: P,
+      hiddenColumns: J
+    } = ze({
+      enabled: this.$props.columnVirtualization,
+      columns: C,
+      scrollLeft: this.wrapperScrollLeft,
+      tableViewPortWidth: parseFloat((F.width || "").toString())
+    }), Q = (s, f, y, $, w, m) => C.map(function(l, c) {
+      if (J[c])
+        return null;
+      const S = l.id ? l.id : c, b = `${l.className ? l.className + " " : ""}${l.locked ? "k-grid-content-sticky" : ""}`, h = R.call(this, this.$props.cellRender || l.cell, v.call(this));
+      if (f && l.editCell) {
+        const L = R.call(this, l.editCell, v.call(this));
+        return D.call(this, {
+          h: k,
+          template: L,
+          additionalProps: {
+            id: H.generateNavigatableId(`${y}-${String(c)}`, z),
+            colSpan: P[c],
+            dataItem: s.dataItem,
+            field: l.field,
+            format: l.format,
+            class: b || void 0,
+            render: h,
+            level: s.level,
+            expandable: l.expandable,
+            expanded: $,
+            hasChildren: this.hasChildren(s.dataItem),
+            colIndex: c,
+            ariaColumnIndex: l.ariaColumnIndex,
+            style: l.left !== void 0 && {
+              left: l.left + "px",
+              right: l.right + "px",
+              borderRightWidth: l.rightBorder ? "1px" : ""
+            } || {},
+            isSelected: Array.isArray(m) && m.indexOf(c) > -1
+          },
+          additionalListeners: {
+            change: this.itemChange,
+            input: this.itemChange,
+            expandchange: this.expandChange,
+            selectionchange: (fe) => this.selectionChange(fe, s, c, w)
+          }
+        });
+      }
+      const ue = this.selectedField && l.field === this.selectedField ? qe : je;
+      return d(ue, {
+        key: S,
+        id: H.generateNavigatableId(`${y}-${String(c)}`, z),
+        colSpan: P[c],
+        dataItem: s.dataItem,
+        field: l.field,
+        format: l.format,
+        class: b || void 0,
+        render: h,
+        onCellclick: this.cellClick,
+        onCellkeydown: this.cellKeydown,
+        onChange: this.itemChange,
+        onSelectionchange: (L) => this.selectionChange(L, s, c, w),
+        level: s.level,
+        expandable: l.expandable,
+        expanded: $,
+        hasChildren: this.hasChildren(s.dataItem),
+        onExpandchange: this.expandChange,
+        colIndex: c,
+        ariaColumnIndex: l.ariaColumnIndex,
+        style: l.left !== void 0 && {
+          left: l.left + "px",
+          right: l.right + "px",
+          borderRightWidth: l.rightBorder ? "1px" : ""
+        } || {},
+        isSelected: Array.isArray(m) && m.indexOf(c) > -1
+      }, null);
+    }, this);
+    let u = this.flatData();
+    const N = u.length;
+    a !== void 0 && p !== void 0 && (u = u.slice(a, a + p)), i === "virtual" && (u = Ne({
+      rows: u,
+      tableViewPortHeight: parseFloat((F.height || F.maxHeight || "").toString()),
+      scrollTop: this.wrapperScrollTop
+    }), this.updateOnScroll = !1);
+    const X = R.call(this, this.$props.noRecords, v.call(this)), Y = Ue(this).toLanguageString(V, Ge[V]), Z = D.call(this, {
+      h: k,
+      template: X
+    }), A = u.length ? u.map(function(s) {
+      return s.level;
+    }) : [], ee = this.columnsMap.length + (n ? 1 : 0) + 1, te = u.length > 0 && u.map(function(s, f) {
+      const y = x(this.$props.editField, s.dataItem), $ = this.$props.dataItemKey && Re(this.$props.dataItemKey)(s.dataItem), w = String($ || s.level.join(".")), m = this.expanded(s.dataItem), l = this.$props.selectedField ? x(this.$props.selectedField, s.dataItem) : void 0, c = this.$props.row || _e, S = Q(s, y, w, m, f, l), b = d(c, {
+        key: w,
+        level: s.level,
+        levels: A,
+        dataItem: s.dataItem,
+        selectedField: this.$props.selectedField,
+        rowHeight: i === "virtual" ? s.height : this.$props.rowHeight,
+        render: this.$props.rowRender,
+        onDrop: this.onRowDrop,
+        onDrag: this.onRowDrag,
+        onClick: (h) => this.emitRowEvent("rowclick", h, s),
+        onDblclick: (h) => this.emitRowEvent("rowdoubleclick", h, s),
+        onContextmenu: (h) => this.emitRowEvent("rowcontextmenu", h, s),
+        onFocus: (h) => this.emitRowEvent("rowfocus", h, s),
+        onBlur: (h) => this.emitRowEvent("rowblur", h, s),
+        onMousedown: (h) => this.emitRowEvent("rowmousedown", h, s),
+        onMouseup: (h) => this.emitRowEvent("rowmouseup", h, s),
+        isAltRow: f % 2 !== 0,
+        expanded: m,
+        rowIndex: f,
+        ariaRowIndex: ee + f,
+        ariaSetSize: s.levelCount,
+        ariaPosInSet: s.level[s.level.length - 1] + 1,
+        isSelected: typeof l == "boolean" && l,
+        className: this.$props.rowClass ? this.$props.rowClass(s) : ""
+      }, W(S) ? S : {
+        default: () => [S]
+      });
+      return g ? d(Be, {
+        key: w,
+        level: s.level,
+        levels: A,
+        dataItem: s.dataItem,
+        onDrag: this.onRowDrag,
+        onDrop: this.onRowDrop
+      }, W(b) ? b : {
+        default: () => [b]
+      }) : b;
+    }, this) || d("tr", {
+      class: "k-table-row k-grid-norecords"
+    }, [d("td", {
+      class: "k-table-td",
+      colspan: C.length
+    }, [this.$props.noRecords ? Z : Y])]), se = (s) => this.$props.sort && this.$props.sort.some((f) => f.field === s), ie = d("colgroup", {
+      ref: E(this, "colGroup")
+    }, [C.map(function(s) {
+      return d("col", {
+        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)]), oe = this.$props.columnVirtualization || this.$props.scrollable === "virtual", le = this.$props.selectable && this.$props.selectable.drag ? "none" : void 0, re = this.$props.tableProps || {}, ae = R.call(this, this.$props.toolbar, v.call(this)), ne = D.call(this, {
+      h: k,
+      template: ae
+    }), de = R.call(this, this.$props.pager, v.call(this)), he = this.$props.pageable && d(Fe, {
+      class: "k-grid-pager",
+      size: this.$props.size,
+      onPagesizechange: this.pageChangeHandler,
+      onPagechange: this.pageChangeHandler,
+      total: N,
+      skip: this.$props.skip || 0,
+      pageSize: this.$props.take || 10,
+      messagesMap: _,
+      settings: Le(this.$props.pageable || {})
+    }, null), ce = D.call(this, {
+      h: k,
+      template: de,
+      defaultRendering: he,
+      additionalProps: {
+        ...this.$props,
+        skip: this.skip || 0,
+        messagesMap: _
+      },
+      additionalListeners: {
+        pagesizechange: this.pageChangeHandler,
+        pagechange: this.pageChangeHandler
+      }
+    }), K = this.dragLogic.reorderable && M && document && document.body, pe = this.reordableRows && this.rowClue && this.rowClue.visible && M && document && document.body, ge = [K && d(Te, {
+      ref: E(this, "dropElementClue")
+    }, null), K && d(Oe, {
+      ref: E(this, "dragElementClue")
+    }, null), pe && d(Ve, {
+      visible: this.rowClue.visible,
+      top: this.rowClue.top,
+      left: this.rowClue.left,
+      text: this.rowClue.text,
+      allowDrop: this.rowClue.allowDrop
+    }, null)];
+    return d(Ee, {
+      ref: "navRef",
+      id: this._treeListId,
+      navigatable: this.$props.navigatable
+    }, {
+      default: () => [d(Pe, {
+        style: this.$props.wrapperStyle,
+        class: this.wrapperClass,
+        currentData: u,
+        onScroll: oe ? this.handleOnScroll : T,
+        onKeydown: this.onKeyDown,
+        onFocus: this.onFocus,
+        "aria-rowcount": N,
+        "aria-colcount": C.length,
+        role: "treegrid",
+        ref: (s) => {
+          this.treeListNavRef = s;
+        }
+      }, {
+        default: () => [
+          this.$props.toolbar && d("div", {
+            class: this.toolbarClass
+          }, [ne]),
+          //     // @ts-ignore
+          //   <TableSelection
+          //     selectable={this.$props.selectable}
+          //     onRelease={this.selectionRelease}
+          //   >
+          d("table", {
+            class: this.gridTableClass,
+            style: {
+              ...re.style || {},
+              userSelect: le
+            },
+            role: "presentation"
+          }, [ie, q, d("tbody", {
+            class: "k-table-tbody",
+            "data-keyboardnavbody": !0,
+            role: "presentation"
+          }, [te])]),
+          ce,
+          ge
+        ]
+      })]
+    });
+  },
+  methods: {
+    /**
+     * Method to allow the scroll to be set to a specific row index.
+     *
+     * @param options - Object, containing the rowIndex to which is going to be scrolled.
+     */
+    scrollIntoView(e) {
+      if (!this.element)
+        return;
+      const {
+        rowIndex: t = 0
+      } = e, {
+        scrollable: i,
+        rowHeight: o = 0
+      } = this.$props;
+      if (i === "virtual" || o)
+        this.element.scroll(0, (t - 1) * o);
+      else {
+        const r = this.element.querySelector(`tbody > tr:nth-child(${t})`);
+        if (r) {
+          const a = r.offsetTop - this.tbodyOffsetTop;
+          this.element.scroll(0, a);
+        }
+      }
+    },
+    getColumns() {
+      const e = this.extendedColumn.filter((i) => i.declarationIndex >= 0 && i.parentIndex === -1);
+      return ((i) => (i.sort((o, r) => o.declarationIndex - r.declarationIndex), i))(e);
+    },
+    flatData() {
+      const {
+        dataItems: e = [],
+        rowHeight: t = 0
+      } = this.$props;
+      let i = 0;
+      const o = (a) => {
+        const p = {
+          height: t,
+          offsetTop: i
+        };
+        return i += p.height, p;
+      }, r = this.updateOnScroll && this.prevData === e && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : Ke(e, this.expandedSubItems, o);
+      return this.prevData = e, this.flattedData = r, r;
+    },
+    onKeyDown(e) {
+      this.$emit("keydown", e);
+    },
+    onFocus(e) {
+    },
+    onRowDrag(e) {
+      this.rowClue = e.clueProps, this.$emit("rowdrag", {
+        ...e,
+        target: this
+      });
+    },
+    onRowDrop(e) {
+      this.rowClue = e.clueProps, e.clueProps.allowDrop && this.$emit("rowdrop", {
+        ...e,
+        target: this
+      });
+    },
+    columnReorder(e, t, i) {
+      const o = this.extendedColumn[e].depth, r = (n) => {
+        do
+          n++;
+        while (n < this.extendedColumn.length && this.extendedColumn[n].depth > o);
+        return n;
+      }, a = this.extendedColumn.splice(e, r(e) - e);
+      this.extendedColumn.splice(e < t ? r(t - a.length) : t, 0, ...a), this.extendedColumn.filter((n) => n.declarationIndex >= 0).forEach((n, g) => n.orderIndex = g);
+      const p = {
+        component: this,
+        columns: this.getColumns(),
+        prev: e,
+        next: t,
+        event: i
+      };
+      this.$emit("columnreorder", p);
+    },
+    onResize(e, t, i, o, r) {
+      const a = this.extendedColumn.filter((n) => n.children.length === 0).reduce((n, g) => n += parseFloat(String(g.width)), 0);
+      if (this.extendedColumn && this.columns) {
+        const n = this.columns[e].width, g = n && n.toString().indexOf("px") > 0;
+        this.extendedColumn[e].width = g ? t + "px" : t;
+      }
+      const p = {
+        columns: this.getColumns(),
+        totalWidth: a,
+        index: e,
+        event: o,
+        newWidth: t,
+        oldWidth: i,
+        end: r,
+        component: this
+      };
+      r && (this.prevColumns = void 0), this.$emit("columnresize", p);
+    },
+    handleOnScroll(e) {
+      const t = e.currentTarget.scrollLeft, i = e.currentTarget.scrollTop, {
+        columnVirtualization: o,
+        scrollable: r,
+        rowHeight: a = 0
+      } = this.$props, p = a, n = 0;
+      let g = !1;
+      o && Math.abs(this.wrapperScrollLeft - t) > n && (this.wrapperScrollLeft = t, g = !0), r === "virtual" && Math.abs(this.wrapperScrollTop - i) > p && (this.wrapperScrollTop = i, g = !0), g && (this.updateOnScroll = !0);
+    },
+    calculateSizes(e) {
+      if (!e || this.$props.scrollable === "none")
+        return;
+      const t = Array.from(e.childNodes), i = t.find((a) => a.nodeName === "TABLE"), o = this.$props.toolbar && t.find((a) => a.nodeType === 1 && a.classList.contains("k-grid-toolbar"));
+      let r = 0;
+      if (o && M) {
+        const a = o.style.boxSizing;
+        o.style.boxSizing = "border-box", r = parseFloat(String(window.getComputedStyle(o).height)) || o.offsetHeight, o.style.boxSizing = a, o.getAttribute("style") || o.removeAttribute("style");
+      }
+      this.tbodyOffsetTop = i.tBodies[0].offsetTop, Ae(i, r);
+    },
+    cellClick(e) {
+      this.$emit("cellclick", e);
+    },
+    cellKeydown(e) {
+      this.$emit("cellkeydown", e);
+    },
+    itemChange(e) {
+      if (e.field === this.$props.expandField) {
+        if (this.$props.onExpandchange) {
+          const o = {
+            ...this.getArguments(e.event),
+            dataItem: e.dataItem,
+            level: e.level,
+            value: e.value
+          };
+          this.$emit("expandchange", o);
+        }
+        return;
+      }
+      const t = {
+        ...this.getArguments(e.event),
+        dataItem: e.dataItem,
+        level: e.level,
+        field: e.field,
+        value: e.value
+      };
+      e.dataItem && this.$emit("itemchange", t);
+    },
+    selectionChange(e) {
+      const {
+        event: t,
+        item: i,
+        columnIndex: o
+      } = e;
+      if (!i)
+        return;
+      const {
+        mode: r,
+        cell: a
+      } = Me(this.$props.selectable), p = {
+        ...this.getArguments(t),
+        dataItem: i.dataItem,
+        level: i.level,
+        startColIndex: o,
+        endColIndex: o,
+        // startRowIndex: dataIndex,
+        // endRowIndex: dataIndex,
+        dataItems: this.getLeafDataItems(),
+        altKey: !1,
+        ctrlKey: !1,
+        shiftKey: !1,
+        metaKey: !1,
+        mode: r,
+        cell: a,
+        isDrag: !1,
+        componentId: this._treeListId,
+        selectedField: this.$props.selectedField || ""
+      };
+      this.$emit("selectionchange", p);
+    },
+    onHeaderSelectionChange(e) {
+      const t = {
+        field: e.field,
+        event: e.event,
+        component: this,
+        dataItems: this.getLeafDataItems()
+      };
+      this.$emit("headerselectionchange", t);
+    },
+    selectionRelease(e) {
+      if (this.$props.onSelectionchange) {
+        const t = {
+          event: void 0,
+          component: this,
+          selectedField: this.$props.selectedField || "",
+          componentId: this._treeListId,
+          dataItems: this.getLeafDataItems(),
+          dataItem: null,
+          level: [],
+          ...e
+        };
+        this.$emit("selectionchange", t);
+      }
+    },
+    sortChange(e, t) {
+      this.raiseDataEvent("sortchange", {
+        sort: e,
+        field: t.field
+      }, t);
+    },
+    filterChange(e, t) {
+      const i = e ? e.filters : [];
+      this.raiseDataEvent("filterchange", {
+        filter: i
+      }, {
+        filter: i,
+        skip: 0
+      }, t);
+    },
+    columnMenuFilterChange(e, t) {
+      const i = e ? e.filters : [], o = {
+        ...t,
+        filter: i,
+        component: this
+      };
+      this.$emit("columnmenufilterchange", o);
+    },
+    expandChange(e, t, i) {
+      const {
+        expandField: o
+      } = this.$props;
+      if (o) {
+        const r = {
+          ...this.getArguments(e),
+          dataItem: t,
+          level: i,
+          value: this.expanded(t)
+        };
+        this.$emit("expandchange", r);
+      }
+    },
+    emitRowEvent(e, t, i) {
+      if (t.target.nodeName === "TD") {
+        const o = {
+          dataItem: i.dataItem,
+          level: i.level,
+          ...this.getArguments(t)
+        };
+        this.$emit(e, o);
+      }
+    },
+    pageChangeHandler(e, t) {
+      this.raiseDataEvent("pagechange", {
+        page: e,
+        event: t,
+        skip: e.skip,
+        take: e.take
+      }, {
+        skip: e.skip,
+        take: e.take
+      }, t);
+    },
+    raiseDataEvent(e, t, i, o) {
+      j.call(this, e) ? this.$emit(e, {
+        ...this.getArguments(o),
+        ...t
+      }) : j.call(this, "datastatechange") && this.$emit("datastatechange", {
+        ...this.getArguments(o),
+        data: {
+          ...this.getDataState(),
+          ...t,
+          ...i
+        }
+      });
+    },
+    getDataState() {
+      return {
+        filter: this.$props.filter,
+        sort: this.$props.sort
+      };
+    },
+    getArguments(e) {
+      return {
+        event: e,
+        component: this
+      };
+    },
+    expandedSubItems(e) {
+      const t = [];
+      return this.expanded(e) && this.hasChildren(e) && t.push(...x(this.$props.subItemsField, e)), t;
+    },
+    getLeafDataItems() {
+      return this.flatData().map((e) => e.dataItem);
+    },
+    expanded(e) {
+      return !!x(this.$props.expandField, e);
+    },
+    hasChildren(e) {
+      return !!x(this.$props.subItemsField, e);
+    }
+  }
+});
+export {
+  ht as TreeList
+};