@onereach/ui-components 8.19.3 → 8.19.4-beta.3979.0

package/dist/esm/v2/{OrTree-a485bc1d.js → OrTree-776198d7.js}

@@ -59,12 +59,14 @@ const TreeNodeDragIndicatorPosition = {
   top: ['top-[-1px]'],
   middle: ['top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
   // Theme
-  'bg-transparent', 'border-x-0', 'border-y-2', 'border-primary', 'dark:border-primary-dark'],
+  'bg-transparent', 'border-x-2', 'border-y-2', 'border-primary', 'dark:border-primary-dark'],
   bottom: ['bottom-[-1px]']
 };
+const ChildrenDragoverStyles = ['top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
+// Theme
+'bg-transparent', 'border-x-2', 'border-y-2', 'border-primary', 'dark:border-primary-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrTreeNode',
   components: {
     OrButton: __vue_component__$2,
     OrIcon: __vue_component__$3
@@ -96,6 +98,7 @@ var script$1 = defineComponent({
     }
   },
   emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
+  expose: ['isDragOver'],
   setup(props, _ref) {
     let {
       emit
@@ -103,6 +106,7 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     const nodeRoot = ref();
+    const childrenTreeNodes = ref([]);
     // State
     const isDragOver = ref(false);
     const isDrag = ref(false);
@@ -112,6 +116,7 @@ var script$1 = defineComponent({
     const hasCollapseTrigger = computed(() => props.node.collapsible || hasChildren.value);
     const isLeaf = computed(() => !hasChildren.value);
     const canDrag = computed(() => props.draggable !== false && props.node.draggable !== false);
+    const hasDragoverChildren = computed(() => childrenTreeNodes.value.some(child => child.isDragOver));
     // Effects
     watch(() => props.depth, value => {
       applyPadding(unref(nodeRoot), value, hasCollapseTrigger.value);
@@ -138,10 +143,16 @@ var script$1 = defineComponent({
       });
     };
     const handleDragStart = e => {
-      var _a;
+      var _a, _b, _c;
       isDrag.value = true;
       setIsOpen(false);
       (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
+      const crt = (_b = unref(nodeRoot)) === null || _b === void 0 ? void 0 : _b.cloneNode(true);
+      if (crt) {
+        crt.style.opacity = '0';
+        document.body.appendChild(crt);
+        (_c = e.dataTransfer) === null || _c === void 0 ? void 0 : _c.setDragImage(crt, 0, 0);
+      }
       emit('dragstart', props.node.key);
     };
     const handleDragOver = e => {
@@ -176,7 +187,7 @@ var script$1 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-tree-node-v3', ...TreeNodeRoot]);
     const nodeStyles = computed(() => [...TreeNodeItemRoot, ...(props.parentSelected ? TreeNodeItemRootParentSelected : [])]);
-    const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value]]);
+    const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value], ...(hasDragoverChildren.value ? ChildrenDragoverStyles : [])]);
     return {
       root,
       isOpen,
@@ -184,6 +195,7 @@ var script$1 = defineComponent({
       rootStyles,
       nodeStyles,
       dragIndicatorStyles,
+      childrenTreeNodes,
       setIsOpen,
       nodeRoot,
       isDrag,
@@ -197,6 +209,7 @@ var script$1 = defineComponent({
       handleDragOver,
       handleDragLeave,
       hasCollapseTrigger,
+      hasDragoverChildren,
       isDragOver
     };
   }
@@ -266,11 +279,13 @@ var __vue_render__$1 = function () {
     isDrag: _vm.isDrag,
     isDragOver: _vm.isDragOver,
     depth: _vm.depth
-  }), _vm._v(" "), _vm.isDragOver && !_vm.isDrag ? _c('div', {
+  }), _vm._v(" "), _vm.hasDragoverChildren || _vm.isDragOver && !_vm.isDrag ? _c('div', {
     class: _vm.dragIndicatorStyles
   }) : _vm._e()], 2), _vm._v(" "), !_vm.isLeaf && _vm.isOpen ? _vm._l(_vm.node.children, function (child) {
     return _c('OrTreeNode', {
       key: child.key,
+      ref: "childrenTreeNodes",
+      refInFor: true,
       attrs: {
         "parent-selected": _vm.selected || undefined,
         "node": child,

package/dist/esm/v2/components/index.js

@@ -143,7 +143,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-5aa9
 export { _ as OrTooltip } from '../OrTooltip-89b494f8.js';
 export { _ as OrTooltipContent } from '../OrTooltipContent-57a25502.js';
 export { _ as OrTooltipV3 } from '../OrTooltip-802dcc86.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-a485bc1d.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-776198d7.js';
 import 'vue-demi';
 import '../style-inject.es-4c6f2515.js';
 import '../normalize-component-6e8e3d80.js';

package/dist/esm/v2/components/or-tree-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-a485bc1d.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-776198d7.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrButton-8d1efd4a.js';