@progress/kendo-vue-treeview 5.3.0-dev.202410141143 → 5.3.0-develop.1

package/dist/npm/TreeView.js

@@ -1,457 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TreeViewVue2 = exports.TreeView = void 0;
-// @ts-ignore
-var Vue = require("vue");
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-var kendo_vue_common_1 = require("@progress/kendo-vue-common");
-var getItemIdUponKeyboardNavigation_1 = require("./utils/getItemIdUponKeyboardNavigation");
-var itemUtils_1 = require("./utils/itemUtils");
-var TreeViewItem_1 = require("./TreeViewItem");
-var itemIdUtils_1 = require("./utils/itemIdUtils");
-var FieldsService_1 = require("./utils/FieldsService");
-var package_metadata_1 = require("./package-metadata");
-var consts_1 = require("./utils/consts");
-var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap;
-/**
- * @hidden
- */
-var TreeViewVue2 = {
-  name: 'KendoTreeView',
-  // @ts-ignore
-  emits: {
-    blur: null,
-    focus: null,
-    itemdragstart: null,
-    itemdragover: null,
-    itemdragend: null,
-    keydown: null,
-    itemclick: null,
-    expandchange: null,
-    checkchange: null
-  },
-  props: {
-    dataItems: Array,
-    animate: {
-      type: Boolean,
-      default: true
-    },
-    id: String,
-    draggable: Boolean,
-    tabIndex: Number,
-    focusIdField: String,
-    getFocusHierarchicalIndex: Function,
-    expandField: {
-      type: String,
-      default: consts_1.EXPAND_FIELD
-    },
-    selectField: {
-      type: String,
-      default: consts_1.SELECT_FIELD
-    },
-    childrenField: {
-      type: String,
-      default: consts_1.CHILDREN_FIELD
-    },
-    hasChildrenField: {
-      type: String,
-      default: consts_1.HAS_CHILDREN_FIELD
-    },
-    expandIcons: Boolean,
-    checkboxes: Boolean,
-    textField: {
-      type: String,
-      default: consts_1.TEXT_FIELD
-    },
-    disableField: {
-      type: String,
-      default: consts_1.DISABLED_FIELD
-    },
-    checkField: {
-      type: String,
-      default: consts_1.CHECK_FIELD
-    },
-    checkIndeterminateField: {
-      type: String,
-      default: consts_1.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 {
-      currentRtl: false,
-      focusedItemId: undefined,
-      focusedItemPublicId: undefined,
-      tabbableItemId: itemIdUtils_1.ZERO_LEVEL_ZERO_NODE_ID
-    };
-  },
-  mounted: function mounted() {
-    this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
-  },
-  computed: {
-    treeGuid: function treeGuid() {
-      return this.id || this.innerId;
-    }
-  },
-  created: function created() {
-    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
-    this.allowExplicitFocus = false;
-    this.innerId = (0, kendo_vue_common_1.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_1.default(this.$props);
-    var size = this.$props.size;
-    return h("div", {
-      "class": (0, kendo_vue_common_1.classNames)('k-treeview', (_a = {}, _a["k-treeview-".concat(sizeMap[size] || size)] = size, _a['k-user-select-none'] = this.draggable, _a['k-rtl'] = this.currentRtl, _a)),
-      onKeydown: this.onKeyDown,
-      on: this.v3 ? undefined : {
-        "keydown": this.onKeyDown,
-        "focusin": this.onFocus,
-        "focusout": this.onBlur
-      },
-      onFocusin: this.onFocus,
-      onFocusout: this.onBlur,
-      "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
-      attrs: this.v3 ? undefined : {
-        "aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
-        "aria-label": this.$props['aria-label'],
-        "aria-labelledby": this.$props['aria-labelledby'],
-        tabindex: this.$props.tabIndex
-      },
-      "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: "tree",
-      attrs: this.v3 ? undefined : {
-        role: "tree"
-      }
-    }, [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 : {
-          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,
-          ariaLevel: 1,
-          isRtl: this.currentRtl
-        },
-        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,
-        ariaLevel: 1,
-        isRtl: this.currentRtl
-      });
-    }, 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(e) {
-      clearTimeout(this.blurRequest);
-      if (this.focusedItemId === undefined && this.dataItems.length) {
-        this.setFocus(this.tabbableItemId);
-      }
-      this.$emit('focus', e);
-    },
-    onBlur: function onBlur(e) {
-      var _this = this;
-      clearTimeout(this.blurRequest);
-      if (kendo_vue_common_1.canUseDOM) {
-        this.blurRequest = window.setTimeout(function () {
-          return _this.setFocus(undefined);
-        }, 0);
-      }
-      this.$emit('blur', e);
-    },
-    onKeyDown: function onKeyDown(event) {
-      var focusedItem = this.getFocusedItem();
-      if (focusedItem) {
-        var newItemId = (0, getItemIdUponKeyboardNavigation_1.default)(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);
-      }
-      this.$emit('keydown', event);
-    },
-    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 (0, itemUtils_1.isEnabledAndAllParentsEnabled)(_this.focusedItemId, _this.dataItems, _this.fieldsSvc);
-      };
-      var currentDisabled = this.fieldsSvc.disabled(focusedItem);
-      if (event.keyCode === kendo_vue_common_1.Keys.left && this.fieldsSvc.expanded(focusedItem) && isEnabled()) {
-        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
-      } else if (event.keyCode === kendo_vue_common_1.Keys.right && !this.fieldsSvc.expanded(focusedItem) && (this.fieldsSvc.hasChildren(focusedItem) || (0, itemUtils_1.hasChildren)(focusedItem, this.$props.childrenField)) && isEnabled()) {
-        this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
-      } else if (event.keyCode === kendo_vue_common_1.Keys.enter && !currentDisabled) {
-        this.dispatchItemClick(event, focusedItem, this.focusedItemId);
-      } else if (event.keyCode === kendo_vue_common_1.Keys.space && !currentDisabled) {
-        // 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 (0, itemIdUtils_1.getItemById)(itemId, this.dataItems, this.$props.childrenField || consts_1.CHILDREN_FIELD);
-    },
-    dispatchCheckChange: function dispatchCheckChange(dispatchedEvent, item, itemId) {
-      this.$emit('checkchange', {
-        item: item,
-        itemHierarchicalIndex: itemId,
-        event: dispatchedEvent
-      });
-    },
-    dispatchExpandChange: function dispatchExpandChange(dispatchedEvent, item, itemId) {
-      this.$emit('expandchange', {
-        item: item,
-        itemHierarchicalIndex: itemId,
-        event: dispatchedEvent
-      });
-    },
-    dispatchItemClick: function dispatchItemClick(dispatchedEvent, item, itemId) {
-      this.$emit('itemclick', {
-        item: item,
-        itemHierarchicalIndex: itemId,
-        event: dispatchedEvent
-      });
-    },
-    refocusDueToFocusIdField: function refocusDueToFocusIdField() {
-      if (this.fieldsSvc.focusIdField) {
-        var focusedItemPublicId = this.focusedItemPublicId;
-        if (focusedItemPublicId) {
-          var focusedItemId = this.$props.getFocusHierarchicalIndex ? this.$props.getFocusHierarchicalIndex(focusedItemPublicId) : (0, itemUtils_1.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;
-    }
-  }
-};
-exports.TreeViewVue2 = TreeViewVue2;
-/**
- *
- *
- *  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;
-exports.TreeView = TreeView;

package/dist/npm/TreeViewDragAnalyzer.d.ts

@@ -1,63 +0,0 @@
-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/npm/TreeViewDragAnalyzer.js

@@ -1,114 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TreeViewDragAnalyzer = void 0;
-var consts_1 = require("./utils/consts");
-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[consts_1.DOM_KENDO_ITEM_ID_FIELD]) {
-            node = node.parentNode;
-        }
-        if (node && node[consts_1.DOM_KENDO_ITEM_ID_FIELD]) {
-            this.destDomNodeWithMeta = node;
-            this.destItemId = node[consts_1.DOM_KENDO_ITEM_ID_FIELD];
-            this.destTreeViewGuid = node[consts_1.DOM_KENDO_TREEVIEW_GUID_FIELD];
-        }
-    };
-    return TreeViewDragAnalyzer;
-}());
-exports.TreeViewDragAnalyzer = TreeViewDragAnalyzer;