@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.
Files changed (161) hide show
  1. package/README.md +26 -35
  2. package/TreeView.js +8 -0
  3. package/TreeView.mjs +294 -0
  4. package/TreeViewDragAnalyzer.js +8 -0
  5. package/TreeViewDragAnalyzer.mjs +74 -0
  6. package/TreeViewDragClue.js +8 -0
  7. package/TreeViewDragClue.mjs +56 -0
  8. package/TreeViewItem.js +8 -0
  9. package/TreeViewItem.mjs +271 -0
  10. package/dist/cdn/js/kendo-vue-treeview.js +8 -1
  11. package/handleTreeViewCheckChange.js +8 -0
  12. package/handleTreeViewCheckChange.mjs +64 -0
  13. package/index.d.mts +950 -0
  14. package/index.d.ts +950 -0
  15. package/index.js +8 -0
  16. package/index.mjs +23 -0
  17. package/moveTreeViewItem.js +8 -0
  18. package/moveTreeViewItem.mjs +45 -0
  19. package/package-metadata.js +8 -0
  20. package/package-metadata.mjs +18 -0
  21. package/package.json +25 -46
  22. package/processTreeViewItems.js +8 -0
  23. package/processTreeViewItems.mjs +90 -0
  24. package/utils/FieldsService.js +8 -0
  25. package/utils/FieldsService.mjs +59 -0
  26. package/utils/SortedPublicItemIds.js +8 -0
  27. package/utils/SortedPublicItemIds.mjs +26 -0
  28. package/utils/consts.js +8 -0
  29. package/utils/consts.mjs +20 -0
  30. package/utils/getItemIdUponKeyboardNavigation.js +8 -0
  31. package/utils/getItemIdUponKeyboardNavigation.mjs +65 -0
  32. package/utils/itemIdUtils.js +8 -0
  33. package/utils/itemIdUtils.mjs +82 -0
  34. package/utils/itemUtils.js +8 -0
  35. package/utils/itemUtils.mjs +140 -0
  36. package/utils/misc.js +8 -0
  37. package/utils/misc.mjs +21 -0
  38. package/dist/es/ItemRenderProps.d.ts +0 -13
  39. package/dist/es/ItemRenderProps.js +0 -2
  40. package/dist/es/TreeView.d.ts +0 -116
  41. package/dist/es/TreeView.js +0 -450
  42. package/dist/es/TreeViewDragAnalyzer.d.ts +0 -63
  43. package/dist/es/TreeViewDragAnalyzer.js +0 -111
  44. package/dist/es/TreeViewDragClue.d.ts +0 -78
  45. package/dist/es/TreeViewDragClue.js +0 -116
  46. package/dist/es/TreeViewItem.d.ts +0 -85
  47. package/dist/es/TreeViewItem.js +0 -415
  48. package/dist/es/TreeViewOperationDescriptors.d.ts +0 -76
  49. package/dist/es/TreeViewOperationDescriptors.js +0 -2
  50. package/dist/es/TreeViewProps.d.ts +0 -126
  51. package/dist/es/TreeViewProps.js +0 -1
  52. package/dist/es/additionalTypes.ts +0 -21
  53. package/dist/es/events.d.ts +0 -143
  54. package/dist/es/events.js +0 -2
  55. package/dist/es/handleTreeViewCheckChange.d.ts +0 -49
  56. package/dist/es/handleTreeViewCheckChange.js +0 -177
  57. package/dist/es/main.d.ts +0 -12
  58. package/dist/es/main.js +0 -8
  59. package/dist/es/moveTreeViewItem.d.ts +0 -46
  60. package/dist/es/moveTreeViewItem.js +0 -93
  61. package/dist/es/package-metadata.d.ts +0 -5
  62. package/dist/es/package-metadata.js +0 -11
  63. package/dist/es/processTreeViewItems.d.ts +0 -24
  64. package/dist/es/processTreeViewItems.js +0 -139
  65. package/dist/es/utils/FieldsService.d.ts +0 -26
  66. package/dist/es/utils/FieldsService.js +0 -50
  67. package/dist/es/utils/SortedPublicItemIds.d.ts +0 -8
  68. package/dist/es/utils/SortedPublicItemIds.js +0 -24
  69. package/dist/es/utils/consts.d.ts +0 -40
  70. package/dist/es/utils/consts.js +0 -40
  71. package/dist/es/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
  72. package/dist/es/utils/getItemIdUponKeyboardNavigation.js +0 -77
  73. package/dist/es/utils/itemIdUtils.d.ts +0 -60
  74. package/dist/es/utils/itemIdUtils.js +0 -117
  75. package/dist/es/utils/itemUtils.d.ts +0 -45
  76. package/dist/es/utils/itemUtils.js +0 -191
  77. package/dist/es/utils/misc.d.ts +0 -9
  78. package/dist/es/utils/misc.js +0 -17
  79. package/dist/esm/ItemRenderProps.d.ts +0 -13
  80. package/dist/esm/ItemRenderProps.js +0 -2
  81. package/dist/esm/TreeView.d.ts +0 -116
  82. package/dist/esm/TreeView.js +0 -450
  83. package/dist/esm/TreeViewDragAnalyzer.d.ts +0 -63
  84. package/dist/esm/TreeViewDragAnalyzer.js +0 -111
  85. package/dist/esm/TreeViewDragClue.d.ts +0 -78
  86. package/dist/esm/TreeViewDragClue.js +0 -116
  87. package/dist/esm/TreeViewItem.d.ts +0 -85
  88. package/dist/esm/TreeViewItem.js +0 -415
  89. package/dist/esm/TreeViewOperationDescriptors.d.ts +0 -76
  90. package/dist/esm/TreeViewOperationDescriptors.js +0 -2
  91. package/dist/esm/TreeViewProps.d.ts +0 -126
  92. package/dist/esm/TreeViewProps.js +0 -1
  93. package/dist/esm/additionalTypes.ts +0 -21
  94. package/dist/esm/events.d.ts +0 -143
  95. package/dist/esm/events.js +0 -2
  96. package/dist/esm/handleTreeViewCheckChange.d.ts +0 -49
  97. package/dist/esm/handleTreeViewCheckChange.js +0 -177
  98. package/dist/esm/main.d.ts +0 -12
  99. package/dist/esm/main.js +0 -8
  100. package/dist/esm/moveTreeViewItem.d.ts +0 -46
  101. package/dist/esm/moveTreeViewItem.js +0 -93
  102. package/dist/esm/package-metadata.d.ts +0 -5
  103. package/dist/esm/package-metadata.js +0 -11
  104. package/dist/esm/package.json +0 -3
  105. package/dist/esm/processTreeViewItems.d.ts +0 -24
  106. package/dist/esm/processTreeViewItems.js +0 -139
  107. package/dist/esm/utils/FieldsService.d.ts +0 -26
  108. package/dist/esm/utils/FieldsService.js +0 -50
  109. package/dist/esm/utils/SortedPublicItemIds.d.ts +0 -8
  110. package/dist/esm/utils/SortedPublicItemIds.js +0 -24
  111. package/dist/esm/utils/consts.d.ts +0 -40
  112. package/dist/esm/utils/consts.js +0 -40
  113. package/dist/esm/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
  114. package/dist/esm/utils/getItemIdUponKeyboardNavigation.js +0 -77
  115. package/dist/esm/utils/itemIdUtils.d.ts +0 -60
  116. package/dist/esm/utils/itemIdUtils.js +0 -117
  117. package/dist/esm/utils/itemUtils.d.ts +0 -45
  118. package/dist/esm/utils/itemUtils.js +0 -191
  119. package/dist/esm/utils/misc.d.ts +0 -9
  120. package/dist/esm/utils/misc.js +0 -17
  121. package/dist/npm/ItemRenderProps.d.ts +0 -13
  122. package/dist/npm/ItemRenderProps.js +0 -3
  123. package/dist/npm/TreeView.d.ts +0 -116
  124. package/dist/npm/TreeView.js +0 -457
  125. package/dist/npm/TreeViewDragAnalyzer.d.ts +0 -63
  126. package/dist/npm/TreeViewDragAnalyzer.js +0 -114
  127. package/dist/npm/TreeViewDragClue.d.ts +0 -78
  128. package/dist/npm/TreeViewDragClue.js +0 -123
  129. package/dist/npm/TreeViewItem.d.ts +0 -85
  130. package/dist/npm/TreeViewItem.js +0 -422
  131. package/dist/npm/TreeViewOperationDescriptors.d.ts +0 -76
  132. package/dist/npm/TreeViewOperationDescriptors.js +0 -3
  133. package/dist/npm/TreeViewProps.d.ts +0 -126
  134. package/dist/npm/TreeViewProps.js +0 -2
  135. package/dist/npm/additionalTypes.ts +0 -21
  136. package/dist/npm/events.d.ts +0 -143
  137. package/dist/npm/events.js +0 -3
  138. package/dist/npm/handleTreeViewCheckChange.d.ts +0 -49
  139. package/dist/npm/handleTreeViewCheckChange.js +0 -181
  140. package/dist/npm/main.d.ts +0 -12
  141. package/dist/npm/main.js +0 -17
  142. package/dist/npm/moveTreeViewItem.d.ts +0 -46
  143. package/dist/npm/moveTreeViewItem.js +0 -93
  144. package/dist/npm/package-metadata.d.ts +0 -5
  145. package/dist/npm/package-metadata.js +0 -14
  146. package/dist/npm/processTreeViewItems.d.ts +0 -24
  147. package/dist/npm/processTreeViewItems.js +0 -142
  148. package/dist/npm/utils/FieldsService.d.ts +0 -26
  149. package/dist/npm/utils/FieldsService.js +0 -52
  150. package/dist/npm/utils/SortedPublicItemIds.d.ts +0 -8
  151. package/dist/npm/utils/SortedPublicItemIds.js +0 -26
  152. package/dist/npm/utils/consts.d.ts +0 -40
  153. package/dist/npm/utils/consts.js +0 -43
  154. package/dist/npm/utils/getItemIdUponKeyboardNavigation.d.ts +0 -5
  155. package/dist/npm/utils/getItemIdUponKeyboardNavigation.js +0 -80
  156. package/dist/npm/utils/itemIdUtils.d.ts +0 -60
  157. package/dist/npm/utils/itemIdUtils.js +0 -132
  158. package/dist/npm/utils/itemUtils.d.ts +0 -45
  159. package/dist/npm/utils/itemUtils.js +0 -205
  160. package/dist/npm/utils/misc.d.ts +0 -9
  161. package/dist/npm/utils/misc.js +0 -22
@@ -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.js';
8
- import { resolveItemId, isEnabledAndAllParentsEnabled, hasChildren } from './utils/itemUtils.js';
9
- import { TreeViewItem } from './TreeViewItem.js';
10
- import { ZERO_LEVEL_ZERO_NODE_ID, getItemById as _getItemById } from './utils/itemIdUtils.js';
11
- import FieldsService from './utils/FieldsService.js';
12
- import { packageMetadata } from './package-metadata.js';
13
- import { CHECK_FIELD, CHECK_INDETERMINATE_FIELD, CHILDREN_FIELD, DISABLED_FIELD, EXPAND_FIELD, HAS_CHILDREN_FIELD, SELECT_FIELD, TEXT_FIELD } from './utils/consts.js';
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&lt;[TreeViewProps]({% slug api_treeview_treeviewprops %})&gt;</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`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
56
- * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
57
- * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
58
- * * `undefined`&mdash;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.js';
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`&mdash;Indicates that the dragged item is positioned at the beginning of the destination item.
77
- * * `after`&mdash;Indicates that the dragged item is positioned at the end of the destination item.
78
- * * `child`&mdash;Indicates that the dragged item is positioned in the middle of the destination item.
79
- * * `undefined`&mdash;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 };