@onereach/ui-components 8.20.1-beta.4012.0 → 8.20.1-beta.4014.0

package/dist/bundled/v2/{OrTree-962e1cbd.js → OrTree-6428a410.js}

@@ -16,6 +16,7 @@ function inRange(num, min, max) {
 }
 function getDropOffset(e) {
   let canMiddleDrop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  let isOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const {
     clientY
   } = e;
@@ -24,7 +25,8 @@ function getDropOffset(e) {
     height
   } = e.target.getBoundingClientRect();
   const offset = Math.max((clientY - top) / height, 0); // sometimes offset is negative
-  if (canMiddleDrop && inRange(offset, 0.4, 0.7)) {
+  const expandedMiddleBottomOffest = isOpen ? 1 : 0.7;
+  if (canMiddleDrop && inRange(offset, 0.4, expandedMiddleBottomOffest)) {
     return TreeNodeDropPosition.Middle;
   } else if (inRange(offset, 0, 0.5)) {
     return TreeNodeDropPosition.Top;
@@ -55,15 +57,25 @@ const TreeNodeDragIndicator = [
 // Interaction
 'pointer-events-none'];
 const TreeNodeDragIndicatorPosition = {
-  top: ['top-[-1px]'],
-  middle: ['top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
+  top: [
+  // Layout
+  'top-[-1px]'],
+  middle: [
+  // Layout
+  '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'],
-  bottom: ['bottom-[-1px]']
+  'bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'],
+  bottom: [
+  // Layout
+  'bottom-[-1px]']
 };
+const ChildrenDragoverStyles = [
+// Layout
+'top-[-1px]', 'left-[0px]', 'w-full', '!h-[calc(100%+2px)]',
+// Theme
+'bg-transparent', 'border-1', 'border-primary-hover', 'dark:border-primary-hover-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrTreeNode',
   components: {
     OrButton: __vue_component__$2,
     OrIcon: __vue_component__$3
@@ -95,6 +107,7 @@ var script$1 = defineComponent({
     }
   },
   emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
+  expose: ['isDragOver'],
   setup(props, _ref) {
     let {
       emit
@@ -102,15 +115,17 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     const nodeRoot = ref();
+    const childrenTreeNodes = ref([]);
     // State
     const isDragOver = ref(false);
     const isDrag = ref(false);
-    const dragPosition = ref('top');
+    const dragOverPosition = ref('top');
     const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
     const [isOpen, setIsOpen] = useToggle(props.expanded);
     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);
@@ -129,24 +144,34 @@ var script$1 = defineComponent({
     const handleDrop = e => {
       var _a;
       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;
       emit('drop', {
         dropKey: props.node.key,
         dragKey: nodeKey,
-        dropPosition: dragPosition.value
+        dropPosition: dragOverPosition.value
       });
     };
     const handleDragStart = e => {
-      var _a;
+      var _a, _b, _c;
+      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);
+        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);
+        }
+      }
       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);
       emit('dragstart', props.node.key);
     };
     const handleDragOver = e => {
       e.preventDefault();
       e.stopPropagation();
-      dragPosition.value = getDropOffset(e, props.node.canMiddleDrop || props.node.collapsible || hasChildren.value);
+      dragOverPosition.value = getDropOffset(e, props.node.canMiddleDrop || props.node.collapsible || hasChildren.value, isOpen.value);
       isDragOver.value = true;
     };
     const handleDragLeave = e => {
@@ -175,7 +200,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[dragOverPosition.value], ...(hasDragoverChildren.value ? ChildrenDragoverStyles : [])]);
     return {
       root,
       isOpen,
@@ -183,11 +208,12 @@ var script$1 = defineComponent({
       rootStyles,
       nodeStyles,
       dragIndicatorStyles,
+      childrenTreeNodes,
       setIsOpen,
       nodeRoot,
       isDrag,
       canDrag,
-      dragPosition,
+      dragOverPosition,
       handleDragStart,
       handleDrop,
       handleCollapse,
@@ -196,6 +222,7 @@ var script$1 = defineComponent({
       handleDragOver,
       handleDragLeave,
       hasCollapseTrigger,
+      hasDragoverChildren,
       isDragOver
     };
   }
@@ -265,11 +292,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/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-09e5ccf0.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-03c3d054.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -8,7 +8,7 @@ import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { getNextMonthDate } from '../OrDateTimePickerV3/utils/getNextMonthDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-09e5ccf0.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-03c3d054.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-09e5ccf0.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-03c3d054.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-6ac77884.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -1,5 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-09e5ccf0.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-03c3d054.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-6ac77884.js';
 export { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrListV3/OrList.js

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrList-44b76fe6.js';
+export { _ as default } from '../../OrList-e60482b1.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1 +1 @@
-export { O as OrListItem, _ as OrListV3 } from '../../OrList-44b76fe6.js';
+export { O as OrListItem, _ as OrListV3 } from '../../OrList-e60482b1.js';

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -108,13 +108,8 @@ var script = defineComponent({
       }
     });
     const isFlipped = computed(() => {
-      const {
-        flip
-      } = middlewareData.value;
-      if (flip === null || flip === void 0 ? void 0 : flip.overflows) {
-        return flip.overflows[0].placement !== props.placement;
-      }
-      return false;
+      var _a;
+      return Boolean((_a = middlewareData.value.flip) === null || _a === void 0 ? void 0 : _a.index);
     });
     const isHidden = computed(() => {
       var _a;

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

@@ -1,2 +1,2 @@
-export { _ as default } from '../../OrTree-962e1cbd.js';
+export { _ as default } from '../../OrTree-6428a410.js';
 import '../../normalize-component-6e8e3d80.js';

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

@@ -1 +1 @@
-export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-962e1cbd.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../../OrTree-6428a410.js';

package/dist/bundled/v2/components/OrTreeV3/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/bundled/v2/components/index.js

@@ -52,7 +52,7 @@ export { default as OrDateTimeFormatV3 } from './OrDateTimeFormatV3/OrDateTimeFo
 export { default as OrDateTimePicker } from './OrDateTimePicker/OrDateTimePicker.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
 export { default as OrDateTimePickerV3 } from './OrDateTimePickerV3/OrDateTimePicker.js';
-export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-09e5ccf0.js';
+export { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../OrDateTimePickerMonthSelect-03c3d054.js';
 export { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../OrDateTimePickerPopoverHeader-b5ea2ba9.js';
 export { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../OrDateTimePickerTimeSelect-6ac77884.js';
 export { DateTimePickerTimeFormat, DateTimePickerTimeFormat as TimePickerFormat, DateTimePickerTimeFormat as TimeRangePickerFormat } from './OrDateTimePickerV3/props.js';
@@ -101,7 +101,7 @@ export { default as OrLinkV3 } from './OrLinkV3/OrLink.js';
 export { LinkColor } from './OrLinkV3/props.js';
 export { default as OrList } from './OrList/OrList.js';
 export { default as OrListOfInputs } from './OrListOfInputs/OrListOfInputs.js';
-export { O as OrListItem, _ as OrListV3 } from '../OrList-44b76fe6.js';
+export { O as OrListItem, _ as OrListV3 } from '../OrList-e60482b1.js';
 export { default as OrLoader } from './OrLoader/OrLoader.js';
 export { LoaderViews } from './OrLoader/constants.js';
 export { default as OrLoaderV3 } from './OrLoaderV3/OrLoader.js';
@@ -199,4 +199,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-962e1cbd.js';
+export { _ as OrTreeV3, T as TreeNodeDropPosition } from '../OrTree-6428a410.js';