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

package/dist/es/TreeList.js

@@ -1,1289 +0,0 @@
-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 __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';
-import { noop, getter, guid, canUseDOM, getDefaultSlots, templateRendering, getListeners, getTemplate, isRtl, getRef, setRef, kendoThemeMaps } from '@progress/kendo-vue-common';
-import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, readColumns, mapColumns, 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 { TreeListDraggableRow } from './rows/TreeListDraggableRow';
-import { RowDragClue } from './rows/RowDragClue';
-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 { messages, pagerMessagesMap, noRecords } from './messages/main';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-import { TreeListSelectionCell } from './cells/TreeListSelectionCell';
-/**
- * @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,
-    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 validator(value) {
-        return ['small', 'medium'].includes(value);
-      }
-    },
-    reordableRows: Boolean,
-    onDatastatechange: Function,
-    onPagechange: Function,
-    onSortchange: Function,
-    onFilterchange: Function
-  },
-  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.bind(this), noop, noop);
-    this.columnResize = new ColumnResize(this.onResize.bind(this));
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  computed: {
-    wrapperClass: function wrapperClass() {
-      var _a;
-      var _b = this.$props,
-        size = _b.size,
-        scrollable = _b.scrollable;
-      return _a = {
-        'k-grid': true
-      }, _a[this.$props.className] = this.$props.className, _a['k-grid-md'] = !size, _a["k-grid-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a['k-treelist'] = true, _a['k-treelist-scrollable'] = scrollable !== 'none', _a;
-    },
-    toolbarClass: function toolbarClass() {
-      var _a;
-      var size = this.$props.size;
-      return _a = {
-        'k-toolbar': true,
-        'k-grid-toolbar': true
-      }, _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
-    },
-    gridTableClass: function gridTableClass() {
-      var _a;
-      var size = this.$props.size;
-      return _a = {
-        'k-table': true,
-        'k-grid-table': true,
-        'k-grid-md': !size
-      }, _a["k-table-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a;
-    }
-  },
-  data: function data() {
-    return {
-      wrapperScrollLeft: 0,
-      wrapperScrollTop: 0,
-      updateOnScroll: false,
-      tbodyOffsetTop: 0,
-      isRtl: false,
-      navigation: undefined,
-      rowClue: {}
-    };
-  },
-  /**
-   * @hidden
-   */
-  mounted: function mounted() {
-    this.calculateSizes(this.$el);
-    var rtl = isRtl(this.$el);
-    this.isRtl = rtl;
-    var elementString = '$el';
-    var element = getRef(this, 'gridNav');
-    var dropElementClue = getRef(this, 'dropElementClue');
-    var dragElementClue = getRef(this, 'dragElementClue');
-    this.dragLogic.refDropElementClue(dropElementClue);
-    this.dragLogic.refDragElementClue(dragElementClue);
-    this.columnResize.colGroupMain = getRef(this, 'colGroup');
-    if (element) {
-      this.element = element[elementString];
-    }
-  },
-  /**
-   * @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,
-      filterable = _a.filterable,
-      reordableRows = _a.reordableRows;
-    var FilterRow = filterRow || TreeListFilterRow;
-    var idPrefix = navigationTools.getIdPrefix(this.navigation);
-    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 filterToPass = this.$props.filter && this.$props.filter.length === 0 ? undefined : this.$props.filter && this.$props.filter.length !== undefined ? {
-      logic: 'and',
-      filters: this.$props.filter
-    } : this.$props.filter;
-    var header =
-    // @ts-ignore
-    h(Header, {
-      size: this.$props.size,
-      attrs: this.v3 ? undefined : {
-        size: this.$props.size,
-        headerRow:
-        // @ts-ignore
-        h(HeaderRow, {
-          grid: this,
-          attrs: this.v3 ? undefined : {
-            grid: this,
-            sort: this.$props.sort,
-            filter: filterToPass,
-            sortable: this.$props.sortable,
-            selectedField: this.$props.selectedField,
-            reorderable: reorderable,
-            filterable: filterable,
-            filterOperators: this.$props.filterOperators || operators,
-            columns: this.extendedColumn,
-            columnsMap: this.columnsMap,
-            cellRender: this.$props.headerCellRender,
-            columnResize: this.columnResize,
-            columnMenu: this.$props.columnMenu,
-            columnMenuFilter: this.$props.columnMenuFilter,
-            filterRow: filterable ?
-            // @ts-ignore
-            h(FilterRow, {
-              size: this.$props.size,
-              attrs: this.v3 ? undefined : {
-                size: this.$props.size,
-                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
-              },
-              columns: leafColumns,
-              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
-          },
-          sort: this.$props.sort,
-          filter: filterToPass,
-          sortable: this.$props.sortable,
-          selectedField: this.$props.selectedField,
-          reorderable: reorderable,
-          filterable: filterable,
-          filterOperators: this.$props.filterOperators || operators,
-          onSortChange: this.sortChange,
-          on: this.v3 ? undefined : {
-            "sortChange": this.sortChange,
-            "selectionchange": this.onHeaderSelectionChange,
-            "filterChange": this.columnMenuFilterChange,
-            "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,
-          onFilterChange: this.columnMenuFilterChange,
-          onPressHandler: this.dragLogic.pressHandler,
-          onDragHandler: this.dragLogic.dragHandler,
-          onReleaseHandler: this.dragLogic.releaseHandler,
-          filterRow: filterable ? h(FilterRow, {
-            size: this.$props.size,
-            attrs: this.v3 ? undefined : {
-              size: this.$props.size,
-              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
-            },
-            columns: leafColumns,
-            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
-      },
-      headerRow: h(HeaderRow, {
-        grid: this,
-        attrs: this.v3 ? undefined : {
-          grid: this,
-          sort: this.$props.sort,
-          filter: filterToPass,
-          sortable: this.$props.sortable,
-          selectedField: this.$props.selectedField,
-          reorderable: reorderable,
-          filterable: filterable,
-          filterOperators: this.$props.filterOperators || operators,
-          columns: this.extendedColumn,
-          columnsMap: this.columnsMap,
-          cellRender: this.$props.headerCellRender,
-          columnResize: this.columnResize,
-          columnMenu: this.$props.columnMenu,
-          columnMenuFilter: this.$props.columnMenuFilter,
-          filterRow: filterable ? h(FilterRow, {
-            size: this.$props.size,
-            attrs: this.v3 ? undefined : {
-              size: this.$props.size,
-              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
-            },
-            columns: leafColumns,
-            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
-        },
-        sort: this.$props.sort,
-        filter: filterToPass,
-        sortable: this.$props.sortable,
-        selectedField: this.$props.selectedField,
-        reorderable: reorderable,
-        filterable: filterable,
-        filterOperators: this.$props.filterOperators || operators,
-        onSortChange: this.sortChange,
-        on: this.v3 ? undefined : {
-          "sortChange": this.sortChange,
-          "selectionchange": this.onHeaderSelectionChange,
-          "filterChange": this.columnMenuFilterChange,
-          "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,
-        onFilterChange: this.columnMenuFilterChange,
-        onPressHandler: this.dragLogic.pressHandler,
-        onDragHandler: this.dragLogic.dragHandler,
-        onReleaseHandler: this.dragLogic.releaseHandler,
-        filterRow: filterable ? h(FilterRow, {
-          size: this.$props.size,
-          attrs: this.v3 ? undefined : {
-            size: this.$props.size,
-            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
-          },
-          columns: leafColumns,
-          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
-    });
-    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' : '');
-        var cellRenderFunction = templateRendering.call(this, this.$props.cellRender || column.cell, getListeners.call(this));
-        if (inEdit && column.editCell) {
-          var editCell = templateRendering.call(this, column.editCell, getListeners.call(this));
-          return getTemplate.call(this, {
-            h: h,
-            template: editCell,
-            additionalProps: {
-              id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
-              colSpan: colSpans[columnIndex],
-              dataItem: item.dataItem,
-              field: column.field,
-              format: column.format,
-              class: className || undefined,
-              render: cellRenderFunction,
-              level: item.level,
-              expandable: column.expandable,
-              expanded: isRowExpanded,
-              hasChildren: this.hasChildren(item.dataItem),
-              colIndex: columnIndex,
-              ariaColumnIndex: column.ariaColumnIndex,
-              style: column.left !== undefined && {
-                left: column.left + 'px',
-                right: column.right + 'px',
-                borderRightWidth: column.rightBorder ? '1px' : ''
-              } || {},
-              isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
-            },
-            additionalListeners: {
-              change: this.itemChange,
-              input: this.itemChange,
-              expandchange: this.expandChange,
-              selectionchange: function selectionchange(e) {
-                return _this.selectionChange(e, item, columnIndex, rowDataIndex);
-              }
-            }
-          });
-        }
-        var CurrentCell = this.selectedField && column.field === this.selectedField ? TreeListSelectionCell : TreeListCell;
-        return h(CurrentCell, {
-          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: cellRenderFunction,
-            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: cellRenderFunction,
-          onCellclick: this.cellClick,
-          on: this.v3 ? undefined : {
-            "cellclick": this.cellClick,
-            "cellkeydown": this.cellKeydown,
-            "change": this.itemChange,
-            "selectionchange": function selectionchange(e) {
-              return _this.selectionChange(e, item, columnIndex, rowDataIndex);
-            },
-            "expandchange": this.expandChange
-          },
-          onCellkeydown: this.cellKeydown,
-          onChange: this.itemChange,
-          onSelectionchange: function selectionchange(e) {
-            return _this.selectionChange(e, item, columnIndex, rowDataIndex);
-          },
-          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 + 'px',
-            right: column.right + 'px',
-            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 noRecordsTemplate = templateRendering.call(this, this.$props.noRecords, getListeners.call(this));
-    var localizationService = provideLocalizationService(this);
-    var noRecordsMessage = localizationService.toLanguageString(noRecords, messages[noRecords]);
-    var noRecordsRender = getTemplate.call(this, {
-      h: h,
-      template: noRecordsTemplate
-    });
-    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 Row = this.$props.row || TreeListRow;
-      var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
-      var row =
-      // @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,
-          className: this.$props.rowClass ? this.$props.rowClass(item) : ''
-        },
-        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.emitRowEvent('rowclick', e, item);
-          },
-          "dblclick": function dblclick(e) {
-            return _this.emitRowEvent('rowdoubleclick', e, item);
-          },
-          "contextmenu": function contextmenu(e) {
-            return _this.emitRowEvent('rowcontextmenu', e, item);
-          },
-          "focus": function focus(e) {
-            return _this.emitRowEvent('rowfocus', e, item);
-          },
-          "blur": function blur(e) {
-            return _this.emitRowEvent('rowblur', e, item);
-          },
-          "mousedown": function mousedown(e) {
-            return _this.emitRowEvent('rowmousedown', e, item);
-          },
-          "mouseup": function mouseup(e) {
-            return _this.emitRowEvent('rowmouseup', e, item);
-          }
-        },
-        onDrag: this.onRowDrag,
-        onClick: function click(e) {
-          return _this.emitRowEvent('rowclick', e, item);
-        },
-        onDblclick: function dblclick(e) {
-          return _this.emitRowEvent('rowdoubleclick', e, item);
-        },
-        onContextmenu: function contextmenu(e) {
-          return _this.emitRowEvent('rowcontextmenu', e, item);
-        },
-        onFocus: function focus(e) {
-          return _this.emitRowEvent('rowfocus', e, item);
-        },
-        onBlur: function blur(e) {
-          return _this.emitRowEvent('rowblur', e, item);
-        },
-        onMousedown: function mousedown(e) {
-          return _this.emitRowEvent('rowmousedown', e, item);
-        },
-        onMouseup: function mouseup(e) {
-          return _this.emitRowEvent('rowmouseup', 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,
-        className: this.$props.rowClass ? this.$props.rowClass(item) : ''
-      }, this.v3 ? function () {
-        return [cells];
-      } : [cells]);
-      return reordableRows ?
-      // @ts-ignore function children
-      h(TreeListDraggableRow, {
-        key: rowId,
-        level: item.level,
-        attrs: this.v3 ? undefined : {
-          level: item.level,
-          levels: levels,
-          dataItem: item.dataItem
-        },
-        levels: levels,
-        dataItem: item.dataItem,
-        onDrag: this.onRowDrag,
-        on: this.v3 ? undefined : {
-          "drag": this.onRowDrag,
-          "drop": this.onRowDrop
-        },
-        onDrop: this.onRowDrop
-      }, this.v3 ? function () {
-        return [row];
-      } : [row]) : row;
-    }, this) || h("tr", {
-      "class": "k-table-row k-grid-norecords"
-    }, [h("td", {
-      "class": 'k-table-td',
-      colSpan: leafColumns.length,
-      attrs: this.v3 ? undefined : {
-        colSpan: leafColumns.length
-      }
-    }, [this.$props.noRecords ? noRecordsRender : noRecordsMessage])]);
-    var sorted = function sorted(field) {
-      return _this.$props.sort && _this.$props.sort.some(function (descriptor) {
-        return descriptor.field === field;
-      });
-    };
-    var colGroups = h("colgroup", {
-      ref: setRef(this, 'colGroup')
-    }, [leafColumns.map(function (column) {
-      return h("col", {
-        "class": sorted(column.field) ? 'k-sorted' : undefined,
-        width: column.width !== undefined ? column.width.toString().indexOf('%') !== -1 ? column.width : Math.floor(parseFloat(column.width.toString())) + 'px' : undefined,
-        attrs: this.v3 ? undefined : {
-          width: column.width !== undefined ? column.width.toString().indexOf('%') !== -1 ? column.width : Math.floor(parseFloat(column.width.toString())) + 'px' : undefined
-        }
-      });
-    }, this)]);
-    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 toolbarTemplate = templateRendering.call(this, this.$props.toolbar, getListeners.call(this));
-    var toolbar = getTemplate.call(this, {
-      h: h,
-      template: toolbarTemplate
-    });
-    var pagerTemplate = templateRendering.call(this, this.$props.pager, getListeners.call(this));
-    // @ts-ignore
-    var defaultPagerRendering = this.$props.pageable && h(Pager, {
-      "class": 'k-grid-pager',
-      size: this.$props.size,
-      attrs: this.v3 ? undefined : {
-        size: this.$props.size,
-        total: total,
-        skip: this.$props.skip || 0,
-        pageSize: this.$props.take || 10,
-        messagesMap: pagerMessagesMap,
-        settings: normalize(this.$props.pageable || {})
-      },
-      onPagesizechange: this.pageChangeHandler,
-      on: this.v3 ? undefined : {
-        "pagesizechange": this.pageChangeHandler,
-        "pagechange": this.pageChangeHandler
-      },
-      onPagechange: this.pageChangeHandler,
-      total: total,
-      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
-      }
-    });
-    var renderColumnClues = this.dragLogic.reorderable && canUseDOM && document && document.body;
-    var renderRowClues = this.reordableRows && this.rowClue && this.rowClue.visible && canUseDOM && document && document.body;
-    var clues = [renderColumnClues && h(DropClue, {
-      ref: setRef(this, 'dropElementClue')
-    }), renderColumnClues && h(DragClue, {
-      ref: setRef(this, 'dragElementClue')
-    }), renderRowClues && h(RowDragClue, {
-      visible: this.rowClue.visible,
-      attrs: this.v3 ? undefined : {
-        visible: this.rowClue.visible,
-        top: this.rowClue.top,
-        left: this.rowClue.left,
-        text: this.rowClue.text,
-        allowDrop: this.rowClue.allowDrop
-      },
-      top: this.rowClue.top,
-      left: this.rowClue.left,
-      text: this.rowClue.text,
-      allowDrop: this.rowClue.allowDrop
-    })];
-    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": _this2.wrapperClass,
-          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',
-          ref: _this2.v3 ? function (el) {
-            _this.treeListNavRef = el;
-          } : 'treeListNav'
-        }, _this2.v3 ? function () {
-          return [_this2.$props.toolbar && h("div", {
-            "class": _this2.toolbarClass
-          }, [toolbar]),
-          //     // @ts-ignore
-          //   <TableSelection
-          //     selectable={this.$props.selectable}
-          //     onRelease={this.selectionRelease}
-          //   >
-          h("table", {
-            "class": _this2.gridTableClass
-            //  {...tableProps} 
-            ,
-            style: __assign(__assign({}, tableProps.style || {}), {
-              userSelect: tableUserSelect
-            }),
-            role: 'presentation',
-            attrs: _this2.v3 ? undefined : {
-              role: 'presentation'
-            }
-          }, [colGroups, header, h("tbody", {
-            "class": 'k-table-tbody',
-            "data-keyboardnavbody": true,
-            attrs: _this2.v3 ? undefined : {
-              "data-keyboardnavbody": true,
-              role: 'presentation'
-            },
-            role: 'presentation'
-          }, [body])])
-          //     </TableSelection>
-          , pager, clues];
-        } : [_this2.$props.toolbar && h("div", {
-          "class": _this2.toolbarClass
-        }, [toolbar]), h("table", {
-          "class": _this2.gridTableClass,
-          style: __assign(__assign({}, tableProps.style || {}), {
-            userSelect: tableUserSelect
-          }),
-          role: 'presentation',
-          attrs: _this2.v3 ? undefined : {
-            role: 'presentation'
-          }
-        }, [colGroups, header, h("tbody", {
-          "class": 'k-table-tbody',
-          "data-keyboardnavbody": true,
-          attrs: _this2.v3 ? undefined : {
-            "data-keyboardnavbody": true,
-            role: 'presentation'
-          },
-          role: 'presentation'
-        }, [body])]), pager, clues])];
-      } : [h(TreeListNav, {
-        style: _this2.$props.wrapperStyle,
-        "class": _this2.wrapperClass,
-        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',
-        ref: _this2.v3 ? function (el) {
-          _this.treeListNavRef = el;
-        } : 'treeListNav'
-      }, _this2.v3 ? function () {
-        return [_this2.$props.toolbar && h("div", {
-          "class": _this2.toolbarClass
-        }, [toolbar]), h("table", {
-          "class": _this2.gridTableClass,
-          style: __assign(__assign({}, tableProps.style || {}), {
-            userSelect: tableUserSelect
-          }),
-          role: 'presentation',
-          attrs: _this2.v3 ? undefined : {
-            role: 'presentation'
-          }
-        }, [colGroups, header, h("tbody", {
-          "class": 'k-table-tbody',
-          "data-keyboardnavbody": true,
-          attrs: _this2.v3 ? undefined : {
-            "data-keyboardnavbody": true,
-            role: 'presentation'
-          },
-          role: 'presentation'
-        }, [body])]), pager, clues];
-      } : [_this2.$props.toolbar && h("div", {
-        "class": _this2.toolbarClass
-      }, [toolbar]), h("table", {
-        "class": _this2.gridTableClass,
-        style: __assign(__assign({}, tableProps.style || {}), {
-          userSelect: tableUserSelect
-        }),
-        role: 'presentation',
-        attrs: _this2.v3 ? undefined : {
-          role: 'presentation'
-        }
-      }, [colGroups, header, h("tbody", {
-        "class": 'k-table-tbody',
-        "data-keyboardnavbody": true,
-        attrs: _this2.v3 ? undefined : {
-          "data-keyboardnavbody": true,
-          role: 'presentation'
-        },
-        role: 'presentation'
-      }, [body])]), pager, clues])])
-    );
-  },
-  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 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;
-      };
-      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) {
-      this.$emit('keydown', event);
-    },
-    onFocus: function onFocus(_event) {
-      // tableKeyboardNavigation.onFocus(event, {
-      //     contextStateRef: this.contextStateRef
-      // });
-    },
-    onRowDrag: function onRowDrag(event) {
-      this.rowClue = event.clueProps;
-      this.$emit('rowdrag', __assign(__assign({}, event), {
-        target: this
-      }));
-    },
-    onRowDrop: function onRowDrop(event) {
-      this.rowClue = event.clueProps;
-      if (event.clueProps.allowDrop) {
-        this.$emit('rowdrop', __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;
-      });
-      var event = {
-        component: this,
-        columns: this.getColumns(),
-        prev: prev,
-        next: next,
-        event: nativeEvent
-      };
-      this.$emit('columnreorder', event);
-    },
-    onResize: function onResize(index, newWidth, oldWidth, nativeEvent, end) {
-      var sumWidth = this.extendedColumn.filter(function (c) {
-        return c.children.length === 0;
-      }).reduce(function (acc, column) {
-        return acc += parseFloat(String(column.width));
-      }, 0);
-      if (this.extendedColumn && this.columns) {
-        var colWidth = this.columns[index].width;
-        var hasPx = colWidth && colWidth.toString().indexOf('px') > 0;
-        this.extendedColumn[index].width = hasPx ? newWidth + 'px' : newWidth;
-      }
-      var event = {
-        columns: this.getColumns(),
-        totalWidth: sumWidth,
-        index: index,
-        event: nativeEvent,
-        newWidth: newWidth,
-        oldWidth: oldWidth,
-        end: end,
-        component: this
-      };
-      if (end) {
-        this.prevColumns = undefined;
-      }
-      this.$emit('columnresize', event);
-    },
-    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 && canUseDOM) {
-        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);
-    },
-    cellClick: function cellClick(event) {
-      this.$emit('cellclick', event);
-    },
-    cellKeydown: function cellKeydown(event) {
-      this.$emit('cellkeydown', event);
-    },
-    itemChange: function itemChange(event) {
-      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
-          });
-          this.$emit('expandchange', expandEvent);
-        }
-        return;
-      }
-      var itemChangeEvent = __assign(__assign({}, this.getArguments(event.event)), {
-        dataItem: event.dataItem,
-        level: event.level,
-        field: event.field,
-        value: event.value
-      });
-      if (event.dataItem) {
-        this.$emit('itemchange', itemChangeEvent);
-      }
-    },
-    selectionChange: function selectionChange(options) {
-      var event = options.event,
-        item = options.item,
-        columnIndex = options.columnIndex; // dataIndex, 
-      if (!item) {
-        return;
-      }
-      var _a = getSelectionOptions(this.$props.selectable),
-        mode = _a.mode,
-        cell = _a.cell;
-      var selectionEvent = __assign(__assign({}, this.getArguments(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) {
-      var selectionEvent = {
-        field: event.field,
-        event: event.event,
-        component: this,
-        dataItems: this.getLeafDataItems()
-      };
-      this.$emit('headerselectionchange', selectionEvent);
-    },
-    selectionRelease: function selectionRelease(event) {
-      if (this.$props.onSelectionchange) {
-        var selectionEvent = __assign({
-          event: undefined,
-          component: 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(filter, event) {
-      var filters = filter ? filter.filters : [];
-      var currentEvent = __assign(__assign({}, event), {
-        filter: filters,
-        component: this
-      });
-      this.$emit('columnmenufilterchange', 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);
-      }
-    },
-    emitRowEvent: function emitRowEvent(name, e, item) {
-      if (e.target.nodeName === 'TD') {
-        var rowEvent = __assign({
-          dataItem: item.dataItem,
-          level: item.level
-        }, this.getArguments(e));
-        this.$emit(name, rowEvent);
-      }
-    },
-    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);
-    },
-    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(__assign({}, this.getDataState()), data), moreData)
-        }));
-      }
-    },
-    getDataState: function getDataState() {
-      return {
-        filter: this.$props.filter,
-        sort: this.$props.sort
-      };
-    },
-    getArguments: function getArguments(event) {
-      return {
-        event: event,
-        component: 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 };