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

package/dist/esm/TreeView.js

@@ -0,0 +1,435 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { Keys, validatePackage, guid, kendoThemeMaps, classNames, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import nav from './utils/getItemIdUponKeyboardNavigation.js';
+import { resolveItemId, isEnabledAndAllParentsEnabled, hasChildren } from './utils/itemUtils.js';
+import { TreeViewItem } from './TreeViewItem.js';
+import { ZERO_LEVEL_ZERO_NODE_ID, getItemById as _getItemById } from './utils/itemIdUtils.js';
+import FieldsService from './utils/FieldsService.js';
+import { packageMetadata } from './package-metadata.js';
+import { CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD, DISABLED_FIELD, EXPAND_FIELD, HAS_CHILDREN_FIELD, SELECT_FIELD, TEXT_FIELD } from './utils/consts.js';
+var sizeMap = kendoThemeMaps.sizeMap;
+/**
+ * @hidden
+ */
+
+var TreeViewVue2 = {
+  name: 'KendoTreeView',
+  props: {
+    dataItems: Array,
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    id: String,
+    draggable: Boolean,
+    tabIndex: Number,
+    focusIdField: String,
+    getFocusHierarchicalIndex: Function,
+    expandField: {
+      type: String,
+      default: EXPAND_FIELD
+    },
+    selectField: {
+      type: String,
+      default: SELECT_FIELD
+    },
+    childrenField: {
+      type: String,
+      default: CHILDREN_FIELD
+    },
+    hasChildrenField: {
+      type: String,
+      default: HAS_CHILDREN_FIELD
+    },
+    expandIcons: Boolean,
+    checkboxes: Boolean,
+    textField: {
+      type: String,
+      default: TEXT_FIELD
+    },
+    disableField: {
+      type: String,
+      default: DISABLED_FIELD
+    },
+    checkField: {
+      type: String,
+      default: CHECK_FIELD
+    },
+    checkIndeterminateField: {
+      type: String,
+      default: CHECK_INDETERMINATE_FIELD
+    },
+    item: [Object, String, Function],
+    ariaMultiSelectable: [String, Boolean],
+    ariaLabel: String,
+    ariaLabelledby: String,
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    }
+  },
+  data: function data() {
+    return {
+      focusedItemId: undefined,
+      focusedItemPublicId: undefined,
+      tabbableItemId: ZERO_LEVEL_ZERO_NODE_ID
+    };
+  },
+  computed: {
+    treeGuid: function treeGuid() {
+      return this.id || this.innerId;
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.allowExplicitFocus = false;
+    this.innerId = guid();
+  },
+  updated: function updated() {
+    this.allowExplicitFocus = false;
+    this.refocusDueToFocusIdField();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    this.fieldsSvc = new FieldsService(this.$props);
+    var size = this.$props.size;
+    return h("div", {
+      "class": classNames('k-treeview', (_a = {}, _a["k-treeview-".concat(sizeMap[size] || size)] = size, _a)),
+      onKeydown: this.onKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDown,
+        "focusin": this.onFocus,
+        "focusout": this.onBlur
+      },
+      onFocusin: this.onFocus,
+      onFocusout: this.onBlur,
+      role: "tree",
+      attrs: this.v3 ? undefined : {
+        role: "tree",
+        "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
+        "aria-label": this.$props['aria-label'],
+        "aria-labelledby": this.$props['aria-labelledby'],
+        tabindex: this.$props.tabIndex
+      },
+      "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
+      "aria-label": this.$props['aria-label'],
+      "aria-labelledby": this.$props['aria-labelledby'],
+      tabindex: this.$props.tabIndex,
+      style: {
+        userSelect: this.draggable ? 'none' : undefined
+      }
+    }, [h("ul", {
+      "class": "k-treeview-lines k-treeview-group",
+      role: "group",
+      attrs: this.v3 ? undefined : {
+        role: "group"
+      }
+    }, [this.dataItems.map(function (item, index) {
+      var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
+      return h(TreeViewItem, {
+        item: item,
+        attrs: this.v3 ? undefined : {
+          item: item,
+          itemId: index.toString(),
+          treeGuid: this.treeGuid,
+          animate: this.$props.animate,
+          focusedItemId: this.focusedItemId,
+          tabbableItemId: this.tabbableItemId,
+          fieldsService: this.fieldsSvc,
+          itemUI: itemTemplate,
+          checkboxes: this.$props.checkboxes,
+          ariaMultiSelectable: this.ariaMultiSelectable,
+          draggable: this.$props.draggable,
+          expandIcons: this.$props.expandIcons,
+          size: size
+        },
+        itemId: index.toString(),
+        treeGuid: this.treeGuid,
+        animate: this.$props.animate,
+        focusedItemId: this.focusedItemId,
+        tabbableItemId: this.tabbableItemId,
+        fieldsService: this.fieldsSvc,
+        itemUI: itemTemplate,
+        checkboxes: this.$props.checkboxes,
+        ariaMultiSelectable: this.ariaMultiSelectable,
+        onItemclick: this.onItemClick,
+        on: this.v3 ? undefined : {
+          "itemclick": this.onItemClick,
+          "focusdomelneeded": this.onFocusDomElNeeded,
+          "press": this.onPress,
+          "drag": this.onDrag,
+          "release": this.onRelease,
+          "expandchange": this.onExpandChange,
+          "checkchange": this.onCheckChange
+        },
+        onFocusdomelneeded: this.onFocusDomElNeeded,
+        draggable: this.$props.draggable,
+        onPress: this.onPress,
+        onDrag: this.onDrag,
+        onRelease: this.onRelease,
+        expandIcons: this.$props.expandIcons,
+        onExpandchange: this.onExpandChange,
+        onCheckchange: this.onCheckChange,
+        key: index,
+        size: size
+      });
+    }, this)])]);
+  },
+  methods: {
+    onFocusDomElNeeded: function onFocusDomElNeeded(domItem) {
+      if (this.allowExplicitFocus) {
+        this.focusDomItem(domItem);
+      }
+    },
+    onCheckChange: function onCheckChange(event, item, itemId) {
+      this.setFocus(itemId);
+      this.dispatchCheckChange(event, item, itemId);
+    },
+    onExpandChange: function onExpandChange(event, item, itemId) {
+      this.setFocus(itemId);
+      this.dispatchExpandChange(event, item, itemId);
+    },
+    onPress: function onPress(_event, item, 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;
+      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;
+      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);
+      this.dispatchItemClick(event, item, itemId);
+    },
+    onFocus: function onFocus() {
+      clearTimeout(this.blurRequest);
+
+      if (this.focusedItemId === undefined && this.dataItems.length) {
+        this.setFocus(this.tabbableItemId);
+      }
+    },
+    onBlur: function onBlur() {
+      var _this = this;
+
+      clearTimeout(this.blurRequest);
+      this.blurRequest = window.setTimeout(function () {
+        return _this.setFocus(undefined);
+      }, 0);
+    },
+    onKeyDown: function onKeyDown(event) {
+      var focusedItem = this.getFocusedItem();
+
+      if (focusedItem) {
+        var newItemId = nav(focusedItem, this.focusedItemId, this.dataItems, event.keyCode, this.fieldsSvc);
+
+        if (newItemId !== this.focusedItemId) {
+          // This disables the auto-scroll. The scroll is achieved via item focusing.
+          event.preventDefault();
+          this.allowExplicitFocus = true;
+          this.setFocus(newItemId);
+        }
+
+        this.dispatchEventsOnKeyDown(event, focusedItem);
+      }
+    },
+    dispatchEventsOnKeyDown: function dispatchEventsOnKeyDown(event, focusedItem) {
+      var _this = this; // isEnabled is the most expensive op and that is why is left last.
+
+
+      var isEnabled = function isEnabled() {
+        return isEnabledAndAllParentsEnabled(_this.focusedItemId, _this.dataItems, _this.fieldsSvc);
+      };
+
+      if (event.keyCode === Keys.left && this.fieldsSvc.expanded(focusedItem) && isEnabled()) {
+        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.right && !this.fieldsSvc.expanded(focusedItem) && (this.fieldsSvc.hasChildren(focusedItem) || hasChildren(focusedItem, this.$props.childrenField)) && isEnabled()) {
+        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.enter && isEnabled()) {
+        this.dispatchItemClick(event, focusedItem, this.focusedItemId);
+      } else if (event.keyCode === Keys.space && isEnabled()) {
+        // W/o preventDefault() long TreeViews gets incorrectly scrolled.
+        event.preventDefault();
+        this.dispatchCheckChange(event, focusedItem, this.focusedItemId);
+      }
+    },
+    setFocus: function setFocus(focusedItemId) {
+      if (focusedItemId) {
+        if (this.fieldsSvc.focusIdField) {
+          var item = this.getItemById(focusedItemId);
+          this.focusedItemId = focusedItemId;
+          this.focusedItemPublicId = this.fieldsSvc.focusId(item);
+        } else {
+          this.focusedItemId = focusedItemId;
+        }
+      } else {
+        var tempId = this.focusedItemId;
+        this.focusedItemId = undefined;
+        this.focusedItemPublicId = undefined;
+        this.tabbableItemId = tempId;
+      }
+    },
+    getFocusedItem: function getFocusedItem() {
+      return this.focusedItemId ? this.getItemById(this.focusedItemId) : undefined;
+    },
+    getItemById: function getItemById(itemId) {
+      return _getItemById(itemId, this.dataItems, this.$props.childrenField || CHILDREN_FIELD);
+    },
+    dispatchCheckChange: function dispatchCheckChange(_dispatchedEvent, item, itemId) {
+      this.$emit('checkchange', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    dispatchExpandChange: function dispatchExpandChange(_dispatchedEvent, item, itemId) {
+      this.$emit('expandchange', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    dispatchItemClick: function dispatchItemClick(_dispatchedEvent, item, itemId) {
+      this.$emit('itemclick', {
+        item: item,
+        itemHierarchicalIndex: itemId
+      });
+    },
+    refocusDueToFocusIdField: function refocusDueToFocusIdField() {
+      if (this.fieldsSvc.focusIdField) {
+        var focusedItemPublicId = this.focusedItemPublicId;
+
+        if (focusedItemPublicId) {
+          var focusedItemId = this.$props.getFocusHierarchicalIndex ? this.$props.getFocusHierarchicalIndex(focusedItemPublicId) : resolveItemId(focusedItemPublicId, this.fieldsSvc.focusIdField, this.dataItems, this.$props.childrenField);
+
+          if (focusedItemId !== this.focusedItemId) {
+            this.allowExplicitFocus = true;
+            this.focusedItemId = focusedItemId;
+          }
+        }
+      }
+    },
+    // private get ariaMultiSelectable() {
+    //     return this.$props['aria-multiselectable'] === true || this.$props['aria-multiselectable'] === 'true';
+    // }
+    focusDomItem: function focusDomItem(domItem) {
+      domItem.focus();
+    },
+    guid: function guid() {
+      return this.treeGuid;
+    }
+  }
+};
+/**
+ *
+ *
+ *  Represents the [Kendo UI for Vue Native TreeView component]({% slug overview_treeview %}).
+ *
+ *  ```jsx
+ *  <template>
+ *    <div>
+ *      <TreeView :dataItems="tree" />
+ *    </div>
+ *  </template>
+ *
+ *  <script>
+ *  import { TreeView } from '@progress/kendo-vue-treeview';
+ *
+ *  export default {
+ *    components: {
+ *      TreeView,
+ *    },
+ *    data() {
+ *      return {
+ *        tree: [
+ *          {
+ *            text: 'Furniture',
+ *            expanded: true,
+ *            items: [
+ *              {
+ *                text: 'Tables & Chairs',
+ *              },
+ *              {
+ *                text: 'Sofas',
+ *              },
+ *              {
+ *                text: 'Occasional Furniture',
+ *              },
+ *            ],
+ *          },
+ *          {
+ *            text: 'Decor',
+ *            expanded: true,
+ *            items: [
+ *              {
+ *                text: 'Bed Linen',
+ *              },
+ *              {
+ *                text: 'Curtains & Blinds',
+ *              },
+ *              {
+ *                text: 'Carpets',
+ *              },
+ *            ],
+ *          },
+ *        ],
+ *      };
+ *    },
+ *  };
+ *  </script>
+ *  ```
+ *
+ *
+ *
+ *  ### props <span class='code'>Readonly&lt;[TreeViewProps]({% slug api_treeview_treeviewprops %})&gt;</span>
+ *  The props of the TreeView component.
+ *
+ *  ### guid <span class='code'>string</span>
+ *  Returns the `guid` which is associated with the TreeView.
+ */
+
+var TreeView = TreeViewVue2;
+export { TreeView, TreeViewVue2 };

package/dist/esm/TreeViewDragAnalyzer.d.ts

@@ -0,0 +1,63 @@
+import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events';
+/**
+ * A class which provides an API for analyzing the `drag` events
+ *  of the TreeView.
+ *
+ * {% meta height:400 %}
+ * {% embed_file drag/single/main.vue preview %}
+ * {% embed_file drag/single/main.js %}
+ * {% endmeta %}
+ *
+ *  ### destinationMeta <span class='code'>{ itemHierarchicalIndex: string; treeViewGuid: string; }</span>
+ *  Returns an object which contains:
+ *  * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+ *  * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+ *
+ *  ### isDropAllowed <span class='code'>boolean</span>
+ *  Returns `true` if dropping is allowed. Otherwise, returns `false`.
+ */
+declare class TreeViewDragAnalyzer {
+    private event;
+    private itemId;
+    private treeViewGuid;
+    private initialized;
+    private destDomNodeWithMeta;
+    private destItemId;
+    private destTreeViewGuid;
+    /**
+     * @param event - The event that will be analyzed.
+     */
+    constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
+    /**
+     * The method which initializes the analyzer.
+     * Invoke the method before you call any other methods.
+     *
+     * @returns - The analyzer object of the `drag` event.
+     */
+    init(): this;
+    /**
+     * Returns `true` if dropping is allowed. Otherwise, returns `false`.
+     */
+    get isDropAllowed(): boolean;
+    /**
+     * Returns an object which contains:
+     * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+     * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+     */
+    get destinationMeta(): {
+        itemHierarchicalIndex: string;
+        treeViewGuid: string;
+    };
+    /**
+     * Returns the specific drop operation.
+     *
+     * @returns - The following values are returned:
+     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
+     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
+     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
+     * * `undefined`&mdash;Indicates that dropping is not allowed.
+     */
+    getDropOperation(): "before" | "after" | "child";
+    private setDestimationMeta;
+}
+export { TreeViewDragAnalyzer };

package/dist/esm/TreeViewDragAnalyzer.js

@@ -0,0 +1,111 @@
+import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts.js';
+var DROPZONE_BOUNDARY_DELTA = 6;
+/**
+ * A class which provides an API for analyzing the `drag` events
+ *  of the TreeView.
+ *
+ * {% meta height:400 %}
+ * {% embed_file drag/single/main.vue preview %}
+ * {% embed_file drag/single/main.js %}
+ * {% endmeta %}
+ *
+ *  ### destinationMeta <span class='code'>{ itemHierarchicalIndex: string; treeViewGuid: string; }</span>
+ *  Returns an object which contains:
+ *  * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+ *  * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+ *
+ *  ### isDropAllowed <span class='code'>boolean</span>
+ *  Returns `true` if dropping is allowed. Otherwise, returns `false`.
+ */
+var TreeViewDragAnalyzer = /** @class */ (function () {
+    /**
+     * @param event - The event that will be analyzed.
+     */
+    function TreeViewDragAnalyzer(event) {
+        this.event = event;
+        this.initialized = false;
+        this.itemId = event.itemHierarchicalIndex;
+        this.treeViewGuid = event.target.guid();
+    }
+    /**
+     * The method which initializes the analyzer.
+     * Invoke the method before you call any other methods.
+     *
+     * @returns - The analyzer object of the `drag` event.
+     */
+    TreeViewDragAnalyzer.prototype.init = function () {
+        if (!this.initialized) {
+            this.setDestimationMeta(document.elementFromPoint(this.event.clientX, this.event.clientY));
+            this.initialized = true;
+        }
+        return this;
+    };
+    Object.defineProperty(TreeViewDragAnalyzer.prototype, "isDropAllowed", {
+        /**
+         * Returns `true` if dropping is allowed. Otherwise, returns `false`.
+         */
+        get: function () {
+            if (this.initialized && this.destItemId && this.destTreeViewGuid) {
+                // Disallow circular references.
+                return !(("".concat(this.destTreeViewGuid, "_").concat(this.destItemId, "_")).
+                    startsWith("".concat(this.treeViewGuid, "_").concat(this.itemId, "_")));
+            }
+            else {
+                return false;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TreeViewDragAnalyzer.prototype, "destinationMeta", {
+        /**
+         * Returns an object which contains:
+         * * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
+         * * The `guid` of the destination TreeView (the TreeView which renders the destination item).
+         */
+        get: function () {
+            return { itemHierarchicalIndex: this.destItemId, treeViewGuid: this.destTreeViewGuid };
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Returns the specific drop operation.
+     *
+     * @returns - The following values are returned:
+     * * `before`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
+     * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
+     * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
+     * * `undefined`&mdash;Indicates that dropping is not allowed.
+     */
+    TreeViewDragAnalyzer.prototype.getDropOperation = function () {
+        if (this.initialized && this.isDropAllowed) {
+            var _a = this.destDomNodeWithMeta.getBoundingClientRect(), top_1 = _a.top, height = _a.height;
+            if (top_1 + height - this.event.clientY < DROPZONE_BOUNDARY_DELTA) {
+                return 'after';
+            }
+            else if (this.event.clientY - top_1 < DROPZONE_BOUNDARY_DELTA) {
+                return 'before';
+            }
+            else {
+                return 'child';
+            }
+        }
+        else {
+            return undefined;
+        }
+    };
+    TreeViewDragAnalyzer.prototype.setDestimationMeta = function (element) {
+        var node = element;
+        while (node && !node[DOM_KENDO_ITEM_ID_FIELD]) {
+            node = node.parentNode;
+        }
+        if (node && node[DOM_KENDO_ITEM_ID_FIELD]) {
+            this.destDomNodeWithMeta = node;
+            this.destItemId = node[DOM_KENDO_ITEM_ID_FIELD];
+            this.destTreeViewGuid = node[DOM_KENDO_TREEVIEW_GUID_FIELD];
+        }
+    };
+    return TreeViewDragAnalyzer;
+}());
+export { TreeViewDragAnalyzer };

package/dist/esm/TreeViewDragClue.d.ts

@@ -0,0 +1,78 @@
+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 Kendo UI for Vue TreeViewDragClue component.
+ */
+export interface TreeViewDragClueProps {
+}
+/**
+ * @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 {
+}
+/**
+ * @hidden
+ */
+declare let TreeViewDragClueVue2: ComponentOptions<TreeViewDragClueAll, DefaultData<TreeViewDragClueData>, DefaultMethods<TreeViewDragClueAll>, TreeViewDragClueComputed, RecordPropsDefinition<TreeViewDragClueProps>>;
+/**
+ * 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.
+ */
+declare const TreeViewDragClue: DefineComponent<TreeViewDragClueProps, any, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueMethods, {}, {}, {}, string, TreeViewDragClueProps, TreeViewDragClueProps, {}>;
+export { TreeViewDragClue, TreeViewDragClueVue2 };