@progress/kendo-vue-treeview 3.2.2 → 3.2.3

package/dist/es/TreeViewDragAnalyzer.js

@@ -4,91 +4,6 @@ var DROPZONE_BOUNDARY_DELTA = 6;
  * A class which provides an API for analyzing the `drag` events
  * of the TreeView.
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
- *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             this.setState({ tree: updatedTree });
- *         }
- *     }
- *     getClueClassName(event) {
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             switch (eventAnalyzer.getDropOperation()) {
- *                 case 'child':
- *                     return 'k-i-plus';
- *                 case 'before':
- *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
- *                         'k-i-insert-up' : 'k-i-insert-middle';
- *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
- *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
- *
- *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
- *                 default:
- *                     break;
- *             }
- *         }
- *
- *         return 'k-i-cancel';
- *     }
- * }
- *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
- *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
- *
- *     return result;
- * }
- *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
  */
 var TreeViewDragAnalyzer = /** @class */ (function () {
     /**
@@ -98,7 +13,7 @@ var TreeViewDragAnalyzer = /** @class */ (function () {
         this.event = event;
         this.initialized = false;
         this.itemId = event.itemHierarchicalIndex;
-        this.treeViewGuid = event.target.guid;
+        this.treeViewGuid = event.target.guid();
     }
     /**
      * The method which initializes the analyzer.

package/dist/es/TreeViewItem.js

@@ -1,8 +1,24 @@
-// @ts-ignore
+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
+
+
 import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
-import { classNames, guid, Draggable, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { classNames, guid, Draggable, kendoThemeMaps, getTemplate } from '@progress/kendo-vue-common';
 import { createId } from './utils/itemIdUtils';
 import { isItemExpandedAndWithChildren, hasChildren } from './utils/itemUtils';
 import { Reveal } from '@progress/kendo-vue-animation';
@@ -92,6 +108,8 @@ var TreeViewItemVue2 = {
     if (this.checkboxElement) {
       this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
     }
+
+    this.assignDraggableMeta(this.$refs.treemid);
   },
   updated: function updated() {
     var focusedItemId = this.$props.focusedItemId;
@@ -107,6 +125,8 @@ var TreeViewItemVue2 = {
         this.checkboxElement.indeterminate = indeterminate;
       }
     }
+
+    this.assignDraggableMeta(this.$refs.treemid);
   },
   // @ts-ignore
   setup: !gh ? undefined : function () {
@@ -119,6 +139,8 @@ var TreeViewItemVue2 = {
   render: function render(createElement) {
     var _this2 = this;
 
+    var _this = this;
+
     var h = gh || createElement;
 
     var subitems = function subitems() {
@@ -236,6 +258,16 @@ var TreeViewItemVue2 = {
       }
     };
 
+    var itemRender = getTemplate.call(this, {
+      h: h,
+      template: this.$props.itemUI,
+      defaultRendering: this.fieldsSvc.text(this.item),
+      additionalProps: {
+        item: this.item,
+        itemHierarchicalIndex: this.itemId
+      }
+    });
+
     var itemInPart = function itemInPart() {
       return h("span", {
         "class": this.getContentClassName(),
@@ -248,14 +280,7 @@ var TreeViewItemVue2 = {
         }
       }, [h("span", {
         "class": "k-treeview-leaf-text"
-      }, [this.$props.itemUI ? h(this.$props.itemUI, {
-        item: this.item,
-        attrs: this.v3 ? undefined : {
-          item: this.item,
-          itemHierarchicalIndex: this.itemId
-        },
-        itemHierarchicalIndex: this.itemId
-      }) : this.fieldsSvc.text(this.item)])]);
+      }, [itemRender])]);
     };
 
     return h("li", {
@@ -276,17 +301,29 @@ var TreeViewItemVue2 = {
       "aria-disabled": this.fieldsSvc.disabled(this.item) ? true : undefined
     }, [h("div", {
       "class": "k-treeview-mid",
-      ref: this.assignDraggableMeta
+      ref: 'treemid'
     }, [renderExpandIcon.call(this), renderCheckbox.call(this), this.$props.draggable ? // @ts-ignore  function children
     h(Draggable, {
-      onPress: this.handlePress,
+      onPress: function onPress(e) {
+        return _this.handlePress(e);
+      },
       on: this.v3 ? undefined : {
-        "press": this.handlePress,
-        "drag": this.handleDrag,
-        "release": this.handleRelease
+        "press": function onPress(e) {
+          return _this.handlePress(e);
+        },
+        "drag": function drag(e) {
+          return _this.handleDrag(e);
+        },
+        "release": function release(e) {
+          return _this.handleRelease(e);
+        }
+      },
+      onDrag: function drag(e) {
+        return _this.handleDrag(e);
       },
-      onDrag: this.handleDrag,
-      onRelease: this.handleRelease
+      onRelease: function release(e) {
+        return _this.handleRelease(e);
+      }
     }, this.v3 ? function () {
       return [itemInPart.call(_this2)];
     } : [itemInPart.call(_this2)]) : itemInPart.call(this)]), this.$props.animate ? // @ts-ignore  function children
@@ -317,13 +354,13 @@ var TreeViewItemVue2 = {
       this.$emit('itemclick', e, subItem || this.item, subItemId || this.itemId);
     },
     handlePress: function handlePress(e, subItem, subItemId) {
-      this.$emit('press', e.event, subItem || this.item, subItemId || this.itemId);
+      this.$emit('press', e, subItem || __assign({}, this.item), subItemId || this.itemId);
     },
     handleDrag: function handleDrag(e, subItem, subItemId) {
-      this.$emit('drag', e.event, subItem || this.item, subItemId || this.itemId);
+      this.$emit('drag', e, subItem || this.item, subItemId || this.itemId);
     },
     handleRelease: function handleRelease(e, subItem, subItemId) {
-      this.$emit('release', e.event, subItem || this.item, subItemId || this.itemId);
+      this.$emit('release', e, subItem || this.item, subItemId || this.itemId);
     },
     handleFocusDomElNeeded: function handleFocusDomElNeeded(e) {
       this.$emit('focusdomelneeded', e);
@@ -348,7 +385,7 @@ var TreeViewItemVue2 = {
       });
     },
     assignDraggableMeta: function assignDraggableMeta(element) {
-      if (element) {
+      if (element && !element[DOM_KENDO_ITEM_ID_FIELD]) {
         element[DOM_KENDO_ITEM_ID_FIELD] = this.$props.itemId;
         element[DOM_KENDO_TREEVIEW_GUID_FIELD] = this.$props.treeGuid;
       }

package/dist/es/TreeViewProps.d.ts

@@ -91,6 +91,10 @@ export interface TreeViewProps {
      * Fires when a checkbox is clicked or when `Space` is pressed on a focused item ([see example]({% slug check_items_directly_treeview %})).
      */
     onCheckChange?: (event: events.TreeViewCheckChangeEvent) => void;
+    /**
+     * Controls the unique id of the TreeView component.
+     */
+    id?: string;
     /**
      * Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched ([see example]({% slug dragdrop_treeview %})).
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-treeview',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1650294741,
+    publishDate: 1650381025,
     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/npm/TreeView.d.ts

@@ -12,7 +12,7 @@ import FieldsService from './utils/FieldsService';
 export interface TreeViewState {
     blurRequest: any;
     fieldsSvc: FieldsService;
-    treeGuid: string;
+    innerId: string;
     allowExplicitFocus: boolean;
 }
 /**
@@ -20,6 +20,7 @@ export interface TreeViewState {
  */
 export interface TreeViewComputed {
     [key: string]: any;
+    treeGuid: string;
 }
 /**
  * @hidden

package/dist/npm/TreeView.js

@@ -36,6 +36,8 @@ var TreeViewVue2 = {
       type: Boolean,
       default: true
     },
+    id: String,
+    draggable: Boolean,
     tabIndex: Number,
     focusIdField: String,
     getFocusHierarchicalIndex: Function,
@@ -92,10 +94,15 @@ var TreeViewVue2 = {
       tabbableItemId: itemIdUtils_1.ZERO_LEVEL_ZERO_NODE_ID
     };
   },
+  computed: {
+    treeGuid: function treeGuid() {
+      return this.id || this.innerId;
+    }
+  },
   created: function created() {
     kendo_vue_common_1.validatePackage(package_metadata_1.packageMetadata);
     this.allowExplicitFocus = false;
-    this.treeGuid = kendo_vue_common_1.guid();
+    this.innerId = kendo_vue_common_1.guid();
   },
   updated: function updated() {
     this.allowExplicitFocus = false;
@@ -136,7 +143,10 @@ var TreeViewVue2 = {
       "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
       "aria-label": this.$props['aria-label'],
       "aria-labelledby": this.$props['aria-labelledby'],
-      tabIndex: this.$props.tabIndex
+      tabIndex: this.$props.tabIndex,
+      style: {
+        userSelect: this.draggable ? 'none' : undefined
+      }
     }, [h("ul", {
       "class": "k-treeview-lines k-treeview-group",
       role: "group",
@@ -144,6 +154,7 @@ var TreeViewVue2 = {
         role: "group"
       }
     }, [this.dataItems.map(function (item, index) {
+      var itemTemplate = kendo_vue_common_1.templateRendering.call(this, this.item, kendo_vue_common_1.getListeners.call(this));
       return h(TreeViewItem_1.TreeViewItem, {
         item: item,
         attrs: this.v3 ? undefined : {
@@ -154,7 +165,7 @@ var TreeViewVue2 = {
           focusedItemId: this.focusedItemId,
           tabbableItemId: this.tabbableItemId,
           fieldsService: this.fieldsSvc,
-          itemUI: this.$props.item,
+          itemUI: itemTemplate,
           checkboxes: this.$props.checkboxes,
           ariaMultiSelectable: this.ariaMultiSelectable,
           draggable: this.$props.draggable,
@@ -167,7 +178,7 @@ var TreeViewVue2 = {
         focusedItemId: this.focusedItemId,
         tabbableItemId: this.tabbableItemId,
         fieldsService: this.fieldsSvc,
-        itemUI: this.$props.item,
+        itemUI: itemTemplate,
         checkboxes: this.$props.checkboxes,
         ariaMultiSelectable: this.ariaMultiSelectable,
         onItemclick: this.onItemClick,
@@ -208,49 +219,41 @@ var TreeViewVue2 = {
       this.dispatchExpandChange(event, item, itemId);
     },
     onPress: function onPress(_event, item, itemId) {
-      if (this.$props.onItemDragStart) {
-        this.$props.onItemDragStart.call(undefined, {
-          target: this,
-          item: item,
-          itemHierarchicalIndex: itemId
-        });
-      }
+      this.$emit('itemdragstart', {
+        target: this,
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
     },
     onDrag: function onDrag(event, item, itemId) {
       var pageX = event.pageX,
           pageY = event.pageY,
           clientX = event.clientX,
           clientY = event.clientY;
-
-      if (this.$props.onItemDragOver) {
-        this.$props.onItemDragOver.call(undefined, {
-          target: this,
-          item: item,
-          itemHierarchicalIndex: itemId,
-          pageX: pageX,
-          pageY: pageY,
-          clientX: clientX,
-          clientY: clientY
-        });
-      }
+      this.$emit('itemdragover', {
+        target: this,
+        item: item,
+        itemHierarchicalIndex: itemId,
+        pageX: pageX,
+        pageY: pageY,
+        clientX: clientX,
+        clientY: clientY
+      });
     },
     onRelease: function onRelease(event, item, itemId) {
       var pageX = event.pageX,
           pageY = event.pageY,
           clientX = event.clientX,
           clientY = event.clientY;
-
-      if (this.$props.onItemDragEnd) {
-        this.$props.onItemDragEnd.call(undefined, {
-          target: this,
-          item: item,
-          itemHierarchicalIndex: itemId,
-          pageX: pageX,
-          pageY: pageY,
-          clientX: clientX,
-          clientY: clientY
-        });
-      }
+      this.$emit('itemdragend', {
+        target: this,
+        item: item,
+        itemHierarchicalIndex: itemId,
+        pageX: pageX,
+        pageY: pageY,
+        clientX: clientX,
+        clientY: clientY
+      });
     },
     onItemClick: function onItemClick(event, item, itemId) {
       this.setFocus(itemId);

package/dist/npm/TreeViewDragAnalyzer.d.ts

@@ -3,91 +3,6 @@ import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events';
  * A class which provides an API for analyzing the `drag` events
  * of the TreeView.
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
- *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             this.setState({ tree: updatedTree });
- *         }
- *     }
- *     getClueClassName(event) {
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             switch (eventAnalyzer.getDropOperation()) {
- *                 case 'child':
- *                     return 'k-i-plus';
- *                 case 'before':
- *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
- *                         'k-i-insert-up' : 'k-i-insert-middle';
- *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
- *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
- *
- *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
- *                 default:
- *                     break;
- *             }
- *         }
- *
- *         return 'k-i-cancel';
- *     }
- * }
- *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
- *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
- *
- *     return result;
- * }
- *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
  */
 export default class TreeViewDragAnalyzer {
     private event;

package/dist/npm/TreeViewDragAnalyzer.js

@@ -6,91 +6,6 @@ var DROPZONE_BOUNDARY_DELTA = 6;
  * A class which provides an API for analyzing the `drag` events
  * of the TreeView.
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
- *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
- *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
- *
- *             this.setState({ tree: updatedTree });
- *         }
- *     }
- *     getClueClassName(event) {
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
- *
- *         if (eventAnalyzer.isDropAllowed) {
- *             switch (eventAnalyzer.getDropOperation()) {
- *                 case 'child':
- *                     return 'k-i-plus';
- *                 case 'before':
- *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
- *                         'k-i-insert-up' : 'k-i-insert-middle';
- *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
- *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
- *
- *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
- *                 default:
- *                     break;
- *             }
- *         }
- *
- *         return 'k-i-cancel';
- *     }
- * }
- *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
- *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
- *
- *     return result;
- * }
- *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
  */
 var TreeViewDragAnalyzer = /** @class */ (function () {
     /**
@@ -100,7 +15,7 @@ var TreeViewDragAnalyzer = /** @class */ (function () {
         this.event = event;
         this.initialized = false;
         this.itemId = event.itemHierarchicalIndex;
-        this.treeViewGuid = event.target.guid;
+        this.treeViewGuid = event.target.guid();
     }
     /**
      * The method which initializes the analyzer.