@progress/kendo-vue-treeview 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/TreeViewDragClue.js

@@ -0,0 +1,112 @@
+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;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var TreeViewDragClueVue2 = {
+  name: 'KendoTreeViewDragClue',
+  props: {},
+  data: function data() {
+    return {
+      visible: false,
+      top: 0,
+      left: 0,
+      text: '',
+      operationClassName: 'k-i-cancel'
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    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;
+    }
+  }
+};
+/**
+ * Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
+ *
+ * {% meta height:400 %}
+ * {% embed_file drag/single/main.vue preview %}
+ * {% embed_file drag/single/main.js %}
+ * {% endmeta %}
+ *
+ *  ## Methods
+ *
+ *  ### hide
+ *  Hides the TreeViewDragClue component.
+ *
+ *  ### show
+ *  Displays the TreeViewDragClue component.
+ *
+ *  #### Parameters
+ *  ##### top <span class='code'>number</span>
+ *  The `top` CSS position of the component.
+ *
+ *  ##### left <span class='code'>number</span>
+ *  The `left` CSS position of the component.
+ *
+ *  ##### text <span class='code'>string</span>
+ *  The text of the component.
+ *
+ *  ##### operationClassName <span class='code'>string</span>
+ *  The CSS class name which is related to the specific drop operation.
+ */
+
+var TreeViewDragClue = TreeViewDragClueVue2;
+export { TreeViewDragClue, TreeViewDragClueVue2 };

package/dist/esm/TreeViewItem.d.ts

@@ -0,0 +1,75 @@
+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 {
+}
+/**
+ * @hidden
+ */
+declare let TreeViewItemVue2: ComponentOptions<TreeViewItemAll, DefaultData<TreeViewItemData>, DefaultMethods<TreeViewItemAll>, TreeViewItemComputed, RecordPropsDefinition<TreeViewItemProps>>;
+/**
+ * @hidden
+ */
+declare const TreeViewItem: DefineComponent<TreeViewItemProps, any, TreeViewItemData, TreeViewItemComputed, TreeViewItemMethods, {}, {}, {}, string, TreeViewItemProps, TreeViewItemProps, {}>;
+export { TreeViewItem, TreeViewItemVue2 };

package/dist/esm/TreeViewItem.js

@@ -0,0 +1,404 @@
+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;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, guid, Draggable, kendoThemeMaps, getTemplate, setRef, getRef } from '@progress/kendo-vue-common';
+import { createId } from './utils/itemIdUtils.js';
+import { isItemExpandedAndWithChildren, hasChildren } from './utils/itemUtils.js';
+import { Reveal } from '@progress/kendo-vue-animation';
+import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts.js';
+var sizeMap = kendoThemeMaps.sizeMap;
+/**
+ * @hidden
+ */
+
+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);
+    }
+
+    this.checkboxElement = getRef(this, 'checkboxElement');
+
+    if (this.checkboxElement) {
+      this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
+    }
+
+    this.assignDraggableMeta(this.$refs.treemid);
+  },
+  updated: function updated() {
+    var focusedItemId = this.$props.focusedItemId;
+
+    if (focusedItemId && focusedItemId !== this.prevFocusedItemId && focusedItemId === this.itemId) {
+      this.$emit('focusdomelneeded', this.$el);
+    }
+
+    this.checkboxElement = getRef(this, 'checkboxElement');
+
+    if (this.checkboxElement) {
+      var indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
+
+      if (indeterminate !== this.prevFieldsService.checkIndeterminate(this.prevItem)) {
+        this.checkboxElement.indeterminate = indeterminate;
+      }
+    }
+
+    this.assignDraggableMeta(this.$refs.treemid);
+  },
+  // @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 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;
+
+      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-".concat(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: setRef(this, 'checkboxElement')
+        }), h("label", {
+          "class": "k-checkbox-label",
+          "for": this.itemGuid,
+          attrs: this.v3 ? undefined : {
+            "for": this.itemGuid
+          }
+        })]);
+      } else {
+        return undefined;
+      }
+    };
+
+    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(),
+        style: {
+          touchAction: 'none'
+        },
+        onClick: this.handleItemClick,
+        on: this.v3 ? undefined : {
+          "click": this.handleItemClick
+        }
+      }, [h("span", {
+        "class": "k-treeview-leaf-text"
+      }, [itemRender])]);
+    };
+
+    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: 'treemid'
+    }, [renderExpandIcon.call(this), renderCheckbox.call(this), this.$props.draggable ? // @ts-ignore  function children
+    h(Draggable, {
+      onPress: function onPress(e) {
+        return _this.handlePress(e);
+      },
+      on: this.v3 ? undefined : {
+        "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);
+      },
+      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
+    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, subItem || __assign({}, this.item), subItemId || this.itemId);
+    },
+    handleDrag: function handleDrag(e, subItem, subItemId) {
+      this.$emit('drag', e, subItem || this.item, subItemId || this.itemId);
+    },
+    handleRelease: function handleRelease(e, subItem, subItemId) {
+      this.$emit('release', e, 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)
+      }, this.item.class);
+    },
+    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]) {
+        element[DOM_KENDO_ITEM_ID_FIELD] = this.$props.itemId;
+        element[DOM_KENDO_TREEVIEW_GUID_FIELD] = this.$props.treeGuid;
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var TreeViewItem = TreeViewItemVue2;
+export { TreeViewItem, TreeViewItemVue2 };

package/dist/esm/TreeViewOperationDescriptors.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The descriptors of the data operations which are applied to the TreeView component.
+ */
+export interface TreeViewOperationDescriptors {
+    /**
+     * The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
+     */
+    expand?: string[] | TreeViewOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
+     */
+    select?: string[] | TreeViewOperationDescriptor;
+    /**
+     * The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
+     */
+    check?: string[] | TreeViewCheckDescriptor;
+    /**
+     * When the operations are applied, the corresponding items and their parents are cloned.
+     * For performance reasons, TreeView items are cloned only once.
+     * The name of the field which provides a Boolean representation of whether an item is already cloned.
+     * Defaults to `cloned`.
+     */
+    cloneField?: string;
+    /**
+     * The expand field of the item.
+     */
+    expandField?: string;
+    /**
+     * The select field of the item.
+     */
+    selectField?: string;
+    /**
+     * The check field of the item.
+     */
+    checkField?: string;
+    /**
+     * The children field of the item.
+     */
+    childrenField?: string;
+}
+/**
+ * The descriptor which is used for expanding, selecting, and checking.
+ */
+export interface TreeViewOperationDescriptor {
+    /**
+     * The IDs of the items to which the operation will be applied. By default, the TreeView applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
+     */
+    ids?: any[];
+    /**
+     * The name of the field which will provide a Boolean representation for the operation state of the item.
+     *
+     * The default fields are:
+     * * `expanded`—Indicates that an item is expanded.
+     * * `selected`—Indicates that an item is selected.
+     * * `checked`—Indicates that an item is checked.
+     */
+    operationField?: string;
+    /**
+     * The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
+     */
+    idField?: string;
+}
+/**
+ * The descriptor which is used for checking.
+ */
+export interface TreeViewCheckDescriptor extends TreeViewOperationDescriptor {
+    /**
+     * Determines if a parent item will have an indeterminate state when not all its children are checked.
+     */
+    applyCheckIndeterminate?: boolean;
+    /**
+     * The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
+     * Defaults to `checkIndeterminate`.
+     */
+    checkIndeterminateField?: string;
+}

package/dist/esm/TreeViewOperationDescriptors.js

@@ -0,0 +1,2 @@
+/* eslint-disable max-len */
+export {};