docs(tree): 优化tree组件api/demo

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

@@ -12,10 +12,14 @@ export default defineComponent({
     data: {
       type: Object as PropType<IInnerTreeNode>,
     },
+    check: {
+      type: Boolean,
+      default: false
+    }
   },
   setup(props, { slots }) {
-    const { data } = toRefs(props);
-    const { selectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
+    const { data, check } = toRefs(props);
+    const { toggleSelectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
 
     const {
       nodeClass,
@@ -30,21 +34,21 @@ export default defineComponent({
       return (
         <div class={nodeClass.value} style={nodeStyle.value}>
           <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
-          <div class={nodeContentClass.value} onClick={() => { selectNode(data.value); }}>
+          <div class={nodeContentClass.value} onClick={() => { toggleSelectNode(data.value); }}>
             <span class={nodeHLineClass.value}></span>
             {
               slots.icon
               ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode })
               : <DTreeNodeToggle data={data.value} />
             }
             <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
-              <Checkbox
+              { check.value && <Checkbox
                 key={data.value?.id}
                 disabled={data.value?.disableCheck}
                 modelValue={data.value?.checked}
                 onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
                 onClick={(event: MouseEvent) => { event.stopPropagation(); }}
-              />
+              /> }
               {
                 slots.default
                 ? renderSlot(useSlots(), 'default', { nodeData: data })

packages/devui-vue/devui/tree/src/core/use-check.ts

@@ -5,7 +5,6 @@ export default function(options?: {
   checkStrategy: CheckStrategy
 }) {
   return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-    console.log('useCheck options:', options);
     const { setNodeValue, getNode } = core;
 
     const checkNode = (node: IInnerTreeNode): void => {

packages/devui-vue/devui/tree/src/core/use-core.ts

@@ -4,8 +4,6 @@ import { generateInnerTree } from './utils';
 
 export default function(options?){
   return function useCore(data: Ref<IInnerTreeNode[]>): IUseCore {
-    console.log('useCore:', data, data.value);
-
     const getLevel = (node: ITreeNode): number => {
       return data.value.find((item) => item.id === node.id).level;
     }

packages/devui-vue/devui/tree/src/core/use-operate.ts

@@ -3,7 +3,6 @@ import { IInnerTreeNode, ITreeNode, IUseCore } from './use-tree-types';
 
 export default function(options?) {
   return function useOperate(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
-    console.log('useOperate:', data, data.value, options);
 
     const { setNodeValue, getChildren, getIndex, getLevel } = core;
 

packages/devui-vue/devui/tree/src/core/use-select.ts

@@ -10,8 +10,6 @@ export default function(options?) {
     const selectNode = (node: IInnerTreeNode): void => {
       if (node.disableSelect) { return; }
 
-      if (node.id === prevActiveNode?.id) { return; }
-
       if (prevActiveNode) {
         const prevActiveNodeIndex = data.value.findIndex(item => item.id === prevActiveNode.id)
         setNodeValue(data.value[prevActiveNodeIndex], 'selected', false);
@@ -21,8 +19,22 @@ export default function(options?) {
       prevActiveNode = node;
     }
 
+    const deselectNode = (node: IInnerTreeNode): void => {
+      setNodeValue(node, 'selected', false);
+    }
+
+    const toggleSelectNode = (node: IInnerTreeNode): void => {
+      if (node.selected) {
+        deselectNode(node);
+      } else {
+        selectNode(node);
+      }
+    }
+
     return {
       selectNode,
+      deselectNode,
+      toggleSelectNode,
     }
   };
 }

packages/devui-vue/devui/tree/src/core/use-tree-types.ts

@@ -58,6 +58,8 @@ export interface IUseOperate {
 
 export interface IUseSelect {
   selectNode: (node: IInnerTreeNode) => void;
+  deselectNode: (node: IInnerTreeNode) => void;
+  toggleSelectNode: (node: IInnerTreeNode) => void;
 }
 
 export interface IUseToggle {

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

@@ -0,0 +1,19 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { ITreeNode } from './core/use-tree-types';
+
+export type ICheckStrategy = 'upward' | 'downward' | 'both' | 'none';
+
+export type ICheck = boolean | ICheckStrategy;
+
+export const treeProps = {
+  data: {
+    type: Object as PropType<ITreeNode[]>,
+    default: []
+  },
+  check: {
+    type: [Boolean, String] as PropType<ICheck>,
+    default: false
+  },
+};
+
+export type TreeProps = ExtractPropTypes<typeof treeProps>;

packages/devui-vue/devui/tree/src/new-tree.tsx

@@ -9,31 +9,26 @@ import useSelect from './core/use-select';
 import { USE_TREE_TOKEN } from './const';
 import './tree.scss';
 import useOperate from './core/use-operate';
+import { TreeProps, treeProps } from './new-tree-types';
 
 export default defineComponent({
   name: 'DNewTree',
-  props: {
-    data: {
-      type: Object as PropType<ITreeNode[]>,
-      default: []
-    },
-    plugins: {
-      type: Object as PropType<IUseTree[]>,
-      default: []
-    },
-  },
-  setup(props, { slots }) {
-    const { data } = toRefs(props);
+  props: treeProps,
+  setup(props: TreeProps, { slots }) {
+    const { data, check } = toRefs(props);
+
+    const userPlugins = [
+      useSelect(),
+      useOperate(),
+    ];
+
+    if (check) {
+      userPlugins.push(useCheck());
+    }
 
     const treeFactory = useTree(
       data.value,
-      [
-        useSelect(),
-        useCheck({
-          checkStrategy: 'none',
-        }),
-        useOperate(),
-      ]
+      userPlugins
     );
 
     const {
@@ -56,7 +51,7 @@ export default defineComponent({
               ? renderSlot(useSlots(), 'default', {
                   treeFactory: treeFactory, nodeData: treeNode
                 })
-              : <DTreeNode data={treeNode}>
+              : <DTreeNode data={treeNode} check={check.value}>
                   {{
                     default: () => slots.content
                       ? renderSlot(useSlots(), 'content', { nodeData: treeNode })