@progress/kendo-vue-treelist 3.5.1 → 3.5.2-dev.202209020458

package/dist/es/TreeList.js

@@ -0,0 +1,1270 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+var markRaw = allVue.markRaw;
+import { classNames, noop, getter, guid, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl } from '@progress/kendo-vue-common';
+import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, // tableKeyboardNavigation,
+// TableKeyboardNavigationContext,
+TableKeyboardNavigationProvider, tableKeyboardNavigationTools as navigationTools, operators, getSelectionOptions, normalize, Pager } from '@progress/kendo-vue-data-tools';
+import { TreeListNav } from './TreeListNav';
+import { getNestedValue, setHeaderRowsTop, tableRowsVirtualization } from './utils/main';
+import { flatData as _flatData } from './utils/data-operations';
+import { TreeListCell } from './cells/TreeListCell';
+import { TreeListNoRecords } from './TreeListNoRecords';
+import { TreeListRow } from './rows/TreeListRow';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata';
+import { hasListener } from '@progress/kendo-vue-common';
+import { pagerMessagesMap } from './messages/main';
+/**
+ * @hidden
+ */
+
+var TreeListVue2 = {
+  name: 'KendoTreeList',
+  props: {
+    dataItems: Array,
+    resizable: Boolean,
+    reorderable: Boolean,
+    sortable: [Object, Boolean],
+    sort: Array,
+    columns: Array,
+    columnVirtualization: Boolean,
+    filter: [Array, Object],
+    filterable: Boolean,
+    filterRow: [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
+  },
+  created: function created() {
+    this.prevData = [];
+    this.prevColumns = undefined;
+    this.flattedData = [];
+    this.extendedColumn = [];
+    this.columnsMap = [];
+    this.element = null;
+    this._treeListId = guid();
+    validatePackage(packageMetadata);
+    this.dragLogic = new CommonDragLogic(this.columnReorder, noop, noop);
+    this.columnResize = new ColumnResize(this.onResize.bind(this)); // tableKeyboardNavigation.onConstructor({
+    //     navigatable: Boolean(props.navigatable),
+    //     contextStateRef: this.contextStateRef,
+    //     navigationStateRef: this.navigationStateRef
+    // });
+  },
+  data: function data() {
+    return {
+      wrapperScrollLeft: 0,
+      wrapperScrollTop: 0,
+      updateOnScroll: false,
+      tbodyOffsetTop: 0,
+      isRtl: false
+    };
+  },
+  // private get document(): Document | undefined {
+  //     if (!canUseDOM) { return; }
+  //     // useful only for user actions
+  //     return (this.element && this.element.ownerDocument) || document;
+  // }
+  // private contextStateRef: { current?: TableKeyboardNavigationContextType } = { current: undefined };
+  // private navigationStateRef: { current?: TableKeyboardNavigationStateType } = { current: undefined };
+
+  /**
+   * @hidden
+   */
+  mounted: function mounted() {
+    this.calculateSizes(this.$el);
+    var rtl = isRtl(this.$el);
+    this.isRtl = rtl; // tableKeyboardNavigation.onComponentDidMount({
+    //     scope: this.element || undefined,
+    //     contextStateRef: this.contextStateRef,
+    //     navigationStateRef: this.navigationStateRef
+    // });
+  },
+  // /**
+  //  * @hidden
+  //  */
+  // getSnapshotBeforeUpdate() {
+  //     tableKeyboardNavigation.onGetSnapshotBeforeUpdate({
+  //         document: this.document,
+  //         contextStateRef: this.contextStateRef,
+  //         navigationStateRef: this.navigationStateRef
+  //     });
+  //     return null;
+  // }
+
+  /**
+   * @hidden
+   */
+  updated: function updated() {// if (prevProps.columns !== this.$props.columns) {
+    //     this.calculateSizes(this.element);
+    // }
+    // tableKeyboardNavigation.onComponentDidUpdate({
+    //     scope: this.element || undefined,
+    //     contextStateRef: this.contextStateRef,
+    //     navigationStateRef: this.navigationStateRef
+    // });
+  },
+
+  /**
+   * @hidden
+   */
+  destroyed: function destroyed() {
+    this.columnResize.columns = [];
+    this.dragLogic.columns = [];
+    this.extendedColumn = [];
+    this.columnsMap = [];
+    this.prevData = [];
+    this.flattedData = [];
+    this.updateOnScroll = false;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        _b = _a.columns,
+        columns = _b === void 0 ? [] : _b,
+        filterRow = _a.filterRow,
+        _c = _a.scrollable,
+        scrollable = _c === void 0 ? 'scrollable' : _c,
+        _d = _a.resizable,
+        resizable = _d === void 0 ? false : _d,
+        _e = _a.reorderable,
+        reorderable = _e === void 0 ? false : _e,
+        skip = _a.skip,
+        take = _a.take;
+    var filterable = this.filterable || columns.some(function (c) {
+      return Boolean(c.filter) || Boolean(c.filterCell);
+    }) || filterRow !== undefined;
+    var FilterRow = filterRow || TreeListFilterRow;
+    var idPrefix = navigationTools.getIdPrefix(undefined); // to do this.navigationStateRef
+
+    if (this.prevColumns !== columns) {
+      this.extendedColumn = readColumns(columns, {
+        prevId: 0,
+        idPrefix: idPrefix
+      });
+      this.columnsMap = mapColumns(this.extendedColumn);
+    }
+
+    this.prevColumns = this.$props.columns;
+    var leafColumns = this.extendedColumn.filter(function (c) {
+      return c.children.length === 0;
+    });
+    this.columnResize.columns = this.extendedColumn;
+    this.columnResize.resizable = resizable;
+    this.dragLogic.columns = this.extendedColumn;
+    this.dragLogic.reorderable = reorderable;
+    this.dragLogic.groupable = false;
+    var header = // @ts-ignore
+    h(Header, {
+      headerRow: // @ts-ignore
+      h(HeaderRow, {
+        sort: this.$props.sort,
+        attrs: this.v3 ? undefined : {
+          sort: this.$props.sort,
+          sortable: this.$props.sortable,
+          filterable: this.$props.filterable,
+          columns: this.extendedColumn,
+          columnsMap: this.columnsMap,
+          cellRender: this.$props.headerCellRender,
+          columnResize: this.columnResize,
+          columnMenu: this.$props.columnMenu,
+          columnMenuFilter: this.$props.columnMenuFilter,
+          columnMenuFilterChange: this.columnMenuFilterChange,
+          filterRow: filterable ? // @ts-ignore
+          h(FilterRow, {
+            columns: leafColumns,
+            attrs: this.v3 ? undefined : {
+              columns: leafColumns,
+              filter: this.$props.filter,
+              sort: this.$props.sort,
+              ariaRowIndex: this.columnsMap.length + 1,
+              grid: this,
+              filterOperators: this.$props.filterOperators || operators,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl
+            },
+            filter: this.$props.filter,
+            onFilterchange: this.filterChange,
+            on: this.v3 ? undefined : {
+              "filterchange": this.filterChange
+            },
+            sort: this.$props.sort,
+            ariaRowIndex: this.columnsMap.length + 1,
+            grid: this,
+            filterOperators: this.$props.filterOperators || operators,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl
+          }) : undefined
+        },
+        sortable: this.$props.sortable,
+        filterable: this.$props.filterable,
+        onSortChange: this.sortChange,
+        on: this.v3 ? undefined : {
+          "sortChange": this.sortChange,
+          "selectionchange": this.onHeaderSelectionChange,
+          "pressHandler": this.dragLogic.pressHandler,
+          "dragHandler": this.dragLogic.dragHandler,
+          "releaseHandler": this.dragLogic.releaseHandler
+        },
+        onSelectionchange: this.onHeaderSelectionChange,
+        columns: this.extendedColumn,
+        columnsMap: this.columnsMap,
+        cellRender: this.$props.headerCellRender,
+        columnResize: this.columnResize,
+        columnMenu: this.$props.columnMenu,
+        columnMenuFilter: this.$props.columnMenuFilter,
+        columnMenuFilterChange: this.columnMenuFilterChange,
+        onPressHandler: this.dragLogic.pressHandler,
+        onDragHandler: this.dragLogic.dragHandler,
+        onReleaseHandler: this.dragLogic.releaseHandler,
+        filterRow: filterable ? h(FilterRow, {
+          columns: leafColumns,
+          attrs: this.v3 ? undefined : {
+            columns: leafColumns,
+            filter: this.$props.filter,
+            sort: this.$props.sort,
+            ariaRowIndex: this.columnsMap.length + 1,
+            grid: this,
+            filterOperators: this.$props.filterOperators || operators,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl
+          },
+          filter: this.$props.filter,
+          onFilterchange: this.filterChange,
+          on: this.v3 ? undefined : {
+            "filterchange": this.filterChange
+          },
+          sort: this.$props.sort,
+          ariaRowIndex: this.columnsMap.length + 1,
+          grid: this,
+          filterOperators: this.$props.filterOperators || operators,
+          cellRender: this.$props.filterCellRender,
+          isRtl: this.isRtl
+        }) : undefined
+      }),
+      attrs: this.v3 ? undefined : {
+        headerRow: h(HeaderRow, {
+          sort: this.$props.sort,
+          attrs: this.v3 ? undefined : {
+            sort: this.$props.sort,
+            sortable: this.$props.sortable,
+            filterable: this.$props.filterable,
+            columns: this.extendedColumn,
+            columnsMap: this.columnsMap,
+            cellRender: this.$props.headerCellRender,
+            columnResize: this.columnResize,
+            columnMenu: this.$props.columnMenu,
+            columnMenuFilter: this.$props.columnMenuFilter,
+            columnMenuFilterChange: this.columnMenuFilterChange,
+            filterRow: filterable ? h(FilterRow, {
+              columns: leafColumns,
+              attrs: this.v3 ? undefined : {
+                columns: leafColumns,
+                filter: this.$props.filter,
+                sort: this.$props.sort,
+                ariaRowIndex: this.columnsMap.length + 1,
+                grid: this,
+                filterOperators: this.$props.filterOperators || operators,
+                cellRender: this.$props.filterCellRender,
+                isRtl: this.isRtl
+              },
+              filter: this.$props.filter,
+              onFilterchange: this.filterChange,
+              on: this.v3 ? undefined : {
+                "filterchange": this.filterChange
+              },
+              sort: this.$props.sort,
+              ariaRowIndex: this.columnsMap.length + 1,
+              grid: this,
+              filterOperators: this.$props.filterOperators || operators,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl
+            }) : undefined
+          },
+          sortable: this.$props.sortable,
+          filterable: this.$props.filterable,
+          onSortChange: this.sortChange,
+          on: this.v3 ? undefined : {
+            "sortChange": this.sortChange,
+            "selectionchange": this.onHeaderSelectionChange,
+            "pressHandler": this.dragLogic.pressHandler,
+            "dragHandler": this.dragLogic.dragHandler,
+            "releaseHandler": this.dragLogic.releaseHandler
+          },
+          onSelectionchange: this.onHeaderSelectionChange,
+          columns: this.extendedColumn,
+          columnsMap: this.columnsMap,
+          cellRender: this.$props.headerCellRender,
+          columnResize: this.columnResize,
+          columnMenu: this.$props.columnMenu,
+          columnMenuFilter: this.$props.columnMenuFilter,
+          columnMenuFilterChange: this.columnMenuFilterChange,
+          onPressHandler: this.dragLogic.pressHandler,
+          onDragHandler: this.dragLogic.dragHandler,
+          onReleaseHandler: this.dragLogic.releaseHandler,
+          filterRow: filterable ? h(FilterRow, {
+            columns: leafColumns,
+            attrs: this.v3 ? undefined : {
+              columns: leafColumns,
+              filter: this.$props.filter,
+              sort: this.$props.sort,
+              ariaRowIndex: this.columnsMap.length + 1,
+              grid: this,
+              filterOperators: this.$props.filterOperators || operators,
+              cellRender: this.$props.filterCellRender,
+              isRtl: this.isRtl
+            },
+            filter: this.$props.filter,
+            onFilterchange: this.filterChange,
+            on: this.v3 ? undefined : {
+              "filterchange": this.filterChange
+            },
+            sort: this.$props.sort,
+            ariaRowIndex: this.columnsMap.length + 1,
+            grid: this,
+            filterOperators: this.$props.filterOperators || operators,
+            cellRender: this.$props.filterCellRender,
+            isRtl: this.isRtl
+          }) : undefined
+        }),
+        columnResize: this.columnResize
+      },
+      columnResize: this.columnResize
+    });
+    var wrapperStyles = this.$props.wrapperStyle || {};
+
+    var _f = tableColumnsVirtualization({
+      enabled: this.$props.columnVirtualization,
+      columns: leafColumns,
+      scrollLeft: this.wrapperScrollLeft,
+      tableViewPortWidth: parseFloat((wrapperStyles.width || '').toString())
+    }),
+        colSpans = _f.colSpans,
+        hiddenColumns = _f.hiddenColumns;
+
+    var dataRow = function dataRow(item, inEdit, rowId, isRowExpanded, rowDataIndex, selectedValue) {
+      return leafColumns.map(function (column, columnIndex) {
+        var _this = this;
+
+        if (hiddenColumns[columnIndex]) {
+          return null;
+        }
+
+        var columnKey = column.id ? column.id : columnIndex;
+        var className = "".concat(column.className ? column.className + ' ' : '') + "".concat(column.locked ? 'k-grid-content-sticky' : '');
+
+        if (inEdit && column.editCell) {
+          return h(column.editCell, {
+            key: columnKey //  {...cellProps} 
+            ,
+            onChange: this.itemChange,
+            on: this.v3 ? undefined : {
+              "change": this.itemChange
+            }
+          });
+        }
+
+        if (column.cell) {
+          return h(column.cell, {
+            key: columnKey
+          });
+        }
+
+        return h(TreeListCell, {
+          key: columnKey,
+          id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
+          attrs: this.v3 ? undefined : {
+            id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
+            colSpan: colSpans[columnIndex],
+            dataItem: item.dataItem,
+            field: column.field,
+            format: column.format,
+            render: this.$props.cellRender,
+            selectionChange: this.$props.onSelectionChange ? function (e) {
+              _this.selectionChange({
+                event: e,
+                item: item,
+                columnIndex: columnIndex,
+                dataIndex: rowDataIndex
+              });
+            } : undefined,
+            level: item.level,
+            expandable: column.expandable,
+            expanded: isRowExpanded,
+            hasChildren: this.hasChildren(item.dataItem),
+            colIndex: columnIndex,
+            ariaColumnIndex: column.ariaColumnIndex,
+            isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
+          },
+          colSpan: colSpans[columnIndex],
+          dataItem: item.dataItem,
+          field: column.field,
+          format: column.format,
+          "class": className || undefined,
+          render: this.$props.cellRender,
+          onChange: this.itemChange,
+          on: this.v3 ? undefined : {
+            "change": this.itemChange,
+            "expandchange": this.expandChange
+          },
+          selectionChange: this.$props.onSelectionChange ? function (e) {
+            _this.selectionChange({
+              event: e,
+              item: item,
+              columnIndex: columnIndex,
+              dataIndex: rowDataIndex
+            });
+          } : undefined,
+          level: item.level,
+          expandable: column.expandable,
+          expanded: isRowExpanded,
+          hasChildren: this.hasChildren(item.dataItem),
+          onExpandchange: this.expandChange,
+          colIndex: columnIndex,
+          ariaColumnIndex: column.ariaColumnIndex,
+          style: column.left !== undefined && {
+            left: column.left,
+            right: column.right,
+            borderRightWidth: column.rightBorder ? '1px' : ''
+          } || {},
+          isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
+        });
+      }, _this);
+    };
+
+    var flattedData = this.flatData();
+    var total = flattedData.length;
+
+    if (skip !== undefined && take !== undefined) {
+      flattedData = flattedData.slice(skip, skip + take);
+    }
+
+    if (scrollable === 'virtual') {
+      flattedData = tableRowsVirtualization({
+        rows: flattedData,
+        tableViewPortHeight: parseFloat((wrapperStyles.height || wrapperStyles.maxHeight || '').toString()),
+        scrollTop: this.wrapperScrollTop
+      });
+      this.updateOnScroll = false;
+    }
+
+    var levels = flattedData.length ? flattedData.map(function (i) {
+      return i.level;
+    }) : [];
+    var rowIndexStart = this.columnsMap.length + (filterable ? 1 : 0) + 1;
+    var body = flattedData.length > 0 && flattedData.map(function (item, rowIndex) {
+      var _this = this;
+
+      var inEdit = getNestedValue(this.$props.editField, item.dataItem);
+      var dataItemKeyValue = this.$props.dataItemKey && getter(this.$props.dataItemKey)(item.dataItem);
+      var rowId = String(dataItemKeyValue ? dataItemKeyValue : item.level.join('.'));
+      var isRowExpanded = this.expanded(item.dataItem);
+      var selectedValue = this.$props.selectedField ? getNestedValue(this.$props.selectedField, item.dataItem) : undefined;
+      var EditRow = this.$props.editRow;
+      var Row = this.$props.row || TreeListRow;
+      var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
+      return inEdit && EditRow ? h(EditRow, [cells]) : // @ts-ignore function children
+      h(Row, {
+        key: rowId,
+        level: item.level,
+        attrs: this.v3 ? undefined : {
+          level: item.level,
+          levels: levels,
+          dataItem: item.dataItem,
+          selectedField: this.$props.selectedField,
+          rowHeight: scrollable === 'virtual' ? item.height : this.$props.rowHeight,
+          render: this.$props.rowRender,
+          isAltRow: rowIndex % 2 !== 0,
+          expanded: isRowExpanded,
+          rowIndex: rowIndex,
+          ariaRowIndex: rowIndexStart + rowIndex,
+          ariaSetSize: item.levelCount,
+          ariaPosInSet: item.level[item.level.length - 1] + 1,
+          isSelected: typeof selectedValue === 'boolean' && selectedValue
+        },
+        levels: levels,
+        dataItem: item.dataItem,
+        selectedField: this.$props.selectedField,
+        rowHeight: scrollable === 'virtual' ? item.height : this.$props.rowHeight,
+        render: this.$props.rowRender,
+        onDrop: this.onRowDrop,
+        on: this.v3 ? undefined : {
+          "drop": this.onRowDrop,
+          "drag": this.onRowDrag,
+          "click": function click(e) {
+            return _this.rowClick(e, item);
+          },
+          "doubleClick": function doubleClick(e) {
+            return _this.rowDoubleClick(e, item);
+          },
+          "contextMenu": function contextMenu(e) {
+            return _this.rowContextMenu(e, item);
+          }
+        },
+        onDrag: this.onRowDrag,
+        onClick: function click(e) {
+          return _this.rowClick(e, item);
+        },
+        onDoubleClick: function doubleClick(e) {
+          return _this.rowDoubleClick(e, item);
+        },
+        onContextMenu: function contextMenu(e) {
+          return _this.rowContextMenu(e, item);
+        },
+        isAltRow: rowIndex % 2 !== 0,
+        expanded: isRowExpanded,
+        rowIndex: rowIndex,
+        ariaRowIndex: rowIndexStart + rowIndex,
+        ariaSetSize: item.levelCount,
+        ariaPosInSet: item.level[item.level.length - 1] + 1,
+        isSelected: typeof selectedValue === 'boolean' && selectedValue,
+        "class": this.$props.rowClass ? this.$props.rowClass(item) : ''
+      }, this.v3 ? function () {
+        return [cells];
+      } : [cells]);
+    }, this) || h("tr", {
+      "class": "k-grid-norecords"
+    }, [h("td", {
+      colSpan: leafColumns.length,
+      attrs: this.v3 ? undefined : {
+        colSpan: leafColumns.length
+      }
+    }, [this.$props.noRecords || h(TreeListNoRecords)])]);
+
+    var sorted = function sorted(field) {
+      return _this.$props.sort && _this.$props.sort.some(function (descriptor) {
+        return descriptor.field === field;
+      });
+    };
+
+    var colGroups = h("colgroup", {
+      ref: function ref(c) {
+        _this.columnResize.colGroupMain = c;
+      },
+      role: 'presentation',
+      attrs: this.v3 ? undefined : {
+        role: 'presentation'
+      }
+    }, [leafColumns.map(function (column, index) {
+      return h("col", {
+        key: index.toString(),
+        "class": sorted(column.field) ? 'k-sorted' : undefined,
+        style: column.width !== undefined ? {
+          width: column.width
+        } : undefined
+      });
+    })]);
+    var virtualScroll = this.$props.columnVirtualization || this.$props.scrollable === 'virtual';
+    var tableUserSelect = this.$props.selectable && this.$props.selectable.drag ? 'none' : undefined;
+    var tableProps = this.$props.tableProps || {};
+    var pagerTemplate = templateRendering.call(this, this.$props.pager, getListeners.call(this)); // @ts-ignore
+
+    var defaultPagerRendering = this.$props.pageable && h(Pager, {
+      "class": 'k-grid-pager',
+      onPagesizechange: this.pageChangeHandler,
+      on: this.v3 ? undefined : {
+        "pagesizechange": this.pageChangeHandler,
+        "pagechange": this.pageChangeHandler
+      },
+      onPagechange: this.pageChangeHandler,
+      total: total,
+      attrs: this.v3 ? undefined : {
+        total: total,
+        skip: this.$props.skip || 0,
+        pageSize: this.$props.take || 10,
+        messagesMap: pagerMessagesMap,
+        settings: normalize(this.$props.pageable || {})
+      },
+      skip: this.$props.skip || 0,
+      pageSize: this.$props.take || 10,
+      messagesMap: pagerMessagesMap,
+      settings: normalize(this.$props.pageable || {})
+    });
+    var pager = getTemplate.call(this, {
+      h: h,
+      template: pagerTemplate,
+      defaultRendering: defaultPagerRendering,
+      additionalProps: __assign(__assign({}, this.$props), {
+        skip: this.skip || 0,
+        messagesMap: pagerMessagesMap
+      }),
+      additionalListeners: {
+        pagesizechange: this.pageChangeHandler,
+        pagechange: this.pageChangeHandler
+      }
+    });
+    return (// @ts-ignore function children
+      h(TableKeyboardNavigationProvider, {
+        ref: 'navRef',
+        id: this._treeListId,
+        attrs: this.v3 ? undefined : {
+          id: this._treeListId,
+          navigatable: this.$props.navigatable
+        },
+        navigatable: this.$props.navigatable
+      }, this.v3 ? function () {
+        return [// @ts-ignore function children
+        h(TreeListNav, {
+          style: _this2.$props.wrapperStyle,
+          "class": classNames('k-widget k-grid', _this2.$props.className, {
+            'k-treelist-scrollable': scrollable !== 'none'
+          }),
+          ref: function ref(e) {
+            return _this.element = e;
+          },
+          currentData: flattedData,
+          attrs: _this2.v3 ? undefined : {
+            currentData: flattedData,
+            "aria-rowcount": total,
+            "aria-colcount": leafColumns.length,
+            role: 'treegrid'
+          },
+          onScroll: virtualScroll ? _this2.handleOnScroll : noop,
+          on: _this2.v3 ? undefined : {
+            "scroll": virtualScroll ? _this2.handleOnScroll : noop,
+            "keyDown": _this2.onKeyDown,
+            "focus": _this2.onFocus
+          },
+          onKeyDown: _this2.onKeyDown,
+          onFocus: _this2.onFocus,
+          "aria-rowcount": total,
+          "aria-colcount": leafColumns.length,
+          role: 'treegrid'
+        }, _this2.v3 ? function () {
+          return [_this2.$props.toolbar, //     // @ts-ignore
+          //   <TableSelection
+          //     selectable={this.$props.selectable}
+          //     onRelease={this.selectionRelease}
+          //   >
+          h("table", {
+            //  {...tableProps} 
+            style: __assign(__assign({}, tableProps.style || {}), {
+              userSelect: tableUserSelect
+            }),
+            role: 'presentation',
+            attrs: _this2.v3 ? undefined : {
+              role: 'presentation'
+            }
+          }, [colGroups, header, h("tbody", {
+            // {...tableKeyboardNavigationBodyAttributes} 
+            role: 'presentation',
+            attrs: _this2.v3 ? undefined : {
+              role: 'presentation'
+            }
+          }, [body])]) //     </TableSelection>
+          , pager, reorderable && h(DropClue, {
+            ref: _this2.dragLogic.refDropElementClue
+          }), reorderable && h(DragClue, {
+            ref: _this2.dragLogic.refDragElementClue
+          })];
+        } : [_this2.$props.toolbar, h("table", {
+          style: __assign(__assign({}, tableProps.style || {}), {
+            userSelect: tableUserSelect
+          }),
+          role: 'presentation',
+          attrs: _this2.v3 ? undefined : {
+            role: 'presentation'
+          }
+        }, [colGroups, header, h("tbody", {
+          role: 'presentation',
+          attrs: _this2.v3 ? undefined : {
+            role: 'presentation'
+          }
+        }, [body])]), pager, reorderable && h(DropClue, {
+          ref: _this2.dragLogic.refDropElementClue
+        }), reorderable && h(DragClue, {
+          ref: _this2.dragLogic.refDragElementClue
+        })])];
+      } : [h(TreeListNav, {
+        style: _this2.$props.wrapperStyle,
+        "class": classNames('k-widget k-grid', _this2.$props.className, {
+          'k-treelist-scrollable': scrollable !== 'none'
+        }),
+        ref: function ref(e) {
+          return _this.element = e;
+        },
+        currentData: flattedData,
+        attrs: _this2.v3 ? undefined : {
+          currentData: flattedData,
+          "aria-rowcount": total,
+          "aria-colcount": leafColumns.length,
+          role: 'treegrid'
+        },
+        onScroll: virtualScroll ? _this2.handleOnScroll : noop,
+        on: _this2.v3 ? undefined : {
+          "scroll": virtualScroll ? _this2.handleOnScroll : noop,
+          "keyDown": _this2.onKeyDown,
+          "focus": _this2.onFocus
+        },
+        onKeyDown: _this2.onKeyDown,
+        onFocus: _this2.onFocus,
+        "aria-rowcount": total,
+        "aria-colcount": leafColumns.length,
+        role: 'treegrid'
+      }, _this2.v3 ? function () {
+        return [_this2.$props.toolbar, h("table", {
+          style: __assign(__assign({}, tableProps.style || {}), {
+            userSelect: tableUserSelect
+          }),
+          role: 'presentation',
+          attrs: _this2.v3 ? undefined : {
+            role: 'presentation'
+          }
+        }, [colGroups, header, h("tbody", {
+          role: 'presentation',
+          attrs: _this2.v3 ? undefined : {
+            role: 'presentation'
+          }
+        }, [body])]), pager, reorderable && h(DropClue, {
+          ref: _this2.dragLogic.refDropElementClue
+        }), reorderable && h(DragClue, {
+          ref: _this2.dragLogic.refDragElementClue
+        })];
+      } : [_this2.$props.toolbar, h("table", {
+        style: __assign(__assign({}, tableProps.style || {}), {
+          userSelect: tableUserSelect
+        }),
+        role: 'presentation',
+        attrs: _this2.v3 ? undefined : {
+          role: 'presentation'
+        }
+      }, [colGroups, header, h("tbody", {
+        role: 'presentation',
+        attrs: _this2.v3 ? undefined : {
+          role: 'presentation'
+        }
+      }, [body])]), pager, reorderable && h(DropClue, {
+        ref: _this2.dragLogic.refDropElementClue
+      }), reorderable && h(DragClue, {
+        ref: _this2.dragLogic.refDragElementClue
+      })])])
+    );
+  },
+  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: function scrollIntoView(options) {
+      if (!this.element) {
+        return;
+      }
+
+      var _a = options.rowIndex,
+          rowIndex = _a === void 0 ? 0 : _a;
+      var _b = this.$props,
+          scrollable = _b.scrollable,
+          _c = _b.rowHeight,
+          rowHeight = _c === void 0 ? 0 : _c;
+
+      if (scrollable === 'virtual' || rowHeight) {
+        this.element.scroll(0, (rowIndex - 1) * rowHeight);
+      } else {
+        var selectedRow = this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex, ")"));
+
+        if (selectedRow) {
+          var offsetTop = selectedRow.offsetTop - this.tbodyOffsetTop;
+          this.element.scroll(0, offsetTop);
+        }
+      }
+    },
+    getColumns: function getColumns() {
+      var _this = this;
+
+      var shuffledColumns = this.extendedColumn.filter(function (q) {
+        return q.declarationIndex >= 0 && q.parentIndex === -1;
+      });
+
+      var sanitize = function sanitize(columns) {
+        columns.sort(function (a, b) {
+          return a.declarationIndex - b.declarationIndex;
+        });
+        return columns.map(function (column) {
+          var declarationIndex = column.declarationIndex,
+              parentIndex = column.parentIndex,
+              depth = column.depth,
+              colSpan = column.colSpan,
+              rowSpan = column.rowSpan,
+              index = column.index,
+              kFirst = column.kFirst,
+              groupable = column.groupable,
+              children = column.children,
+              $props = __rest(column, ["declarationIndex", "parentIndex", "depth", "colSpan", "rowSpan", "index", "kFirst", "groupable", "children"]);
+
+          return children.length ? __assign({
+            children: sanitize(children)
+          }, $props) : _this.$props;
+        });
+      };
+
+      return sanitize(shuffledColumns);
+    },
+    flatData: function flatData() {
+      var _a = this.$props,
+          _b = _a.dataItems,
+          dataItems = _b === void 0 ? [] : _b,
+          _c = _a.rowHeight,
+          rowHeight = _c === void 0 ? 0 : _c;
+      var offsetTop = 0;
+
+      var itemDataMap = function itemDataMap(_item) {
+        var result = {
+          height: rowHeight,
+          offsetTop: offsetTop
+        };
+        offsetTop += result.height;
+        return result;
+      };
+
+      var flattedData = this.updateOnScroll && this.prevData === dataItems && this.tbodyOffsetTop > 0 && this.flattedData.length ? this.flattedData : _flatData(dataItems, this.expandedSubItems, itemDataMap);
+      this.prevData = dataItems;
+      this.flattedData = flattedData;
+      return flattedData;
+    },
+    onKeyDown: function onKeyDown(event) {
+      // tableKeyboardNavigation.onKeyDown(event, {
+      //     contextStateRef: this.contextStateRef,
+      //     navigationStateRef: this.navigationStateRef
+      // });
+      var _a = getSelectionOptions(this.$props.selectable),
+          mode = _a.mode,
+          cell = _a.cell;
+
+      this.$emit('keydown', __assign({
+        dataItems: this.getLeafDataItems(),
+        mode: mode,
+        cell: cell,
+        componentId: this._treeListId,
+        selectedField: this.$props.selectedField
+      }, this.getArguments(event)));
+    },
+    onFocus: function onFocus(_event) {// tableKeyboardNavigation.onFocus(event, {
+      //     contextStateRef: this.contextStateRef
+      // });
+    },
+    onRowDrag: function onRowDrag(_event) {// if (this.$props.onRowDrag) {
+      //     this.$props.onRowDrag.call(undefined, { ...event, target: this });
+      // }
+    },
+    onRowDrop: function onRowDrop(event) {
+      if (this.$props.onRowDrop) {
+        this.$props.onRowDrop.call(undefined, __assign(__assign({}, event), {
+          target: this
+        }));
+      }
+    },
+    columnReorder: function columnReorder(prev, next, nativeEvent) {
+      var _a;
+
+      var _this = this;
+
+      var depth = this.extendedColumn[prev].depth;
+
+      var end = function end(index) {
+        do {
+          index++;
+        } while (index < _this.extendedColumn.length && _this.extendedColumn[index].depth > depth);
+
+        return index;
+      };
+
+      var spliced = this.extendedColumn.splice(prev, end(prev) - prev);
+
+      (_a = this.extendedColumn).splice.apply(_a, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
+
+      this.extendedColumn.filter(function (q) {
+        return q.declarationIndex >= 0;
+      }).forEach(function (c, i) {
+        return c.orderIndex = i;
+      });
+
+      if (this.$props.onColumnReorder) {
+        var event_1 = {
+          target: this,
+          columns: this.columns,
+          event: nativeEvent
+        };
+        this.$props.onColumnReorder.call(undefined, event_1);
+      }
+    },
+    onResize: function onResize(index, newWidth, oldWidth, nativeEvent, end) {
+      if (this.$props.onColumnResize) {
+        var sumWidth = this.extendedColumn.filter(function (c) {
+          return c.children.length === 0;
+        }).reduce(function (acc, column) {
+          return acc += parseFloat(String(column.width));
+        }, 0);
+        var event_2 = {
+          columns: this.columns,
+          totalWidth: sumWidth,
+          index: index,
+          event: nativeEvent,
+          newWidth: newWidth,
+          oldWidth: oldWidth,
+          end: end,
+          target: this
+        };
+
+        if (end) {
+          this.prevColumns = undefined;
+        }
+
+        this.$props.onColumnResize.call(undefined, event_2);
+      }
+    },
+    handleOnScroll: function handleOnScroll(event) {
+      var scrollLeft = event.currentTarget.scrollLeft;
+      var scrollTop = event.currentTarget.scrollTop;
+      var _a = this.$props,
+          columnVirtualization = _a.columnVirtualization,
+          scrollable = _a.scrollable,
+          _b = _a.rowHeight,
+          rowHeight = _b === void 0 ? 0 : _b;
+      var minTopChange = rowHeight;
+      var minLeftChange = 0;
+      var shouldForceUpdate = false;
+
+      if (columnVirtualization && Math.abs(this.wrapperScrollLeft - scrollLeft) > minLeftChange) {
+        this.wrapperScrollLeft = scrollLeft;
+        shouldForceUpdate = true;
+      }
+
+      if (scrollable === 'virtual' && Math.abs(this.wrapperScrollTop - scrollTop) > minTopChange) {
+        this.wrapperScrollTop = scrollTop;
+        shouldForceUpdate = true;
+      }
+
+      if (shouldForceUpdate) {
+        this.updateOnScroll = true; //  this.forceUpdate();
+      }
+    },
+    calculateSizes: function calculateSizes(div) {
+      if (!div || this.$props.scrollable === 'none') {
+        return;
+      }
+
+      var children = Array.from(div.childNodes);
+      var table = children.find(function (n) {
+        return n.nodeName === 'TABLE';
+      });
+      var toolbar = this.$props.toolbar && children.find(function (n) {
+        return n.nodeType === 1 && n.classList.contains('k-grid-toolbar');
+      });
+      var toolbarHeight = 0;
+
+      if (toolbar) {
+        var boxSizing = toolbar.style.boxSizing;
+        toolbar.style.boxSizing = 'border-box';
+        toolbarHeight = parseFloat(String(window.getComputedStyle(toolbar).height)) || toolbar.offsetHeight;
+        toolbar.style.boxSizing = boxSizing;
+
+        if (!toolbar.getAttribute('style')) {
+          toolbar.removeAttribute('style');
+        }
+      }
+
+      this.tbodyOffsetTop = table.tBodies[0].offsetTop;
+      setHeaderRowsTop(table, toolbarHeight);
+    },
+    itemChange: function itemChange(event) {
+      var itemChange = this.$props.onItemChange;
+
+      if (event.field === this.$props.expandField) {
+        var expandChange = this.$props.onExpandChange;
+
+        if (expandChange) {
+          var expandEvent = __assign(__assign({}, this.getArguments(event.event)), {
+            dataItem: event.dataItem,
+            level: event.level,
+            value: event.value
+          });
+
+          expandChange.call(undefined, expandEvent);
+        }
+
+        return;
+      }
+
+      if (itemChange) {
+        var itemChangeEvent = __assign(__assign({}, this.getArguments(event.event)), {
+          dataItem: event.dataItem,
+          level: event.level,
+          field: event.field,
+          value: event.value
+        });
+
+        itemChange.call(undefined, itemChangeEvent);
+      }
+    },
+    selectionChange: function selectionChange(options) {
+      if (this.$props.onSelectionChange) {
+        var event_3 = options.event,
+            item = options.item,
+            dataIndex = options.dataIndex,
+            columnIndex = options.columnIndex;
+
+        var _a = getSelectionOptions(this.$props.selectable),
+            mode = _a.mode,
+            cell = _a.cell;
+
+        var selectionEvent = __assign(__assign({}, this.getArguments(event_3.event)), {
+          dataItem: item.dataItem,
+          level: item.level,
+          startColIndex: columnIndex,
+          endColIndex: columnIndex,
+          startRowIndex: dataIndex,
+          endRowIndex: dataIndex,
+          dataItems: this.getLeafDataItems(),
+          altKey: false,
+          ctrlKey: false,
+          shiftKey: false,
+          metaKey: false,
+          mode: mode,
+          cell: cell,
+          isDrag: false,
+          componentId: this._treeListId,
+          selectedField: this.$props.selectedField || ''
+        });
+
+        this.$emit('selectionchange', selectionEvent);
+      }
+    },
+    onHeaderSelectionChange: function onHeaderSelectionChange(event) {
+      if (this.$props.onHeaderSelectionChange) {
+        var selectionEvent = {
+          field: event.field,
+          //   nativeEvent: event.event && event.event.nativeEvent,
+          event: event.event,
+          target: this,
+          dataItems: this.getLeafDataItems()
+        };
+        this.$emit('headerselectionchange', selectionEvent);
+      }
+    },
+    selectionRelease: function selectionRelease(event) {
+      if (this.$props.onSelectionChange) {
+        var selectionEvent = __assign({
+          event: undefined,
+          target: this,
+          selectedField: this.$props.selectedField || '',
+          componentId: this._treeListId,
+          dataItems: this.getLeafDataItems(),
+          dataItem: null,
+          level: []
+        }, event);
+
+        this.$emit('selectionchange', selectionEvent);
+      }
+    },
+    sortChange: function sortChange(sort, event) {
+      this.raiseDataEvent('sortchange', {
+        sort: sort,
+        field: event.field
+      }, event);
+    },
+    filterChange: function filterChange(filter, event) {
+      var filters = filter ? filter.filters : [];
+      this.raiseDataEvent('filterchange', {
+        filter: filters
+      }, {
+        filter: filters,
+        skip: 0
+      }, event);
+    },
+    columnMenuFilterChange: function columnMenuFilterChange(event, filter, field) {
+      var onColumnMenuFilterChange = this.$props.onColumnMenuFilterChange;
+
+      if (!onColumnMenuFilterChange) {
+        return;
+      }
+
+      var currentEvent = {
+        event: event,
+        filter: filter,
+        field: field,
+        target: this
+      };
+      onColumnMenuFilterChange.call(undefined, currentEvent);
+    },
+    expandChange: function expandChange(event, dataItem, level) {
+      var expandField = this.$props.expandField;
+
+      if (expandField) {
+        var expandEvent = __assign(__assign({}, this.getArguments(event)), {
+          dataItem: dataItem,
+          level: level,
+          value: this.expanded(dataItem)
+        });
+
+        this.$emit('expandchange', expandEvent);
+      }
+    },
+    rowClick: function rowClick(e, item) {
+      if (e.target.nodeName === 'TD') {
+        var rowClickEvent = __assign({
+          dataItem: item.dataItem,
+          level: item.level
+        }, this.getArguments(e));
+
+        this.$emit('rowclick', rowClickEvent);
+      }
+    },
+    rowDoubleClick: function rowDoubleClick(e, item) {
+      if (this.$props.onRowDoubleClick && e.target.nodeName === 'TD') {
+        var rowDoubleClickEvent = __assign({
+          dataItem: item.dataItem,
+          level: item.level
+        }, this.getArguments(e));
+
+        this.$emit('rowdblclick', rowDoubleClickEvent);
+      }
+    },
+    rowContextMenu: function rowContextMenu(e, item) {
+      if (this.$props.onRowContextMenu && e.target.nodeName === 'TD') {
+        var rowContextMenuEvent = __assign({
+          dataItem: item.dataItem,
+          level: item.level
+        }, this.getArguments(e));
+
+        this.$props.onRowContextMenu.call(undefined, rowContextMenuEvent);
+      }
+    },
+    pageChangeHandler: function pageChangeHandler(page, event) {
+      this.raiseDataEvent('pagechange', {
+        page: page,
+        event: event,
+        skip: page.skip,
+        take: page.take
+      }, {
+        skip: page.skip,
+        take: page.take
+      }, event);
+    },
+    onPageChange: function onPageChange(e) {
+      if (this.$props.onPageChange) {
+        var event_4 = __assign(__assign({}, this.getArguments(e.event)), {
+          skip: e.skip,
+          take: e.take
+        });
+
+        this.$props.onPageChange.call(undefined, event_4);
+      }
+    },
+    raiseDataEvent: function raiseDataEvent(handler, data, moreData, event) {
+      if (hasListener.call(this, handler)) {
+        this.$emit(handler, __assign(__assign({}, this.getArguments(event)), data));
+      } else if (hasListener.call(this, 'datastatechange')) {
+        this.$emit('datastatechange', __assign(__assign({}, this.getArguments(event)), {
+          data: __assign(__assign({}, this.getDataState()), moreData)
+        }));
+      }
+    },
+    getDataState: function getDataState() {
+      return {
+        filter: this.$props.filter,
+        sort: this.$props.sort
+      };
+    },
+    getArguments: function getArguments(event) {
+      return {
+        nativeEvent: event && event.nativeEvent,
+        event: event,
+        target: this
+      };
+    },
+    expandedSubItems: function expandedSubItems(dataItem) {
+      var items = [];
+
+      if (this.expanded(dataItem) && this.hasChildren(dataItem)) {
+        items.push.apply(items, getNestedValue(this.$props.subItemsField, dataItem));
+      }
+
+      return items;
+    },
+    getLeafDataItems: function getLeafDataItems() {
+      return this.flatData().map(function (item) {
+        return item.dataItem;
+      });
+    },
+    expanded: function expanded(dataItem) {
+      return Boolean(getNestedValue(this.$props.expandField, dataItem));
+    },
+    hasChildren: function hasChildren(dataItem) {
+      return Boolean(getNestedValue(this.$props.subItemsField, dataItem));
+    }
+  }
+};
+var TreeList = TreeListVue2;
+export { TreeList, TreeListVue2 };