@onereach/ui-components 4.9.1-beta.2922.0 → 4.9.1-beta.2925.0

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, onMounted, unref } from 'vue-demi';
+import { defineComponent, ref, computed, watch, unref, onMounted } from 'vue-demi';
 import __vue_component__$2 from '../OrButtonV3/OrButton.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
 import { u as useToggle } from '../../index-ec92055d.js';
@@ -15,12 +15,52 @@ import '../OrIconV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
 
+function getDropOffset(e) {
+  const {
+    clientY
+  } = e;
+  const {
+    top,
+    height
+  } = e.target.getBoundingClientRect();
+  const offset = clientY - top;
+  if (offset / height < 0.4) {
+    return 'top';
+  } else if (offset / height > 0.7) {
+    return 'bottom';
+  } else {
+    return 'middle';
+  }
+}
+function applyPadding(element, level, hasCollapseTrigger) {
+  const padding = level * 20 - (hasCollapseTrigger ? 20 : 0);
+  Object.assign(element.style, {
+    paddingLeft: `${padding}px`
+  });
+}
+
 const TreeNodeRoot = [];
 const TreeNodeItemRoot = [
 // Layout
 'layout-row', 'py-xs', '!items-start',
 // Theme
 'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark', 'selected:bg-primary-opacity-0-08', 'dark:selected:bg-primary-opacity-0-08-dark', 'selected:hover:bg-primary-opacity-0-16', 'dark:selected:hover:bg-primary-opacity-0-16-dark'];
+const TreeNodeDragIndicator = [
+// Layout
+'absolute h-[2px] w-full left-[0px]',
+// Theme
+'bg-primary',
+// Interaction
+'pointer-events-none'];
+const TreeNodeDragIndicatorPosition = {
+  top: ['top-[-1px]'],
+  middle: ['top-[-1px]'
+  // 'top-[50%]', ????
+  // 'transform:-translateY(50%)',
+  ],
+
+  bottom: ['bottom-[-1px]']
+};
 
 var script$1 = defineComponent({
   name: 'OrTreeNode',
@@ -62,22 +102,17 @@ var script$1 = defineComponent({
     // Refs
     const root = ref(null);
     const nodeRoot = ref(null);
-    const dragOver = ref(false);
-    const drag = ref(false);
     // State
+    const isDragOver = ref(false);
+    const isDrag = ref(false);
+    const dragPosition = ref('top');
     const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
     const [isOpen, setIsOpen] = useToggle(props.expanded);
     const hasCollapseTrigger = computed(() => props.collapsible && hasChildren.value);
-    // Methods
-    const applyPadding = depth => {
-      const rootElement = unref(nodeRoot);
-      const padding = depth * 20 - (hasCollapseTrigger.value ? 20 : 0);
-      Object.assign(rootElement.style, {
-        paddingLeft: `${padding}px`
-      });
-    };
+    const isLeaf = computed(() => !hasChildren.value);
+    // Effects
     watch(() => props.depth, value => {
-      applyPadding(value);
+      applyPadding(unref(nodeRoot), value, hasCollapseTrigger.value);
     });
     watch(() => props.expanded, value => {
       if (value !== undefined) {
@@ -87,24 +122,48 @@ var script$1 = defineComponent({
       immediate: true
     });
     onMounted(() => {
-      applyPadding(props.depth);
+      applyPadding(unref(nodeRoot), props.depth, hasCollapseTrigger.value);
     });
+    // Methods
     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');
-      dragOver.value = false;
+      isDragOver.value = false;
       emit('drop', {
         dropKey: props.node.key,
-        dragKey: nodeKey
+        dragKey: nodeKey,
+        dropPosition: dragPosition.value
       });
     };
     const handleDragStart = e => {
       var _a;
-      drag.value = true;
+      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);
+      isDragOver.value = true;
+    };
+    const handleDragLeave = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDragOver.value = false;
+    };
+    const handleContextMenu = e => {
+      e.preventDefault();
+      emit('contextmenu', {
+        $event: e,
+        nodeKey: props.node.key
+      });
+    };
+    const handleClick = e => {
+      e.preventDefault();
+      emit('click', props.node.key);
+    };
     const handleCollapse = () => {
       if (isOpen.value) {
         setIsOpen(false);
@@ -116,21 +175,28 @@ var script$1 = defineComponent({
     };
     // Styles
     const rootStyles = computed(() => ['or-tree-node-v3', ...TreeNodeRoot]);
-    const nodeStyles = computed(() => [...TreeNodeItemRoot, ...[dragOver.value && !drag.value ? ['border-t-2', 'border-primary'] : []]]);
+    const nodeStyles = computed(() => [...TreeNodeItemRoot, 'relative']);
+    const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value]]);
     return {
       root,
-      hasChildren,
       isOpen,
+      isLeaf,
       rootStyles,
+      nodeStyles,
+      dragIndicatorStyles,
       setIsOpen,
       nodeRoot,
-      drag,
+      isDrag,
+      dragPosition,
       handleDragStart,
       handleDrop,
       handleCollapse,
+      handleContextMenu,
+      handleClick,
+      handleDragOver,
+      handleDragLeave,
       hasCollapseTrigger,
-      dragOver,
-      nodeStyles
+      isDragOver
     };
   }
 });
@@ -155,7 +221,7 @@ var __vue_render__$1 = function () {
     },
     on: {
       "dragend": function ($event) {
-        _vm.drag = false;
+        _vm.isDrag = false;
       },
       "dragstart": function ($event) {
         $event.stopPropagation();
@@ -163,24 +229,16 @@ var __vue_render__$1 = function () {
       },
       "dragover": function ($event) {
         $event.preventDefault();
+        return _vm.handleDragOver.apply(null, arguments);
       },
       "dragenter": function ($event) {
         $event.preventDefault();
-        _vm.dragOver = true;
-      },
-      "dragleave": function ($event) {
-        _vm.dragOver = false;
+        return _vm.handleDragOver.apply(null, arguments);
       },
+      "dragleave": _vm.handleDragLeave,
       "drop": _vm.handleDrop,
-      "click": function ($event) {
-        return _vm.$emit('click', _vm.node.key);
-      },
-      "contextmenu": function ($event) {
-        return _vm.$emit('contextmenu', {
-          $event: $event,
-          nodeKey: _vm.node.key
-        });
-      }
+      "click": _vm.handleClick,
+      "contextmenu": _vm.handleContextMenu
     }
   }, [_vm.hasCollapseTrigger ? [_c('OrButton', {
     attrs: {
@@ -198,11 +256,18 @@ var __vue_render__$1 = function () {
       "icon": "arrow_right",
       "size": "l"
     }
-  })], 1)] : _vm._e(), _vm._v(" "), _vm._t("node", null, null, {
+  })], 1)] : _vm._e(), _vm._v(" "), _vm._t("node", function () {
+    return [_vm._v("\n      " + _vm._s(_vm.node.key) + "\n    ")];
+  }, null, {
     node: _vm.node,
-    hasChildren: _vm.hasChildren,
-    isOpen: _vm.isOpen
-  })], 2), _vm._v(" "), _vm.hasChildren && _vm.isOpen ? _vm._l(_vm.node.children, function (child) {
+    isOpen: _vm.isOpen,
+    isLeaf: _vm.isLeaf,
+    isDrag: _vm.isDrag,
+    isDragOver: _vm.isDragOver,
+    depth: _vm.depth
+  }), _vm._v(" "), _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,
       attrs: {

package/dist/bundled/v2/components/OrTreeV3/types.d.ts

@@ -7,3 +7,4 @@ export type TreeNode = {
     draggable?: boolean;
     [key: string]: any;
 };
+export type TreeNodeDropPosition = 'top' | 'middle' | 'bottom';