@onereach/ui-components 4.9.1-beta.2907.0 → 4.10.0

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

@@ -1,158 +0,0 @@
-<template>
-  <div
-    ref="root"
-    class="or-tree-node-v3"
-  >
-    <div
-      ref="nodeRoot"
-      :class="nodeStyles"
-      :draggable="draggable ? true : undefined"
-      @mouseover="hover = true"
-      @mouseleave="hover = false"
-      @dragstart="draged = true"
-      @dragend="draged = false"
-      @dragover.prevent
-      @dragenter="dragOver = true"
-      @dragleave="dragOver = false"
-      @drop="handleDrop"
-    >
-      <template
-        v-if="hasChildren && collapsible"
-      >
-        <OrButton
-          variant="link"
-          @click="() => setIsOpen(!isOpen)"
-        >
-          <OrIcon
-            :class="[isOpen ? 'rotate-90': 'rotate-0']"
-            icon="arrow_right"
-            size="l"
-          />
-        </OrButton>
-      </template>
-      <slot
-        name="node"
-        v-bind="{node, hasChildren, isOpen}"
-      />
-    </div>
-    <template
-      v-if="hasChildren && isOpen"
-    >
-      <OrTreeNode
-        v-for="child in node.children"
-        :key="child.key"
-        :node="child"
-        :collapsible="collapsible || child.collapsible"
-        :depth="depth + 1"
-        :draggable="draggable"
-      >
-        <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 { TreeNode } from '../../types';
-import { useToggle } from '@vueuse/core';
-import { OrButtonV3 as OrButton } from '../../../or-button-v3';
-import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
-
-export default defineComponent({
-  name: 'OrTreeNode',
-  components: {
-    OrButton,
-    OrIcon,
-  },
-  props: {
-    node: {
-      type: Object as PropType<TreeNode>,
-      required: true,
-    },
-    collapsible: {
-      type: Boolean,
-      default: false,
-    },
-    expanded: {
-      type: Boolean,
-      default: true,
-    },
-    depth: {
-      type: Number,
-      default: 1,
-    },
-    draggable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-
-    const root = ref<HTMLElement | null>(null);
-    const nodeRoot = ref<HTMLElement | null>(null);
-    const hover = ref(false);
-    const dragOver = ref(false);
-    const draged = ref(false);
-    const hasChildren = computed(() => !!props.node.children && props.node.children.length > 0);
-
-    const [isOpen, setIsOpen] = useToggle(props.expanded);
-
-    watch(() => props.expanded, (value) => {
-      if (value !== undefined) {
-        setIsOpen(value);
-      }
-    }, {
-      immediate: true,
-    });
-    const applyPadding = (value: number) => {
-      const rootElement = unref(nodeRoot)!;
-      const padding = value * 20 - (props.collapsible ? 16 : 0);
-      Object.assign(rootElement.style, {
-        paddingLeft: `${padding}px`,
-      });
-    };
-
-    watch(() => props.depth, (value) => {
-      applyPadding(value);
-    });
-
-    onMounted(() => {
-      applyPadding(props.depth);
-    });
-
-    const handleDrop = () => {
-      dragOver.value = false;
-    };
-
-    const nodeStyles = computed(() => [
-      'layout-row',
-      ...[hover.value ? [
-        'bg-primary-opacity-0-08',
-        'dark:bg-primary-opacity-0-08-dark',
-      ] : []],
-      ...[dragOver.value && !draged.value ? [
-        'border-t-2',
-        'border-primary',
-      ] : []],
-    ]);
-
-    return {
-      root,
-      hasChildren,
-      isOpen,
-      setIsOpen,
-      nodeRoot,
-      hover,
-      draged,
-      handleDrop,
-      dragOver,
-      nodeStyles,
-    };
-  },
-});
-</script>

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

@@ -1,7 +0,0 @@
-export type TreeNode = {
-  key: string;
-  children?: TreeNode[];
-  collapsible?: boolean;
-  expanded?: boolean;
-  draggable?: boolean;
-};