@progress/kendo-vue-treeview 8.0.3-develop.2 → 8.0.3-develop.4

package/ItemRenderProps.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The props of the ItemRender component ([see example]({% slug rendering_treeview %})).
+ */
+export interface ItemRenderProps {
+    /**
+     * The item that is rendered.
+     */
+    item: any;
+    /**
+     * The hierarchical index of the item. The 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.
+     */
+    itemHierarchicalIndex: string;
+}

package/TreeView.d.ts

@@ -0,0 +1,241 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+ *
+ *
+ *  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.
+ */
+declare const TreeView: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    dataItems: PropType<any[]>;
+    animate: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    id: PropType<string>;
+    draggable: PropType<boolean>;
+    tabIndex: PropType<number>;
+    focusIdField: PropType<string>;
+    getFocusHierarchicalIndex: PropType<(itemId: any) => string>;
+    expandField: {
+        type: PropType<string>;
+        default: string;
+    };
+    selectField: {
+        type: PropType<string>;
+        default: string;
+    };
+    childrenField: {
+        type: PropType<string>;
+        default: string;
+    };
+    hasChildrenField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandIcons: PropType<boolean>;
+    checkboxes: PropType<boolean>;
+    textField: {
+        type: PropType<string>;
+        default: string;
+    };
+    disableField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkIndeterminateField: {
+        type: PropType<string>;
+        default: string;
+    };
+    item: PropType<any>;
+    ariaMultiSelectable: PropType<string | boolean>;
+    ariaLabel: PropType<string>;
+    ariaLabelledby: PropType<string>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+}>, {}, {
+    currentRtl: boolean;
+    focusedItemId: any;
+    focusedItemPublicId: any;
+    tabbableItemId: string;
+}, {
+    treeGuid(): string;
+}, {
+    onFocusDomElNeeded(domItem: any): void;
+    onCheckChange(event: any, item: any, itemId: string): void;
+    onExpandChange(event: any, item: any, itemId: string): void;
+    onPress(_event: any, item: any, itemId: string): void;
+    onDrag(event: any, item: any, itemId: string): void;
+    onRelease(event: any, item: any, itemId: string): void;
+    onItemClick(event: any, item: any, itemId: string): void;
+    onFocus(e: any): void;
+    onBlur(e: any): void;
+    onKeyDown(event: any): void;
+    dispatchEventsOnKeyDown(event: any, focusedItem: any): void;
+    setFocus(focusedItemId?: string): void;
+    getFocusedItem(): any;
+    getItemById(itemId: string): any;
+    dispatchCheckChange(dispatchedEvent: any, item: any, itemId: string): void;
+    dispatchExpandChange(dispatchedEvent: any, item: any, itemId: string): void;
+    dispatchItemClick(dispatchedEvent: any, item: any, itemId: string): void;
+    refocusDueToFocusIdField(): void;
+    focusDomItem(domItem: any): void;
+    guid(): string;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: any;
+    focus: any;
+    itemdragstart: any;
+    itemdragover: any;
+    itemdragend: any;
+    keydown: any;
+    itemclick: any;
+    expandchange: any;
+    checkchange: any;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    dataItems: PropType<any[]>;
+    animate: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    id: PropType<string>;
+    draggable: PropType<boolean>;
+    tabIndex: PropType<number>;
+    focusIdField: PropType<string>;
+    getFocusHierarchicalIndex: PropType<(itemId: any) => string>;
+    expandField: {
+        type: PropType<string>;
+        default: string;
+    };
+    selectField: {
+        type: PropType<string>;
+        default: string;
+    };
+    childrenField: {
+        type: PropType<string>;
+        default: string;
+    };
+    hasChildrenField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandIcons: PropType<boolean>;
+    checkboxes: PropType<boolean>;
+    textField: {
+        type: PropType<string>;
+        default: string;
+    };
+    disableField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkIndeterminateField: {
+        type: PropType<string>;
+        default: string;
+    };
+    item: PropType<any>;
+    ariaMultiSelectable: PropType<string | boolean>;
+    ariaLabel: PropType<string>;
+    ariaLabelledby: PropType<string>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+}>> & Readonly<{
+    onBlur?: (...args: any[] | unknown[]) => any;
+    onFocus?: (...args: any[] | unknown[]) => any;
+    onKeydown?: (...args: any[] | unknown[]) => any;
+    onItemdragstart?: (...args: any[] | unknown[]) => any;
+    onItemdragover?: (...args: any[] | unknown[]) => any;
+    onItemdragend?: (...args: any[] | unknown[]) => any;
+    onItemclick?: (...args: any[] | unknown[]) => any;
+    onExpandchange?: (...args: any[] | unknown[]) => any;
+    onCheckchange?: (...args: any[] | unknown[]) => any;
+}>, {
+    animate: boolean;
+    checkIndeterminateField: string;
+    expandField: string;
+    selectField: string;
+    childrenField: string;
+    hasChildrenField: string;
+    textField: string;
+    disableField: string;
+    checkField: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TreeView };

package/TreeView.mjs

@@ -8,7 +8,7 @@
 import { defineComponent as r, createVNode as o } from "vue";
 import { Keys as d, canUseDOM as h, classNames as u, kendoThemeMaps as m, templateRendering as I, getListeners as p, validatePackage as f, guid as g, isRtl as b } from "@progress/kendo-vue-common";
 import F from "./utils/getItemIdUponKeyboardNavigation.mjs";
-import { resolveItemId as E, isEnabledAndAllParentsEnabled as C, hasChildren as k } from "./utils/itemUtils.mjs";
+import { resolveItemId as E, hasChildren as C, isEnabledAndAllParentsEnabled as k } from "./utils/itemUtils.mjs";
 import { TreeViewItem as S } from "./TreeViewItem.mjs";
 import { getItemById as x, ZERO_LEVEL_ZERO_NODE_ID as y } from "./utils/itemIdUtils.mjs";
 import D from "./utils/FieldsService.mjs";
@@ -229,8 +229,8 @@ const {
       this.$emit("keydown", e);
     },
     dispatchEventsOnKeyDown(e, t) {
-      const i = () => C(this.focusedItemId, this.dataItems, this.fieldsSvc), s = this.fieldsSvc.disabled(t);
-      e.keyCode === d.left && this.fieldsSvc.expanded(t) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.right && !this.fieldsSvc.expanded(t) && (this.fieldsSvc.hasChildren(t) || k(t, this.$props.childrenField)) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.enter && !s ? this.dispatchItemClick(e, t, this.focusedItemId) : e.keyCode === d.space && !s && (e.preventDefault(), this.dispatchCheckChange(e, t, this.focusedItemId));
+      const i = () => k(this.focusedItemId, this.dataItems, this.fieldsSvc), s = this.fieldsSvc.disabled(t);
+      e.keyCode === d.left && this.fieldsSvc.expanded(t) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.right && !this.fieldsSvc.expanded(t) && (this.fieldsSvc.hasChildren(t) || C(t, this.$props.childrenField)) && i() ? this.dispatchExpandChange(e, t, this.focusedItemId) : e.keyCode === d.enter && !s ? this.dispatchItemClick(e, t, this.focusedItemId) : e.keyCode === d.space && !s && (e.preventDefault(), this.dispatchCheckChange(e, t, this.focusedItemId));
     },
     setFocus(e) {
       if (e)

package/TreeViewDragAnalyzer.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+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(): "child" | "before" | "after";
+    private setDestimationMeta;
+}
+export { TreeViewDragAnalyzer };

package/TreeViewDragClue.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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: import('vue').DefineComponent<{}, {}, {
+    visible: boolean;
+    top: number;
+    left: number;
+    text: string;
+    operationIconName: string;
+    operationSvg: import('@progress/kendo-svg-icons').SVGIcon;
+}, {}, {
+    show(top: number, left: number, text: string, operationIconName: string | object): void;
+    hide(): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TreeViewDragClue };

package/TreeViewItem.d.ts

@@ -0,0 +1,127 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as FieldsService } from './utils/FieldsService';
+import { PropType } from 'vue';
+/**
+ * @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?: 'small' | 'medium' | 'large';
+    /**
+     * Currently for internal usage only! Replicates the current behavior which disables all children
+     * if the parent is disabled, which was previously achieved only though the kendo-themes,
+     * but due to rendering changes had to be replicated programmatically!
+     *
+     * @hidden
+     */
+    disabled?: boolean;
+    ariaLevel: number;
+    isRtl?: boolean;
+}
+/**
+ * @hidden
+ */
+declare const TreeViewItem: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    item: PropType<any>;
+    itemId: PropType<string>;
+    treeGuid: PropType<string>;
+    animate: PropType<boolean>;
+    focusedItemId: PropType<string>;
+    tabbableItemId: PropType<string>;
+    fieldsService: PropType<FieldsService>;
+    itemUI: PropType<any>;
+    ariaMultiSelectable: PropType<boolean>;
+    expandIcons: PropType<boolean>;
+    checkboxes: PropType<boolean>;
+    onFocusDomElNeeded: PropType<any>;
+    draggable: PropType<boolean>;
+    isRtl: PropType<boolean>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    disabled: PropType<boolean>;
+    ariaLevel: PropType<number>;
+    onItemClick: PropType<any>;
+    onExpandChange: PropType<any>;
+    onCheckChange: PropType<any>;
+    onPress: PropType<any>;
+    onDrag: PropType<any>;
+    onRelease: PropType<any>;
+    onFocusdomelneeded: PropType<any>;
+}>, {}, {
+    isMounted: boolean;
+}, {
+    fieldsSvc(): any;
+    currentTabIndex(): number;
+    ariaExpanded(): boolean | undefined;
+    ariaChecked(): string | boolean | undefined;
+    ariaSelected(): boolean | undefined;
+    computedDisabled(): any;
+}, {
+    handleItemContentClick(e: any): void;
+    handleCheckChange(e: any, subItem: any, subItemId: string): void;
+    handleExpandChange(e: any, subItem: any, subItemId: string): void;
+    handleItemClick(e: any, subItem: any, subItemId: string): void;
+    handlePress(e: any, subItem: any, subItemId: string): void;
+    handleDrag(e: any, subItem: any, subItemId: string): void;
+    handleRelease(e: any, subItem: any, subItemId: string): void;
+    handleFocusDomElNeeded(e: any): void;
+    getIconClassName(): "loading" | "chevron-down" | "chevron-left" | "chevron-right";
+    getIconSVG(): import('@progress/kendo-svg-icons').SVGIcon;
+    getContentClassName(): string;
+    assignDraggableMeta(element: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    item: PropType<any>;
+    itemId: PropType<string>;
+    treeGuid: PropType<string>;
+    animate: PropType<boolean>;
+    focusedItemId: PropType<string>;
+    tabbableItemId: PropType<string>;
+    fieldsService: PropType<FieldsService>;
+    itemUI: PropType<any>;
+    ariaMultiSelectable: PropType<boolean>;
+    expandIcons: PropType<boolean>;
+    checkboxes: PropType<boolean>;
+    onFocusDomElNeeded: PropType<any>;
+    draggable: PropType<boolean>;
+    isRtl: PropType<boolean>;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    disabled: PropType<boolean>;
+    ariaLevel: PropType<number>;
+    onItemClick: PropType<any>;
+    onExpandChange: PropType<any>;
+    onCheckChange: PropType<any>;
+    onPress: PropType<any>;
+    onDrag: PropType<any>;
+    onRelease: PropType<any>;
+    onFocusdomelneeded: PropType<any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TreeViewItem };

package/TreeViewOperationDescriptors.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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;
+}