refactor(tree): 优化Tree组件目录结构

packages/devui-vue/devui/tree/index.ts

@@ -1,17 +1,15 @@
 import type { App } from 'vue';
 import Tree from './src/tree';
-import NewTree from './src/new-tree';
 
 export * from './src/tree-types';
 
-export { Tree, NewTree };
+export { Tree };
 
 export default {
   title: 'Tree 树',
   category: '数据展示',
   status: '20%',
   install(app: App): void {
     app.component(Tree.name, Tree);
-    app.component(NewTree.name, NewTree);
   }
 };

packages/devui-vue/devui/tree/src/components/tree-node-content.tsx

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue';
 import { defineComponent, PropType, toRefs } from 'vue';
-import { ITreeNode, IInnerTreeNode } from '../core/use-tree-types';
+import { ITreeNode, IInnerTreeNode } from '../composables/use-tree-types';
 import useTreeNode from './use-tree-node';
 
 export default defineComponent({

packages/devui-vue/devui/tree/src/components/tree-node-toggle.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, inject, PropType, toRefs } from 'vue';
 import { USE_TREE_TOKEN } from '../const';
-import { ITreeNode, IUseTree } from '../core/use-tree-types';
+import { ITreeNode, IUseTree } from '../composables/use-tree-types';
 import { IconClose } from './icon-close';
 import { IconOpen } from './icon-open';
 

packages/devui-vue/devui/tree/src/components/tree-node.tsx

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue';
 import { computed, defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
 import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
-import { IInnerTreeNode, IUseTree } from '../core/use-tree-types';
+import { IInnerTreeNode, IUseTree } from '../composables/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
 import DTreeNodeContent from './tree-node-content';

packages/devui-vue/devui/tree/src/components/use-tree-node.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef } from 'vue';
 import { computed, inject } from 'vue';
 import { NODE_HEIGHT, NODE_INDENT, USE_TREE_TOKEN } from '../const';
-import { IInnerTreeNode, IUseTree } from '../core/use-tree-types';
+import { IInnerTreeNode, IUseTree } from '../composables/use-tree-types';
 
 export interface IUseTreeNode {
   nodeClass: ComputedRef<(string | false | undefined)[]>;

packages/devui-vue/devui/tree/src/composables/use-toggle.ts

@@ -1,36 +1,41 @@
-import { ref, Ref, watch } from 'vue';
-import { TreeData, TreeItem } from '../tree-types';
+import { Ref } from 'vue';
+import { IInnerTreeNode, IUseCore } from '../tree-types';
 
-interface IUseToggle {
-  openedData: Ref<TreeData>;
-  toggle: (target: Event, item: TreeItem) => void;
+export interface IUseToggle {
+  expandNode: (node: IInnerTreeNode) => void;
+  collapseNode: (node: IInnerTreeNode) => void;
+  toggleNode: (node: IInnerTreeNode) => void;
 }
 
-export default function useToggle(data: Ref<TreeData>): IUseToggle {
-  const openedTree = (tree: TreeData): TreeData => {
-    return tree.reduce((acc: TreeData, item: TreeItem) => (
-      item.open
-        ? acc.concat(item, item.children ? openedTree(item.children) : [])
-        : acc.concat(item)
-    ), []);
-  };
+export default function () {
+  return function useToggle(data: Ref<IInnerTreeNode[]>, core: IUseCore): IUseToggle {
+    const { getNode, setNodeValue } = core;
 
-  const openedData = ref(openedTree(data.value));
-
-  watch(
-    () => data.value,
-    (d) => openedData.value = openedTree(d),
-    { deep: true }
-  );
-  const toggle = (target: Event, item: TreeItem) => {
-    target.stopPropagation();
-    if (!item.children) {return;}
-    item.open = !item.open;
-    openedData.value = openedTree(data.value);
-  };
+    const expandNode = (node: IInnerTreeNode): void => {
+      if (node.disableToggle) { return; }
+
+      setNodeValue(node, 'expanded', true);
+    };
+
+    const collapseNode = (node: IInnerTreeNode): void => {
+      if (node.disableToggle) { return; }
+      setNodeValue(node, 'expanded', false);
+    };
+
+    const toggleNode = (node: IInnerTreeNode): void => {
+      if (node.disableToggle) { return; }
+
+      if (getNode(node).expanded) {
+        setNodeValue(node, 'expanded', false);
+      } else {
+        setNodeValue(node, 'expanded', true);
+      }
+    };
 
-  return {
-    openedData,
-    toggle,
+    return {
+      expandNode,
+      collapseNode,
+      toggleNode,
+    };
   };
 }

packages/devui-vue/devui/tree/src/composables/use-checked.ts → packages/devui-vue/devui/tree/src/deprecated-composables/use-checked.ts

@@ -6,7 +6,7 @@ import type {
   ReverseTree,
   CheckableRelationType,
   TreeData,
-} from '../tree-types';
+} from '../deprecated-tree-types';
 import { flatten } from '../utils';
 
 interface IUseChecked {

packages/devui-vue/devui/tree/src/composables/use-draggable.ts → packages/devui-vue/devui/tree/src/deprecated-composables/use-draggable.ts

@@ -1,6 +1,6 @@
 import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue';
-import { TreeItem, IDropType, Nullable } from '../tree-types';
+import { TreeItem, IDropType, Nullable } from '../deprecated-tree-types';
 import cloneDeep from 'lodash/cloneDeep';
 
 const ACTIVE_NODE = 'devui-tree-node__content--value-wrapper';

packages/devui-vue/devui/tree/src/composables/use-lazy.ts → packages/devui-vue/devui/tree/src/deprecated-composables/use-lazy.ts

@@ -1,6 +1,6 @@
 import { ref, Ref } from 'vue';
 import type { ComponentInternalInstance } from 'vue';
-import { TreeData, TreeItem } from '../tree-types';
+import { TreeData, TreeItem } from '../deprecated-tree-types';
 
 interface TypeReflectValue {
   // 外部传入

packages/devui-vue/devui/tree/src/composables/use-merge-node.ts → packages/devui-vue/devui/tree/src/deprecated-composables/use-merge-node.ts

@@ -1,5 +1,5 @@
 import { Ref, ref, watch } from 'vue';
-import { TreeData, TreeItem } from '../tree-types';
+import { TreeData, TreeItem } from '../deprecated-tree-types';
 
 interface IUseMergeNode {
   mergeData: Ref<TreeData>;

packages/devui-vue/devui/tree/src/composables/use-operate.tsx → packages/devui-vue/devui/tree/src/deprecated-composables/use-operate.tsx

@@ -1,5 +1,5 @@
 import { ref, Ref } from 'vue';
-import { TreeItem, TreeData } from '../tree-types';
+import { TreeItem, TreeData } from '../deprecated-tree-types';
 
 type TypeID = TreeItem['id'];
 interface TypeOperator {

packages/devui-vue/devui/tree/src/deprecated-composables/use-toggle.ts

@@ -0,0 +1,36 @@
+import { ref, Ref, watch } from 'vue';
+import { TreeData, TreeItem } from '../deprecated-tree-types';
+
+interface IUseToggle {
+  openedData: Ref<TreeData>;
+  toggle: (target: Event, item: TreeItem) => void;
+}
+
+export default function useToggle(data: Ref<TreeData>): IUseToggle {
+  const openedTree = (tree: TreeData): TreeData => {
+    return tree.reduce((acc: TreeData, item: TreeItem) => (
+      item.open
+        ? acc.concat(item, item.children ? openedTree(item.children) : [])
+        : acc.concat(item)
+    ), []);
+  };
+
+  const openedData = ref(openedTree(data.value));
+
+  watch(
+    () => data.value,
+    (d) => openedData.value = openedTree(d),
+    { deep: true }
+  );
+  const toggle = (target: Event, item: TreeItem) => {
+    target.stopPropagation();
+    if (!item.children) {return;}
+    item.open = !item.open;
+    openedData.value = openedTree(data.value);
+  };
+
+  return {
+    openedData,
+    toggle,
+  };
+}

packages/devui-vue/devui/tree/src/deprecated-tree-types.ts

@@ -0,0 +1,65 @@
+import type { PropType, ExtractPropTypes, SetupContext } from 'vue';
+
+export interface TreeItem {
+  id?: string;
+  label: string;
+  isParent?: boolean;
+  level?: number;
+  open?: boolean;
+  addable?: boolean;
+  editable?: boolean;
+  deletable?: boolean;
+  children?: Array<TreeItem>;
+  [key: string]: unknown;
+}
+export interface IDropType {
+  dropPrev?: boolean;
+  dropNext?: boolean;
+  dropInner?: boolean;
+}
+export interface SelectType {
+  [key: string]: 'none' | 'half' | 'select';
+}
+
+export interface ReverseTree {
+  id?: string;
+  children?: string[];
+  parent?: ReverseTree;
+}
+
+export type TreeData = Array<TreeItem>;
+
+export type CheckableRelationType = 'downward' | 'upward' | 'both' | 'none';
+
+export const treeProps = {
+  data: {
+    type: Array as PropType<TreeData>,
+    required: true,
+    default: () => [],
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  checkableRelation: {
+    type: String as () => CheckableRelationType,
+    default: 'none',
+  },
+  dropType: {
+    type: Object as PropType<IDropType>,
+    default: () => ({}),
+  },
+} as const;
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;
+
+export type Nullable<T> = null | T;
+
+export interface TreeRootType {
+  ctx: SetupContext;
+  props: TreeProps;
+}