@progress/kendo-vue-treeview 5.3.0-dev.202410141143 → 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.
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,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 };
@@ -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`&mdash;Indicates that an item is expanded.
54
- * * `selected`&mdash;Indicates that an item is selected.
55
- * * `checked`&mdash;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
- }
@@ -1,2 +0,0 @@
1
- /* eslint-disable max-len */
2
- export {};