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

package/dist/esm/v2/components/or-tree-v3/partials/or-tree-node/styles.d.ts

@@ -4,3 +4,4 @@ export declare const TreeNodeItemRoot: string[];
 export declare const TreeNodeItemRootParentSelected: string[];
 export declare const TreeNodeDragIndicator: string[];
 export declare const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]>;
+export declare const ChildrenDragoverStyles: string[];

package/dist/esm/v2/components/or-tree-v3/types.d.ts

@@ -1,3 +1,4 @@
+import OrTreeNode from './or-tree-node/OrTreeNode.vue';
 export type TreeNode = {
     key: string;
     children?: TreeNode[];
@@ -13,3 +14,4 @@ export declare enum TreeNodeDropPosition {
     Bottom = "bottom",
     Middle = "middle"
 }
+export type TreeNodeType = InstanceType<typeof OrTreeNode>;

package/dist/esm/v2/index.js

@@ -143,7 +143,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9d
 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';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';

package/dist/esm/v3/{OrTree-0a8d7804.js → OrTree-b0994048.js}

@@ -58,12 +58,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: script$2,
     OrIcon: script$3
@@ -95,6 +97,7 @@ var script$1 = defineComponent({
     }
   },
   emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
+  expose: ['isDragOver'],
   setup(props, _ref) {
     let {
       emit
@@ -102,6 +105,7 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     const nodeRoot = ref();
+    const childrenTreeNodes = ref([]);
     // State
     const isDragOver = ref(false);
     const isDrag = ref(false);
@@ -111,6 +115,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);
@@ -137,10 +142,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 => {
@@ -175,7 +186,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,
@@ -183,6 +194,7 @@ var script$1 = defineComponent({
       rootStyles,
       nodeStyles,
       dragIndicatorStyles,
+      childrenTreeNodes,
       setIsOpen,
       nodeRoot,
       isDrag,
@@ -196,6 +208,7 @@ var script$1 = defineComponent({
       handleDragOver,
       handleDragLeave,
       hasCollapseTrigger,
+      hasDragoverChildren,
       isDragOver
     };
   }
@@ -254,7 +267,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     isDrag: _ctx.isDrag,
     isDragOver: _ctx.isDragOver,
     depth: _ctx.depth
-  })), () => [createTextVNode(toDisplayString(_ctx.node.key), 1 /* TEXT */)]), _ctx.isDragOver && !_ctx.isDrag ? (openBlock(), createElementBlock("div", {
+  })), () => [createTextVNode(toDisplayString(_ctx.node.key), 1 /* TEXT */)]), _ctx.hasDragoverChildren || _ctx.isDragOver && !_ctx.isDrag ? (openBlock(), createElementBlock("div", {
     key: 1,
     class: normalizeClass(_ctx.dragIndicatorStyles)
   }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true)], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), !_ctx.isLeaf && _ctx.isOpen ? (openBlock(true), createElementBlock(Fragment, {
@@ -262,6 +275,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, renderList(_ctx.node.children, child => {
     return openBlock(), createBlock(_component_OrTreeNode, {
       key: child.key,
+      ref_for: true,
+      ref: "childrenTreeNodes",
       "parent-selected": _ctx.selected || undefined,
       node: child,
       depth: _ctx.depth + 1,

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

@@ -139,7 +139,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from '../useToast-5aa9
 export { s as OrTooltip } from '../OrTooltip-ac7736a3.js';
 export { s as OrTooltipContent } from '../OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from '../OrTooltip-20d8d2f3.js';
-export { s as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-0a8d7804.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-b0994048.js';
 import 'vue-demi';
 import 'vue';
 import '../style-inject.es-4c6f2515.js';

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

@@ -1,4 +1,4 @@
-export { s as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-0a8d7804.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-b0994048.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrButton-a881b13b.js';

package/dist/esm/v3/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue.d.ts

@@ -32,6 +32,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     rootStyles: import("vue-demi").ComputedRef<string[]>;
     nodeStyles: import("vue-demi").ComputedRef<string[]>;
     dragIndicatorStyles: import("vue-demi").ComputedRef<string[]>;
+    childrenTreeNodes: import("vue-demi").Ref<any[]>;
     setIsOpen: (value?: boolean | undefined) => boolean;
     nodeRoot: import("vue-demi").Ref<HTMLElement | undefined>;
     isDrag: import("vue-demi").Ref<boolean>;
@@ -45,6 +46,7 @@ declare const _default: import("vue-demi").DefineComponent<{
     handleDragOver: (e: DragEvent) => void;
     handleDragLeave: (e: DragEvent) => void;
     hasCollapseTrigger: import("vue-demi").ComputedRef<boolean>;
+    hasDragoverChildren: import("vue-demi").ComputedRef<boolean>;
     isDragOver: import("vue-demi").Ref<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu")[], "drop" | "dragstart" | "click" | "expand" | "collapse" | "contextmenu", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     node: {

package/dist/esm/v3/components/or-tree-v3/partials/or-tree-node/styles.d.ts

@@ -4,3 +4,4 @@ export declare const TreeNodeItemRoot: string[];
 export declare const TreeNodeItemRootParentSelected: string[];
 export declare const TreeNodeDragIndicator: string[];
 export declare const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]>;
+export declare const ChildrenDragoverStyles: string[];

package/dist/esm/v3/components/or-tree-v3/types.d.ts

@@ -1,3 +1,4 @@
+import OrTreeNode from './or-tree-node/OrTreeNode.vue';
 export type TreeNode = {
     key: string;
     children?: TreeNode[];
@@ -13,3 +14,4 @@ export declare enum TreeNodeDropPosition {
     Bottom = "bottom",
     Middle = "middle"
 }
+export type TreeNodeType = InstanceType<typeof OrTreeNode>;

package/dist/esm/v3/index.js

@@ -139,7 +139,7 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-5aa9d
 export { s as OrTooltip } from './OrTooltip-ac7736a3.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from './OrTooltip-20d8d2f3.js';
-export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-0a8d7804.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-b0994048.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.19.3",
+  "version": "8.19.4-beta.3979.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,6 +177,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "33d7530480f6622df003b82190d6f2548ccc4a37"
+  }
 }

package/src/components/or-tree-v3/partials/or-tree-node/OrTreeNode.vue

@@ -38,7 +38,7 @@
         {{ node.key }}
       </slot>
       <div
-        v-if="isDragOver && !isDrag"
+        v-if="hasDragoverChildren || isDragOver && !isDrag"
         :class="dragIndicatorStyles"
       />
     </div>
@@ -48,6 +48,7 @@
       <OrTreeNode
         v-for="child in node.children"
         :key="child.key"
+        ref="childrenTreeNodes"
         :parent-selected="selected || undefined"
         :node="child"
         :depth="depth + 1"
@@ -76,11 +77,10 @@ import { useToggle } from '@vueuse/core';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
 import { getDropOffset, applyPadding } from './utils';
-import { TreeNode, TreeNodeDropPosition } from '../../types';
-import { TreeNodeRoot, TreeNodeItemRoot, TreeNodeDragIndicator, TreeNodeDragIndicatorPosition, TreeNodeItemRootParentSelected } from './styles';
+import { TreeNode, TreeNodeDropPosition, TreeNodeType } from '../../types';
+import { TreeNodeRoot, TreeNodeItemRoot, TreeNodeDragIndicator, TreeNodeDragIndicatorPosition, TreeNodeItemRootParentSelected, ChildrenDragoverStyles } from './styles';
 
 export default defineComponent({
-  name: 'OrTreeNode',
   components: {
     OrButton,
     OrIcon,
@@ -112,10 +112,12 @@ export default defineComponent({
     },
   },
   emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
+  expose: ['isDragOver'],
   setup(props, { emit }) {
     // Refs
     const root = ref<HTMLElement>();
     const nodeRoot = ref<HTMLElement>();
+    const childrenTreeNodes = ref<TreeNodeType[]>([]);
 
     // State
     const isDragOver = ref(false);
@@ -126,6 +128,8 @@ export default 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);
@@ -157,7 +161,16 @@ export default defineComponent({
     const handleDragStart = (e: DragEvent) => {
       isDrag.value = true;
       setIsOpen(false);
+
       e?.dataTransfer?.setData('node-key', props.node.key);
+
+      const crt = unref(nodeRoot)?.cloneNode(true) as HTMLElement;
+      if (crt) {
+        crt.style.opacity = '0';
+        document.body.appendChild(crt);
+        e.dataTransfer?.setDragImage(crt, 0, 0);
+      }
+
       emit('dragstart', props.node.key);
     };
 
@@ -192,6 +205,7 @@ export default defineComponent({
         emit('expand', props.node.key);
       }
     };
+
     // Styles
     const rootStyles = computed(() => [
       'or-tree-node-v3',
@@ -206,6 +220,7 @@ export default defineComponent({
     const dragIndicatorStyles = computed(() => [
       ...TreeNodeDragIndicator,
       ...TreeNodeDragIndicatorPosition[dragPosition.value],
+      ...(hasDragoverChildren.value ? ChildrenDragoverStyles : []),
     ]);
 
     return {
@@ -215,6 +230,7 @@ export default defineComponent({
       rootStyles,
       nodeStyles,
       dragIndicatorStyles,
+      childrenTreeNodes,
       setIsOpen,
       nodeRoot,
       isDrag,
@@ -228,6 +244,7 @@ export default defineComponent({
       handleDragOver,
       handleDragLeave,
       hasCollapseTrigger,
+      hasDragoverChildren,
       isDragOver,
     };
   },

package/src/components/or-tree-v3/partials/or-tree-node/styles.ts

@@ -49,7 +49,7 @@ export const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[
 
     // Theme
     'bg-transparent',
-    'border-x-0',
+    'border-x-2',
     'border-y-2',
     'border-primary',
     'dark:border-primary-dark',
@@ -58,3 +58,16 @@ export const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[
     'bottom-[-1px]',
   ],
 };
+
+export const ChildrenDragoverStyles: string[] = [
+  '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',
+];

package/src/components/or-tree-v3/types.ts

@@ -1,3 +1,5 @@
+import OrTreeNode from './or-tree-node/OrTreeNode.vue';
+
 export type TreeNode = {
   key: string;
   children?: TreeNode[];
@@ -14,3 +16,5 @@ export enum TreeNodeDropPosition {
   Bottom = 'bottom',
   Middle = 'middle',
 }
+
+export type TreeNodeType = InstanceType<typeof OrTreeNode>;