@progress/kendo-vue-treelist 3.6.4 → 3.7.0-dev.202210250731

package/dist/es/cells/TreeListCell.js

@@ -2,19 +2,15 @@ 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);
-}; // @ts-ignore
-
-
+};
+// @ts-ignore
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
@@ -26,7 +22,6 @@ import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-v
 /**
  * @hidden
  */
-
 var TreeListCellVue2 = {
   name: 'TreeListCell',
   // @ts-ignore
@@ -61,21 +56,20 @@ var TreeListCellVue2 = {
   methods: {
     onKeyDownHandler: function onKeyDownHandler(event) {
       var _a = this.$props,
-          expandable = _a.expandable,
-          dataItem = _a.dataItem,
-          level = _a.level;
-
+        expandable = _a.expandable,
+        dataItem = _a.dataItem,
+        level = _a.level;
       if (event.defaultPrevented) {
         return;
       }
-
       if (event.keyCode === Keys.enter && expandable) {
         event.preventDefault();
         this.$emit('expandchange', event, dataItem, level);
       }
     },
-    triggerClick: function triggerClick() {
+    triggerClick: function triggerClick(e) {
       this.$emit('cellclick', {
+        event: e,
         dataItem: this.$props.dataItem,
         field: this.$props.field
       });
@@ -104,18 +98,17 @@ var TreeListCellVue2 = {
     },
     triggerExpandChange: function triggerExpandChange(event) {
       var _a = this.$props,
-          dataItem = _a.dataItem,
-          level = _a.level;
+        dataItem = _a.dataItem,
+        level = _a.level;
       this.$emit('expandchange', event, dataItem, level);
     }
   },
   computed: {
     wrapperClass: function wrapperClass() {
       var _a;
-
       var _b = this.$props,
-          expandable = _b.expandable,
-          isSelected = _b.isSelected;
+        expandable = _b.expandable,
+        isSelected = _b.isSelected;
       return _a = {}, _a['k-text-nowrap'] = expandable, _a['k-selected'] = isSelected, _a;
     }
   },
@@ -132,36 +125,32 @@ var TreeListCellVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var _a = this.$props,
-        hasChildren = _a.hasChildren,
-        _b = _a.level,
-        level = _b === void 0 ? [0] : _b,
-        expanded = _a.expanded,
-        dataItem = _a.dataItem,
-        format = _a.format,
-        id = _a.id,
-        colSpan = _a.colSpan,
-        ariaColumnIndex = _a.ariaColumnIndex,
-        isSelected = _a.isSelected,
-        expandable = _a.expandable,
-        field = _a.field;
-    var data = getNestedValue(field, dataItem);
+      hasChildren = _a.hasChildren,
+      _b = _a.level,
+      level = _b === void 0 ? [0] : _b,
+      expanded = _a.expanded,
+      dataItem = _a.dataItem,
+      format = _a.format,
+      id = _a.id,
+      colSpan = _a.colSpan,
+      ariaColumnIndex = _a.ariaColumnIndex,
+      isSelected = _a.isSelected,
+      expandable = _a.expandable,
+      field = _a.field;
+    var data = field ? getNestedValue(field, dataItem) : undefined;
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
     var intl = provideIntlService(this);
     var dataAsString = '';
-
     if (data !== undefined && data !== null) {
       dataAsString = format ? intl.format(format, data) : data.toString();
     }
-
     var icons = [];
-
     if (expandable) {
       icons.push.apply(icons, level.slice(1).map(function (_x) {
         return h("span", {
           "class": "k-icon k-i-none"
         });
       }, this));
-
       if (hasChildren) {
         icons.push(h("span", {
           "class": "k-icon k-i-".concat(expanded ? 'caret-alt-down' : 'caret-alt-right'),
@@ -182,7 +171,6 @@ var TreeListCellVue2 = {
         }));
       }
     }
-
     var defaultRendering = h("td", {
       "class": this.wrapperClass,
       colSpan: colSpan,
@@ -201,10 +189,12 @@ var TreeListCellVue2 = {
       "aria-expanded": hasChildren ? expanded : undefined,
       "aria-selected": isSelected,
       role: 'gridcell',
-      onKeydown: this.onKeyDownHandler,
+      onClick: this.triggerClick,
       on: this.v3 ? undefined : {
+        "click": this.triggerClick,
         "keydown": this.onKeyDownHandler
       },
+      onKeydown: this.onKeyDownHandler,
       "data-grid-col-index": this.$props.colIndex,
       tabindex: navAttrs.tabIndex,
       "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
@@ -232,6 +222,5 @@ var TreeListCellVue2 = {
 /**
  * @hidden
  */
-
 var TreeListCell = TreeListCellVue2;
 export { TreeListCell, TreeListCellVue2 };

package/dist/es/cells/TreeListSelectionCell.js

@@ -10,7 +10,6 @@ import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-v
 /**
  * @hidden
  */
-
 var TreeListSelectionCellVue2 = {
   name: 'TreeListSelectionCell',
   // @ts-ignore
@@ -44,8 +43,9 @@ var TreeListSelectionCellVue2 = {
     }
   },
   methods: {
-    triggerClick: function triggerClick() {
+    triggerClick: function triggerClick(e) {
       this.$emit('cellclick', {
+        event: e,
         dataItem: this.$props.dataItem,
         field: this.$props.field
       });
@@ -91,11 +91,11 @@ var TreeListSelectionCellVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var _a = this.$props,
-        dataItem = _a.dataItem,
-        colSpan = _a.colSpan,
-        ariaColumnIndex = _a.ariaColumnIndex,
-        isSelected = _a.isSelected,
-        field = _a.field;
+      dataItem = _a.dataItem,
+      colSpan = _a.colSpan,
+      ariaColumnIndex = _a.ariaColumnIndex,
+      isSelected = _a.isSelected,
+      field = _a.field;
     var selectedValue = getNestedValue(field, dataItem);
     var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
     var intl = provideIntlService(this);
@@ -161,6 +161,5 @@ var TreeListSelectionCellVue2 = {
 /**
  * @hidden
  */
-
 var TreeListSelectionCell = TreeListSelectionCellVue2;
 export { TreeListSelectionCell, TreeListSelectionCellVue2 };

package/dist/es/interfaces/TreeListCellProps.d.ts

@@ -28,4 +28,8 @@ export interface TreeListCellProps extends CellProps {
      * A function for overriding the default rendering of the cell.
      */
     render?: any;
+    /**
+     * If set to true will focus the first input inside the cell.
+     */
+    focusInputOnMount?: boolean;
 }

package/dist/es/interfaces/TreeListProps.d.ts

@@ -1,7 +1,7 @@
 import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
-import { TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListItemChangeEvent, TreeListDataStateChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListKeyDownEvent } from './events';
+import { TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListExpandChangeEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent, TreeListItemChangeEvent, TreeListDataStateChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListPageChangeEvent, TreeListRowDragEvent, TreeListColumnMenuFilterChangeEvent, TreeListRowDoubleClickEvent, TreeListRowContextMenuEvent, TreeListKeyDownEvent, TreeListRowEvent } from './events';
 import { ScrollMode } from '../ScrollMode';
-import { SortSettings as TreeListSortSettings } from '@progress/kendo-vue-data-tools';
+import { SortSettings as TreeListSortSettings, FilterOperators } from '@progress/kendo-vue-data-tools';
 import { TreeListColumnProps } from './TreeListColumnProps';
 import { TreeListSelectableSettings } from './TreeListSelectableSettings';
 /**
@@ -68,6 +68,10 @@ export interface TreeListProps {
      * Enables the filtering of the columns with their `field` option set
      */
     filterable?: boolean;
+    /**
+     * The filter operators for the filters.
+     */
+    filterOperators?: FilterOperators;
     /**
      * Fires when the TreeList filter is modified through the UI
      * ([more information and examples]({% slug filtering_treelist %})).
@@ -133,24 +137,40 @@ export interface TreeListProps {
     /**
      * Fires when the user clicks a row.
      */
+    onRowclick?: (event: TreeListRowClickEvent) => void;
+    /**
+     * Fires when the user double clicks a row.
+     */
     /**
      * @hidden
      */
-    onRowClick?: (event: TreeListRowClickEvent) => void;
+    onRowdoubleclick?: (event: TreeListRowDoubleClickEvent) => void;
     /**
-     * Fires when the user double clicks a row.
+     * Fires when the user trigger the context menu of row.
+     */
+    onRowcontextmenu?: (event: TreeListRowContextMenuEvent) => void;
+    /**
+     * Fires when the mouse down is triggered on a row.
      */
     /**
      * @hidden
      */
-    onRowDoubleClick?: (event: TreeListRowDoubleClickEvent) => void;
+    onRowmousedown?: (event: TreeListRowEvent) => void;
     /**
-     * Fires when the user trigger the context menu of row.
+     * Fires when the mouse up is triggered on a row.
      */
     /**
      * @hidden
      */
-    onRowContextMenu?: (event: TreeListRowContextMenuEvent) => void;
+    onRowmouseup?: (event: TreeListRowEvent) => void;
+    /**
+     * Fires when focus event is triggered on a row.
+     */
+    onRowfocus?: (event: TreeListRowEvent) => void;
+    /**
+     * Fires when blur event is triggered on a row.
+     */
+    onRowblur?: (event: TreeListRowEvent) => void;
     /**
      * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item
      * ([more information and examples]({% slug editing_inline_treelist %})).
@@ -252,6 +272,10 @@ export interface TreeListProps {
      * @hidden
      */
     row?: any;
+    /**
+     * If set to `true`, the rows of the TreeList can be reordered.
+     */
+    reordableRows?: boolean;
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the TreeList.
      * By default, navigation is disabled and the TreeList content is accessible in the normal tab sequence.

package/dist/es/interfaces/events.d.ts

@@ -5,7 +5,7 @@ import { TableDragSelectionReleaseEvent, TableKeyDownEvent, TableSelectionChange
  * Represents the base event object of the TreeList.
  */
 export interface TreeListEvent {
-    target?: any;
+    component?: any;
     event: any;
 }
 /**
@@ -118,6 +118,19 @@ export interface TreeListHeaderSelectionChangeEvent extends TreeListEvent {
      */
     dataItems: any[];
 }
+/**
+ * Represents the object of the `onRowEvent` TreeList event.
+ */
+export interface TreeListRowEvent extends TreeListEvent {
+    /**
+     * The data item which corresponds to the row.
+     */
+    dataItem: any;
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+}
 /**
  * Represents the object of the `onRowClick` TreeList event.
  */
@@ -182,7 +195,7 @@ interface ColumnDragEvent {
     /**
      * An event target.
      */
-    target: any;
+    component: any;
     /**
      * A native DOM event.
      */
@@ -246,7 +259,7 @@ export interface TreeListRowDragEvent {
     /**
      * An event target.
      */
-    target: any;
+    component: any;
     /**
      * The level of the dragged row.
      * The level represents an array of indexes of each parent and current item in the data tree.

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-treelist',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1665151710,
+    publishDate: 1666682894,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/rows/{DragClue.js → RowDragClue.js}

@@ -6,8 +6,8 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 /**
  * @hidden
  */
-
 var RowDragClueVue2 = {
+  name: 'KendoRowClue',
   props: {
     visible: Boolean,
     top: Number,
@@ -18,13 +18,24 @@ var RowDragClueVue2 = {
   computed: {
     statusClass: function statusClass() {
       var _a;
-
       return _a = {
         'k-icon': true,
         'k-drag-status': true
       }, _a[this.$props.allowDrop ? 'k-i-plus' : 'k-i-cancel'] = true, _a['k-icon-with-modifier'] = true, _a;
     }
   },
+  mounted: function mounted() {
+    var body = document.body;
+    this.windowElement = this.$refs.wrapper;
+    body.append(this.windowElement);
+  },
+  beforeDestroy: !!isV3 ? undefined : function () {
+    this.windowElement.remove();
+  },
+  // @ts-ignore
+  beforeUnmount: function beforeUnmount() {
+    this.windowElement.remove();
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -37,6 +48,7 @@ var RowDragClueVue2 = {
     var h = gh || createElement;
     return this.visible && h("div", {
       "class": "k-header k-drag-clue",
+      ref: 'wrapper',
       style: {
         display: 'block',
         position: 'absolute',
@@ -55,6 +67,5 @@ var RowDragClueVue2 = {
 /**
  * @hidden
  */
-
 var RowDragClue = RowDragClueVue2;
 export { RowDragClue, RowDragClueVue2 };

package/dist/es/rows/TreeListDraggableRow.d.ts

@@ -1 +1,38 @@
-
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { TreeListRowProps } from '../interfaces/TreeListRowProps';
+/**
+ * @hidden
+ */
+export interface TreeListDraggableRowMethods extends Vue2type {
+    onPress: (event: any) => void;
+    onDrag: (event: any) => void;
+    onRelease: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface TreeListDraggableRowState {
+    element: any | null;
+    draggable: any;
+    allowDrop: boolean;
+    dragged: number[] | null;
+    draggedOver: number[] | null;
+}
+/**
+ * @hidden
+ */
+export interface TreeListDraggableRowAll extends TreeListDraggableRowMethods, TreeListDraggableRowState {
+}
+/**
+ * @hidden
+ */
+declare let TreeListDraggableRowVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<TreeListDraggableRowAll>, {}, RecordPropsDefinition<TreeListRowProps>>;
+/**
+ * @hidden
+ */
+declare const TreeListDraggableRow: DefineComponent<TreeListRowProps, any, {}, {}, TreeListDraggableRowMethods, {}, {}, {}, string, TreeListRowProps, TreeListRowProps, {}>;
+export { TreeListDraggableRow, TreeListDraggableRowVue2 };