@progress/kendo-vue-treeview 5.3.0-dev.202409130647 → 5.3.0-develop.1
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
package/dist/es/TreeView.js
DELETED
|
@@ -1,450 +0,0 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as Vue from 'vue';
|
|
3
|
-
var allVue = Vue;
|
|
4
|
-
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
|
-
import { Keys, validatePackage, guid, kendoThemeMaps, classNames, templateRendering, getListeners, canUseDOM, isRtl } from '@progress/kendo-vue-common';
|
|
7
|
-
import nav from './utils/getItemIdUponKeyboardNavigation';
|
|
8
|
-
import { resolveItemId, isEnabledAndAllParentsEnabled, hasChildren } from './utils/itemUtils';
|
|
9
|
-
import { TreeViewItem } from './TreeViewItem';
|
|
10
|
-
import { ZERO_LEVEL_ZERO_NODE_ID, getItemById as _getItemById } from './utils/itemIdUtils';
|
|
11
|
-
import FieldsService from './utils/FieldsService';
|
|
12
|
-
import { packageMetadata } from './package-metadata';
|
|
13
|
-
import { CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD, DISABLED_FIELD, EXPAND_FIELD, HAS_CHILDREN_FIELD, SELECT_FIELD, TEXT_FIELD } from './utils/consts';
|
|
14
|
-
var sizeMap = kendoThemeMaps.sizeMap;
|
|
15
|
-
/**
|
|
16
|
-
* @hidden
|
|
17
|
-
*/
|
|
18
|
-
var TreeViewVue2 = {
|
|
19
|
-
name: 'KendoTreeView',
|
|
20
|
-
// @ts-ignore
|
|
21
|
-
emits: {
|
|
22
|
-
blur: null,
|
|
23
|
-
focus: null,
|
|
24
|
-
itemdragstart: null,
|
|
25
|
-
itemdragover: null,
|
|
26
|
-
itemdragend: null,
|
|
27
|
-
keydown: null,
|
|
28
|
-
itemclick: null,
|
|
29
|
-
expandchange: null,
|
|
30
|
-
checkchange: null
|
|
31
|
-
},
|
|
32
|
-
props: {
|
|
33
|
-
dataItems: Array,
|
|
34
|
-
animate: {
|
|
35
|
-
type: Boolean,
|
|
36
|
-
default: true
|
|
37
|
-
},
|
|
38
|
-
id: String,
|
|
39
|
-
draggable: Boolean,
|
|
40
|
-
tabIndex: Number,
|
|
41
|
-
focusIdField: String,
|
|
42
|
-
getFocusHierarchicalIndex: Function,
|
|
43
|
-
expandField: {
|
|
44
|
-
type: String,
|
|
45
|
-
default: EXPAND_FIELD
|
|
46
|
-
},
|
|
47
|
-
selectField: {
|
|
48
|
-
type: String,
|
|
49
|
-
default: SELECT_FIELD
|
|
50
|
-
},
|
|
51
|
-
childrenField: {
|
|
52
|
-
type: String,
|
|
53
|
-
default: CHILDREN_FIELD
|
|
54
|
-
},
|
|
55
|
-
hasChildrenField: {
|
|
56
|
-
type: String,
|
|
57
|
-
default: HAS_CHILDREN_FIELD
|
|
58
|
-
},
|
|
59
|
-
expandIcons: Boolean,
|
|
60
|
-
checkboxes: Boolean,
|
|
61
|
-
textField: {
|
|
62
|
-
type: String,
|
|
63
|
-
default: TEXT_FIELD
|
|
64
|
-
},
|
|
65
|
-
disableField: {
|
|
66
|
-
type: String,
|
|
67
|
-
default: DISABLED_FIELD
|
|
68
|
-
},
|
|
69
|
-
checkField: {
|
|
70
|
-
type: String,
|
|
71
|
-
default: CHECK_FIELD
|
|
72
|
-
},
|
|
73
|
-
checkIndeterminateField: {
|
|
74
|
-
type: String,
|
|
75
|
-
default: CHECK_INDETERMINATE_FIELD
|
|
76
|
-
},
|
|
77
|
-
item: [Object, String, Function],
|
|
78
|
-
ariaMultiSelectable: [String, Boolean],
|
|
79
|
-
ariaLabel: String,
|
|
80
|
-
ariaLabelledby: String,
|
|
81
|
-
size: {
|
|
82
|
-
type: String,
|
|
83
|
-
default: 'medium',
|
|
84
|
-
validator: function validator(value) {
|
|
85
|
-
return [null, 'small', 'medium', 'large'].includes(value);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
data: function data() {
|
|
90
|
-
return {
|
|
91
|
-
currentRtl: false,
|
|
92
|
-
focusedItemId: undefined,
|
|
93
|
-
focusedItemPublicId: undefined,
|
|
94
|
-
tabbableItemId: ZERO_LEVEL_ZERO_NODE_ID
|
|
95
|
-
};
|
|
96
|
-
},
|
|
97
|
-
mounted: function mounted() {
|
|
98
|
-
this.currentRtl = isRtl(this.$el);
|
|
99
|
-
},
|
|
100
|
-
computed: {
|
|
101
|
-
treeGuid: function treeGuid() {
|
|
102
|
-
return this.id || this.innerId;
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
created: function created() {
|
|
106
|
-
validatePackage(packageMetadata);
|
|
107
|
-
this.allowExplicitFocus = false;
|
|
108
|
-
this.innerId = guid();
|
|
109
|
-
},
|
|
110
|
-
updated: function updated() {
|
|
111
|
-
this.allowExplicitFocus = false;
|
|
112
|
-
this.refocusDueToFocusIdField();
|
|
113
|
-
},
|
|
114
|
-
// @ts-ignore
|
|
115
|
-
setup: !isV3 ? undefined : function () {
|
|
116
|
-
var v3 = !!isV3;
|
|
117
|
-
return {
|
|
118
|
-
v3: v3
|
|
119
|
-
};
|
|
120
|
-
},
|
|
121
|
-
// @ts-ignore
|
|
122
|
-
render: function render(createElement) {
|
|
123
|
-
var _a;
|
|
124
|
-
var h = gh || createElement;
|
|
125
|
-
this.fieldsSvc = new FieldsService(this.$props);
|
|
126
|
-
var size = this.$props.size;
|
|
127
|
-
return h("div", {
|
|
128
|
-
"class": classNames('k-treeview', (_a = {}, _a["k-treeview-".concat(sizeMap[size] || size)] = size, _a['k-user-select-none'] = this.draggable, _a['k-rtl'] = this.currentRtl, _a)),
|
|
129
|
-
onKeydown: this.onKeyDown,
|
|
130
|
-
on: this.v3 ? undefined : {
|
|
131
|
-
"keydown": this.onKeyDown,
|
|
132
|
-
"focusin": this.onFocus,
|
|
133
|
-
"focusout": this.onBlur
|
|
134
|
-
},
|
|
135
|
-
onFocusin: this.onFocus,
|
|
136
|
-
onFocusout: this.onBlur,
|
|
137
|
-
"aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
|
|
138
|
-
attrs: this.v3 ? undefined : {
|
|
139
|
-
"aria-multiselectable": this.ariaMultiSelectable ? true : undefined,
|
|
140
|
-
"aria-label": this.$props['aria-label'],
|
|
141
|
-
"aria-labelledby": this.$props['aria-labelledby'],
|
|
142
|
-
tabindex: this.$props.tabIndex
|
|
143
|
-
},
|
|
144
|
-
"aria-label": this.$props['aria-label'],
|
|
145
|
-
"aria-labelledby": this.$props['aria-labelledby'],
|
|
146
|
-
tabindex: this.$props.tabIndex,
|
|
147
|
-
style: {
|
|
148
|
-
userSelect: this.draggable ? 'none' : undefined
|
|
149
|
-
}
|
|
150
|
-
}, [h("ul", {
|
|
151
|
-
"class": "k-treeview-lines k-treeview-group",
|
|
152
|
-
role: "tree",
|
|
153
|
-
attrs: this.v3 ? undefined : {
|
|
154
|
-
role: "tree"
|
|
155
|
-
}
|
|
156
|
-
}, [this.dataItems.map(function (item, index) {
|
|
157
|
-
var itemTemplate = templateRendering.call(this, this.item, getListeners.call(this));
|
|
158
|
-
return h(TreeViewItem, {
|
|
159
|
-
item: item,
|
|
160
|
-
attrs: this.v3 ? undefined : {
|
|
161
|
-
item: item,
|
|
162
|
-
itemId: index.toString(),
|
|
163
|
-
treeGuid: this.treeGuid,
|
|
164
|
-
animate: this.$props.animate,
|
|
165
|
-
focusedItemId: this.focusedItemId,
|
|
166
|
-
tabbableItemId: this.tabbableItemId,
|
|
167
|
-
fieldsService: this.fieldsSvc,
|
|
168
|
-
itemUI: itemTemplate,
|
|
169
|
-
checkboxes: this.$props.checkboxes,
|
|
170
|
-
ariaMultiSelectable: this.ariaMultiSelectable,
|
|
171
|
-
draggable: this.$props.draggable,
|
|
172
|
-
expandIcons: this.$props.expandIcons,
|
|
173
|
-
size: size,
|
|
174
|
-
ariaLevel: 1,
|
|
175
|
-
isRtl: this.currentRtl
|
|
176
|
-
},
|
|
177
|
-
itemId: index.toString(),
|
|
178
|
-
treeGuid: this.treeGuid,
|
|
179
|
-
animate: this.$props.animate,
|
|
180
|
-
focusedItemId: this.focusedItemId,
|
|
181
|
-
tabbableItemId: this.tabbableItemId,
|
|
182
|
-
fieldsService: this.fieldsSvc,
|
|
183
|
-
itemUI: itemTemplate,
|
|
184
|
-
checkboxes: this.$props.checkboxes,
|
|
185
|
-
ariaMultiSelectable: this.ariaMultiSelectable,
|
|
186
|
-
onItemclick: this.onItemClick,
|
|
187
|
-
on: this.v3 ? undefined : {
|
|
188
|
-
"itemclick": this.onItemClick,
|
|
189
|
-
"focusdomelneeded": this.onFocusDomElNeeded,
|
|
190
|
-
"press": this.onPress,
|
|
191
|
-
"drag": this.onDrag,
|
|
192
|
-
"release": this.onRelease,
|
|
193
|
-
"expandchange": this.onExpandChange,
|
|
194
|
-
"checkchange": this.onCheckChange
|
|
195
|
-
},
|
|
196
|
-
onFocusdomelneeded: this.onFocusDomElNeeded,
|
|
197
|
-
draggable: this.$props.draggable,
|
|
198
|
-
onPress: this.onPress,
|
|
199
|
-
onDrag: this.onDrag,
|
|
200
|
-
onRelease: this.onRelease,
|
|
201
|
-
expandIcons: this.$props.expandIcons,
|
|
202
|
-
onExpandchange: this.onExpandChange,
|
|
203
|
-
onCheckchange: this.onCheckChange,
|
|
204
|
-
key: index,
|
|
205
|
-
size: size,
|
|
206
|
-
ariaLevel: 1,
|
|
207
|
-
isRtl: this.currentRtl
|
|
208
|
-
});
|
|
209
|
-
}, this)])]);
|
|
210
|
-
},
|
|
211
|
-
methods: {
|
|
212
|
-
onFocusDomElNeeded: function onFocusDomElNeeded(domItem) {
|
|
213
|
-
if (this.allowExplicitFocus) {
|
|
214
|
-
this.focusDomItem(domItem);
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
onCheckChange: function onCheckChange(event, item, itemId) {
|
|
218
|
-
this.setFocus(itemId);
|
|
219
|
-
this.dispatchCheckChange(event, item, itemId);
|
|
220
|
-
},
|
|
221
|
-
onExpandChange: function onExpandChange(event, item, itemId) {
|
|
222
|
-
this.setFocus(itemId);
|
|
223
|
-
this.dispatchExpandChange(event, item, itemId);
|
|
224
|
-
},
|
|
225
|
-
onPress: function onPress(_event, item, itemId) {
|
|
226
|
-
this.$emit('itemdragstart', {
|
|
227
|
-
target: this,
|
|
228
|
-
item: item,
|
|
229
|
-
itemHierarchicalIndex: itemId
|
|
230
|
-
});
|
|
231
|
-
},
|
|
232
|
-
onDrag: function onDrag(event, item, itemId) {
|
|
233
|
-
var pageX = event.pageX,
|
|
234
|
-
pageY = event.pageY,
|
|
235
|
-
clientX = event.clientX,
|
|
236
|
-
clientY = event.clientY;
|
|
237
|
-
this.$emit('itemdragover', {
|
|
238
|
-
target: this,
|
|
239
|
-
item: item,
|
|
240
|
-
itemHierarchicalIndex: itemId,
|
|
241
|
-
pageX: pageX,
|
|
242
|
-
pageY: pageY,
|
|
243
|
-
clientX: clientX,
|
|
244
|
-
clientY: clientY
|
|
245
|
-
});
|
|
246
|
-
},
|
|
247
|
-
onRelease: function onRelease(event, item, itemId) {
|
|
248
|
-
var pageX = event.pageX,
|
|
249
|
-
pageY = event.pageY,
|
|
250
|
-
clientX = event.clientX,
|
|
251
|
-
clientY = event.clientY;
|
|
252
|
-
this.$emit('itemdragend', {
|
|
253
|
-
target: this,
|
|
254
|
-
item: item,
|
|
255
|
-
itemHierarchicalIndex: itemId,
|
|
256
|
-
pageX: pageX,
|
|
257
|
-
pageY: pageY,
|
|
258
|
-
clientX: clientX,
|
|
259
|
-
clientY: clientY
|
|
260
|
-
});
|
|
261
|
-
},
|
|
262
|
-
onItemClick: function onItemClick(event, item, itemId) {
|
|
263
|
-
this.setFocus(itemId);
|
|
264
|
-
this.dispatchItemClick(event, item, itemId);
|
|
265
|
-
},
|
|
266
|
-
onFocus: function onFocus(e) {
|
|
267
|
-
clearTimeout(this.blurRequest);
|
|
268
|
-
if (this.focusedItemId === undefined && this.dataItems.length) {
|
|
269
|
-
this.setFocus(this.tabbableItemId);
|
|
270
|
-
}
|
|
271
|
-
this.$emit('focus', e);
|
|
272
|
-
},
|
|
273
|
-
onBlur: function onBlur(e) {
|
|
274
|
-
var _this = this;
|
|
275
|
-
clearTimeout(this.blurRequest);
|
|
276
|
-
if (canUseDOM) {
|
|
277
|
-
this.blurRequest = window.setTimeout(function () {
|
|
278
|
-
return _this.setFocus(undefined);
|
|
279
|
-
}, 0);
|
|
280
|
-
}
|
|
281
|
-
this.$emit('blur', e);
|
|
282
|
-
},
|
|
283
|
-
onKeyDown: function onKeyDown(event) {
|
|
284
|
-
var focusedItem = this.getFocusedItem();
|
|
285
|
-
if (focusedItem) {
|
|
286
|
-
var newItemId = nav(focusedItem, this.focusedItemId, this.dataItems, event.keyCode, this.fieldsSvc);
|
|
287
|
-
if (newItemId !== this.focusedItemId) {
|
|
288
|
-
// This disables the auto-scroll. The scroll is achieved via item focusing.
|
|
289
|
-
event.preventDefault();
|
|
290
|
-
this.allowExplicitFocus = true;
|
|
291
|
-
this.setFocus(newItemId);
|
|
292
|
-
}
|
|
293
|
-
this.dispatchEventsOnKeyDown(event, focusedItem);
|
|
294
|
-
}
|
|
295
|
-
this.$emit('keydown', event);
|
|
296
|
-
},
|
|
297
|
-
dispatchEventsOnKeyDown: function dispatchEventsOnKeyDown(event, focusedItem) {
|
|
298
|
-
var _this = this;
|
|
299
|
-
// isEnabled is the most expensive op and that is why is left last.
|
|
300
|
-
var isEnabled = function isEnabled() {
|
|
301
|
-
return isEnabledAndAllParentsEnabled(_this.focusedItemId, _this.dataItems, _this.fieldsSvc);
|
|
302
|
-
};
|
|
303
|
-
var currentDisabled = this.fieldsSvc.disabled(focusedItem);
|
|
304
|
-
if (event.keyCode === Keys.left && this.fieldsSvc.expanded(focusedItem) && isEnabled()) {
|
|
305
|
-
this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
|
|
306
|
-
} else if (event.keyCode === Keys.right && !this.fieldsSvc.expanded(focusedItem) && (this.fieldsSvc.hasChildren(focusedItem) || hasChildren(focusedItem, this.$props.childrenField)) && isEnabled()) {
|
|
307
|
-
this.dispatchExpandChange(event, focusedItem, this.focusedItemId);
|
|
308
|
-
} else if (event.keyCode === Keys.enter && !currentDisabled) {
|
|
309
|
-
this.dispatchItemClick(event, focusedItem, this.focusedItemId);
|
|
310
|
-
} else if (event.keyCode === Keys.space && !currentDisabled) {
|
|
311
|
-
// W/o preventDefault() long TreeViews gets incorrectly scrolled.
|
|
312
|
-
event.preventDefault();
|
|
313
|
-
this.dispatchCheckChange(event, focusedItem, this.focusedItemId);
|
|
314
|
-
}
|
|
315
|
-
},
|
|
316
|
-
setFocus: function setFocus(focusedItemId) {
|
|
317
|
-
if (focusedItemId) {
|
|
318
|
-
if (this.fieldsSvc.focusIdField) {
|
|
319
|
-
var item = this.getItemById(focusedItemId);
|
|
320
|
-
this.focusedItemId = focusedItemId;
|
|
321
|
-
this.focusedItemPublicId = this.fieldsSvc.focusId(item);
|
|
322
|
-
} else {
|
|
323
|
-
this.focusedItemId = focusedItemId;
|
|
324
|
-
}
|
|
325
|
-
} else {
|
|
326
|
-
var tempId = this.focusedItemId;
|
|
327
|
-
this.focusedItemId = undefined;
|
|
328
|
-
this.focusedItemPublicId = undefined;
|
|
329
|
-
this.tabbableItemId = tempId;
|
|
330
|
-
}
|
|
331
|
-
},
|
|
332
|
-
getFocusedItem: function getFocusedItem() {
|
|
333
|
-
return this.focusedItemId ? this.getItemById(this.focusedItemId) : undefined;
|
|
334
|
-
},
|
|
335
|
-
getItemById: function getItemById(itemId) {
|
|
336
|
-
return _getItemById(itemId, this.dataItems, this.$props.childrenField || CHILDREN_FIELD);
|
|
337
|
-
},
|
|
338
|
-
dispatchCheckChange: function dispatchCheckChange(dispatchedEvent, item, itemId) {
|
|
339
|
-
this.$emit('checkchange', {
|
|
340
|
-
item: item,
|
|
341
|
-
itemHierarchicalIndex: itemId,
|
|
342
|
-
event: dispatchedEvent
|
|
343
|
-
});
|
|
344
|
-
},
|
|
345
|
-
dispatchExpandChange: function dispatchExpandChange(dispatchedEvent, item, itemId) {
|
|
346
|
-
this.$emit('expandchange', {
|
|
347
|
-
item: item,
|
|
348
|
-
itemHierarchicalIndex: itemId,
|
|
349
|
-
event: dispatchedEvent
|
|
350
|
-
});
|
|
351
|
-
},
|
|
352
|
-
dispatchItemClick: function dispatchItemClick(dispatchedEvent, item, itemId) {
|
|
353
|
-
this.$emit('itemclick', {
|
|
354
|
-
item: item,
|
|
355
|
-
itemHierarchicalIndex: itemId,
|
|
356
|
-
event: dispatchedEvent
|
|
357
|
-
});
|
|
358
|
-
},
|
|
359
|
-
refocusDueToFocusIdField: function refocusDueToFocusIdField() {
|
|
360
|
-
if (this.fieldsSvc.focusIdField) {
|
|
361
|
-
var focusedItemPublicId = this.focusedItemPublicId;
|
|
362
|
-
if (focusedItemPublicId) {
|
|
363
|
-
var focusedItemId = this.$props.getFocusHierarchicalIndex ? this.$props.getFocusHierarchicalIndex(focusedItemPublicId) : resolveItemId(focusedItemPublicId, this.fieldsSvc.focusIdField, this.dataItems, this.$props.childrenField);
|
|
364
|
-
if (focusedItemId !== this.focusedItemId) {
|
|
365
|
-
this.allowExplicitFocus = true;
|
|
366
|
-
this.focusedItemId = focusedItemId;
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
}
|
|
370
|
-
},
|
|
371
|
-
// private get ariaMultiSelectable() {
|
|
372
|
-
// return this.$props['aria-multiselectable'] === true || this.$props['aria-multiselectable'] === 'true';
|
|
373
|
-
// }
|
|
374
|
-
focusDomItem: function focusDomItem(domItem) {
|
|
375
|
-
domItem.focus();
|
|
376
|
-
},
|
|
377
|
-
guid: function guid() {
|
|
378
|
-
return this.treeGuid;
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
};
|
|
382
|
-
/**
|
|
383
|
-
*
|
|
384
|
-
*
|
|
385
|
-
* Represents the [Kendo UI for Vue Native TreeView component]({% slug overview_treeview %}).
|
|
386
|
-
*
|
|
387
|
-
* ```jsx
|
|
388
|
-
* <template>
|
|
389
|
-
* <div>
|
|
390
|
-
* <TreeView :dataItems="tree" />
|
|
391
|
-
* </div>
|
|
392
|
-
* </template>
|
|
393
|
-
*
|
|
394
|
-
* <script>
|
|
395
|
-
* import { TreeView } from '@progress/kendo-vue-treeview';
|
|
396
|
-
*
|
|
397
|
-
* export default {
|
|
398
|
-
* components: {
|
|
399
|
-
* TreeView,
|
|
400
|
-
* },
|
|
401
|
-
* data() {
|
|
402
|
-
* return {
|
|
403
|
-
* tree: [
|
|
404
|
-
* {
|
|
405
|
-
* text: 'Furniture',
|
|
406
|
-
* expanded: true,
|
|
407
|
-
* items: [
|
|
408
|
-
* {
|
|
409
|
-
* text: 'Tables & Chairs',
|
|
410
|
-
* },
|
|
411
|
-
* {
|
|
412
|
-
* text: 'Sofas',
|
|
413
|
-
* },
|
|
414
|
-
* {
|
|
415
|
-
* text: 'Occasional Furniture',
|
|
416
|
-
* },
|
|
417
|
-
* ],
|
|
418
|
-
* },
|
|
419
|
-
* {
|
|
420
|
-
* text: 'Decor',
|
|
421
|
-
* expanded: true,
|
|
422
|
-
* items: [
|
|
423
|
-
* {
|
|
424
|
-
* text: 'Bed Linen',
|
|
425
|
-
* },
|
|
426
|
-
* {
|
|
427
|
-
* text: 'Curtains & Blinds',
|
|
428
|
-
* },
|
|
429
|
-
* {
|
|
430
|
-
* text: 'Carpets',
|
|
431
|
-
* },
|
|
432
|
-
* ],
|
|
433
|
-
* },
|
|
434
|
-
* ],
|
|
435
|
-
* };
|
|
436
|
-
* },
|
|
437
|
-
* };
|
|
438
|
-
* </script>
|
|
439
|
-
* ```
|
|
440
|
-
*
|
|
441
|
-
*
|
|
442
|
-
*
|
|
443
|
-
* ### props <span class='code'>Readonly<[TreeViewProps]({% slug api_treeview_treeviewprops %})></span>
|
|
444
|
-
* The props of the TreeView component.
|
|
445
|
-
*
|
|
446
|
-
* ### guid <span class='code'>string</span>
|
|
447
|
-
* Returns the `guid` which is associated with the TreeView.
|
|
448
|
-
*/
|
|
449
|
-
var TreeView = TreeViewVue2;
|
|
450
|
-
export { TreeView, TreeViewVue2 };
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { TreeViewItemDragOverEvent, TreeViewItemDragEndEvent } from './events';
|
|
2
|
-
/**
|
|
3
|
-
* A class which provides an API for analyzing the `drag` events
|
|
4
|
-
* of the TreeView.
|
|
5
|
-
*
|
|
6
|
-
* {% meta height:400 %}
|
|
7
|
-
* {% embed_file drag/single/main.vue preview %}
|
|
8
|
-
* {% embed_file drag/single/main.js %}
|
|
9
|
-
* {% endmeta %}
|
|
10
|
-
*
|
|
11
|
-
* ### destinationMeta <span class='code'>{ itemHierarchicalIndex: string; treeViewGuid: string; }</span>
|
|
12
|
-
* Returns an object which contains:
|
|
13
|
-
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
|
|
14
|
-
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
|
|
15
|
-
*
|
|
16
|
-
* ### isDropAllowed <span class='code'>boolean</span>
|
|
17
|
-
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
|
|
18
|
-
*/
|
|
19
|
-
declare class TreeViewDragAnalyzer {
|
|
20
|
-
private event;
|
|
21
|
-
private itemId;
|
|
22
|
-
private treeViewGuid;
|
|
23
|
-
private initialized;
|
|
24
|
-
private destDomNodeWithMeta;
|
|
25
|
-
private destItemId;
|
|
26
|
-
private destTreeViewGuid;
|
|
27
|
-
/**
|
|
28
|
-
* @param event - The event that will be analyzed.
|
|
29
|
-
*/
|
|
30
|
-
constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
|
|
31
|
-
/**
|
|
32
|
-
* The method which initializes the analyzer.
|
|
33
|
-
* Invoke the method before you call any other methods.
|
|
34
|
-
*
|
|
35
|
-
* @returns - The analyzer object of the `drag` event.
|
|
36
|
-
*/
|
|
37
|
-
init(): this;
|
|
38
|
-
/**
|
|
39
|
-
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
|
|
40
|
-
*/
|
|
41
|
-
get isDropAllowed(): boolean;
|
|
42
|
-
/**
|
|
43
|
-
* Returns an object which contains:
|
|
44
|
-
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
|
|
45
|
-
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
|
|
46
|
-
*/
|
|
47
|
-
get destinationMeta(): {
|
|
48
|
-
itemHierarchicalIndex: string;
|
|
49
|
-
treeViewGuid: string;
|
|
50
|
-
};
|
|
51
|
-
/**
|
|
52
|
-
* Returns the specific drop operation.
|
|
53
|
-
*
|
|
54
|
-
* @returns - The following values are returned:
|
|
55
|
-
* * `before`—Indicates that the dragged item is positioned at the beginning of the destination item.
|
|
56
|
-
* * `after`—Indicates that the dragged item is positioned at the end of the destination item.
|
|
57
|
-
* * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
|
|
58
|
-
* * `undefined`—Indicates that dropping is not allowed.
|
|
59
|
-
*/
|
|
60
|
-
getDropOperation(): "before" | "after" | "child";
|
|
61
|
-
private setDestimationMeta;
|
|
62
|
-
}
|
|
63
|
-
export { TreeViewDragAnalyzer };
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import { DOM_KENDO_ITEM_ID_FIELD, DOM_KENDO_TREEVIEW_GUID_FIELD } from './utils/consts';
|
|
2
|
-
var DROPZONE_BOUNDARY_DELTA = 6;
|
|
3
|
-
/**
|
|
4
|
-
* A class which provides an API for analyzing the `drag` events
|
|
5
|
-
* of the TreeView.
|
|
6
|
-
*
|
|
7
|
-
* {% meta height:400 %}
|
|
8
|
-
* {% embed_file drag/single/main.vue preview %}
|
|
9
|
-
* {% embed_file drag/single/main.js %}
|
|
10
|
-
* {% endmeta %}
|
|
11
|
-
*
|
|
12
|
-
* ### destinationMeta <span class='code'>{ itemHierarchicalIndex: string; treeViewGuid: string; }</span>
|
|
13
|
-
* Returns an object which contains:
|
|
14
|
-
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
|
|
15
|
-
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
|
|
16
|
-
*
|
|
17
|
-
* ### isDropAllowed <span class='code'>boolean</span>
|
|
18
|
-
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
|
|
19
|
-
*/
|
|
20
|
-
var TreeViewDragAnalyzer = /** @class */ (function () {
|
|
21
|
-
/**
|
|
22
|
-
* @param event - The event that will be analyzed.
|
|
23
|
-
*/
|
|
24
|
-
function TreeViewDragAnalyzer(event) {
|
|
25
|
-
this.event = event;
|
|
26
|
-
this.initialized = false;
|
|
27
|
-
this.itemId = event.itemHierarchicalIndex;
|
|
28
|
-
this.treeViewGuid = event.target.guid();
|
|
29
|
-
}
|
|
30
|
-
/**
|
|
31
|
-
* The method which initializes the analyzer.
|
|
32
|
-
* Invoke the method before you call any other methods.
|
|
33
|
-
*
|
|
34
|
-
* @returns - The analyzer object of the `drag` event.
|
|
35
|
-
*/
|
|
36
|
-
TreeViewDragAnalyzer.prototype.init = function () {
|
|
37
|
-
if (!this.initialized) {
|
|
38
|
-
this.setDestimationMeta(document.elementFromPoint(this.event.clientX, this.event.clientY));
|
|
39
|
-
this.initialized = true;
|
|
40
|
-
}
|
|
41
|
-
return this;
|
|
42
|
-
};
|
|
43
|
-
Object.defineProperty(TreeViewDragAnalyzer.prototype, "isDropAllowed", {
|
|
44
|
-
/**
|
|
45
|
-
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
|
|
46
|
-
*/
|
|
47
|
-
get: function () {
|
|
48
|
-
if (this.initialized && this.destItemId && this.destTreeViewGuid) {
|
|
49
|
-
// Disallow circular references.
|
|
50
|
-
return !(("".concat(this.destTreeViewGuid, "_").concat(this.destItemId, "_")).
|
|
51
|
-
startsWith("".concat(this.treeViewGuid, "_").concat(this.itemId, "_")));
|
|
52
|
-
}
|
|
53
|
-
else {
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
enumerable: false,
|
|
58
|
-
configurable: true
|
|
59
|
-
});
|
|
60
|
-
Object.defineProperty(TreeViewDragAnalyzer.prototype, "destinationMeta", {
|
|
61
|
-
/**
|
|
62
|
-
* Returns an object which contains:
|
|
63
|
-
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
|
|
64
|
-
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
|
|
65
|
-
*/
|
|
66
|
-
get: function () {
|
|
67
|
-
return { itemHierarchicalIndex: this.destItemId, treeViewGuid: this.destTreeViewGuid };
|
|
68
|
-
},
|
|
69
|
-
enumerable: false,
|
|
70
|
-
configurable: true
|
|
71
|
-
});
|
|
72
|
-
/**
|
|
73
|
-
* Returns the specific drop operation.
|
|
74
|
-
*
|
|
75
|
-
* @returns - The following values are returned:
|
|
76
|
-
* * `before`—Indicates that the dragged item is positioned at the beginning of the destination item.
|
|
77
|
-
* * `after`—Indicates that the dragged item is positioned at the end of the destination item.
|
|
78
|
-
* * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
|
|
79
|
-
* * `undefined`—Indicates that dropping is not allowed.
|
|
80
|
-
*/
|
|
81
|
-
TreeViewDragAnalyzer.prototype.getDropOperation = function () {
|
|
82
|
-
if (this.initialized && this.isDropAllowed) {
|
|
83
|
-
var _a = this.destDomNodeWithMeta.getBoundingClientRect(), top_1 = _a.top, height = _a.height;
|
|
84
|
-
if (top_1 + height - this.event.clientY < DROPZONE_BOUNDARY_DELTA) {
|
|
85
|
-
return 'after';
|
|
86
|
-
}
|
|
87
|
-
else if (this.event.clientY - top_1 < DROPZONE_BOUNDARY_DELTA) {
|
|
88
|
-
return 'before';
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
return 'child';
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
else {
|
|
95
|
-
return undefined;
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
TreeViewDragAnalyzer.prototype.setDestimationMeta = function (element) {
|
|
99
|
-
var node = element;
|
|
100
|
-
while (node && !node[DOM_KENDO_ITEM_ID_FIELD]) {
|
|
101
|
-
node = node.parentNode;
|
|
102
|
-
}
|
|
103
|
-
if (node && node[DOM_KENDO_ITEM_ID_FIELD]) {
|
|
104
|
-
this.destDomNodeWithMeta = node;
|
|
105
|
-
this.destItemId = node[DOM_KENDO_ITEM_ID_FIELD];
|
|
106
|
-
this.destTreeViewGuid = node[DOM_KENDO_TREEVIEW_GUID_FIELD];
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
return TreeViewDragAnalyzer;
|
|
110
|
-
}());
|
|
111
|
-
export { TreeViewDragAnalyzer };
|
|
@@ -1,78 +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
|
-
/**
|
|
8
|
-
* Represents the props of the Kendo UI for Vue TreeViewDragClue component.
|
|
9
|
-
*/
|
|
10
|
-
export interface TreeViewDragClueProps {
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* @hidden
|
|
14
|
-
*/
|
|
15
|
-
export interface TreeViewDragClueState {
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* @hidden
|
|
19
|
-
*/
|
|
20
|
-
export interface TreeViewDragClueComputed {
|
|
21
|
-
[key: string]: any;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* @hidden
|
|
25
|
-
*/
|
|
26
|
-
export interface TreeViewDragClueMethods {
|
|
27
|
-
[key: string]: any;
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* @hidden
|
|
31
|
-
*/
|
|
32
|
-
export interface TreeViewDragClueData {
|
|
33
|
-
visible?: boolean;
|
|
34
|
-
top?: number;
|
|
35
|
-
left?: number;
|
|
36
|
-
text?: string;
|
|
37
|
-
operationClassName?: string;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
export interface TreeViewDragClueAll extends Vue, TreeViewDragClueMethods, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueState {
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* @hidden
|
|
46
|
-
*/
|
|
47
|
-
declare let TreeViewDragClueVue2: ComponentOptions<TreeViewDragClueAll, DefaultData<TreeViewDragClueData>, DefaultMethods<TreeViewDragClueAll>, TreeViewDragClueComputed, RecordPropsDefinition<TreeViewDragClueProps>>;
|
|
48
|
-
/**
|
|
49
|
-
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
|
|
50
|
-
*
|
|
51
|
-
* {% meta height:400 %}
|
|
52
|
-
* {% embed_file drag/single/main.vue preview %}
|
|
53
|
-
* {% embed_file drag/single/main.js %}
|
|
54
|
-
* {% endmeta %}
|
|
55
|
-
*
|
|
56
|
-
* ## Methods
|
|
57
|
-
*
|
|
58
|
-
* ### hide
|
|
59
|
-
* Hides the TreeViewDragClue component.
|
|
60
|
-
*
|
|
61
|
-
* ### show
|
|
62
|
-
* Displays the TreeViewDragClue component.
|
|
63
|
-
*
|
|
64
|
-
* #### Parameters
|
|
65
|
-
* ##### top <span class='code'>number</span>
|
|
66
|
-
* The `top` CSS position of the component.
|
|
67
|
-
*
|
|
68
|
-
* ##### left <span class='code'>number</span>
|
|
69
|
-
* The `left` CSS position of the component.
|
|
70
|
-
*
|
|
71
|
-
* ##### text <span class='code'>string</span>
|
|
72
|
-
* The text of the component.
|
|
73
|
-
*
|
|
74
|
-
* ##### operationClassName <span class='code'>string</span>
|
|
75
|
-
* The CSS class name which is related to the specific drop operation.
|
|
76
|
-
*/
|
|
77
|
-
declare const TreeViewDragClue: DefineComponent<TreeViewDragClueProps, any, TreeViewDragClueData, TreeViewDragClueComputed, TreeViewDragClueMethods, {}, {}, {}, string, TreeViewDragClueProps, TreeViewDragClueProps, {}>;
|
|
78
|
-
export { TreeViewDragClue, TreeViewDragClueVue2 };
|