@onereach/ui-components 10.0.0 → 10.0.1-beta.4232.0

package/dist/bundled/v2/{OrTree-93338b57.js → OrTree-16581842.js}

@@ -74,6 +74,7 @@ function applyPadding(element, level, hasCollapseTrigger) {
     paddingLeft: `${padding}px`
   });
 }
+const dataTransferCache = {};
 
 var script$1 = defineComponent({
   name: 'OrTreeNode',
@@ -144,13 +145,19 @@ var script$1 = defineComponent({
     // Methods
     const handleDrop = e => {
       var _a;
+      let node;
       const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
       e.currentTarget.style.cursor = 'default';
       isDragOver.value = false;
+      if (nodeKey && dataTransferCache[nodeKey]) {
+        node = dataTransferCache[nodeKey];
+        delete dataTransferCache[nodeKey];
+      }
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
-        dropPosition: dragOverPosition.value
+        dropPosition: dragOverPosition.value,
+        node: node
       });
     };
     const handleDragStart = e => {
@@ -158,6 +165,7 @@ var script$1 = defineComponent({
       if (e.dataTransfer) {
         e.currentTarget.style.cursor = 'grabbing';
         (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
+        dataTransferCache[props.node.key] = props.node;
         const crt = (_b = unref(nodeRoot)) === null || _b === void 0 ? void 0 : _b.cloneNode(true);
         if (crt) {
           crt.style.opacity = '0';
@@ -167,7 +175,7 @@ var script$1 = defineComponent({
       }
       isDrag.value = true;
       setIsOpen(false);
-      emit('dragstart', props.node.key);
+      emit('dragstart', props.node);
     };
     const handleDragOver = e => {
       e.preventDefault();
@@ -182,20 +190,21 @@ var script$1 = defineComponent({
     };
     const handleContextMenu = e => {
       emit('contextmenu', Object.assign(e, {
-        nodeKey: props.node.key
+        nodeKey: props.node.key,
+        node: props.node
       }));
     };
     const handleClick = e => {
       e.preventDefault();
-      emit('click', props.node.key);
+      emit('click', props.node);
     };
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
-        emit('collapse', props.node.key);
+        emit('collapse', props.node);
       } else {
         setIsOpen(true);
-        emit('expand', props.node.key);
+        emit('expand', props.node);
       }
     };
     // Styles

package/dist/bundled/v2/components/OrTreeV3/OrTree.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrTree-93338b57.js';
+export { _ as default } from '../../OrTree-16581842.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrTreeV3/index.js

@@ -1 +1 @@
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-93338b57.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-16581842.js';

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

@@ -203,4 +203,4 @@ export { default as useQueueV3 } from './OrToastV3/composable/useQueue.js';
 export { default as OrTooltip } from './OrTooltip/OrTooltip.js';
 export { default as OrTooltipContent } from './OrTooltipContent/OrTooltipContent.js';
 export { default as OrTooltipV3 } from './OrTooltipV3/OrTooltip.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-93338b57.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-16581842.js';

package/dist/bundled/v2/index.js

@@ -81,7 +81,7 @@ export { default as useToast } from './components/OrToast/composable/useToast.js
 export { default as OrToastContainerV3 } from './components/OrToastContainerV3/OrToastContainer.js';
 export { default as useToastV3 } from './components/OrToastV3/composable/useToast.js';
 export { default as OrTooltip } from './components/OrTooltip/OrTooltip.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-93338b57.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-16581842.js';
 export { OR_AVATAR_SIZE } from './components/OrAvatar/constants.js';
 export { AvatarColor, AvatarSize } from './components/OrAvatarV3/props.js';
 export { default as OrBottomSheetV3 } from './components/OrBottomSheetV3/OrBottomSheet.js';

package/dist/bundled/v3/components/OrTreeV3/index.js

@@ -74,6 +74,7 @@ function applyPadding(element, level, hasCollapseTrigger) {
     paddingLeft: `${padding}px`
   });
 }
+const dataTransferCache = {};
 
 var script$1 = defineComponent({
   name: 'OrTreeNode',
@@ -144,13 +145,19 @@ var script$1 = defineComponent({
     // Methods
     const handleDrop = e => {
       var _a;
+      let node;
       const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
       e.currentTarget.style.cursor = 'default';
       isDragOver.value = false;
+      if (nodeKey && dataTransferCache[nodeKey]) {
+        node = dataTransferCache[nodeKey];
+        delete dataTransferCache[nodeKey];
+      }
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
-        dropPosition: dragOverPosition.value
+        dropPosition: dragOverPosition.value,
+        node: node
       });
     };
     const handleDragStart = e => {
@@ -158,6 +165,7 @@ var script$1 = defineComponent({
       if (e.dataTransfer) {
         e.currentTarget.style.cursor = 'grabbing';
         (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
+        dataTransferCache[props.node.key] = props.node;
         const crt = (_b = unref(nodeRoot)) === null || _b === void 0 ? void 0 : _b.cloneNode(true);
         if (crt) {
           crt.style.opacity = '0';
@@ -167,7 +175,7 @@ var script$1 = defineComponent({
       }
       isDrag.value = true;
       setIsOpen(false);
-      emit('dragstart', props.node.key);
+      emit('dragstart', props.node);
     };
     const handleDragOver = e => {
       e.preventDefault();
@@ -182,20 +190,21 @@ var script$1 = defineComponent({
     };
     const handleContextMenu = e => {
       emit('contextmenu', Object.assign(e, {
-        nodeKey: props.node.key
+        nodeKey: props.node.key,
+        node: props.node
       }));
     };
     const handleClick = e => {
       e.preventDefault();
-      emit('click', props.node.key);
+      emit('click', props.node);
     };
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
-        emit('collapse', props.node.key);
+        emit('collapse', props.node);
       } else {
         setIsOpen(true);
-        emit('expand', props.node.key);
+        emit('expand', props.node);
       }
     };
     // Styles

package/dist/esm/v2/{OrTree-d033defc.js → OrTree-0a2d5389.js}

@@ -75,6 +75,7 @@ function applyPadding(element, level, hasCollapseTrigger) {
     paddingLeft: `${padding}px`
   });
 }
+const dataTransferCache = {};
 
 var script$1 = defineComponent({
   name: 'OrTreeNode',
@@ -145,13 +146,19 @@ var script$1 = defineComponent({
     // Methods
     const handleDrop = e => {
       var _a;
+      let node;
       const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
       e.currentTarget.style.cursor = 'default';
       isDragOver.value = false;
+      if (nodeKey && dataTransferCache[nodeKey]) {
+        node = dataTransferCache[nodeKey];
+        delete dataTransferCache[nodeKey];
+      }
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
-        dropPosition: dragOverPosition.value
+        dropPosition: dragOverPosition.value,
+        node: node
       });
     };
     const handleDragStart = e => {
@@ -159,6 +166,7 @@ var script$1 = defineComponent({
       if (e.dataTransfer) {
         e.currentTarget.style.cursor = 'grabbing';
         (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
+        dataTransferCache[props.node.key] = props.node;
         const crt = (_b = unref(nodeRoot)) === null || _b === void 0 ? void 0 : _b.cloneNode(true);
         if (crt) {
           crt.style.opacity = '0';
@@ -168,7 +176,7 @@ var script$1 = defineComponent({
       }
       isDrag.value = true;
       setIsOpen(false);
-      emit('dragstart', props.node.key);
+      emit('dragstart', props.node);
     };
     const handleDragOver = e => {
       e.preventDefault();
@@ -183,20 +191,21 @@ var script$1 = defineComponent({
     };
     const handleContextMenu = e => {
       emit('contextmenu', Object.assign(e, {
-        nodeKey: props.node.key
+        nodeKey: props.node.key,
+        node: props.node
       }));
     };
     const handleClick = e => {
       e.preventDefault();
-      emit('click', props.node.key);
+      emit('click', props.node);
     };
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
-        emit('collapse', props.node.key);
+        emit('collapse', props.node);
       } else {
         setIsOpen(true);
-        emit('expand', props.node.key);
+        emit('expand', props.node);
       }
     };
     // Styles

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

@@ -147,7 +147,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-5af5118e.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-d033defc.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-0a2d5389.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-d033defc.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-0a2d5389.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrButton-e4e85817.js';

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

@@ -1,3 +1,4 @@
-import { TreeNodeDropPosition } from '../../types';
+import { TreeNode, TreeNodeDropPosition } from '../../types';
 export declare function getDropOffset(e: DragEvent, canMiddleDrop?: boolean, isOpen?: boolean): TreeNodeDropPosition;
 export declare function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void;
+export declare const dataTransferCache: Record<string, TreeNode>;

package/dist/esm/v2/index.js

@@ -147,7 +147,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-5af5118e.js';
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-d033defc.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-0a2d5389.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-552e7ef2.js → OrTree-e67a801e.js}

@@ -74,6 +74,7 @@ function applyPadding(element, level, hasCollapseTrigger) {
     paddingLeft: `${padding}px`
   });
 }
+const dataTransferCache = {};
 
 var script$1 = defineComponent({
   name: 'OrTreeNode',
@@ -144,13 +145,19 @@ var script$1 = defineComponent({
     // Methods
     const handleDrop = e => {
       var _a;
+      let node;
       const nodeKey = (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData('node-key');
       e.currentTarget.style.cursor = 'default';
       isDragOver.value = false;
+      if (nodeKey && dataTransferCache[nodeKey]) {
+        node = dataTransferCache[nodeKey];
+        delete dataTransferCache[nodeKey];
+      }
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
-        dropPosition: dragOverPosition.value
+        dropPosition: dragOverPosition.value,
+        node: node
       });
     };
     const handleDragStart = e => {
@@ -158,6 +165,7 @@ var script$1 = defineComponent({
       if (e.dataTransfer) {
         e.currentTarget.style.cursor = 'grabbing';
         (_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.setData('node-key', props.node.key);
+        dataTransferCache[props.node.key] = props.node;
         const crt = (_b = unref(nodeRoot)) === null || _b === void 0 ? void 0 : _b.cloneNode(true);
         if (crt) {
           crt.style.opacity = '0';
@@ -167,7 +175,7 @@ var script$1 = defineComponent({
       }
       isDrag.value = true;
       setIsOpen(false);
-      emit('dragstart', props.node.key);
+      emit('dragstart', props.node);
     };
     const handleDragOver = e => {
       e.preventDefault();
@@ -182,20 +190,21 @@ var script$1 = defineComponent({
     };
     const handleContextMenu = e => {
       emit('contextmenu', Object.assign(e, {
-        nodeKey: props.node.key
+        nodeKey: props.node.key,
+        node: props.node
       }));
     };
     const handleClick = e => {
       e.preventDefault();
-      emit('click', props.node.key);
+      emit('click', props.node);
     };
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
-        emit('collapse', props.node.key);
+        emit('collapse', props.node);
       } else {
         setIsOpen(true);
-        emit('expand', props.node.key);
+        emit('expand', props.node);
       }
     };
     // Styles

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

@@ -143,7 +143,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-62fe3aa2.js';
-export { s as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-552e7ef2.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-e67a801e.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-552e7ef2.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-e67a801e.js';
 import 'vue-demi';
 import '@vueuse/core';
 import '../../OrButton-c95aef65.js';

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

@@ -1,3 +1,4 @@
-import { TreeNodeDropPosition } from '../../types';
+import { TreeNode, TreeNodeDropPosition } from '../../types';
 export declare function getDropOffset(e: DragEvent, canMiddleDrop?: boolean, isOpen?: boolean): TreeNodeDropPosition;
 export declare function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void;
+export declare const dataTransferCache: Record<string, TreeNode>;

package/dist/esm/v3/index.js

@@ -143,7 +143,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-62fe3aa2.js';
-export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-552e7ef2.js';
+export { s as OrTreeV3, T as TreeNodeDropPosition } from './OrTree-e67a801e.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": "10.0.0",
+  "version": "10.0.1-beta.4232.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": "432fa85833534d34dd4c555ebee4f70fb970722f"
+  }
 }

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

@@ -78,7 +78,7 @@ import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
 import { TreeNode, TreeNodeDropPosition, TreeNodeType } from '../../types';
 import { ChildrenDragoverStyles, TreeNodeDragIndicator, TreeNodeDragIndicatorPosition, TreeNodeItemRoot, TreeNodeItemRootParentSelected, TreeNodeRoot } from './styles';
-import { applyPadding, getDropOffset } from './utils';
+import { applyPadding, getDropOffset, dataTransferCache } from './utils';
 
 export default defineComponent({
   name: 'OrTreeNode',
@@ -160,14 +160,21 @@ export default defineComponent({
 
     // Methods
     const handleDrop = (e: DragEvent) => {
-      const nodeKey = e?.dataTransfer?.getData('node-key');
+      let node: TreeNode | undefined;
+      const nodeKey = (e?.dataTransfer?.getData('node-key') as string);
       (e.currentTarget as HTMLElement).style.cursor = 'default';
       isDragOver.value = false;
 
+      if (nodeKey && dataTransferCache[nodeKey]) {
+        node = dataTransferCache[nodeKey];
+        delete dataTransferCache[nodeKey];
+      }
+
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
         dropPosition: dragOverPosition.value,
+        node: node,
       });
     };
 
@@ -175,6 +182,8 @@ export default defineComponent({
       if (e.dataTransfer) {
         (e.currentTarget as HTMLElement).style.cursor = 'grabbing';
         e?.dataTransfer?.setData('node-key', props.node.key);
+        dataTransferCache[props.node.key] = props.node;
+
         const crt = unref(nodeRoot)?.cloneNode(true) as HTMLElement;
 
         if (crt) {
@@ -186,7 +195,7 @@ export default defineComponent({
 
       isDrag.value = true;
       setIsOpen(false);
-      emit('dragstart', props.node.key);
+      emit('dragstart', props.node);
     };
 
     const handleDragOver = (e: DragEvent) => {
@@ -204,21 +213,24 @@ export default defineComponent({
     };
 
     const handleContextMenu = (e: MouseEvent) => {
-      emit('contextmenu', Object.assign(e, { nodeKey: props.node.key }));
+      emit('contextmenu', Object.assign(e, {
+        nodeKey: props.node.key,
+        node: props.node,
+      }));
     };
 
     const handleClick = (e: MouseEvent) => {
       e.preventDefault();
-      emit('click', props.node.key);
+      emit('click', props.node);
     };
 
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
-        emit('collapse', props.node.key);
+        emit('collapse', props.node);
       } else {
         setIsOpen(true);
-        emit('expand', props.node.key);
+        emit('expand', props.node);
       }
     };
 

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

@@ -1,4 +1,4 @@
-import { TreeNodeDropPosition } from '../../types';
+import { TreeNode, TreeNodeDropPosition } from '../../types';
 
 function inRange(num: number, min: number, max: number): boolean {
   return num >= min && num <= max;
@@ -25,3 +25,5 @@ export function applyPadding(element: HTMLElement, level: number, hasCollapseTri
     paddingLeft: `${padding}px`,
   });
 }
+
+export const dataTransferCache: Record<string, TreeNode> = {};