@onereach/ui-components 4.10.2-beta.2935.0 → 4.10.2-beta.2936.0

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

@@ -25,7 +25,7 @@ function getDropOffset(e) {
     top,
     height
   } = e.target.getBoundingClientRect();
-  const offset = (clientY - top) / height;
+  const offset = Math.max((clientY - top) / height, 0); // sometimes offset is negative
   if (canMiddleDrop && inRange(offset, 0.4, 0.7)) {
     return TreeNodeDropPosition.Middle;
   } else if (inRange(offset, 0, 0.5)) {
@@ -43,9 +43,12 @@ function applyPadding(element, level, hasCollapseTrigger) {
 const TreeNodeRoot = [];
 const TreeNodeItemRoot = [
 // Layout
-'layout-row', 'py-xs', '!items-start',
+'layout-row', 'py-xs', '!items-start', 'relative',
 // 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'];
+'hover:bg-primary-opacity-0-08', 'dark:hover:bg-primary-opacity-0-08-dark', 'selected:bg-primary-opacity-0-16', 'dark:selected:bg-primary-opacity-0-16-dark', 'selected:hover:bg-primary-opacity-0-16', 'dark:selected:hover:bg-primary-opacity-0-16-dark'];
+const TreeNodeItemRootParentSelected = [
+// Theme
+'bg-primary-opacity-0-08', 'bg-primary-opacity-0-08-dark', 'hover:bg-primary-opacity-0-16', 'dark:hover:bg-primary-opacity-0-16-dark'];
 const TreeNodeDragIndicator = [
 // Layout
 'absolute h-[2px] w-full left-[0px]',
@@ -55,7 +58,9 @@ const TreeNodeDragIndicator = [
 'pointer-events-none'];
 const TreeNodeDragIndicatorPosition = {
   top: ['top-[-1px]'],
-  middle: ['top-[0px]', 'left-[0px]', 'w-[2px]', '!h-full'],
+  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'],
   bottom: ['bottom-[-1px]']
 };
 
@@ -70,11 +75,11 @@ var script$1 = defineComponent({
       type: Object,
       required: true
     },
-    collapsible: {
+    selected: {
       type: Boolean,
-      default: false
+      default: undefined
     },
-    selected: {
+    parentSelected: {
       type: Boolean,
       default: undefined
     },
@@ -105,7 +110,7 @@ var script$1 = defineComponent({
     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);
+    const hasCollapseTrigger = computed(() => props.node.collapsible || hasChildren.value);
     const isLeaf = computed(() => !hasChildren.value);
     const canDrag = computed(() => props.draggable !== false && props.node.draggable !== false);
     // Effects
@@ -143,7 +148,7 @@ var script$1 = defineComponent({
     const handleDragOver = e => {
       e.preventDefault();
       e.stopPropagation();
-      dragPosition.value = getDropOffset(e, props.node.canMiddleDrop);
+      dragPosition.value = getDropOffset(e, props.node.collapsible && props.node.canMiddleDrop !== false);
       isDragOver.value = true;
     };
     const handleDragLeave = e => {
@@ -152,10 +157,9 @@ var script$1 = defineComponent({
       isDragOver.value = false;
     };
     const handleContextMenu = e => {
-      emit('contextmenu', {
-        $event: e,
+      emit('contextmenu', Object.assign(e, {
         nodeKey: props.node.key
-      });
+      }));
     };
     const handleClick = e => {
       e.preventDefault();
@@ -172,7 +176,7 @@ var script$1 = defineComponent({
     };
     // Styles
     const rootStyles = computed(() => ['or-tree-node-v3', ...TreeNodeRoot]);
-    const nodeStyles = computed(() => [...TreeNodeItemRoot, 'relative']);
+    const nodeStyles = computed(() => [...TreeNodeItemRoot, ...(props.parentSelected ? TreeNodeItemRootParentSelected : [])]);
     const dragIndicatorStyles = computed(() => [...TreeNodeDragIndicator, ...TreeNodeDragIndicatorPosition[dragPosition.value]]);
     return {
       root,
@@ -269,10 +273,10 @@ var __vue_render__$1 = function () {
     return _c('OrTreeNode', {
       key: child.key,
       attrs: {
+        "parent-selected": _vm.selected || undefined,
         "node": child,
-        "collapsible": _vm.collapsible || child.collapsible,
         "depth": _vm.depth + 1,
-        "selected": _vm.selected || child.selected,
+        "selected": child.selected,
         "draggable": _vm.draggable
       },
       on: {
@@ -291,8 +295,8 @@ var __vue_render__$1 = function () {
         "collapse": function ($event) {
           return _vm.$emit('collapse', $event);
         },
-        "contextmenu": function ($event) {
-          return _vm.$emit('contextmenu', $event);
+        "contextmenu": function (e, key) {
+          return _vm.$emit('contextmenu', e, key);
         }
       },
       scopedSlots: _vm._u([{
@@ -336,10 +340,6 @@ var script = defineComponent({
       type: Array,
       default: () => []
     },
-    collapsible: {
-      type: Boolean,
-      default: false
-    },
     draggable: {
       type: Boolean,
       default: false
@@ -374,7 +374,6 @@ var __vue_render__ = function () {
       key: item.key,
       attrs: {
         "node": item,
-        "collapsible": _vm.collapsible || item.collapsible,
         "expanded": item.expanded,
         "selected": item.selected,
         "draggable": !item.hasOwnProperty('draggable') || item.draggable === null ? _vm.draggable : item.draggable

package/dist/bundled/v2/components/OrTreeV3/OrTree.vue.d.ts

@@ -8,10 +8,6 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: PropType<TreeNode[]>;
         default: () => never[];
     };
-    collapsible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     draggable: {
         type: BooleanConstructor;
         default: boolean;
@@ -21,17 +17,12 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: PropType<TreeNode[]>;
         default: () => never[];
     };
-    collapsible: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     draggable: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     nodes: TreeNode[];
-    collapsible: boolean;
     draggable: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
@@ -40,13 +31,11 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     nodes: TreeNode[];
-    collapsible: boolean;
     draggable: boolean;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     nodes: TreeNode[];
-    collapsible: boolean;
     draggable: boolean;
 }, true>);
 export default _default;