@onereach/ui-components 4.11.0 → 4.11.1-beta.2963.0

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

@@ -0,0 +1,235 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div
+      ref="nodeRoot"
+      :class="nodeStyles"
+      :draggable="canDrag ? true : undefined"
+      :selected="selected ? true : undefined"
+      @dragend="isDrag = false"
+      @dragstart.stop="handleDragStart"
+      @dragover.prevent="handleDragOver"
+      @dragenter.prevent="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @click="handleClick"
+      @contextmenu="handleContextMenu"
+    >
+      <template
+        v-if="hasCollapseTrigger"
+      >
+        <OrButton
+          variant="link"
+          @click.stop="handleCollapse"
+        >
+          <OrIcon
+            :class="[isOpen ? 'rotate-90': 'rotate-0']"
+            icon="arrow_right"
+            size="l"
+          />
+        </OrButton>
+      </template>
+      <slot
+        name="node"
+        v-bind="{node, isOpen, isLeaf, isDrag, isDragOver, depth}"
+      >
+        {{ node.key }}
+      </slot>
+      <div
+        v-if="isDragOver && !isDrag"
+        :class="dragIndicatorStyles"
+      />
+    </div>
+    <template
+      v-if="!isLeaf && isOpen"
+    >
+      <OrTreeNode
+        v-for="child in node.children"
+        :key="child.key"
+        :parent-selected="selected || undefined"
+        :node="child"
+        :depth="depth + 1"
+        :selected="child.selected"
+        :draggable="draggable"
+        @drop="$emit('drop', $event)"
+        @dragstart="$emit('dragstart', $event)"
+        @click="$emit('click', $event)"
+        @expand="$emit('expand', $event)"
+        @collapse="$emit('collapse', $event)"
+        @contextmenu="(e, key) => $emit('contextmenu', e, key)"
+      >
+        <template v-slot:node="props">
+          <slot
+            name="node"
+            v-bind="props"
+          />
+        </template>
+      </OrTreeNode>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType, ref, computed, watch, unref, onMounted } from 'vue-demi';
+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';
+
+export default defineComponent({
+  name: 'OrTreeNode',
+  components: {
+    OrButton,
+    OrIcon,
+  },
+  props: {
+    node: {
+      type: Object as PropType<TreeNode>,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: undefined,
+    },
+    parentSelected: {
+      type: Boolean,
+      default: undefined,
+    },
+    expanded: {
+      type: Boolean,
+      default: true,
+    },
+    depth: {
+      type: Number,
+      default: 1,
+    },
+    draggable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['drop', 'dragstart', 'click', 'expand', 'collapse', 'contextmenu'],
+  setup(props, { emit }) {
+    // Refs
+    const root = ref<HTMLElement>();
+    const nodeRoot = ref<HTMLElement>();
+
+    // State
+    const isDragOver = ref(false);
+    const isDrag = ref(false);
+    const dragPosition = ref<`${TreeNodeDropPosition}`>('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);
+    // Effects
+    watch(() => props.depth, (value) => {
+      applyPadding(unref(nodeRoot)!, value, hasCollapseTrigger.value);
+    });
+
+    watch(() => props.expanded, (value) => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    }, {
+      immediate: true,
+    });
+
+    onMounted(() => {
+      applyPadding(unref(nodeRoot)!, props.depth, hasCollapseTrigger.value);
+    });
+
+    // Methods
+    const handleDrop = (e: DragEvent) => {
+      const nodeKey = e?.dataTransfer?.getData('node-key');
+      isDragOver.value = false;
+      emit('drop', {
+        dropKey: props.node.key,
+        dragKey: nodeKey,
+        dropPosition: dragPosition.value,
+      });
+    };
+
+    const handleDragStart = (e: DragEvent) => {
+      isDrag.value = true;
+      setIsOpen(false);
+      e?.dataTransfer?.setData('node-key', props.node.key);
+      emit('dragstart', props.node.key);
+    };
+
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragPosition.value = getDropOffset(e, props.node.collapsible && props.node.canMiddleDrop !== false);
+      isDragOver.value = true;
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDragOver.value = false;
+    };
+
+    const handleContextMenu = (e: MouseEvent) => {
+      emit('contextmenu', Object.assign(e, { nodeKey: props.node.key }));
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      e.preventDefault();
+      emit('click', props.node.key);
+    };
+
+    const handleCollapse = () => {
+      if (isOpen.value) {
+        setIsOpen(false);
+        emit('collapse', props.node.key);
+      } else {
+        setIsOpen(true);
+        emit('expand', props.node.key);
+      }
+    };
+    // Styles
+    const rootStyles = computed(() => [
+      'or-tree-node-v3',
+      ...TreeNodeRoot,
+    ]);
+
+    const nodeStyles = computed(() => [
+      ...TreeNodeItemRoot,
+      ...(props.parentSelected ? TreeNodeItemRootParentSelected : []),
+    ]);
+
+    const dragIndicatorStyles = computed(() => [
+      ...TreeNodeDragIndicator,
+      ...TreeNodeDragIndicatorPosition[dragPosition.value],
+    ]);
+
+    return {
+      root,
+      isOpen,
+      isLeaf,
+      rootStyles,
+      nodeStyles,
+      dragIndicatorStyles,
+      setIsOpen,
+      nodeRoot,
+      isDrag,
+      canDrag,
+      dragPosition,
+      handleDragStart,
+      handleDrop,
+      handleCollapse,
+      handleContextMenu,
+      handleClick,
+      handleDragOver,
+      handleDragLeave,
+      hasCollapseTrigger,
+      isDragOver,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,60 @@
+import { TreeNodeDropPosition } from '../../types';
+export const TreeNodeRoot = [];
+export const TreeNodeItemRoot = [
+  // Layout
+  '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-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',
+];
+
+export 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',
+];
+export const TreeNodeDragIndicator = [
+  // Layout
+  'absolute h-[2px] w-full left-[0px]',
+
+  // Theme
+  'bg-primary',
+
+  // Interaction
+  'pointer-events-none',
+];
+
+export const TreeNodeDragIndicatorPosition: Record<TreeNodeDropPosition, string[]> = {
+  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',
+  ],
+  bottom: [
+    'bottom-[-1px]',
+  ],
+};

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

@@ -0,0 +1,26 @@
+import { TreeNodeDropPosition } from '../../types';
+
+function inRange(num: number, min: number, max: number): boolean {
+  return num >= min && num <= max;
+}
+
+export function getDropOffset(e: DragEvent, canMiddleDrop = false): TreeNodeDropPosition {
+  const { clientY } = e;
+  const { top, height } = (e.target as HTMLElement).getBoundingClientRect();
+  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)) {
+    return TreeNodeDropPosition.Top;
+  }
+
+  return TreeNodeDropPosition.Bottom;
+}
+
+export function applyPadding(element: HTMLElement, level: number, hasCollapseTrigger: boolean): void {
+  const padding = level * 20 - (hasCollapseTrigger ? 20 : 0);
+  Object.assign(element.style, {
+    paddingLeft: `${padding}px`,
+  });
+}

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

@@ -0,0 +1,16 @@
+export type TreeNode = {
+  key: string;
+  children?: TreeNode[];
+  collapsible?: boolean;
+  expanded?: boolean;
+  selected?: boolean;
+  draggable?: boolean;
+  [key: string]: any;
+  canMiddleDrop?: boolean;
+};
+
+export enum TreeNodeDropPosition {
+  Top = 'top',
+  Bottom = 'bottom',
+  Middle = 'middle',
+}