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

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

@@ -1,235 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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',
-}