@progress/kendo-vue-treeview 3.3.4 → 3.3.6-dev.202206170937

package/dist/es/moveTreeViewItem.js

@@ -4,109 +4,42 @@ import { CHILDREN_FIELD } from './utils/consts';
 /**
  *  A helper function which moves a TreeView item in an immutable way.
  *
- * @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
- * @param sourceData - The tree which contains the item that will be moved.
- * @param operation - The specific move operation.
+ * {% meta height:400 %}
+ * {% embed_file drag/single/main.vue preview %}
+ * {% embed_file drag/single/main.js %}
+ * {% endmeta %}
  *
- * The available options are:
- *  * `before`—Indicates that the source item will become the previous sibling of the target item.
- *  * `after`—Indicates that the source item will become the next sibling of the target item.
- *  * `child`—Indicates that the source item will become a child of the target item.
- * @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
- * @param targetData - The tree which contains the target item.
- * If the argument is skipped, then the move operation will be executed within the same tree.
- * Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
- * @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
- * @returns - The updated copies of the `sourceData` and `targetData` input arguments.
- * If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
+ *  #### Parameters
+ *  ##### sourceItemHierarchicalIndex <span class='code'>string</span>
+ *  The hierarchical index of the item that will be moved.
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     dragClue;
- *     state = { tree };
+ *  ##### sourceData <span class='code'>any[] | null | undefined</span>
+ *  The tree which contains the item that will be moved.
  *
- *     render() {
- *         return (
- *             <div>
- *                 <TreeView data={this.state.tree} draggable={true}
- *                     onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
- *                 <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
- *             </div>
- *         );
- *     }
+ *  ##### operation <span class='code'>"before" | "after" | "child"</span>
+ *  The specific move operation.
  *
- *     onItemDragOver = (event) => {
- *         this.dragClue.show(event.pageY + 10, event.pageX, event.item.text, this.getClueClassName(event));
- *     }
- *     onItemDragEnd = (event) => {
- *         this.dragClue.hide();
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
+ *  The available options are:
+ *   * `before`&mdash;Indicates that the source item will become the previous sibling of the target item.
+ *   * `after`&mdash;Indicates that the source item will become the next sibling of the target item.
+ *   * `child`&mdash;Indicates that the source item will become a child of the target item.
  *
- *         if (eventAnalyzer.isDropAllowed) {
- *             const updatedTree = moveTreeViewItem(
- *                 event.itemHierarchicalIndex,
- *                 this.state.tree,
- *                 eventAnalyzer.getDropOperation(),
- *                 eventAnalyzer.destinationMeta.itemHierarchicalIndex,
- *             );
+ *  ##### targetItemHierarchicalIndex <span class='code'>string</span>
+ *  The hierarchical index of the item next to which the source item will be moved.
  *
- *             this.setState({ tree: updatedTree });
- *         }
- *     }
- *     getClueClassName(event) {
- *         const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
- *         const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
+ *  ##### targetData? <span class='code'>any[] | null</span>
+ *  The tree which contains the target item.
+ *  If the argument is skipped, then the move operation will be executed within the same tree.
+ *  Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
  *
- *         if (eventAnalyzer.isDropAllowed) {
- *             switch (eventAnalyzer.getDropOperation()) {
- *                 case 'child':
- *                     return 'k-i-plus';
- *                 case 'before':
- *                     return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
- *                         'k-i-insert-up' : 'k-i-insert-middle';
- *                 case 'after':
- *                     const siblings = getSiblings(itemIndex, this.state.tree);
- *                     const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
+ *  ##### childrenField? <span class='code'>string</span>
+ *  The field that points to the dataItem sub items. Defaults to `items`.
  *
- *                     return lastIndex < siblings.length - 1 ? 'k-i-insert-middle' : 'k-i-insert-down';
- *                 default:
- *                     break;
- *             }
- *         }
- *
- *         return 'k-i-cancel';
- *     }
- * }
- *
- * function getSiblings(itemIndex, data) {
- *     let result = data;
- *
- *     const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
- *     for (let i = 0; i < indices.length - 1; i++) {
- *         result = result[indices[i]].items;
- *     }
- *
- *     return result;
- * }
- *
- * const SEPARATOR = '_';
- * const tree = [{
- *     text: 'Furniture', expanded: true, items: [
- *         { text: 'Tables & Chairs', expanded: true },
- *         { text: 'Sofas', expanded: true },
- *         { text: 'Occasional Furniture', expanded: true }]
- * }, {
- *     text: 'Decor', expanded: true, items: [
- *         { text: 'Bed Linen', expanded: true },
- *         { text: 'Curtains & Blinds', expanded: true },
- *         { text: 'Carpets', expanded: true }]
- * }];
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
+ *  #### Returns
+ *  <span class='code'>any[] | { sourceData: any[]; targetData: any[]; }</span> - The updated copies of the `sourceData` and `targetData` input arguments.
+ *  If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
  */
-export default function moveTreeViewItem(sourceItemHierarchicalIndex, sourceData, operation, targetItemHierarchicalIndex, targetData, childrenField) {
+var moveTreeViewItem = function (sourceItemHierarchicalIndex, sourceData, operation, targetItemHierarchicalIndex, targetData, childrenField) {
     var subItemsField = childrenField || CHILDREN_FIELD;
     if (!validateInput()) {
         return prepareInputDataForReturn();
@@ -153,4 +86,8 @@ export default function moveTreeViewItem(sourceItemHierarchicalIndex, sourceData
         }
         return true;
     }
-}
+};
+/**
+ * @hidden
+ */
+export { moveTreeViewItem };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-treeview',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1654589454,
+    publishDate: 1655458437,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/processTreeViewItems.d.ts

@@ -1,51 +1,24 @@
 import { TreeViewOperationDescriptors } from './TreeViewOperationDescriptors';
 /**
  * A helper function which applies the specified operation descriptors to the data.
- * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
- * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
- * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
+ * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
+ * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
+ * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
  *
- * @param data - The data that will be processed.
- * @param operations - The operation descriptors that will be applied to the data.
- * @returns - The processed copy of the input data.
+ * {% meta height:350 %}
+ * {% embed_file select/selection-update-helper-function/main.vue preview %}
+ * {% embed_file select/selection-update-helper-function/main.js %}
+ * {% endmeta %}
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     state = { items: tree, expand: [], select: [], check: [] };
- *     render() {
- *         const { expand, select, check } = this.state;
- *         return (
- *             <TreeView
- *                 data={processTreeViewItems(this.state.items, { expand, select, check })}
- *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
- *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
- *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
- *             />
- *         );
- *     }
- *     onExpandChange = (event) => {
- *         let expand = this.state.expand.slice();
- *         const index = expand.indexOf(event.itemHierarchicalIndex);
- *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
- *         this.setState({ expand });
- *     }
- * }
+ * #### Parameters
+ * ##### data <span class='code'>any[] | null | undefined</span>
+ * The data that will be processed.
  *
- * const tree = [{
- *     text: 'Item1',
- *     items: [
- *         { text: 'Item1.1' },
- *         { text: 'Item1.2' },
- *         { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
- * }, {
- *     text: 'Item2', disabled: true,
- *     items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
- * }, {
- *     text: 'Item3'
- * }];
+ * ##### operations <span class='code'>[TreeViewOperationDescriptors]({% slug api_treeview_treeviewoperationdescriptors %})</span>
+ * The operation descriptors that will be applied to the data.
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
+ * #### Returns
+ * <span class='code'>any[]</span> - The processed copy of the input data.
  */
-export default function processTreeViewItems(data: any[] | null | undefined, operations: TreeViewOperationDescriptors): any[];
+declare const processTreeViewItems: (data: any[] | null | undefined, operations: TreeViewOperationDescriptors) => any[];
+export { processTreeViewItems };

package/dist/es/processTreeViewItems.js

@@ -15,54 +15,26 @@ import { EXPAND_FIELD, SELECT_FIELD, CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHI
 import { getNestedValue, isArray } from './utils/misc';
 /**
  * A helper function which applies the specified operation descriptors to the data.
- * * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
- * * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
- * * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
+ * [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
+ * [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
+ * [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
  *
- * @param data - The data that will be processed.
- * @param operations - The operation descriptors that will be applied to the data.
- * @returns - The processed copy of the input data.
+ * {% meta height:350 %}
+ * {% embed_file select/selection-update-helper-function/main.vue preview %}
+ * {% embed_file select/selection-update-helper-function/main.js %}
+ * {% endmeta %}
  *
- * @example
- * ```jsx
- * class App extends React.Component {
- *     state = { items: tree, expand: [], select: [], check: [] };
- *     render() {
- *         const { expand, select, check } = this.state;
- *         return (
- *             <TreeView
- *                 data={processTreeViewItems(this.state.items, { expand, select, check })}
- *                 expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
- *                 onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
- *                 onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
- *             />
- *         );
- *     }
- *     onExpandChange = (event) => {
- *         let expand = this.state.expand.slice();
- *         const index = expand.indexOf(event.itemHierarchicalIndex);
- *         index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
- *         this.setState({ expand });
- *     }
- * }
+ * #### Parameters
+ * ##### data <span class='code'>any[] | null | undefined</span>
+ * The data that will be processed.
  *
- * const tree = [{
- *     text: 'Item1',
- *     items: [
- *         { text: 'Item1.1' },
- *         { text: 'Item1.2' },
- *         { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
- * }, {
- *     text: 'Item2', disabled: true,
- *     items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
- * }, {
- *     text: 'Item3'
- * }];
+ * ##### operations <span class='code'>[TreeViewOperationDescriptors]({% slug api_treeview_treeviewoperationdescriptors %})</span>
+ * The operation descriptors that will be applied to the data.
  *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
+ * #### Returns
+ * <span class='code'>any[]</span> - The processed copy of the input data.
  */
-export default function processTreeViewItems(data, operations) {
+var processTreeViewItems = function (data, operations) {
     if (!data || !data.length) {
         return [];
     }
@@ -77,7 +49,7 @@ export default function processTreeViewItems(data, operations) {
     result = handleOperation(result, checkField, operations.check, cloneField, childrenField);
     applyCheckIndeterminate(result, childrenField, operations.check);
     return result;
-}
+};
 function handleOperation(items, defaultField, operation, cloneField, childrenField) {
     if (operation) {
         var _a = parseOperation(operation, defaultField), ids = _a.ids, field = _a.field;
@@ -164,3 +136,4 @@ function applyCheckIndeterminateHelper(data, parents, childrenField, checkField,
         }
     }
 }
+export { processTreeViewItems };

package/dist/es/utils/SortedPublicItemIds.js

@@ -2,8 +2,6 @@ var PROPS_COUNT_LIMIT = 50000;
 /**
  * @hidden
  */
-// An alternative is to use array.sort() and
-// implement a binary search function.
 var SortedPublicItemIds = /** @class */ (function () {
     function SortedPublicItemIds() {
         this.objects = [];

package/dist/npm/TreeView.d.ts

@@ -41,6 +41,76 @@ export interface TreeViewData {
  */
 export interface TreeViewAll extends Vue, TreeViewMethods, TreeViewData, TreeViewComputed, TreeViewState {
 }
+/**
+ * @hidden
+ */
 declare let TreeViewVue2: ComponentOptions<TreeViewAll, DefaultData<TreeViewData>, DefaultMethods<TreeViewAll>, TreeViewComputed, RecordPropsDefinition<TreeViewProps>>;
+/**
+ *
+ *
+ *  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: DefineComponent<TreeViewProps, any, TreeViewData, TreeViewComputed, TreeViewMethods, {}, {}, {}, string, TreeViewProps, TreeViewProps, {}>;
 export { TreeView, TreeViewVue2 };

package/dist/npm/TreeView.js

@@ -26,7 +26,10 @@ var package_metadata_1 = require("./package-metadata");
 
 var consts_1 = require("./utils/consts");
 
-var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap; // tslint:enable:max-line-length
+var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap;
+/**
+ * @hidden
+ */
 
 var TreeViewVue2 = {
   name: 'KendoTreeView',
@@ -376,5 +379,73 @@ var TreeViewVue2 = {
   }
 };
 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,10 +1,22 @@
 import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events';
 /**
  * A class which provides an API for analyzing the `drag` events
- * of the TreeView.
+ *  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`.
  */
-export default class TreeViewDragAnalyzer {
+declare class TreeViewDragAnalyzer {
     private event;
     private itemId;
     private treeViewGuid;
@@ -48,3 +60,4 @@ export default class TreeViewDragAnalyzer {
     getDropOperation(): "before" | "after" | "child";
     private setDestimationMeta;
 }
+export { TreeViewDragAnalyzer };

package/dist/npm/TreeViewDragAnalyzer.js

@@ -1,11 +1,24 @@
 "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.
+ *  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 () {
     /**
@@ -98,4 +111,4 @@ var TreeViewDragAnalyzer = /** @class */ (function () {
     };
     return TreeViewDragAnalyzer;
 }());
-exports.default = TreeViewDragAnalyzer;
+exports.TreeViewDragAnalyzer = TreeViewDragAnalyzer;