@onereach/ui-components 4.10.1 → 4.10.2-beta.2933.0

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 (49) hide show
  1. package/dist/bundled/v2/components/OrTreeV3/OrTree.js +431 -0
  2. package/dist/bundled/v2/components/OrTreeV3/OrTree.vue.d.ts +52 -0
  3. package/dist/bundled/v2/components/OrTreeV3/index.d.ts +2 -0
  4. package/dist/bundled/v2/components/OrTreeV3/index.js +15 -0
  5. package/dist/bundled/v2/components/OrTreeV3/types.d.ts +15 -0
  6. package/dist/bundled/v2/components/OrTreeV3/types.js +8 -0
  7. package/dist/bundled/v2/components/index.d.ts +1 -0
  8. package/dist/bundled/v2/components/index.js +2 -0
  9. package/dist/bundled/v2/index.js +3 -1
  10. package/dist/bundled/v3/OrTree.vue_vue_type_script_lang-371b19b2.js +310 -0
  11. package/dist/bundled/v3/components/OrTreeV3/OrTree.js +48 -0
  12. package/dist/bundled/v3/components/OrTreeV3/OrTree.vue.d.ts +44 -0
  13. package/dist/bundled/v3/components/OrTreeV3/index.d.ts +2 -0
  14. package/dist/bundled/v3/components/OrTreeV3/index.js +18 -0
  15. package/dist/bundled/v3/components/OrTreeV3/types.d.ts +15 -0
  16. package/dist/bundled/v3/components/OrTreeV3/types.js +8 -0
  17. package/dist/bundled/v3/components/index.d.ts +1 -0
  18. package/dist/bundled/v3/components/index.js +2 -0
  19. package/dist/bundled/v3/index.js +4 -1
  20. package/dist/esm/v2/OrTree-9db9d3d3.js +428 -0
  21. package/dist/esm/v2/components/index.d.ts +1 -0
  22. package/dist/esm/v2/components/index.js +1 -0
  23. package/dist/esm/v2/components/or-tree-v3/OrTree.vue.d.ts +52 -0
  24. package/dist/esm/v2/components/or-tree-v3/index.d.ts +2 -0
  25. package/dist/esm/v2/components/or-tree-v3/index.js +7 -0
  26. package/dist/esm/v2/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue.d.ts +118 -0
  27. package/dist/esm/v2/components/or-tree-v3/partials/or-tree-node/styles.d.ts +5 -0
  28. package/dist/esm/v2/components/or-tree-v3/partials/or-tree-node/utils.d.ts +3 -0
  29. package/dist/esm/v2/components/or-tree-v3/types.d.ts +15 -0
  30. package/dist/esm/v2/index.js +1 -0
  31. package/dist/esm/v3/OrTree-4d97e50c.js +343 -0
  32. package/dist/esm/v3/components/index.d.ts +1 -0
  33. package/dist/esm/v3/components/index.js +1 -0
  34. package/dist/esm/v3/components/or-tree-v3/OrTree.vue.d.ts +44 -0
  35. package/dist/esm/v3/components/or-tree-v3/index.d.ts +2 -0
  36. package/dist/esm/v3/components/or-tree-v3/index.js +7 -0
  37. package/dist/esm/v3/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue.d.ts +87 -0
  38. package/dist/esm/v3/components/or-tree-v3/partials/or-tree-node/styles.d.ts +5 -0
  39. package/dist/esm/v3/components/or-tree-v3/partials/or-tree-node/utils.d.ts +3 -0
  40. package/dist/esm/v3/components/or-tree-v3/types.d.ts +15 -0
  41. package/dist/esm/v3/index.js +1 -0
  42. package/package.json +2 -3
  43. package/src/components/index.ts +1 -0
  44. package/src/components/or-tree-v3/OrTree.vue +70 -0
  45. package/src/components/or-tree-v3/index.ts +2 -0
  46. package/src/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue +238 -0
  47. package/src/components/or-tree-v3/partials/or-tree-node/styles.ts +44 -0
  48. package/src/components/or-tree-v3/partials/or-tree-node/utils.ts +25 -0
  49. package/src/components/or-tree-v3/types.ts +16 -0
@@ -0,0 +1,428 @@
1
+ import { defineComponent, ref, computed, watch, unref, onMounted } from 'vue-demi';
2
+ import { useToggle } from '@vueuse/core';
3
+ import { _ as __vue_component__$2 } from './OrButton-9622e713.js';
4
+ import { _ as __vue_component__$3 } from './OrIcon-d35a84d8.js';
5
+ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
6
+
7
+ var TreeNodeDropPosition;
8
+ (function (TreeNodeDropPosition) {
9
+ TreeNodeDropPosition["Top"] = "top";
10
+ TreeNodeDropPosition["Bottom"] = "bottom";
11
+ TreeNodeDropPosition["Middle"] = "middle";
12
+ })(TreeNodeDropPosition || (TreeNodeDropPosition = {}));
13
+
14
+ function inRange(num, min, max) {
15
+ return num >= min && num <= max;
16
+ }
17
+ function getDropOffset(e) {
18
+ let canMiddleDrop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
19
+ const {
20
+ clientY
21
+ } = e;
22
+ const {
23
+ top,
24
+ height
25
+ } = e.target.getBoundingClientRect();
26
+ const offset = (clientY - top) / height;
27
+ if (canMiddleDrop && inRange(offset, 0.4, 0.7)) {
28
+ return TreeNodeDropPosition.Middle;
29
+ } else if (inRange(offset, 0, 0.5)) {
30
+ return TreeNodeDropPosition.Top;
31
+ }
32
+ return TreeNodeDropPosition.Bottom;
33
+ }
34
+ function applyPadding(element, level, hasCollapseTrigger) {
35
+ const padding = level * 20 - (hasCollapseTrigger ? 20 : 0);
36
+ Object.assign(element.style, {
37
+ paddingLeft: `${padding}px`
38
+ });
39
+ }
40
+
41
+ const TreeNodeRoot = [];
42
+ const TreeNodeItemRoot = [
43
+ // Layout
44
+ 'layout-row', 'py-xs', '!items-start',
45
+ // Theme
46
+ 'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark', 'selected:bg-primary-opacity-0-08', 'dark:selected:bg-primary-opacity-0-08-dark', 'selected:hover:bg-primary-opacity-0-16', 'dark:selected:hover:bg-primary-opacity-0-16-dark'];
47
+ const TreeNodeDragIndicator = [
48
+ // Layout
49
+ 'absolute h-[2px] w-full left-[0px]',
50
+ // Theme
51
+ 'bg-primary',
52
+ // Interaction
53
+ 'pointer-events-none'];
54
+ const TreeNodeDragIndicatorPosition = {
55
+ top: ['top-[-1px]'],
56
+ middle: ['top-[0px]', 'left-[0px]', 'w-[2px]', '!h-full'],
57
+ bottom: ['bottom-[-1px]']
58
+ };
59
+
60
+ var script$1 = defineComponent({
61
+ name: 'OrTreeNode',
62
+ components: {
63
+ OrButton: __vue_component__$2,
64
+ OrIcon: __vue_component__$3
65
+ },
66
+ props: {
67
+ node: {
68
+ type: Object,
69
+ required: true
70
+ },
71
+ collapsible: {
72
+ type: Boolean,
73
+ default: false
74
+ },
75
+ selected: {
76
+ type: Boolean,
77
+ default: undefined
78
+ },
79
+ expanded: {
80
+ type: Boolean,
81
+ default: true
82
+ },
83
+ depth: {
84
+ type: Number,
85
+ default: 1
86
+ },
87
+ draggable: {
88
+ type: Boolean,
89
+ default: null
90
+ }
91
+ },
92
+ emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
93
+ setup(props, _ref) {
94
+ let {
95
+ emit
96
+ } = _ref;
97
+ // Refs
98
+ const root = ref(null);
99
+ const nodeRoot = ref(null);
100
+ // State
101
+ const isDragOver = ref(false);
102
+ const isDrag = ref(false);
103
+ const dragPosition = ref('top');
104
+ const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
105
+ const [isOpen, setIsOpen] = useToggle(props.expanded);
106
+ const hasCollapseTrigger = computed(() => props.collapsible && hasChildren.value);
107
+ const isLeaf = computed(() => !hasChildren.value);
108
+ // Effects
109
+ watch(() => props.depth, value => {
110
+ applyPadding(unref(nodeRoot), value, hasCollapseTrigger.value);
111
+ });
112
+ watch(() => props.expanded, value => {
113
+ if (value !== undefined) {
114
+ setIsOpen(value);
115
+ }
116
+ }, {
117
+ immediate: true
118
+ });
119
+ onMounted(() => {
120
+ applyPadding(unref(nodeRoot), props.depth, hasCollapseTrigger.value);
121
+ });
122
+ // Methods
123
+ const handleDrop = e => {
124
+ var _a;
125
+ const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
126
+ isDragOver.value = false;
127
+ emit('drop', {
128
+ dropKey: props.node.key,
129
+ dragKey: nodeKey,
130
+ dropPosition: dragPosition.value
131
+ });
132
+ };
133
+ const handleDragStart = e => {
134
+ var _a;
135
+ isDrag.value = true;
136
+ setIsOpen(false);
137
+ (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
138
+ emit('dragstart', props.node.key);
139
+ };
140
+ const handleDragOver = e => {
141
+ e.preventDefault();
142
+ e.stopPropagation();
143
+ dragPosition.value = getDropOffset(e, props.node.canMiddleDrop);
144
+ isDragOver.value = true;
145
+ };
146
+ const handleDragLeave = e => {
147
+ e.preventDefault();
148
+ e.stopPropagation();
149
+ isDragOver.value = false;
150
+ };
151
+ const handleContextMenu = e => {
152
+ e.preventDefault();
153
+ emit('contextmenu', {
154
+ $event: e,
155
+ nodeKey: props.node.key
156
+ });
157
+ };
158
+ const handleClick = e => {
159
+ e.preventDefault();
160
+ emit('click', props.node.key);
161
+ };
162
+ const handleCollapse = () => {
163
+ if (isOpen.value) {
164
+ setIsOpen(false);
165
+ emit('collapse', props.node.key);
166
+ } else {
167
+ setIsOpen(true);
168
+ emit('expand', props.node.key);
169
+ }
170
+ };
171
+ // Styles
172
+ const rootStyles = computed(() => ['or-tree-node-v3', ...TreeNodeRoot]);
173
+ const nodeStyles = computed(() => [...TreeNodeItemRoot, 'relative']);
174
+ const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value]]);
175
+ return {
176
+ root,
177
+ isOpen,
178
+ isLeaf,
179
+ rootStyles,
180
+ nodeStyles,
181
+ dragIndicatorStyles,
182
+ setIsOpen,
183
+ nodeRoot,
184
+ isDrag,
185
+ dragPosition,
186
+ handleDragStart,
187
+ handleDrop,
188
+ handleCollapse,
189
+ handleContextMenu,
190
+ handleClick,
191
+ handleDragOver,
192
+ handleDragLeave,
193
+ hasCollapseTrigger,
194
+ isDragOver
195
+ };
196
+ }
197
+ });
198
+
199
+ /* script */
200
+ const __vue_script__$1 = script$1;
201
+
202
+ /* template */
203
+ var __vue_render__$1 = function () {
204
+ var _vm = this;
205
+ var _h = _vm.$createElement;
206
+ var _c = _vm._self._c || _h;
207
+ return _c('div', {
208
+ ref: "root",
209
+ staticClass: "or-tree-node-v3"
210
+ }, [_c('div', {
211
+ ref: "nodeRoot",
212
+ class: _vm.nodeStyles,
213
+ attrs: {
214
+ "draggable": _vm.draggable ? true : undefined,
215
+ "selected": _vm.selected ? true : undefined
216
+ },
217
+ on: {
218
+ "dragend": function ($event) {
219
+ _vm.isDrag = false;
220
+ },
221
+ "dragstart": function ($event) {
222
+ $event.stopPropagation();
223
+ return _vm.handleDragStart.apply(null, arguments);
224
+ },
225
+ "dragover": function ($event) {
226
+ $event.preventDefault();
227
+ return _vm.handleDragOver.apply(null, arguments);
228
+ },
229
+ "dragenter": function ($event) {
230
+ $event.preventDefault();
231
+ return _vm.handleDragOver.apply(null, arguments);
232
+ },
233
+ "dragleave": _vm.handleDragLeave,
234
+ "drop": _vm.handleDrop,
235
+ "click": _vm.handleClick,
236
+ "contextmenu": _vm.handleContextMenu
237
+ }
238
+ }, [_vm.hasCollapseTrigger ? [_c('OrButton', {
239
+ attrs: {
240
+ "variant": "link"
241
+ },
242
+ on: {
243
+ "click": function ($event) {
244
+ $event.stopPropagation();
245
+ return _vm.handleCollapse.apply(null, arguments);
246
+ }
247
+ }
248
+ }, [_c('OrIcon', {
249
+ class: [_vm.isOpen ? 'rotate-90' : 'rotate-0'],
250
+ attrs: {
251
+ "icon": "arrow_right",
252
+ "size": "l"
253
+ }
254
+ })], 1)] : _vm._e(), _vm._v(" "), _vm._t("node", function () {
255
+ return [_vm._v("\n " + _vm._s(_vm.node.key) + "\n ")];
256
+ }, null, {
257
+ node: _vm.node,
258
+ isOpen: _vm.isOpen,
259
+ isLeaf: _vm.isLeaf,
260
+ isDrag: _vm.isDrag,
261
+ isDragOver: _vm.isDragOver,
262
+ depth: _vm.depth
263
+ }), _vm._v(" "), _vm.isDragOver && !_vm.isDrag ? _c('div', {
264
+ class: _vm.dragIndicatorStyles
265
+ }) : _vm._e()], 2), _vm._v(" "), !_vm.isLeaf && _vm.isOpen ? _vm._l(_vm.node.children, function (child) {
266
+ return _c('OrTreeNode', {
267
+ key: child.key,
268
+ attrs: {
269
+ "node": child,
270
+ "collapsible": _vm.collapsible || child.collapsible,
271
+ "depth": _vm.depth + 1,
272
+ "selected": _vm.selected || child.selected,
273
+ "draggable": !child.hasOwnProperty('draggable') || child.draggable === null ? _vm.draggable : child.draggable
274
+ },
275
+ on: {
276
+ "drop": function ($event) {
277
+ return _vm.$emit('drop', $event);
278
+ },
279
+ "dragstart": function ($event) {
280
+ return _vm.$emit('dragstart', $event);
281
+ },
282
+ "click": function ($event) {
283
+ return _vm.$emit('click', $event);
284
+ },
285
+ "expand": function ($event) {
286
+ return _vm.$emit('expand', $event);
287
+ },
288
+ "collapse": function ($event) {
289
+ return _vm.$emit('collapse', $event);
290
+ },
291
+ "contextmenu": function ($event) {
292
+ return _vm.$emit('contextmenu', $event);
293
+ }
294
+ },
295
+ scopedSlots: _vm._u([{
296
+ key: "node",
297
+ fn: function (props) {
298
+ return [_vm._t("node", null, null, props)];
299
+ }
300
+ }], null, true)
301
+ });
302
+ }) : _vm._e()], 2);
303
+ };
304
+ var __vue_staticRenderFns__$1 = [];
305
+
306
+ /* style */
307
+ const __vue_inject_styles__$1 = undefined;
308
+ /* scoped */
309
+ const __vue_scope_id__$1 = undefined;
310
+ /* module identifier */
311
+ const __vue_module_identifier__$1 = undefined;
312
+ /* functional template */
313
+ const __vue_is_functional_template__$1 = false;
314
+ /* style inject */
315
+
316
+ /* style inject SSR */
317
+
318
+ /* style inject shadow dom */
319
+
320
+ const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
321
+ render: __vue_render__$1,
322
+ staticRenderFns: __vue_staticRenderFns__$1
323
+ }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
324
+
325
+ var script = defineComponent({
326
+ name: 'OrTree',
327
+ components: {
328
+ OrTreeNode: __vue_component__$1
329
+ },
330
+ props: {
331
+ nodes: {
332
+ type: Array,
333
+ default: () => []
334
+ },
335
+ collapsible: {
336
+ type: Boolean,
337
+ default: false
338
+ },
339
+ draggable: {
340
+ type: Boolean,
341
+ default: false
342
+ }
343
+ },
344
+ emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
345
+ setup() {
346
+ // Refs
347
+ const root = ref(null);
348
+ // Styles
349
+ const rootStyles = computed(() => ['or-tree-v3']);
350
+ return {
351
+ root,
352
+ rootStyles
353
+ };
354
+ }
355
+ });
356
+
357
+ /* script */
358
+ const __vue_script__ = script;
359
+
360
+ /* template */
361
+ var __vue_render__ = function () {
362
+ var _vm = this;
363
+ var _h = _vm.$createElement;
364
+ var _c = _vm._self._c || _h;
365
+ return _c('div', {
366
+ ref: "root",
367
+ class: _vm.rootStyles
368
+ }, _vm._l(_vm.nodes, function (item) {
369
+ return _c('OrTreeNode', {
370
+ key: item.key,
371
+ attrs: {
372
+ "node": item,
373
+ "collapsible": _vm.collapsible || item.collapsible,
374
+ "expanded": item.expanded,
375
+ "selected": item.selected,
376
+ "draggable": !item.hasOwnProperty('draggable') || item.draggable === null ? _vm.draggable : item.draggable
377
+ },
378
+ on: {
379
+ "drop": function ($event) {
380
+ return _vm.$emit('drop', $event);
381
+ },
382
+ "dragstart": function ($event) {
383
+ return _vm.$emit('dragstart', $event);
384
+ },
385
+ "click": function ($event) {
386
+ return _vm.$emit('click', $event);
387
+ },
388
+ "collapse": function ($event) {
389
+ return _vm.$emit('collapse', $event);
390
+ },
391
+ "expand": function ($event) {
392
+ return _vm.$emit('expand', $event);
393
+ },
394
+ "contextmenu": function ($event) {
395
+ return _vm.$emit('contextmenu', $event);
396
+ }
397
+ },
398
+ scopedSlots: _vm._u([{
399
+ key: "node",
400
+ fn: function (props) {
401
+ return [_vm._t("node", null, null, props)];
402
+ }
403
+ }], null, true)
404
+ });
405
+ }), 1);
406
+ };
407
+ var __vue_staticRenderFns__ = [];
408
+
409
+ /* style */
410
+ const __vue_inject_styles__ = undefined;
411
+ /* scoped */
412
+ const __vue_scope_id__ = undefined;
413
+ /* module identifier */
414
+ const __vue_module_identifier__ = undefined;
415
+ /* functional template */
416
+ const __vue_is_functional_template__ = false;
417
+ /* style inject */
418
+
419
+ /* style inject SSR */
420
+
421
+ /* style inject shadow dom */
422
+
423
+ const __vue_component__ = /*#__PURE__*/normalizeComponent({
424
+ render: __vue_render__,
425
+ staticRenderFns: __vue_staticRenderFns__
426
+ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
427
+
428
+ export { TreeNodeDropPosition as T, __vue_component__ as _ };
@@ -104,3 +104,4 @@ export * from './or-toast';
104
104
  export * from './or-toast-v3';
105
105
  export * from './or-tooltip';
106
106
  export * from './or-tooltip-v3';
107
+ export * from './or-tree-v3';
@@ -118,6 +118,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-a133
118
118
  export { _ as OrTooltip } from '../OrTooltip-0bbf1ed5.js';
119
119
  export { _ as OrTooltipContent } from '../OrTooltipContent-57a25502.js';
120
120
  export { _ as OrTooltipV3 } from '../OrTooltip-bf4c725c.js';
121
+ export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-9db9d3d3.js';
121
122
  import 'vue-demi';
122
123
  import '../style-inject.es-4c6f2515.js';
123
124
  import '../normalize-component-6e8e3d80.js';
@@ -0,0 +1,52 @@
1
+ import { PropType } from 'vue-demi';
2
+ import { TreeNode } from './types';
3
+ declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
+ root: import("@vue/composition-api").Ref<HTMLElement | null>;
5
+ rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
6
+ }> & import("@vue/composition-api").Data, {}, {}, {
7
+ nodes: {
8
+ type: PropType<TreeNode[]>;
9
+ default: () => never[];
10
+ };
11
+ collapsible: {
12
+ type: BooleanConstructor;
13
+ default: boolean;
14
+ };
15
+ draggable: {
16
+ type: BooleanConstructor;
17
+ default: boolean;
18
+ };
19
+ }, import("@vue/composition-api").ExtractPropTypes<{
20
+ nodes: {
21
+ type: PropType<TreeNode[]>;
22
+ default: () => never[];
23
+ };
24
+ collapsible: {
25
+ type: BooleanConstructor;
26
+ default: boolean;
27
+ };
28
+ draggable: {
29
+ type: BooleanConstructor;
30
+ default: boolean;
31
+ };
32
+ }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
33
+ nodes: TreeNode[];
34
+ collapsible: boolean;
35
+ draggable: boolean;
36
+ } & {} & {
37
+ [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
38
+ }, import("@vue/composition-api").ShallowUnwrapRef<{
39
+ root: import("@vue/composition-api").Ref<HTMLElement | null>;
40
+ rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
41
+ }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
42
+ nodes: TreeNode[];
43
+ collapsible: boolean;
44
+ draggable: boolean;
45
+ } & {} & {
46
+ [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
47
+ }, {
48
+ nodes: TreeNode[];
49
+ collapsible: boolean;
50
+ draggable: boolean;
51
+ }, true>);
52
+ export default _default;
@@ -0,0 +1,2 @@
1
+ export { default as OrTreeV3 } from './OrTree.vue';
2
+ export * from './types';
@@ -0,0 +1,7 @@
1
+ export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-9db9d3d3.js';
2
+ import 'vue-demi';
3
+ import '@vueuse/core';
4
+ import '../../OrButton-9622e713.js';
5
+ import '../../OrLoader-b0c381f9.js';
6
+ import '../../normalize-component-6e8e3d80.js';
7
+ import '../../OrIcon-d35a84d8.js';
@@ -0,0 +1,118 @@
1
+ import { PropType } from 'vue-demi';
2
+ import { TreeNode } from '../../types';
3
+ declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
+ root: import("@vue/composition-api").Ref<HTMLElement | null>;
5
+ isOpen: import("@vue/composition-api").Ref<boolean>;
6
+ isLeaf: import("@vue/composition-api").ComputedRef<boolean>;
7
+ rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
8
+ nodeStyles: import("@vue/composition-api").ComputedRef<string[]>;
9
+ dragIndicatorStyles: import("@vue/composition-api").ComputedRef<string[]>;
10
+ setIsOpen: (value?: boolean | undefined) => boolean;
11
+ nodeRoot: import("@vue/composition-api").Ref<HTMLElement | null>;
12
+ isDrag: import("@vue/composition-api").Ref<boolean>;
13
+ dragPosition: import("@vue/composition-api").Ref<"top" | "bottom" | "middle">;
14
+ handleDragStart: (e: DragEvent) => void;
15
+ handleDrop: (e: DragEvent) => void;
16
+ handleCollapse: () => void;
17
+ handleContextMenu: (e: MouseEvent) => void;
18
+ handleClick: (e: MouseEvent) => void;
19
+ handleDragOver: (e: DragEvent) => void;
20
+ handleDragLeave: (e: DragEvent) => void;
21
+ hasCollapseTrigger: import("@vue/composition-api").ComputedRef<boolean>;
22
+ isDragOver: import("@vue/composition-api").Ref<boolean>;
23
+ }> & import("@vue/composition-api").Data, {}, {}, {
24
+ node: {
25
+ type: PropType<TreeNode>;
26
+ required: true;
27
+ };
28
+ collapsible: {
29
+ type: BooleanConstructor;
30
+ default: boolean;
31
+ };
32
+ selected: {
33
+ type: BooleanConstructor;
34
+ default: undefined;
35
+ };
36
+ expanded: {
37
+ type: BooleanConstructor;
38
+ default: boolean;
39
+ };
40
+ depth: {
41
+ type: NumberConstructor;
42
+ default: number;
43
+ };
44
+ draggable: {
45
+ type: BooleanConstructor;
46
+ default: null;
47
+ };
48
+ }, import("@vue/composition-api").ExtractPropTypes<{
49
+ node: {
50
+ type: PropType<TreeNode>;
51
+ required: true;
52
+ };
53
+ collapsible: {
54
+ type: BooleanConstructor;
55
+ default: boolean;
56
+ };
57
+ selected: {
58
+ type: BooleanConstructor;
59
+ default: undefined;
60
+ };
61
+ expanded: {
62
+ type: BooleanConstructor;
63
+ default: boolean;
64
+ };
65
+ depth: {
66
+ type: NumberConstructor;
67
+ default: number;
68
+ };
69
+ draggable: {
70
+ type: BooleanConstructor;
71
+ default: null;
72
+ };
73
+ }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
74
+ node: TreeNode;
75
+ collapsible: boolean;
76
+ selected: boolean;
77
+ expanded: boolean;
78
+ depth: number;
79
+ draggable: boolean;
80
+ } & {} & {
81
+ [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
82
+ }, import("@vue/composition-api").ShallowUnwrapRef<{
83
+ root: import("@vue/composition-api").Ref<HTMLElement | null>;
84
+ isOpen: import("@vue/composition-api").Ref<boolean>;
85
+ isLeaf: import("@vue/composition-api").ComputedRef<boolean>;
86
+ rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
87
+ nodeStyles: import("@vue/composition-api").ComputedRef<string[]>;
88
+ dragIndicatorStyles: import("@vue/composition-api").ComputedRef<string[]>;
89
+ setIsOpen: (value?: boolean | undefined) => boolean;
90
+ nodeRoot: import("@vue/composition-api").Ref<HTMLElement | null>;
91
+ isDrag: import("@vue/composition-api").Ref<boolean>;
92
+ dragPosition: import("@vue/composition-api").Ref<"top" | "bottom" | "middle">;
93
+ handleDragStart: (e: DragEvent) => void;
94
+ handleDrop: (e: DragEvent) => void;
95
+ handleCollapse: () => void;
96
+ handleContextMenu: (e: MouseEvent) => void;
97
+ handleClick: (e: MouseEvent) => void;
98
+ handleDragOver: (e: DragEvent) => void;
99
+ handleDragLeave: (e: DragEvent) => void;
100
+ hasCollapseTrigger: import("@vue/composition-api").ComputedRef<boolean>;
101
+ isDragOver: import("@vue/composition-api").Ref<boolean>;
102
+ }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
103
+ node: TreeNode;
104
+ collapsible: boolean;
105
+ selected: boolean;
106
+ expanded: boolean;
107
+ depth: number;
108
+ draggable: boolean;
109
+ } & {} & {
110
+ [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
111
+ }, {
112
+ collapsible: boolean;
113
+ selected: boolean;
114
+ expanded: boolean;
115
+ depth: number;
116
+ draggable: boolean;
117
+ }, true>);
118
+ export default _default;
@@ -0,0 +1,5 @@
1
+ import { TreeNodeDropPosition } from '../../types';
2
+ export declare const TreeNodeRoot: never[];
3
+ export declare const TreeNodeItemRoot: string[];
4
+ export declare const TreeNodeDragIndicator: string[];
5
+ export declare const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]>;
@@ -0,0 +1,3 @@
1
+ import { TreeNodeDropPosition } from '../../types';
2
+ export declare function getDropOffset(e: DragEvent, canMiddleDrop?: boolean): TreeNodeDropPosition;
3
+ export declare function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void;
@@ -0,0 +1,15 @@
1
+ export type TreeNode = {
2
+ key: string;
3
+ children?: TreeNode[];
4
+ collapsible?: boolean;
5
+ expanded?: boolean;
6
+ selected?: boolean;
7
+ draggable?: boolean;
8
+ [key: string]: any;
9
+ canMiddleDrop?: boolean;
10
+ };
11
+ export declare enum TreeNodeDropPosition {
12
+ Top = "top",
13
+ Bottom = "bottom",
14
+ Middle = "middle"
15
+ }
@@ -118,6 +118,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
118
118
  export { _ as OrTooltip } from './OrTooltip-0bbf1ed5.js';
119
119
  export { _ as OrTooltipContent } from './OrTooltipContent-57a25502.js';
120
120
  export { _ as OrTooltipV3 } from './OrTooltip-bf4c725c.js';
121
+ export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-9db9d3d3.js';
121
122
  export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
122
123
  export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
123
124
  export { u as useElevation } from './useElevation-a50ec347.js';