@progress/kendo-vue-treeview 5.3.0-dev.202410141143 → 5.3.0-develop.2
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/README.md +26 -35
- package/TreeView.js +8 -0
- package/TreeView.mjs +294 -0
- package/TreeViewDragAnalyzer.js +8 -0
- package/TreeViewDragAnalyzer.mjs +74 -0
- package/TreeViewDragClue.js +8 -0
- package/TreeViewDragClue.mjs +56 -0
- package/TreeViewItem.js +8 -0
- package/TreeViewItem.mjs +271 -0
- package/dist/cdn/js/kendo-vue-treeview.js +8 -1
- package/handleTreeViewCheckChange.js +8 -0
- package/handleTreeViewCheckChange.mjs +64 -0
- package/index.d.mts +950 -0
- package/index.d.ts +950 -0
- package/index.js +8 -0
- package/index.mjs +23 -0
- package/moveTreeViewItem.js +8 -0
- package/moveTreeViewItem.mjs +45 -0
- package/package-metadata.js +8 -0
- package/package-metadata.mjs +18 -0
- package/package.json +25 -46
- package/processTreeViewItems.js +8 -0
- package/processTreeViewItems.mjs +90 -0
- package/utils/FieldsService.js +8 -0
- package/utils/FieldsService.mjs +59 -0
- package/utils/SortedPublicItemIds.js +8 -0
- package/utils/SortedPublicItemIds.mjs +26 -0
- package/utils/consts.js +8 -0
- package/utils/consts.mjs +20 -0
- package/utils/getItemIdUponKeyboardNavigation.js +8 -0
- package/utils/getItemIdUponKeyboardNavigation.mjs +65 -0
- package/utils/itemIdUtils.js +8 -0
- package/utils/itemIdUtils.mjs +82 -0
- package/utils/itemUtils.js +8 -0
- package/utils/itemUtils.mjs +140 -0
- package/utils/misc.js +8 -0
- package/utils/misc.mjs +21 -0
- package/dist/es/ItemRenderProps.d.ts +0 -13
- package/dist/es/ItemRenderProps.js +0 -2
- package/dist/es/TreeView.d.ts +0 -116
- package/dist/es/TreeView.js +0 -450
- package/dist/es/TreeViewDragAnalyzer.d.ts +0 -63
- package/dist/es/TreeViewDragAnalyzer.js +0 -111
- package/dist/es/TreeViewDragClue.d.ts +0 -78
- package/dist/es/TreeViewDragClue.js +0 -116
- package/dist/es/TreeViewItem.d.ts +0 -85
- package/dist/es/TreeViewItem.js +0 -415
- package/dist/es/TreeViewOperationDescriptors.d.ts +0 -76
- package/dist/es/TreeViewOperationDescriptors.js +0 -2
- package/dist/es/TreeViewProps.d.ts +0 -126
- package/dist/es/TreeViewProps.js +0 -1
- package/dist/es/additionalTypes.ts +0 -21
- package/dist/es/events.d.ts +0 -143
- package/dist/es/events.js +0 -2
- package/dist/es/handleTreeViewCheckChange.d.ts +0 -49
- package/dist/es/handleTreeViewCheckChange.js +0 -177
- package/dist/es/main.d.ts +0 -12
- package/dist/es/main.js +0 -8
- package/dist/es/moveTreeViewItem.d.ts +0 -46
- package/dist/es/moveTreeViewItem.js +0 -93
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/processTreeViewItems.d.ts +0 -24
- package/dist/es/processTreeViewItems.js +0 -139
- package/dist/es/utils/FieldsService.d.ts +0 -26
- package/dist/es/utils/FieldsService.js +0 -50
- package/dist/es/utils/SortedPublicItemIds.d.ts +0 -8
- package/dist/es/utils/SortedPublicItemIds.js +0 -24
- package/dist/es/utils/consts.d.ts +0 -40
- package/dist/es/utils/consts.js +0 -40
- package/dist/es/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
- package/dist/es/utils/getItemIdUponKeyboardNavigation.js +0 -77
- package/dist/es/utils/itemIdUtils.d.ts +0 -60
- package/dist/es/utils/itemIdUtils.js +0 -117
- package/dist/es/utils/itemUtils.d.ts +0 -45
- package/dist/es/utils/itemUtils.js +0 -191
- package/dist/es/utils/misc.d.ts +0 -9
- package/dist/es/utils/misc.js +0 -17
- package/dist/esm/ItemRenderProps.d.ts +0 -13
- package/dist/esm/ItemRenderProps.js +0 -2
- package/dist/esm/TreeView.d.ts +0 -116
- package/dist/esm/TreeView.js +0 -450
- package/dist/esm/TreeViewDragAnalyzer.d.ts +0 -63
- package/dist/esm/TreeViewDragAnalyzer.js +0 -111
- package/dist/esm/TreeViewDragClue.d.ts +0 -78
- package/dist/esm/TreeViewDragClue.js +0 -116
- package/dist/esm/TreeViewItem.d.ts +0 -85
- package/dist/esm/TreeViewItem.js +0 -415
- package/dist/esm/TreeViewOperationDescriptors.d.ts +0 -76
- package/dist/esm/TreeViewOperationDescriptors.js +0 -2
- package/dist/esm/TreeViewProps.d.ts +0 -126
- package/dist/esm/TreeViewProps.js +0 -1
- package/dist/esm/additionalTypes.ts +0 -21
- package/dist/esm/events.d.ts +0 -143
- package/dist/esm/events.js +0 -2
- package/dist/esm/handleTreeViewCheckChange.d.ts +0 -49
- package/dist/esm/handleTreeViewCheckChange.js +0 -177
- package/dist/esm/main.d.ts +0 -12
- package/dist/esm/main.js +0 -8
- package/dist/esm/moveTreeViewItem.d.ts +0 -46
- package/dist/esm/moveTreeViewItem.js +0 -93
- package/dist/esm/package-metadata.d.ts +0 -5
- package/dist/esm/package-metadata.js +0 -11
- package/dist/esm/package.json +0 -3
- package/dist/esm/processTreeViewItems.d.ts +0 -24
- package/dist/esm/processTreeViewItems.js +0 -139
- package/dist/esm/utils/FieldsService.d.ts +0 -26
- package/dist/esm/utils/FieldsService.js +0 -50
- package/dist/esm/utils/SortedPublicItemIds.d.ts +0 -8
- package/dist/esm/utils/SortedPublicItemIds.js +0 -24
- package/dist/esm/utils/consts.d.ts +0 -40
- package/dist/esm/utils/consts.js +0 -40
- package/dist/esm/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
- package/dist/esm/utils/getItemIdUponKeyboardNavigation.js +0 -77
- package/dist/esm/utils/itemIdUtils.d.ts +0 -60
- package/dist/esm/utils/itemIdUtils.js +0 -117
- package/dist/esm/utils/itemUtils.d.ts +0 -45
- package/dist/esm/utils/itemUtils.js +0 -191
- package/dist/esm/utils/misc.d.ts +0 -9
- package/dist/esm/utils/misc.js +0 -17
- package/dist/npm/ItemRenderProps.d.ts +0 -13
- package/dist/npm/ItemRenderProps.js +0 -3
- package/dist/npm/TreeView.d.ts +0 -116
- package/dist/npm/TreeView.js +0 -457
- package/dist/npm/TreeViewDragAnalyzer.d.ts +0 -63
- package/dist/npm/TreeViewDragAnalyzer.js +0 -114
- package/dist/npm/TreeViewDragClue.d.ts +0 -78
- package/dist/npm/TreeViewDragClue.js +0 -123
- package/dist/npm/TreeViewItem.d.ts +0 -85
- package/dist/npm/TreeViewItem.js +0 -422
- package/dist/npm/TreeViewOperationDescriptors.d.ts +0 -76
- package/dist/npm/TreeViewOperationDescriptors.js +0 -3
- package/dist/npm/TreeViewProps.d.ts +0 -126
- package/dist/npm/TreeViewProps.js +0 -2
- package/dist/npm/additionalTypes.ts +0 -21
- package/dist/npm/events.d.ts +0 -143
- package/dist/npm/events.js +0 -3
- package/dist/npm/handleTreeViewCheckChange.d.ts +0 -49
- package/dist/npm/handleTreeViewCheckChange.js +0 -181
- package/dist/npm/main.d.ts +0 -12
- package/dist/npm/main.js +0 -17
- package/dist/npm/moveTreeViewItem.d.ts +0 -46
- package/dist/npm/moveTreeViewItem.js +0 -93
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/processTreeViewItems.d.ts +0 -24
- package/dist/npm/processTreeViewItems.js +0 -142
- package/dist/npm/utils/FieldsService.d.ts +0 -26
- package/dist/npm/utils/FieldsService.js +0 -52
- package/dist/npm/utils/SortedPublicItemIds.d.ts +0 -8
- package/dist/npm/utils/SortedPublicItemIds.js +0 -26
- package/dist/npm/utils/consts.d.ts +0 -40
- package/dist/npm/utils/consts.js +0 -43
- package/dist/npm/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
- package/dist/npm/utils/getItemIdUponKeyboardNavigation.js +0 -80
- package/dist/npm/utils/itemIdUtils.d.ts +0 -60
- package/dist/npm/utils/itemIdUtils.js +0 -132
- package/dist/npm/utils/itemUtils.d.ts +0 -45
- package/dist/npm/utils/itemUtils.js +0 -205
- package/dist/npm/utils/misc.d.ts +0 -9
- package/dist/npm/utils/misc.js +0 -22
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
var __assign = this && this.__assign || function () {
|
|
2
|
-
__assign = Object.assign || function (t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) {
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
// @ts-ignore
|
|
14
|
-
import * as Vue from 'vue';
|
|
15
|
-
var allVue = Vue;
|
|
16
|
-
var gh = allVue.h;
|
|
17
|
-
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
18
|
-
import { Icon, getIconName } from '@progress/kendo-vue-common';
|
|
19
|
-
import { cancelIcon } from '@progress/kendo-svg-icons';
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*/
|
|
23
|
-
var TreeViewDragClueVue2 = {
|
|
24
|
-
name: 'KendoTreeViewDragClue',
|
|
25
|
-
props: {},
|
|
26
|
-
data: function data() {
|
|
27
|
-
return {
|
|
28
|
-
visible: false,
|
|
29
|
-
top: 0,
|
|
30
|
-
left: 0,
|
|
31
|
-
text: '',
|
|
32
|
-
operationIconName: 'cancel',
|
|
33
|
-
operationSvg: cancelIcon
|
|
34
|
-
};
|
|
35
|
-
},
|
|
36
|
-
// @ts-ignore
|
|
37
|
-
setup: !isV3 ? undefined : function () {
|
|
38
|
-
var v3 = !!isV3;
|
|
39
|
-
return {
|
|
40
|
-
v3: v3
|
|
41
|
-
};
|
|
42
|
-
},
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
render: function render(createElement) {
|
|
45
|
-
var h = gh || createElement;
|
|
46
|
-
var defaultStyle = {
|
|
47
|
-
display: 'block',
|
|
48
|
-
position: 'absolute',
|
|
49
|
-
zIndex: 20000,
|
|
50
|
-
padding: '4px 6px'
|
|
51
|
-
};
|
|
52
|
-
var dynamicStyle = {
|
|
53
|
-
top: this.top + 'px',
|
|
54
|
-
left: this.left + 'px'
|
|
55
|
-
};
|
|
56
|
-
return this.visible && h("div", {
|
|
57
|
-
"class": "k-header k-drag-clue",
|
|
58
|
-
style: __assign(__assign({}, defaultStyle), dynamicStyle)
|
|
59
|
-
}, [h(Icon, {
|
|
60
|
-
name: getIconName(this.operationIconName),
|
|
61
|
-
attrs: this.v3 ? undefined : {
|
|
62
|
-
name: getIconName(this.operationIconName),
|
|
63
|
-
icon: this.operationSvg
|
|
64
|
-
},
|
|
65
|
-
icon: this.operationSvg,
|
|
66
|
-
"class": 'k-drag-status'
|
|
67
|
-
}), this.text]);
|
|
68
|
-
},
|
|
69
|
-
methods: {
|
|
70
|
-
show: function show(top, left, text, operationIconName) {
|
|
71
|
-
this.visible = true;
|
|
72
|
-
this.top = top;
|
|
73
|
-
this.left = left;
|
|
74
|
-
this.text = text;
|
|
75
|
-
if (typeof operationIconName === 'string') {
|
|
76
|
-
this.operationIconName = operationIconName;
|
|
77
|
-
} else {
|
|
78
|
-
this.operationSvg = operationIconName;
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
hide: function hide() {
|
|
82
|
-
this.visible = false;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
|
|
88
|
-
*
|
|
89
|
-
* {% meta height:400 %}
|
|
90
|
-
* {% embed_file drag/single/main.vue preview %}
|
|
91
|
-
* {% embed_file drag/single/main.js %}
|
|
92
|
-
* {% endmeta %}
|
|
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
|
-
var TreeViewDragClue = TreeViewDragClueVue2;
|
|
116
|
-
export { TreeViewDragClue, TreeViewDragClueVue2 };
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { DefineComponent } from './additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
3
|
-
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
|
-
declare type DefaultMethods<V> = {
|
|
5
|
-
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
|
-
};
|
|
7
|
-
import FieldsService from './utils/FieldsService';
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
export interface TreeViewItemProps {
|
|
12
|
-
item: any;
|
|
13
|
-
itemId: string;
|
|
14
|
-
treeGuid: string;
|
|
15
|
-
animate: boolean;
|
|
16
|
-
focusedItemId?: string;
|
|
17
|
-
tabbableItemId: string;
|
|
18
|
-
fieldsService: FieldsService;
|
|
19
|
-
itemUI?: any;
|
|
20
|
-
ariaMultiSelectable: boolean;
|
|
21
|
-
onItemClick?: any;
|
|
22
|
-
expandIcons?: boolean;
|
|
23
|
-
onExpandChange?: any;
|
|
24
|
-
onCheckChange?: any;
|
|
25
|
-
checkboxes?: boolean;
|
|
26
|
-
onFocusDomElNeeded?: any;
|
|
27
|
-
draggable?: boolean;
|
|
28
|
-
onPress?: any;
|
|
29
|
-
onDrag?: any;
|
|
30
|
-
onRelease?: any;
|
|
31
|
-
size?: null | 'small' | 'medium' | 'large' | string;
|
|
32
|
-
/**
|
|
33
|
-
* Currently for internal usage only! Replicates the current behavior which disables all children
|
|
34
|
-
* if the parent is disabled, which was previously achieved only though the kendo-themes,
|
|
35
|
-
* but due to rendering changes had to be replicated programmatically!
|
|
36
|
-
*
|
|
37
|
-
* @hidden
|
|
38
|
-
*/
|
|
39
|
-
disabled?: boolean;
|
|
40
|
-
ariaLevel: number;
|
|
41
|
-
isRtl?: boolean;
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* @hidden
|
|
45
|
-
*/
|
|
46
|
-
export interface TreeViewItemState {
|
|
47
|
-
checkboxElement: any;
|
|
48
|
-
itemGuid: any;
|
|
49
|
-
}
|
|
50
|
-
/**
|
|
51
|
-
* @hidden
|
|
52
|
-
*/
|
|
53
|
-
export interface TreeViewItemComputed {
|
|
54
|
-
[key: string]: any;
|
|
55
|
-
fieldsSvc: any;
|
|
56
|
-
currentTabIndex: number;
|
|
57
|
-
ariaExpanded?: boolean;
|
|
58
|
-
ariaChecked?: string | boolean;
|
|
59
|
-
ariaSelected?: boolean;
|
|
60
|
-
}
|
|
61
|
-
/**
|
|
62
|
-
* @hidden
|
|
63
|
-
*/
|
|
64
|
-
export interface TreeViewItemMethods {
|
|
65
|
-
[key: string]: any;
|
|
66
|
-
}
|
|
67
|
-
/**
|
|
68
|
-
* @hidden
|
|
69
|
-
*/
|
|
70
|
-
export interface TreeViewItemData {
|
|
71
|
-
}
|
|
72
|
-
/**
|
|
73
|
-
* @hidden
|
|
74
|
-
*/
|
|
75
|
-
export interface TreeViewItemAll extends Vue, TreeViewItemMethods, TreeViewItemData, TreeViewItemComputed, TreeViewItemState {
|
|
76
|
-
}
|
|
77
|
-
/**
|
|
78
|
-
* @hidden
|
|
79
|
-
*/
|
|
80
|
-
declare let TreeViewItemVue2: ComponentOptions<TreeViewItemAll, DefaultData<TreeViewItemData>, DefaultMethods<TreeViewItemAll>, TreeViewItemComputed, RecordPropsDefinition<TreeViewItemProps>>;
|
|
81
|
-
/**
|
|
82
|
-
* @hidden
|
|
83
|
-
*/
|
|
84
|
-
declare const TreeViewItem: DefineComponent<TreeViewItemProps, any, TreeViewItemData, TreeViewItemComputed, TreeViewItemMethods, {}, {}, {}, string, TreeViewItemProps, TreeViewItemProps, {}>;
|
|
85
|
-
export { TreeViewItem, TreeViewItemVue2 };
|
package/dist/es/TreeViewItem.js
DELETED
|
@@ -1,415 +0,0 @@
|
|
|
1
|
-
var __assign = this && this.__assign || function () {
|
|
2
|
-
__assign = Object.assign || function (t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) {
|
|
6
|
-
if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
// @ts-ignore
|
|
14
|
-
import * as Vue from 'vue';
|
|
15
|
-
var allVue = Vue;
|
|
16
|
-
var gh = allVue.h;
|
|
17
|
-
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
18
|
-
import { classNames, guid, Draggable, kendoThemeMaps, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
|
|
19
|
-
import { createId } from './utils/itemIdUtils';
|
|
20
|
-
import { isItemExpandedAndWithChildren, hasChildren } from './utils/itemUtils';
|
|
21
|
-
import { Reveal } from '@progress/kendo-vue-animation';
|
|
22
|
-
import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
|
|
23
|
-
import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
|
|
24
|
-
var sizeMap = kendoThemeMaps.sizeMap;
|
|
25
|
-
/**
|
|
26
|
-
* @hidden
|
|
27
|
-
*/
|
|
28
|
-
var TreeViewItemVue2 = {
|
|
29
|
-
name: 'KendoTreeViewItem',
|
|
30
|
-
props: {
|
|
31
|
-
item: Object,
|
|
32
|
-
itemId: String,
|
|
33
|
-
treeGuid: String,
|
|
34
|
-
animate: Boolean,
|
|
35
|
-
focusedItemId: String,
|
|
36
|
-
tabbableItemId: String,
|
|
37
|
-
fieldsService: Object,
|
|
38
|
-
itemUI: Object,
|
|
39
|
-
ariaMultiSelectable: Boolean,
|
|
40
|
-
expandIcons: Boolean,
|
|
41
|
-
checkboxes: Boolean,
|
|
42
|
-
onFocusDomElNeeded: Object,
|
|
43
|
-
draggable: Boolean,
|
|
44
|
-
isRtl: Boolean,
|
|
45
|
-
size: {
|
|
46
|
-
type: String,
|
|
47
|
-
default: 'medium',
|
|
48
|
-
validator: function validator(value) {
|
|
49
|
-
return [null, 'small', 'medium', 'large'].includes(value);
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
disabled: Boolean,
|
|
53
|
-
ariaLevel: Number
|
|
54
|
-
},
|
|
55
|
-
computed: {
|
|
56
|
-
fieldsSvc: function fieldsSvc() {
|
|
57
|
-
return this.$props.fieldsService;
|
|
58
|
-
},
|
|
59
|
-
currentTabIndex: function currentTabIndex() {
|
|
60
|
-
return (this.$props.focusedItemId || this.$props.tabbableItemId) === this.itemId ? 0 : -1;
|
|
61
|
-
},
|
|
62
|
-
ariaExpanded: function ariaExpanded() {
|
|
63
|
-
return this.fieldsSvc.hasChildren(this.item) || hasChildren(this.item, this.fieldsSvc.getChildrenField()) ? Boolean(this.fieldsSvc.expanded(this.item)) : undefined;
|
|
64
|
-
},
|
|
65
|
-
ariaChecked: function ariaChecked() {
|
|
66
|
-
if (this.$props.checkboxes) {
|
|
67
|
-
if (this.fieldsSvc.checked(this.item)) {
|
|
68
|
-
return 'true';
|
|
69
|
-
} else {
|
|
70
|
-
return this.fieldsSvc.checkIndeterminate(this.item) ? 'mixed' : 'false';
|
|
71
|
-
}
|
|
72
|
-
} else {
|
|
73
|
-
return undefined;
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
ariaSelected: function ariaSelected() {
|
|
77
|
-
if (this.fieldsSvc.selected(this.item)) {
|
|
78
|
-
return true;
|
|
79
|
-
} else if (this.$props.ariaMultiSelectable) {
|
|
80
|
-
return this.computedDisabled ? undefined : false;
|
|
81
|
-
} else {
|
|
82
|
-
return undefined;
|
|
83
|
-
}
|
|
84
|
-
},
|
|
85
|
-
computedDisabled: function computedDisabled() {
|
|
86
|
-
var itemDisabled = this.fieldsSvc.disabled(this.item);
|
|
87
|
-
return itemDisabled !== undefined ? itemDisabled : this.disabled;
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
|
-
created: function created() {
|
|
91
|
-
this.itemGuid = guid();
|
|
92
|
-
this.prevFocusedItemId = this.focusedItemId;
|
|
93
|
-
this.prevFieldsService = this.fieldsService;
|
|
94
|
-
this.prevItem = this.item;
|
|
95
|
-
},
|
|
96
|
-
data: function data() {
|
|
97
|
-
return {
|
|
98
|
-
isMounted: false
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
watch: {
|
|
102
|
-
focusedItemId: function focusedItemId(_, oldValue) {
|
|
103
|
-
this.prevFocusedItemId = oldValue;
|
|
104
|
-
},
|
|
105
|
-
fieldsService: function fieldsService(_, oldValue) {
|
|
106
|
-
this.prevFieldsService = oldValue;
|
|
107
|
-
},
|
|
108
|
-
item: function item(_, oldValue) {
|
|
109
|
-
this.prevItem = oldValue;
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
mounted: function mounted() {
|
|
113
|
-
var focusedItemId = this.$props.focusedItemId;
|
|
114
|
-
var currentItemId = this.itemId;
|
|
115
|
-
if (focusedItemId && focusedItemId === currentItemId) {
|
|
116
|
-
this.$emit('focusdomelneeded', this.$el);
|
|
117
|
-
}
|
|
118
|
-
this.checkboxElement = getRef(this, 'checkboxElement');
|
|
119
|
-
if (this.checkboxElement) {
|
|
120
|
-
this.checkboxElement.indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
|
|
121
|
-
}
|
|
122
|
-
this.assignDraggableMeta(this.$refs.treemid);
|
|
123
|
-
this.isMounted = true;
|
|
124
|
-
},
|
|
125
|
-
updated: function updated() {
|
|
126
|
-
var focusedItemId = this.$props.focusedItemId;
|
|
127
|
-
if (focusedItemId && focusedItemId !== this.prevFocusedItemId && focusedItemId === this.itemId) {
|
|
128
|
-
this.$emit('focusdomelneeded', this.$el);
|
|
129
|
-
}
|
|
130
|
-
this.checkboxElement = getRef(this, 'checkboxElement');
|
|
131
|
-
if (this.checkboxElement) {
|
|
132
|
-
var indeterminate = this.fieldsSvc.checkIndeterminate(this.item);
|
|
133
|
-
if (indeterminate !== this.prevFieldsService.checkIndeterminate(this.prevItem)) {
|
|
134
|
-
this.checkboxElement.indeterminate = indeterminate;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
this.assignDraggableMeta(this.$refs.treemid);
|
|
138
|
-
},
|
|
139
|
-
// @ts-ignore
|
|
140
|
-
setup: !isV3 ? undefined : function () {
|
|
141
|
-
var v3 = !!isV3;
|
|
142
|
-
return {
|
|
143
|
-
v3: v3
|
|
144
|
-
};
|
|
145
|
-
},
|
|
146
|
-
// @ts-ignore
|
|
147
|
-
render: function render(createElement) {
|
|
148
|
-
var _this2 = this;
|
|
149
|
-
var _this = this;
|
|
150
|
-
var h = gh || createElement;
|
|
151
|
-
var subitems = function subitems() {
|
|
152
|
-
return isItemExpandedAndWithChildren(this.item, this.fieldsSvc) ? h("ul", {
|
|
153
|
-
"class": "k-treeview-group",
|
|
154
|
-
role: "group",
|
|
155
|
-
attrs: this.v3 ? undefined : {
|
|
156
|
-
role: "group"
|
|
157
|
-
}
|
|
158
|
-
}, [this.fieldsSvc.children(this.item).map(function (item, index) {
|
|
159
|
-
return h(TreeViewItem, {
|
|
160
|
-
item: item,
|
|
161
|
-
attrs: this.v3 ? undefined : {
|
|
162
|
-
item: item,
|
|
163
|
-
itemId: createId(index, this.itemId),
|
|
164
|
-
treeGuid: this.$props.treeGuid,
|
|
165
|
-
animate: this.$props.animate,
|
|
166
|
-
focusedItemId: this.$props.focusedItemId,
|
|
167
|
-
tabbableItemId: this.$props.tabbableItemId,
|
|
168
|
-
fieldsService: this.$props.fieldsService,
|
|
169
|
-
itemUI: this.$props.itemUI,
|
|
170
|
-
checkboxes: this.$props.checkboxes,
|
|
171
|
-
ariaMultiSelectable: this.$props.ariaMultiSelectable,
|
|
172
|
-
ariaLevel: this.$props.ariaLevel + 1,
|
|
173
|
-
draggable: this.$props.draggable,
|
|
174
|
-
expandIcons: this.$props.expandIcons,
|
|
175
|
-
size: this.$props.size,
|
|
176
|
-
disabled: this.computedDisabled,
|
|
177
|
-
isRtl: this.$props.isRtl
|
|
178
|
-
},
|
|
179
|
-
itemId: createId(index, this.itemId),
|
|
180
|
-
treeGuid: this.$props.treeGuid,
|
|
181
|
-
animate: this.$props.animate,
|
|
182
|
-
focusedItemId: this.$props.focusedItemId,
|
|
183
|
-
tabbableItemId: this.$props.tabbableItemId,
|
|
184
|
-
fieldsService: this.$props.fieldsService,
|
|
185
|
-
itemUI: this.$props.itemUI,
|
|
186
|
-
checkboxes: this.$props.checkboxes,
|
|
187
|
-
ariaMultiSelectable: this.$props.ariaMultiSelectable,
|
|
188
|
-
ariaLevel: this.$props.ariaLevel + 1,
|
|
189
|
-
onItemclick: this.handleItemClick,
|
|
190
|
-
on: this.v3 ? undefined : {
|
|
191
|
-
"itemclick": this.handleItemClick,
|
|
192
|
-
"focusdomelneeded": this.handleFocusDomElNeeded,
|
|
193
|
-
"press": this.handlePress,
|
|
194
|
-
"drag": this.handleDrag,
|
|
195
|
-
"release": this.handleRelease,
|
|
196
|
-
"expandchange": this.handleExpandChange,
|
|
197
|
-
"checkchange": this.handleCheckChange
|
|
198
|
-
},
|
|
199
|
-
onFocusdomelneeded: this.handleFocusDomElNeeded,
|
|
200
|
-
draggable: this.$props.draggable,
|
|
201
|
-
onPress: this.handlePress,
|
|
202
|
-
onDrag: this.handleDrag,
|
|
203
|
-
onRelease: this.handleRelease,
|
|
204
|
-
expandIcons: this.$props.expandIcons,
|
|
205
|
-
onExpandchange: this.handleExpandChange,
|
|
206
|
-
onCheckchange: this.handleCheckChange,
|
|
207
|
-
key: index,
|
|
208
|
-
size: this.$props.size,
|
|
209
|
-
disabled: this.computedDisabled,
|
|
210
|
-
isRtl: this.$props.isRtl
|
|
211
|
-
});
|
|
212
|
-
}, this)]) : undefined;
|
|
213
|
-
};
|
|
214
|
-
var renderExpandIcon = function renderExpandIcon() {
|
|
215
|
-
var renderExpand = this.$props.expandIcons && (
|
|
216
|
-
// If it is explicitly said that the item has children (even not loaded yet)
|
|
217
|
-
// or if the item actually has children, then render the icon.
|
|
218
|
-
this.fieldsSvc.hasChildren(this.item) || hasChildren(this.item, this.fieldsSvc.getChildrenField()));
|
|
219
|
-
return renderExpand && h("span", {
|
|
220
|
-
"class": classNames('k-treeview-toggle', {
|
|
221
|
-
'k-disabled': this.computedDisabled
|
|
222
|
-
})
|
|
223
|
-
}, [h(Icon, {
|
|
224
|
-
name: this.getIconClassName(),
|
|
225
|
-
attrs: this.v3 ? undefined : {
|
|
226
|
-
name: this.getIconClassName(),
|
|
227
|
-
icon: this.getIconSVG()
|
|
228
|
-
},
|
|
229
|
-
icon: this.getIconSVG(),
|
|
230
|
-
onClick: this.handleExpandChange,
|
|
231
|
-
on: this.v3 ? undefined : {
|
|
232
|
-
"click": this.handleExpandChange
|
|
233
|
-
}
|
|
234
|
-
})]);
|
|
235
|
-
};
|
|
236
|
-
var renderCheckbox = function renderCheckbox() {
|
|
237
|
-
var _a;
|
|
238
|
-
if (this.$props.checkboxes) {
|
|
239
|
-
var size = this.$props.size;
|
|
240
|
-
return h("div", {
|
|
241
|
-
"class": "k-checkbox-wrap",
|
|
242
|
-
role: "presentation",
|
|
243
|
-
attrs: this.v3 ? undefined : {
|
|
244
|
-
role: "presentation"
|
|
245
|
-
}
|
|
246
|
-
}, [h("input", {
|
|
247
|
-
type: "checkbox",
|
|
248
|
-
attrs: this.v3 ? undefined : {
|
|
249
|
-
type: "checkbox",
|
|
250
|
-
"aria-label": this.item.text,
|
|
251
|
-
id: this.itemGuid,
|
|
252
|
-
tabindex: -1
|
|
253
|
-
},
|
|
254
|
-
"class": classNames('k-checkbox k-rounded-md', (_a = {}, _a["k-checkbox-".concat(sizeMap[size] || size)] = size, _a['k-disabled'] = this.computedDisabled, _a)),
|
|
255
|
-
"aria-label": this.item.text,
|
|
256
|
-
checked: this.v3 ? Boolean(this.fieldsSvc.checked(this.item)) : null,
|
|
257
|
-
domProps: this.v3 ? undefined : {
|
|
258
|
-
"checked": Boolean(this.fieldsSvc.checked(this.item))
|
|
259
|
-
},
|
|
260
|
-
id: this.itemGuid,
|
|
261
|
-
tabindex: -1,
|
|
262
|
-
onChange: this.handleCheckChange,
|
|
263
|
-
on: this.v3 ? undefined : {
|
|
264
|
-
"change": this.handleCheckChange
|
|
265
|
-
},
|
|
266
|
-
ref: setRef(this, 'checkboxElement')
|
|
267
|
-
}), h("label", {
|
|
268
|
-
"class": "k-checkbox-label",
|
|
269
|
-
"for": this.itemGuid,
|
|
270
|
-
attrs: this.v3 ? undefined : {
|
|
271
|
-
"for": this.itemGuid
|
|
272
|
-
}
|
|
273
|
-
})]);
|
|
274
|
-
} else {
|
|
275
|
-
return undefined;
|
|
276
|
-
}
|
|
277
|
-
};
|
|
278
|
-
var itemRender = getTemplate.call(this, {
|
|
279
|
-
h: h,
|
|
280
|
-
template: this.$props.itemUI,
|
|
281
|
-
defaultRendering: this.fieldsSvc.text(this.item),
|
|
282
|
-
additionalProps: {
|
|
283
|
-
item: this.item,
|
|
284
|
-
itemHierarchicalIndex: this.itemId
|
|
285
|
-
}
|
|
286
|
-
});
|
|
287
|
-
var itemInPart = function itemInPart() {
|
|
288
|
-
return h("span", {
|
|
289
|
-
"class": this.getContentClassName(),
|
|
290
|
-
style: {
|
|
291
|
-
touchAction: 'none'
|
|
292
|
-
},
|
|
293
|
-
onClick: this.handleItemClick,
|
|
294
|
-
on: this.v3 ? undefined : {
|
|
295
|
-
"click": this.handleItemClick
|
|
296
|
-
}
|
|
297
|
-
}, [h("span", {
|
|
298
|
-
"class": "k-treeview-leaf-text"
|
|
299
|
-
}, [itemRender])]);
|
|
300
|
-
};
|
|
301
|
-
return h("li", {
|
|
302
|
-
"class": classNames('k-treeview-item'),
|
|
303
|
-
tabindex: this.currentTabIndex,
|
|
304
|
-
attrs: this.v3 ? undefined : {
|
|
305
|
-
tabindex: this.currentTabIndex,
|
|
306
|
-
role: "treeitem",
|
|
307
|
-
"aria-level": this.$props.ariaLevel,
|
|
308
|
-
"aria-expanded": this.ariaExpanded,
|
|
309
|
-
"aria-selected": this.ariaSelected,
|
|
310
|
-
"aria-checked": this.ariaChecked,
|
|
311
|
-
"aria-disabled": this.computedDisabled ? true : undefined
|
|
312
|
-
},
|
|
313
|
-
role: "treeitem",
|
|
314
|
-
"aria-level": this.$props.ariaLevel,
|
|
315
|
-
"aria-expanded": this.ariaExpanded,
|
|
316
|
-
"aria-selected": this.ariaSelected,
|
|
317
|
-
"aria-checked": this.ariaChecked,
|
|
318
|
-
"aria-disabled": this.computedDisabled ? true : undefined
|
|
319
|
-
}, [h("div", {
|
|
320
|
-
"class": "k-treeview-mid",
|
|
321
|
-
ref: 'treemid'
|
|
322
|
-
}, [renderExpandIcon.call(this), renderCheckbox.call(this), this.$props.draggable ?
|
|
323
|
-
// @ts-ignore function children
|
|
324
|
-
h(Draggable, {
|
|
325
|
-
onPress: function onPress(e) {
|
|
326
|
-
return _this.handlePress(e);
|
|
327
|
-
},
|
|
328
|
-
on: this.v3 ? undefined : {
|
|
329
|
-
"press": function onPress(e) {
|
|
330
|
-
return _this.handlePress(e);
|
|
331
|
-
},
|
|
332
|
-
"drag": function drag(e) {
|
|
333
|
-
return _this.handleDrag(e);
|
|
334
|
-
},
|
|
335
|
-
"release": function release(e) {
|
|
336
|
-
return _this.handleRelease(e);
|
|
337
|
-
}
|
|
338
|
-
},
|
|
339
|
-
onDrag: function drag(e) {
|
|
340
|
-
return _this.handleDrag(e);
|
|
341
|
-
},
|
|
342
|
-
onRelease: function release(e) {
|
|
343
|
-
return _this.handleRelease(e);
|
|
344
|
-
}
|
|
345
|
-
}, this.v3 ? function () {
|
|
346
|
-
return [itemInPart.call(_this2)];
|
|
347
|
-
} : [itemInPart.call(_this2)]) : itemInPart.call(this)]), this.$props.animate && this.isMounted ?
|
|
348
|
-
// @ts-ignore function children
|
|
349
|
-
h(Reveal, {
|
|
350
|
-
appear: this.ariaExpanded,
|
|
351
|
-
attrs: this.v3 ? undefined : {
|
|
352
|
-
appear: this.ariaExpanded,
|
|
353
|
-
transitionEnterDuration: 200,
|
|
354
|
-
transitionExitDuration: 200
|
|
355
|
-
},
|
|
356
|
-
transitionEnterDuration: 200,
|
|
357
|
-
transitionExitDuration: 200,
|
|
358
|
-
key: this.itemGuid + '_animation',
|
|
359
|
-
style: {
|
|
360
|
-
display: 'block'
|
|
361
|
-
}
|
|
362
|
-
}, this.v3 ? function () {
|
|
363
|
-
return [subitems.call(_this2)];
|
|
364
|
-
} : [subitems.call(_this2)]) : subitems.call(this)]);
|
|
365
|
-
},
|
|
366
|
-
methods: {
|
|
367
|
-
handleCheckChange: function handleCheckChange(e, subItem, subItemId) {
|
|
368
|
-
this.$emit('checkchange', e, subItem || this.item, subItemId || this.itemId);
|
|
369
|
-
},
|
|
370
|
-
handleExpandChange: function handleExpandChange(e, subItem, subItemId) {
|
|
371
|
-
this.$emit('expandchange', e, subItem || this.item, subItemId || this.itemId);
|
|
372
|
-
},
|
|
373
|
-
handleItemClick: function handleItemClick(e, subItem, subItemId) {
|
|
374
|
-
this.$emit('itemclick', e, subItem || this.item, subItemId || this.itemId);
|
|
375
|
-
},
|
|
376
|
-
handlePress: function handlePress(e, subItem, subItemId) {
|
|
377
|
-
this.$emit('press', e, subItem || __assign({}, this.item), subItemId || this.itemId);
|
|
378
|
-
},
|
|
379
|
-
handleDrag: function handleDrag(e, subItem, subItemId) {
|
|
380
|
-
this.$emit('drag', e, subItem || this.item, subItemId || this.itemId);
|
|
381
|
-
},
|
|
382
|
-
handleRelease: function handleRelease(e, subItem, subItemId) {
|
|
383
|
-
this.$emit('release', e, subItem || this.item, subItemId || this.itemId);
|
|
384
|
-
},
|
|
385
|
-
handleFocusDomElNeeded: function handleFocusDomElNeeded(e) {
|
|
386
|
-
this.$emit('focusdomelneeded', e);
|
|
387
|
-
},
|
|
388
|
-
getIconClassName: function getIconClassName() {
|
|
389
|
-
var expanded = this.fieldsSvc.expanded(this.item);
|
|
390
|
-
return expanded && !hasChildren(this.item, this.fieldsSvc.getChildrenField()) ? 'loading' : expanded ? 'caret-alt-down' : this.$props.isRtl ? 'caret-alt-left' : 'caret-alt-right';
|
|
391
|
-
},
|
|
392
|
-
getIconSVG: function getIconSVG() {
|
|
393
|
-
var expanded = this.fieldsSvc.expanded(this.item);
|
|
394
|
-
return expanded ? caretAltDownIcon : this.$props.isRtl ? caretAltLeftIcon : caretAltRightIcon;
|
|
395
|
-
},
|
|
396
|
-
getContentClassName: function getContentClassName() {
|
|
397
|
-
return classNames('k-treeview-leaf', {
|
|
398
|
-
'k-focus': this.$props.focusedItemId === this.itemId,
|
|
399
|
-
'k-selected': this.fieldsSvc.selected(this.item),
|
|
400
|
-
'k-disabled': this.computedDisabled
|
|
401
|
-
});
|
|
402
|
-
},
|
|
403
|
-
assignDraggableMeta: function assignDraggableMeta(element) {
|
|
404
|
-
if (element && !element[DOM_KENDO_ITEM_ID_FIELD]) {
|
|
405
|
-
element[DOM_KENDO_ITEM_ID_FIELD] = this.$props.itemId;
|
|
406
|
-
element[DOM_KENDO_TREEVIEW_GUID_FIELD] = this.$props.treeGuid;
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
};
|
|
411
|
-
/**
|
|
412
|
-
* @hidden
|
|
413
|
-
*/
|
|
414
|
-
var TreeViewItem = TreeViewItemVue2;
|
|
415
|
-
export { TreeViewItem, TreeViewItemVue2 };
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The descriptors of the data operations which are applied to the TreeView component.
|
|
3
|
-
*/
|
|
4
|
-
export interface TreeViewOperationDescriptors {
|
|
5
|
-
/**
|
|
6
|
-
* The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
|
|
7
|
-
*/
|
|
8
|
-
expand?: string[] | TreeViewOperationDescriptor;
|
|
9
|
-
/**
|
|
10
|
-
* The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
|
|
11
|
-
*/
|
|
12
|
-
select?: string[] | TreeViewOperationDescriptor;
|
|
13
|
-
/**
|
|
14
|
-
* The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
|
|
15
|
-
*/
|
|
16
|
-
check?: string[] | TreeViewCheckDescriptor;
|
|
17
|
-
/**
|
|
18
|
-
* When the operations are applied, the corresponding items and their parents are cloned.
|
|
19
|
-
* For performance reasons, TreeView items are cloned only once.
|
|
20
|
-
* The name of the field which provides a Boolean representation of whether an item is already cloned.
|
|
21
|
-
* Defaults to `cloned`.
|
|
22
|
-
*/
|
|
23
|
-
cloneField?: string;
|
|
24
|
-
/**
|
|
25
|
-
* The expand field of the item.
|
|
26
|
-
*/
|
|
27
|
-
expandField?: string;
|
|
28
|
-
/**
|
|
29
|
-
* The select field of the item.
|
|
30
|
-
*/
|
|
31
|
-
selectField?: string;
|
|
32
|
-
/**
|
|
33
|
-
* The check field of the item.
|
|
34
|
-
*/
|
|
35
|
-
checkField?: string;
|
|
36
|
-
/**
|
|
37
|
-
* The children field of the item.
|
|
38
|
-
*/
|
|
39
|
-
childrenField?: string;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* The descriptor which is used for expanding, selecting, and checking.
|
|
43
|
-
*/
|
|
44
|
-
export interface TreeViewOperationDescriptor {
|
|
45
|
-
/**
|
|
46
|
-
* 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.
|
|
47
|
-
*/
|
|
48
|
-
ids?: any[];
|
|
49
|
-
/**
|
|
50
|
-
* The name of the field which will provide a Boolean representation for the operation state of the item.
|
|
51
|
-
*
|
|
52
|
-
* The default fields are:
|
|
53
|
-
* * `expanded`—Indicates that an item is expanded.
|
|
54
|
-
* * `selected`—Indicates that an item is selected.
|
|
55
|
-
* * `checked`—Indicates that an item is checked.
|
|
56
|
-
*/
|
|
57
|
-
operationField?: string;
|
|
58
|
-
/**
|
|
59
|
-
* The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
|
|
60
|
-
*/
|
|
61
|
-
idField?: string;
|
|
62
|
-
}
|
|
63
|
-
/**
|
|
64
|
-
* The descriptor which is used for checking.
|
|
65
|
-
*/
|
|
66
|
-
export interface TreeViewCheckDescriptor extends TreeViewOperationDescriptor {
|
|
67
|
-
/**
|
|
68
|
-
* Determines if a parent item will have an indeterminate state when not all its children are checked.
|
|
69
|
-
*/
|
|
70
|
-
applyCheckIndeterminate?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
|
|
73
|
-
* Defaults to `checkIndeterminate`.
|
|
74
|
-
*/
|
|
75
|
-
checkIndeterminateField?: string;
|
|
76
|
-
}
|