@progress/kendo-vue-treeview 3.3.3 → 3.3.5-dev.202206141337
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/js/kendo-vue-treeview.js +1 -1
- package/dist/es/TreeView.d.ts +70 -0
- package/dist/es/TreeView.js +72 -1
- package/dist/es/TreeViewDragAnalyzer.d.ts +11 -2
- package/dist/es/TreeViewDragAnalyzer.js +10 -2
- package/dist/es/TreeViewDragClue.d.ts +29 -90
- package/dist/es/TreeViewDragClue.js +30 -1
- package/dist/es/TreeViewItem.d.ts +6 -0
- package/dist/es/TreeViewItem.js +8 -1
- package/dist/es/TreeViewProps.d.ts +1 -1
- package/dist/es/additionalTypes.ts +11 -0
- package/dist/es/handleTreeViewCheckChange.d.ts +18 -40
- package/dist/es/handleTreeViewCheckChange.js +18 -40
- package/dist/es/main.d.ts +3 -3
- package/dist/es/main.js +3 -3
- package/dist/es/moveTreeViewItem.d.ts +27 -93
- package/dist/es/moveTreeViewItem.js +28 -94
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/processTreeViewItems.d.ts +13 -43
- package/dist/es/processTreeViewItems.js +14 -44
- package/dist/es/utils/SortedPublicItemIds.js +0 -2
- package/dist/npm/TreeView.d.ts +70 -0
- package/dist/npm/TreeView.js +72 -1
- package/dist/npm/TreeViewDragAnalyzer.d.ts +11 -2
- package/dist/npm/TreeViewDragAnalyzer.js +11 -2
- package/dist/npm/TreeViewDragClue.d.ts +29 -90
- package/dist/npm/TreeViewDragClue.js +30 -1
- package/dist/npm/TreeViewItem.d.ts +6 -0
- package/dist/npm/TreeViewItem.js +8 -1
- package/dist/npm/TreeViewProps.d.ts +1 -1
- package/dist/npm/additionalTypes.ts +11 -0
- package/dist/npm/handleTreeViewCheckChange.d.ts +18 -40
- package/dist/npm/handleTreeViewCheckChange.js +18 -40
- package/dist/npm/main.d.ts +3 -3
- package/dist/npm/main.js +3 -3
- package/dist/npm/moveTreeViewItem.d.ts +27 -93
- package/dist/npm/moveTreeViewItem.js +26 -95
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/processTreeViewItems.d.ts +13 -43
- package/dist/npm/processTreeViewItems.js +15 -45
- package/dist/npm/utils/SortedPublicItemIds.js +0 -2
- package/package.json +6 -6
|
@@ -26,7 +26,10 @@ var Vue = require("vue");
|
|
|
26
26
|
var allVue = Vue;
|
|
27
27
|
var gh = allVue.h;
|
|
28
28
|
|
|
29
|
-
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
29
|
+
var kendo_vue_common_1 = require("@progress/kendo-vue-common");
|
|
30
|
+
/**
|
|
31
|
+
* @hidden
|
|
32
|
+
*/
|
|
30
33
|
|
|
31
34
|
|
|
32
35
|
var TreeViewDragClueVue2 = {
|
|
@@ -84,5 +87,31 @@ var TreeViewDragClueVue2 = {
|
|
|
84
87
|
}
|
|
85
88
|
};
|
|
86
89
|
exports.TreeViewDragClueVue2 = TreeViewDragClueVue2;
|
|
90
|
+
/**
|
|
91
|
+
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
|
|
92
|
+
*
|
|
93
|
+
*
|
|
94
|
+
* ## Methods
|
|
95
|
+
*
|
|
96
|
+
* ### hide
|
|
97
|
+
* Hides the TreeViewDragClue component.
|
|
98
|
+
*
|
|
99
|
+
* ### show
|
|
100
|
+
* Displays the TreeViewDragClue component.
|
|
101
|
+
*
|
|
102
|
+
* #### Parameters
|
|
103
|
+
* ##### top <span class='code'>number</span>
|
|
104
|
+
* The `top` CSS position of the component.
|
|
105
|
+
*
|
|
106
|
+
* ##### left <span class='code'>number</span>
|
|
107
|
+
* The `left` CSS position of the component.
|
|
108
|
+
*
|
|
109
|
+
* ##### text <span class='code'>string</span>
|
|
110
|
+
* The text of the component.
|
|
111
|
+
*
|
|
112
|
+
* ##### operationClassName <span class='code'>string</span>
|
|
113
|
+
* The CSS class name which is related to the specific drop operation.
|
|
114
|
+
*/
|
|
115
|
+
|
|
87
116
|
var TreeViewDragClue = TreeViewDragClueVue2;
|
|
88
117
|
exports.TreeViewDragClue = TreeViewDragClue;
|
|
@@ -64,6 +64,12 @@ export interface TreeViewItemData {
|
|
|
64
64
|
*/
|
|
65
65
|
export interface TreeViewItemAll extends Vue, TreeViewItemMethods, TreeViewItemData, TreeViewItemComputed, TreeViewItemState {
|
|
66
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
67
70
|
declare let TreeViewItemVue2: ComponentOptions<TreeViewItemAll, DefaultData<TreeViewItemData>, DefaultMethods<TreeViewItemAll>, TreeViewItemComputed, RecordPropsDefinition<TreeViewItemProps>>;
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*/
|
|
68
74
|
declare const TreeViewItem: DefineComponent<TreeViewItemProps, any, TreeViewItemData, TreeViewItemComputed, TreeViewItemMethods, {}, {}, {}, string, TreeViewItemProps, TreeViewItemProps, {}>;
|
|
69
75
|
export { TreeViewItem, TreeViewItemVue2 };
|
package/dist/npm/TreeViewItem.js
CHANGED
|
@@ -36,7 +36,10 @@ var kendo_vue_animation_1 = require("@progress/kendo-vue-animation");
|
|
|
36
36
|
|
|
37
37
|
var consts_1 = require("./utils/consts");
|
|
38
38
|
|
|
39
|
-
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap;
|
|
39
|
+
var sizeMap = kendo_vue_common_1.kendoThemeMaps.sizeMap;
|
|
40
|
+
/**
|
|
41
|
+
* @hidden
|
|
42
|
+
*/
|
|
40
43
|
|
|
41
44
|
var TreeViewItemVue2 = {
|
|
42
45
|
name: 'KendoTreeViewItem',
|
|
@@ -406,5 +409,9 @@ var TreeViewItemVue2 = {
|
|
|
406
409
|
}
|
|
407
410
|
};
|
|
408
411
|
exports.TreeViewItemVue2 = TreeViewItemVue2;
|
|
412
|
+
/**
|
|
413
|
+
* @hidden
|
|
414
|
+
*/
|
|
415
|
+
|
|
409
416
|
var TreeViewItem = TreeViewItemVue2;
|
|
410
417
|
exports.TreeViewItem = TreeViewItem;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as events from './events';
|
|
2
2
|
/**
|
|
3
|
-
* Represents the props of the [
|
|
3
|
+
* Represents the props of the [Kendo UI for Vue TreeView component]({% slug overview_treeview %}).
|
|
4
4
|
*/
|
|
5
5
|
export interface TreeViewProps {
|
|
6
6
|
/**
|
|
@@ -2,9 +2,20 @@
|
|
|
2
2
|
import { DefineComponent } from 'vue';
|
|
3
3
|
// @ts-ignore
|
|
4
4
|
import * as Vue from 'vue';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @hidden
|
|
8
|
+
*/
|
|
5
9
|
// @ts-ignore
|
|
6
10
|
type Vue2type = Vue.default;
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
7
15
|
// @ts-ignore
|
|
8
16
|
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
17
|
+
/**
|
|
18
|
+
* @hidden
|
|
19
|
+
*/
|
|
9
20
|
// @ts-ignore
|
|
10
21
|
export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
|
|
@@ -18,50 +18,28 @@ export interface TreeViewCheckChangeSettings {
|
|
|
18
18
|
checkParents?: boolean;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
|
+
*
|
|
21
22
|
* A helper function which updates the check descriptor.
|
|
22
23
|
*
|
|
23
|
-
* @param event - The event that triggered the change.
|
|
24
|
-
* @param check - The check descriptor that will be updated.
|
|
25
|
-
* @param data - The TreeView items.
|
|
26
|
-
* @param settings - The additional settings that configure the update of the check descriptor.
|
|
27
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
28
|
-
* The default behavior allows the selection of multiple items.
|
|
29
|
-
* @returns - The updated copy of the input check descriptor.
|
|
30
24
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* <i>Press SPACE to check/uncheck the active item</i>
|
|
44
|
-
* <div className="example-config">
|
|
45
|
-
* Checked Indices: {this.state.check.join(",")}
|
|
46
|
-
* </div>
|
|
47
|
-
* </div>
|
|
48
|
-
* </div>
|
|
49
|
-
* );
|
|
50
|
-
* }
|
|
51
|
-
* onCheckChange = (event) => {
|
|
52
|
-
* this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
|
|
53
|
-
* }
|
|
54
|
-
* }
|
|
25
|
+
* #### Parameters
|
|
26
|
+
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
|
|
27
|
+
* The event that triggered the change.
|
|
28
|
+
*
|
|
29
|
+
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
|
|
30
|
+
* The check descriptor that will be updated.
|
|
31
|
+
*
|
|
32
|
+
* ##### data? <span class='code'>any[] | null</span>
|
|
33
|
+
* The TreeView items.
|
|
34
|
+
*
|
|
35
|
+
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
|
|
36
|
+
* The additional settings that configure the update of the check descriptor.
|
|
55
37
|
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
* }, {
|
|
60
|
-
* text: 'Decor', expanded: true, items: [
|
|
61
|
-
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
|
|
62
|
-
* } ];
|
|
38
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
39
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
40
|
+
* The default behavior allows the selection of multiple items.
|
|
63
41
|
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
42
|
+
* #### Returns
|
|
43
|
+
* <span class='code'>any</span> - The updated copy of the input check descriptor.
|
|
66
44
|
*/
|
|
67
45
|
export declare function handleTreeViewCheckChange(event: TreeViewExpandChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any;
|
|
@@ -33,51 +33,29 @@ var itemIdUtils_1 = require("./utils/itemIdUtils");
|
|
|
33
33
|
var misc_1 = require("./utils/misc");
|
|
34
34
|
var consts_1 = require("./utils/consts");
|
|
35
35
|
/**
|
|
36
|
+
*
|
|
36
37
|
* A helper function which updates the check descriptor.
|
|
37
38
|
*
|
|
38
|
-
* @param event - The event that triggered the change.
|
|
39
|
-
* @param check - The check descriptor that will be updated.
|
|
40
|
-
* @param data - The TreeView items.
|
|
41
|
-
* @param settings - The additional settings that configure the update of the check descriptor.
|
|
42
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
43
|
-
* The default behavior allows the selection of multiple items.
|
|
44
|
-
* @returns - The updated copy of the input check descriptor.
|
|
45
39
|
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* <i>Press SPACE to check/uncheck the active item</i>
|
|
59
|
-
* <div className="example-config">
|
|
60
|
-
* Checked Indices: {this.state.check.join(",")}
|
|
61
|
-
* </div>
|
|
62
|
-
* </div>
|
|
63
|
-
* </div>
|
|
64
|
-
* );
|
|
65
|
-
* }
|
|
66
|
-
* onCheckChange = (event) => {
|
|
67
|
-
* this.setState({ check: handleTreeViewCheckChange(event, this.state.check, this.state.items) });
|
|
68
|
-
* }
|
|
69
|
-
* }
|
|
40
|
+
* #### Parameters
|
|
41
|
+
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
|
|
42
|
+
* The event that triggered the change.
|
|
43
|
+
*
|
|
44
|
+
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
|
|
45
|
+
* The check descriptor that will be updated.
|
|
46
|
+
*
|
|
47
|
+
* ##### data? <span class='code'>any[] | null</span>
|
|
48
|
+
* The TreeView items.
|
|
49
|
+
*
|
|
50
|
+
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
|
|
51
|
+
* The additional settings that configure the update of the check descriptor.
|
|
70
52
|
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
* }, {
|
|
75
|
-
* text: 'Decor', expanded: true, items: [
|
|
76
|
-
* { text: 'Bed Linen' }, { text: 'Curtains & Blinds' }, { text: 'Carpets' } ]
|
|
77
|
-
* } ];
|
|
53
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
54
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
55
|
+
* The default behavior allows the selection of multiple items.
|
|
78
56
|
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
57
|
+
* #### Returns
|
|
58
|
+
* <span class='code'>any</span> - The updated copy of the input check descriptor.
|
|
81
59
|
*/
|
|
82
60
|
function handleTreeViewCheckChange(event, check, data, settings, childrenField) {
|
|
83
61
|
if (settings === void 0) { settings = {}; }
|
package/dist/npm/main.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { TreeView } from './TreeView';
|
|
2
2
|
import { TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent } from './events';
|
|
3
|
-
import processTreeViewItems from './processTreeViewItems';
|
|
4
|
-
import moveTreeViewItem from './moveTreeViewItem';
|
|
3
|
+
import { processTreeViewItems } from './processTreeViewItems';
|
|
4
|
+
import { moveTreeViewItem } from './moveTreeViewItem';
|
|
5
5
|
import { handleTreeViewCheckChange, TreeViewCheckChangeSettings } from './handleTreeViewCheckChange';
|
|
6
6
|
import { TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor } from './TreeViewOperationDescriptors';
|
|
7
7
|
import { ItemRenderProps } from './ItemRenderProps';
|
|
8
8
|
import { TreeViewProps } from './TreeViewProps';
|
|
9
9
|
import { TreeViewDragClue } from './TreeViewDragClue';
|
|
10
|
-
import TreeViewDragAnalyzer from './TreeViewDragAnalyzer';
|
|
10
|
+
import { TreeViewDragAnalyzer } from './TreeViewDragAnalyzer';
|
|
11
11
|
import { TreeViewItem } from './TreeViewItem';
|
|
12
12
|
export { TreeViewItem, TreeView, processTreeViewItems, handleTreeViewCheckChange, TreeViewCheckChangeSettings, TreeViewItemClickEvent, TreeViewExpandChangeEvent, TreeViewCheckChangeEvent, TreeViewItemDragOverEvent, TreeViewItemDragStartEvent, TreeViewItemDragEndEvent, TreeViewOperationDescriptor, TreeViewOperationDescriptors, TreeViewCheckDescriptor, TreeViewProps, ItemRenderProps, TreeViewDragClue, moveTreeViewItem, TreeViewDragAnalyzer };
|
package/dist/npm/main.js
CHANGED
|
@@ -4,14 +4,14 @@ exports.TreeViewDragAnalyzer = exports.moveTreeViewItem = exports.TreeViewDragCl
|
|
|
4
4
|
var TreeView_1 = require("./TreeView");
|
|
5
5
|
Object.defineProperty(exports, "TreeView", { enumerable: true, get: function () { return TreeView_1.TreeView; } });
|
|
6
6
|
var processTreeViewItems_1 = require("./processTreeViewItems");
|
|
7
|
-
exports
|
|
7
|
+
Object.defineProperty(exports, "processTreeViewItems", { enumerable: true, get: function () { return processTreeViewItems_1.processTreeViewItems; } });
|
|
8
8
|
var moveTreeViewItem_1 = require("./moveTreeViewItem");
|
|
9
|
-
exports
|
|
9
|
+
Object.defineProperty(exports, "moveTreeViewItem", { enumerable: true, get: function () { return moveTreeViewItem_1.moveTreeViewItem; } });
|
|
10
10
|
var handleTreeViewCheckChange_1 = require("./handleTreeViewCheckChange");
|
|
11
11
|
Object.defineProperty(exports, "handleTreeViewCheckChange", { enumerable: true, get: function () { return handleTreeViewCheckChange_1.handleTreeViewCheckChange; } });
|
|
12
12
|
var TreeViewDragClue_1 = require("./TreeViewDragClue");
|
|
13
13
|
Object.defineProperty(exports, "TreeViewDragClue", { enumerable: true, get: function () { return TreeViewDragClue_1.TreeViewDragClue; } });
|
|
14
14
|
var TreeViewDragAnalyzer_1 = require("./TreeViewDragAnalyzer");
|
|
15
|
-
exports
|
|
15
|
+
Object.defineProperty(exports, "TreeViewDragAnalyzer", { enumerable: true, get: function () { return TreeViewDragAnalyzer_1.TreeViewDragAnalyzer; } });
|
|
16
16
|
var TreeViewItem_1 = require("./TreeViewItem");
|
|
17
17
|
Object.defineProperty(exports, "TreeViewItem", { enumerable: true, get: function () { return TreeViewItem_1.TreeViewItem; } });
|
|
@@ -1,109 +1,43 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* A helper function which moves a TreeView item in an immutable way.
|
|
3
3
|
*
|
|
4
|
-
* @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
|
|
5
|
-
* @param sourceData - The tree which contains the item that will be moved.
|
|
6
|
-
* @param operation - The specific move operation.
|
|
7
4
|
*
|
|
8
|
-
* The available options are:
|
|
9
|
-
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
10
|
-
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
11
|
-
* * `child`—Indicates that the source item will become a child of the target item.
|
|
12
|
-
* @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
|
|
13
|
-
* @param targetData - The tree which contains the target item.
|
|
14
|
-
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
15
|
-
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
16
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
17
|
-
* @returns - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
18
|
-
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
19
5
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* dragClue;
|
|
24
|
-
* state = { tree };
|
|
6
|
+
* #### Parameters
|
|
7
|
+
* ##### sourceItemHierarchicalIndex <span class='code'>string</span>
|
|
8
|
+
* The hierarchical index of the item that will be moved.
|
|
25
9
|
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* <div>
|
|
29
|
-
* <TreeView data={this.state.tree} draggable={true}
|
|
30
|
-
* onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
|
|
31
|
-
* <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
|
|
32
|
-
* </div>
|
|
33
|
-
* );
|
|
34
|
-
* }
|
|
10
|
+
* ##### sourceData <span class='code'>any[] | null | undefined</span>
|
|
11
|
+
* The tree which contains the item that will be moved.
|
|
35
12
|
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
* }
|
|
39
|
-
* onItemDragEnd = (event) => {
|
|
40
|
-
* this.dragClue.hide();
|
|
41
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
13
|
+
* ##### operation <span class='code'>"before" | "after" | "child"</span>
|
|
14
|
+
* The specific move operation.
|
|
42
15
|
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
* eventAnalyzer.getDropOperation(),
|
|
48
|
-
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
49
|
-
* );
|
|
16
|
+
* The available options are:
|
|
17
|
+
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
18
|
+
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
19
|
+
* * `child`—Indicates that the source item will become a child of the target item.
|
|
50
20
|
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
* }
|
|
54
|
-
* getClueClassName(event) {
|
|
55
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
56
|
-
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
21
|
+
* ##### targetItemHierarchicalIndex <span class='code'>string</span>
|
|
22
|
+
* The hierarchical index of the item next to which the source item will be moved.
|
|
57
23
|
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
*
|
|
61
|
-
*
|
|
62
|
-
* case 'before':
|
|
63
|
-
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
64
|
-
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
65
|
-
* case 'after':
|
|
66
|
-
* const siblings = getSiblings(itemIndex, this.state.tree);
|
|
67
|
-
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
24
|
+
* ##### targetData? <span class='code'>any[] | null</span>
|
|
25
|
+
* The tree which contains the target item.
|
|
26
|
+
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
27
|
+
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
68
28
|
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* break;
|
|
72
|
-
* }
|
|
73
|
-
* }
|
|
29
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
30
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
74
31
|
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
* function getSiblings(itemIndex, data) {
|
|
80
|
-
* let result = data;
|
|
81
|
-
*
|
|
82
|
-
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
83
|
-
* for (let i = 0; i < indices.length - 1; i++) {
|
|
84
|
-
* result = result[indices[i]].items;
|
|
85
|
-
* }
|
|
86
|
-
*
|
|
87
|
-
* return result;
|
|
88
|
-
* }
|
|
89
|
-
*
|
|
90
|
-
* const SEPARATOR = '_';
|
|
91
|
-
* const tree = [{
|
|
92
|
-
* text: 'Furniture', expanded: true, items: [
|
|
93
|
-
* { text: 'Tables & Chairs', expanded: true },
|
|
94
|
-
* { text: 'Sofas', expanded: true },
|
|
95
|
-
* { text: 'Occasional Furniture', expanded: true }]
|
|
96
|
-
* }, {
|
|
97
|
-
* text: 'Decor', expanded: true, items: [
|
|
98
|
-
* { text: 'Bed Linen', expanded: true },
|
|
99
|
-
* { text: 'Curtains & Blinds', expanded: true },
|
|
100
|
-
* { text: 'Carpets', expanded: true }]
|
|
101
|
-
* }];
|
|
102
|
-
*
|
|
103
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
104
|
-
* ```
|
|
32
|
+
* #### Returns
|
|
33
|
+
* <span class='code'>any[] | { sourceData: any[]; targetData: any[]; }</span> - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
34
|
+
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
105
35
|
*/
|
|
106
|
-
|
|
36
|
+
declare const moveTreeViewItem: (sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string) => any[] | {
|
|
107
37
|
sourceData: any[];
|
|
108
38
|
targetData: any[];
|
|
109
39
|
};
|
|
40
|
+
/**
|
|
41
|
+
* @hidden
|
|
42
|
+
*/
|
|
43
|
+
export { moveTreeViewItem };
|
|
@@ -1,114 +1,45 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.moveTreeViewItem = void 0;
|
|
3
4
|
var itemUtils_1 = require("./utils/itemUtils");
|
|
4
5
|
var itemIdUtils_1 = require("./utils/itemIdUtils");
|
|
5
6
|
var consts_1 = require("./utils/consts");
|
|
6
7
|
/**
|
|
7
8
|
* A helper function which moves a TreeView item in an immutable way.
|
|
8
9
|
*
|
|
9
|
-
* @param sourceItemHierarchicalIndex - The hierarchical index of the item that will be moved.
|
|
10
|
-
* @param sourceData - The tree which contains the item that will be moved.
|
|
11
|
-
* @param operation - The specific move operation.
|
|
12
10
|
*
|
|
13
|
-
* The available options are:
|
|
14
|
-
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
15
|
-
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
16
|
-
* * `child`—Indicates that the source item will become a child of the target item.
|
|
17
|
-
* @param targetItemHierarchicalIndex - The hierarchical index of the item next to which the source item will be moved.
|
|
18
|
-
* @param targetData - The tree which contains the target item.
|
|
19
|
-
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
20
|
-
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
21
|
-
* @param childrenField - The field that points to the dataItem sub items. Defaults to `items`.
|
|
22
|
-
* @returns - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
23
|
-
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
24
11
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* dragClue;
|
|
29
|
-
* state = { tree };
|
|
12
|
+
* #### Parameters
|
|
13
|
+
* ##### sourceItemHierarchicalIndex <span class='code'>string</span>
|
|
14
|
+
* The hierarchical index of the item that will be moved.
|
|
30
15
|
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* <div>
|
|
34
|
-
* <TreeView data={this.state.tree} draggable={true}
|
|
35
|
-
* onItemDragOver={this.onItemDragOver} onItemDragEnd={this.onItemDragEnd} />
|
|
36
|
-
* <TreeViewDragClue ref={dragClue => this.dragClue = dragClue} />
|
|
37
|
-
* </div>
|
|
38
|
-
* );
|
|
39
|
-
* }
|
|
16
|
+
* ##### sourceData <span class='code'>any[] | null | undefined</span>
|
|
17
|
+
* The tree which contains the item that will be moved.
|
|
40
18
|
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* }
|
|
44
|
-
* onItemDragEnd = (event) => {
|
|
45
|
-
* this.dragClue.hide();
|
|
46
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
19
|
+
* ##### operation <span class='code'>"before" | "after" | "child"</span>
|
|
20
|
+
* The specific move operation.
|
|
47
21
|
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
* eventAnalyzer.getDropOperation(),
|
|
53
|
-
* eventAnalyzer.destinationMeta.itemHierarchicalIndex,
|
|
54
|
-
* );
|
|
22
|
+
* The available options are:
|
|
23
|
+
* * `before`—Indicates that the source item will become the previous sibling of the target item.
|
|
24
|
+
* * `after`—Indicates that the source item will become the next sibling of the target item.
|
|
25
|
+
* * `child`—Indicates that the source item will become a child of the target item.
|
|
55
26
|
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* }
|
|
59
|
-
* getClueClassName(event) {
|
|
60
|
-
* const eventAnalyzer = new TreeViewDragAnalyzer(event).init();
|
|
61
|
-
* const itemIndex = eventAnalyzer.destinationMeta.itemHierarchicalIndex;
|
|
27
|
+
* ##### targetItemHierarchicalIndex <span class='code'>string</span>
|
|
28
|
+
* The hierarchical index of the item next to which the source item will be moved.
|
|
62
29
|
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
* case 'before':
|
|
68
|
-
* return itemIndex === '0' || itemIndex.endsWith(`${SEPARATOR}0`) ?
|
|
69
|
-
* 'k-i-insert-up' : 'k-i-insert-middle';
|
|
70
|
-
* case 'after':
|
|
71
|
-
* const siblings = getSiblings(itemIndex, this.state.tree);
|
|
72
|
-
* const lastIndex = Number(itemIndex.split(SEPARATOR).pop());
|
|
30
|
+
* ##### targetData? <span class='code'>any[] | null</span>
|
|
31
|
+
* The tree which contains the target item.
|
|
32
|
+
* If the argument is skipped, then the move operation will be executed within the same tree.
|
|
33
|
+
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
|
|
73
34
|
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
* break;
|
|
77
|
-
* }
|
|
78
|
-
* }
|
|
35
|
+
* ##### childrenField? <span class='code'>string</span>
|
|
36
|
+
* The field that points to the dataItem sub items. Defaults to `items`.
|
|
79
37
|
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
* function getSiblings(itemIndex, data) {
|
|
85
|
-
* let result = data;
|
|
86
|
-
*
|
|
87
|
-
* const indices = itemIndex.split(SEPARATOR).map(index => Number(index));
|
|
88
|
-
* for (let i = 0; i < indices.length - 1; i++) {
|
|
89
|
-
* result = result[indices[i]].items;
|
|
90
|
-
* }
|
|
91
|
-
*
|
|
92
|
-
* return result;
|
|
93
|
-
* }
|
|
94
|
-
*
|
|
95
|
-
* const SEPARATOR = '_';
|
|
96
|
-
* const tree = [{
|
|
97
|
-
* text: 'Furniture', expanded: true, items: [
|
|
98
|
-
* { text: 'Tables & Chairs', expanded: true },
|
|
99
|
-
* { text: 'Sofas', expanded: true },
|
|
100
|
-
* { text: 'Occasional Furniture', expanded: true }]
|
|
101
|
-
* }, {
|
|
102
|
-
* text: 'Decor', expanded: true, items: [
|
|
103
|
-
* { text: 'Bed Linen', expanded: true },
|
|
104
|
-
* { text: 'Curtains & Blinds', expanded: true },
|
|
105
|
-
* { text: 'Carpets', expanded: true }]
|
|
106
|
-
* }];
|
|
107
|
-
*
|
|
108
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
109
|
-
* ```
|
|
38
|
+
* #### Returns
|
|
39
|
+
* <span class='code'>any[] | { sourceData: any[]; targetData: any[]; }</span> - The updated copies of the `sourceData` and `targetData` input arguments.
|
|
40
|
+
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
|
|
110
41
|
*/
|
|
111
|
-
function
|
|
42
|
+
var moveTreeViewItem = function (sourceItemHierarchicalIndex, sourceData, operation, targetItemHierarchicalIndex, targetData, childrenField) {
|
|
112
43
|
var subItemsField = childrenField || consts_1.CHILDREN_FIELD;
|
|
113
44
|
if (!validateInput()) {
|
|
114
45
|
return prepareInputDataForReturn();
|
|
@@ -155,5 +86,5 @@ function moveTreeViewItem(sourceItemHierarchicalIndex, sourceData, operation, ta
|
|
|
155
86
|
}
|
|
156
87
|
return true;
|
|
157
88
|
}
|
|
158
|
-
}
|
|
159
|
-
exports.
|
|
89
|
+
};
|
|
90
|
+
exports.moveTreeViewItem = moveTreeViewItem;
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-vue-treeview',
|
|
9
9
|
productName: 'Kendo UI for Vue',
|
|
10
10
|
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1655213695,
|
|
12
12
|
version: '',
|
|
13
13
|
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'
|
|
14
14
|
};
|
|
@@ -1,51 +1,21 @@
|
|
|
1
1
|
import { TreeViewOperationDescriptors } from './TreeViewOperationDescriptors';
|
|
2
2
|
/**
|
|
3
3
|
* A helper function which applies the specified operation descriptors to the data.
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
|
|
5
|
+
* [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
|
|
6
|
+
* [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
|
|
7
7
|
*
|
|
8
|
-
* @param data - The data that will be processed.
|
|
9
|
-
* @param operations - The operation descriptors that will be applied to the data.
|
|
10
|
-
* @returns - The processed copy of the input data.
|
|
11
8
|
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```jsx
|
|
14
|
-
* class App extends React.Component {
|
|
15
|
-
* state = { items: tree, expand: [], select: [], check: [] };
|
|
16
|
-
* render() {
|
|
17
|
-
* const { expand, select, check } = this.state;
|
|
18
|
-
* return (
|
|
19
|
-
* <TreeView
|
|
20
|
-
* data={processTreeViewItems(this.state.items, { expand, select, check })}
|
|
21
|
-
* expandIcons={true} onExpandChange={this.onExpandChange} checkboxes={true}
|
|
22
|
-
* onCheckChange={event => this.setState({ check: [ event.itemHierarchicalIndex ] })}
|
|
23
|
-
* onItemClick={event => this.setState({ select: [ event.itemHierarchicalIndex ] })}
|
|
24
|
-
* />
|
|
25
|
-
* );
|
|
26
|
-
* }
|
|
27
|
-
* onExpandChange = (event) => {
|
|
28
|
-
* let expand = this.state.expand.slice();
|
|
29
|
-
* const index = expand.indexOf(event.itemHierarchicalIndex);
|
|
30
|
-
* index === -1 ? expand.push(event.itemHierarchicalIndex) : expand.splice(index, 1);
|
|
31
|
-
* this.setState({ expand });
|
|
32
|
-
* }
|
|
33
|
-
* }
|
|
34
9
|
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
* { text: 'Item1.1' },
|
|
39
|
-
* { text: 'Item1.2' },
|
|
40
|
-
* { text: 'Item1.3', items: [{ text: 'Item1.3.1' }] }]
|
|
41
|
-
* }, {
|
|
42
|
-
* text: 'Item2', disabled: true,
|
|
43
|
-
* items: [{ text: 'Item2.1' }, { text: 'Item2.2' }, { text: 'Item2.3' }]
|
|
44
|
-
* }, {
|
|
45
|
-
* text: 'Item3'
|
|
46
|
-
* }];
|
|
10
|
+
* #### Parameters
|
|
11
|
+
* ##### data <span class='code'>any[] | null | undefined</span>
|
|
12
|
+
* The data that will be processed.
|
|
47
13
|
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
14
|
+
* ##### operations <span class='code'>[TreeViewOperationDescriptors]({% slug api_treeview_treeviewoperationdescriptors %})</span>
|
|
15
|
+
* The operation descriptors that will be applied to the data.
|
|
16
|
+
*
|
|
17
|
+
* #### Returns
|
|
18
|
+
* <span class='code'>any[]</span> - The processed copy of the input data.
|
|
50
19
|
*/
|
|
51
|
-
|
|
20
|
+
declare const processTreeViewItems: (data: any[] | null | undefined, operations: TreeViewOperationDescriptors) => any[];
|
|
21
|
+
export { processTreeViewItems };
|