@progress/kendo-vue-treeview 3.2.2-dev.202204181420

package/dist/es/TreeViewDragClue.d.ts

@@ -0,0 +1,135 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * Represents the props of the KendoReact TreeViewDragClue component.
+ */
+export interface TreeViewDragClueProps {
+}
+/**
+ * Represents the KendoReact TreeViewDragClue component which renders a clue when an item is dragged.
+ *
+ * @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'));
+ * ```
+ */
+/**
+ * @hidden
+ */
+export interface TreeViewDragClueState {
+}
+/**
+ * @hidden
+ */
+export interface TreeViewDragClueComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewDragClueMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewDragClueData {
+    visible?: boolean;
+    top?: number;
+    left?: number;
+    text?: string;
+    operationClassName?: string;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewDragClueAll extends Vue, TreeViewDragClueMethods, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueState {
+}
+declare let TreeViewDragClueVue2: ComponentOptions<TreeViewDragClueAll, DefaultData<TreeViewDragClueData>, DefaultMethods<TreeViewDragClueAll>, TreeViewDragClueComputed, RecordPropsDefinition<TreeViewDragClueProps>>;
+declare const TreeViewDragClue: DefineComponent<TreeViewDragClueProps, any, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueMethods, {}, {}, {}, string, TreeViewDragClueProps, TreeViewDragClueProps, {}>;
+export { TreeViewDragClue, TreeViewDragClueVue2 };

package/dist/es/TreeViewDragClue.js

@@ -0,0 +1,78 @@
+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 } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+
+var TreeViewDragClueVue2 = {
+  name: 'KendoTreeViewDragClue',
+  props: {},
+  data: function data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      text: '',
+      operationClassName: 'k-i-cancel'
+    };
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultStyle = {
+      display: 'block',
+      position: 'absolute',
+      zIndex: 20000,
+      padding: '4px 6px'
+    };
+    var dynamicStyle = {
+      top: this.top + 'px',
+      left: this.left + 'px'
+    };
+    return this.visible && h("div", {
+      "class": "k-header k-drag-clue",
+      style: __assign(__assign({}, defaultStyle), dynamicStyle)
+    }, [h("span", {
+      "class": classNames('k-icon k-drag-status k-icon-with-modifier', this.operationClassName)
+    }, [h("span", {
+      "class": "k-icon k-icon-modifier"
+    })]), this.text]);
+  },
+  methods: {
+    show: function show(top, left, text, operationClassName) {
+      this.visible = true;
+      this.top = top;
+      this.left = left;
+      this.text = text;
+      this.operationClassName = operationClassName;
+    },
+    hide: function hide() {
+      this.visible = false;
+    }
+  }
+};
+var TreeViewDragClue = TreeViewDragClueVue2;
+export { TreeViewDragClue, TreeViewDragClueVue2 };

package/dist/es/TreeViewItem.d.ts

@@ -0,0 +1,69 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import FieldsService from './utils/FieldsService';
+/**
+ * @hidden
+ */
+export interface TreeViewItemProps {
+    item: any;
+    itemId: string;
+    treeGuid: string;
+    animate: boolean;
+    focusedItemId?: string;
+    tabbableItemId: string;
+    fieldsService: FieldsService;
+    itemUI?: any;
+    ariaMultiSelectable: boolean;
+    onItemClick?: any;
+    expandIcons?: boolean;
+    onExpandChange?: any;
+    onCheckChange?: any;
+    checkboxes?: boolean;
+    onFocusDomElNeeded?: any;
+    draggable?: boolean;
+    onPress?: any;
+    onDrag?: any;
+    onRelease?: any;
+    size?: null | 'small' | 'medium' | 'large' | string;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewItemState {
+    checkboxElement: any;
+    itemGuid: any;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewItemComputed {
+    [key: string]: any;
+    fieldsSvc: any;
+    currentTabIndex: number;
+    ariaExpanded?: boolean;
+    ariaChecked?: string | boolean;
+    ariaSelected?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewItemMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TreeViewItemData {
+}
+/**
+ * @hidden
+ */
+export interface TreeViewItemAll extends Vue, TreeViewItemMethods, TreeViewItemData, TreeViewItemComputed, TreeViewItemState {
+}
+declare let TreeViewItemVue2: ComponentOptions<TreeViewItemAll, DefaultData<TreeViewItemData>, DefaultMethods<TreeViewItemAll>, TreeViewItemComputed, RecordPropsDefinition<TreeViewItemProps>>;
+declare const TreeViewItem: DefineComponent<TreeViewItemProps, any, TreeViewItemData, TreeViewItemComputed, TreeViewItemMethods, {}, {}, {}, string, TreeViewItemProps, TreeViewItemProps, {}>;
+export { TreeViewItem, TreeViewItemVue2 };

package/dist/es/TreeViewItem.js

@@ -0,0 +1,359 @@
+// @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 { createId } from './utils/itemIdUtils';
+import { isItemExpandedAndWithChildren, hasChildren } from './utils/itemUtils';
+import { Reveal } from '@progress/kendo-vue-animation';
+import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
+var sizeMap = kendoThemeMaps.sizeMap; // tslint:enable:max-line-length
+
+var TreeViewItemVue2 = {
+  name: 'KendoTreeViewItem',
+  props: {
+    item: Object,
+    itemId: String,
+    treeGuid: String,
+    animate: Boolean,
+    focusedItemId: String,
+    tabbableItemId: String,
+    fieldsService: Object,
+    itemUI: Object,
+    ariaMultiSelectable: Boolean,
+    expandIcons: Boolean,
+    checkboxes: Boolean,
+    onFocusDomElNeeded: Object,
+    draggable: Boolean,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  computed: {
+    fieldsSvc: function fieldsSvc() {
+      return this.$props.fieldsService;
+    },
+    currentTabIndex: function currentTabIndex() {
+      return (this.$props.focusedItemId || this.$props.tabbableItemId) === this.itemId ? 0 : -1;
+    },
+    ariaExpanded: function ariaExpanded() {
+      return this.fieldsSvc.hasChildren(this.item) || hasChildren(this.item, this.fieldsSvc.getChildrenField()) ? Boolean(this.fieldsSvc.expanded(this.item)) : undefined;
+    },
+    ariaChecked: function ariaChecked() {
+      if (this.$props.checkboxes) {
+        if (this.fieldsSvc.checked(this.item)) {
+          return 'true';
+        } else {
+          return this.fieldsSvc.checkIndeterminate(this.item) ? 'mixed' : 'false';
+        }
+      } else {
+        return undefined;
+      }
+    },
+    ariaSelected: function ariaSelected() {
+      if (this.fieldsSvc.selected(this.item)) {
+        return true;
+      } else if (this.$props.ariaMultiSelectable) {
+        return this.fieldsSvc.disabled(this.item) ? undefined : false;
+      } else {
+        return undefined;
+      }
+    }
+  },
+  created: function created() {
+    this.itemGuid = guid();
+    this.prevFocusedItemId = this.focusedItemId;
+    this.prevFieldsService = this.fieldsService;
+    this.prevItem = this.item;
+  },
+  watch: {
+    focusedItemId: function focusedItemId(_, oldValue) {
+      this.prevFocusedItemId = oldValue;
+    },
+    fieldsService: function fieldsService(_, oldValue) {
+      this.prevFieldsService = oldValue;
+    },
+    item: function item(_, oldValue) {
+      this.prevItem = oldValue;
+    }
+  },
+  mounted: function mounted() {
+    var focusedItemId = this.$props.focusedItemId;
+    var currentItemId = this.itemId;
+
+    if (focusedItemId && focusedItemId === currentItemId) {
+      this.$emit('focusdomelneeded', this.$el);
+    }
+
+    if (this.checkboxElement) {
+      this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
+    }
+  },
+  updated: function updated() {
+    var focusedItemId = this.$props.focusedItemId;
+
+    if (focusedItemId && focusedItemId !== this.prevFocusedItemId && focusedItemId === this.itemId) {
+      this.$emit('focusdomelneeded', this.$el);
+    }
+
+    if (this.checkboxElement) {
+      var indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
+
+      if (indeterminate !== this.prevFieldsService.checkIndeterminate(this.prevItem)) {
+        this.checkboxElement.indeterminate = indeterminate;
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var h = gh || createElement;
+
+    var subitems = function subitems() {
+      return isItemExpandedAndWithChildren(this.item, this.fieldsSvc) ? h("ul", {
+        "class": "k-treeview-group",
+        role: "group",
+        attrs: this.v3 ? undefined : {
+          role: "group"
+        }
+      }, [this.fieldsSvc.children(this.item).map(function (item, index) {
+        return h(TreeViewItem, {
+          item: item,
+          attrs: this.v3 ? undefined : {
+            item: item,
+            itemId: createId(index, this.itemId),
+            treeGuid: this.$props.treeGuid,
+            animate: this.$props.animate,
+            focusedItemId: this.$props.focusedItemId,
+            tabbableItemId: this.$props.tabbableItemId,
+            fieldsService: this.$props.fieldsService,
+            itemUI: this.$props.itemUI,
+            checkboxes: this.$props.checkboxes,
+            ariaMultiSelectable: this.$props.ariaMultiSelectable,
+            draggable: this.$props.draggable,
+            expandIcons: this.$props.expandIcons,
+            size: this.$props.size
+          },
+          itemId: createId(index, this.itemId),
+          treeGuid: this.$props.treeGuid,
+          animate: this.$props.animate,
+          focusedItemId: this.$props.focusedItemId,
+          tabbableItemId: this.$props.tabbableItemId,
+          fieldsService: this.$props.fieldsService,
+          itemUI: this.$props.itemUI,
+          checkboxes: this.$props.checkboxes,
+          ariaMultiSelectable: this.$props.ariaMultiSelectable,
+          onItemclick: this.handleItemClick,
+          on: this.v3 ? undefined : {
+            "itemclick": this.handleItemClick,
+            "focusdomelneeded": this.handleFocusDomElNeeded,
+            "press": this.handlePress,
+            "drag": this.handleDrag,
+            "release": this.handleRelease,
+            "expandchange": this.handleExpandChange,
+            "checkchange": this.handleCheckChange
+          },
+          onFocusdomelneeded: this.handleFocusDomElNeeded,
+          draggable: this.$props.draggable,
+          onPress: this.handlePress,
+          onDrag: this.handleDrag,
+          onRelease: this.handleRelease,
+          expandIcons: this.$props.expandIcons,
+          onExpandchange: this.handleExpandChange,
+          onCheckchange: this.handleCheckChange,
+          key: index,
+          size: this.$props.size
+        });
+      }, this)]) : undefined;
+    };
+
+    var renderExpandIcon = function renderExpandIcon() {
+      var renderExpand = this.$props.expandIcons && ( // If it is explicitly said that the item has children (even not loaded yet)
+      // or if the item actually has children, then render the icon.
+      this.fieldsSvc.hasChildren(this.item) || hasChildren(this.item, this.fieldsSvc.getChildrenField()));
+      return renderExpand && h("span", {
+        "class": "k-treeview-toggle"
+      }, [h("span", {
+        "class": this.getIconClassName(),
+        onClick: this.handleExpandChange,
+        on: this.v3 ? undefined : {
+          "click": this.handleExpandChange
+        }
+      })]);
+    };
+
+    var renderCheckbox = function renderCheckbox() {
+      var _a;
+
+      var _this = this;
+
+      if (this.$props.checkboxes) {
+        var size = this.$props.size;
+        return h("div", {
+          "class": "k-checkbox-wrap"
+        }, [h("input", {
+          type: "checkbox",
+          attrs: this.v3 ? undefined : {
+            type: "checkbox",
+            id: this.itemGuid,
+            tabIndex: -1
+          },
+          "class": classNames('k-checkbox k-rounded-md', (_a = {}, _a["k-checkbox-" + (sizeMap[size] || size)] = size, _a)),
+          checked: this.v3 ? Boolean(this.fieldsSvc.checked(this.item)) : null,
+          domProps: this.v3 ? undefined : {
+            "checked": Boolean(this.fieldsSvc.checked(this.item))
+          },
+          id: this.itemGuid,
+          tabIndex: -1,
+          onChange: this.handleCheckChange,
+          on: this.v3 ? undefined : {
+            "change": this.handleCheckChange
+          },
+          ref: function ref(el) {
+            return _this.checkboxElement = el;
+          }
+        }), h("label", {
+          "class": "k-checkbox-label",
+          htmlFor: this.itemGuid,
+          attrs: this.v3 ? undefined : {
+            htmlFor: this.itemGuid
+          }
+        })]);
+      } else {
+        return undefined;
+      }
+    };
+
+    var itemInPart = function itemInPart() {
+      return h("span", {
+        "class": this.getContentClassName(),
+        style: {
+          touchAction: 'none'
+        },
+        onClick: this.handleItemClick,
+        on: this.v3 ? undefined : {
+          "click": this.handleItemClick
+        }
+      }, [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)])]);
+    };
+
+    return h("li", {
+      "class": this.getRootClassName(),
+      tabIndex: this.currentTabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.currentTabIndex,
+        role: "treeitem",
+        "aria-expanded": this.ariaExpanded,
+        "aria-selected": this.ariaSelected,
+        "aria-checked": this.ariaChecked,
+        "aria-disabled": this.fieldsSvc.disabled(this.item) ? true : undefined
+      },
+      role: "treeitem",
+      "aria-expanded": this.ariaExpanded,
+      "aria-selected": this.ariaSelected,
+      "aria-checked": this.ariaChecked,
+      "aria-disabled": this.fieldsSvc.disabled(this.item) ? true : undefined
+    }, [h("div", {
+      "class": "k-treeview-mid",
+      ref: this.assignDraggableMeta
+    }, [renderExpandIcon.call(this), renderCheckbox.call(this), this.$props.draggable ? // @ts-ignore  function children
+    h(Draggable, {
+      onPress: this.handlePress,
+      on: this.v3 ? undefined : {
+        "press": this.handlePress,
+        "drag": this.handleDrag,
+        "release": this.handleRelease
+      },
+      onDrag: this.handleDrag,
+      onRelease: this.handleRelease
+    }, this.v3 ? function () {
+      return [itemInPart.call(_this2)];
+    } : [itemInPart.call(_this2)]) : itemInPart.call(this)]), this.$props.animate ? // @ts-ignore  function children
+    h(Reveal, {
+      appear: this.ariaExpanded,
+      attrs: this.v3 ? undefined : {
+        appear: this.ariaExpanded,
+        transitionEnterDuration: 200,
+        transitionExitDuration: 200
+      },
+      transitionEnterDuration: 200,
+      transitionExitDuration: 200,
+      style: {
+        display: 'block'
+      }
+    }, this.v3 ? function () {
+      return [subitems.call(_this2)];
+    } : [subitems.call(_this2)]) : subitems.call(this)]);
+  },
+  methods: {
+    handleCheckChange: function handleCheckChange(e, subItem, subItemId) {
+      this.$emit('checkchange', e, subItem || this.item, subItemId || this.itemId);
+    },
+    handleExpandChange: function handleExpandChange(e, subItem, subItemId) {
+      this.$emit('expandchange', e, subItem || this.item, subItemId || this.itemId);
+    },
+    handleItemClick: function handleItemClick(e, subItem, subItemId) {
+      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);
+    },
+    handleDrag: function handleDrag(e, subItem, subItemId) {
+      this.$emit('drag', e.event, subItem || this.item, subItemId || this.itemId);
+    },
+    handleRelease: function handleRelease(e, subItem, subItemId) {
+      this.$emit('release', e.event, subItem || this.item, subItemId || this.itemId);
+    },
+    handleFocusDomElNeeded: function handleFocusDomElNeeded(e) {
+      this.$emit('focusdomelneeded', e);
+    },
+    getIconClassName: function getIconClassName() {
+      var expanded = this.fieldsSvc.expanded(this.item);
+      return classNames('k-icon', {
+        'k-i-expand': !expanded,
+        'k-i-collapse': expanded,
+        'k-i-loading': expanded && !hasChildren(this.item, this.fieldsSvc.getChildrenField())
+      });
+    },
+    getRootClassName: function getRootClassName() {
+      return classNames('k-treeview-item', {
+        'k-disabled': this.fieldsSvc.disabled(this.item)
+      });
+    },
+    getContentClassName: function getContentClassName() {
+      return classNames('k-treeview-leaf', {
+        'k-focus': this.$props.focusedItemId === this.itemId,
+        'k-selected': this.fieldsSvc.selected(this.item)
+      });
+    },
+    assignDraggableMeta: function assignDraggableMeta(element) {
+      if (element) {
+        element[DOM_KENDO_ITEM_ID_FIELD] = this.$props.itemId;
+        element[DOM_KENDO_TREEVIEW_GUID_FIELD] = this.$props.treeGuid;
+      }
+    }
+  }
+};
+var TreeViewItem = TreeViewItemVue2;
+export { TreeViewItem, TreeViewItemVue2 };