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