feat(tree): add tree content/icon slot (#405)

* feat(tree): 增加content插槽

* feat(tree): 增加icon插槽

Author: kagol

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

@@ -0,0 +1,24 @@
+import { defineComponent, PropType, toRefs } from 'vue';
+import { ITreeNode } from '../core/use-tree-types';
+import useTreeNode from './use-tree-node';
+
+export default defineComponent({
+  name: 'DTreeNodeContent',
+  props: {
+    data: {
+      type: Object as PropType<ITreeNode>,
+    },
+  },
+  setup(props) {
+    const { data } = toRefs(props);
+    const {
+      nodeTitleClass,
+    } = useTreeNode(data);
+
+    return () => {
+      return (
+        <span class={nodeTitleClass.value}>{data.value?.label}</span>
+      );
+    };
+  },
+});

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

@@ -1,8 +1,9 @@
-import { defineComponent, inject, PropType, toRefs } from 'vue';
+import { defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
 import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
 import { IInnerTreeNode } from '../core/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
+import DTreeNodeContent from './tree-node-content';
 import useTreeNode from './use-tree-node';
 
 export default defineComponent({
@@ -12,15 +13,14 @@ export default defineComponent({
       type: Object as PropType<IInnerTreeNode>,
     },
   },
-  setup(props) {
+  setup(props, { slots }) {
     const { data } = toRefs(props);
-    const { selectNode, toggleCheckNode } = inject(USE_TREE_TOKEN);
+    const { selectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
 
     const {
       nodeClass,
       nodeStyle,
       nodeContentClass,
-      nodeTitleClass,
       nodeVLineClass,
       nodeVLineStyle,
       nodeHLineClass,
@@ -32,7 +32,11 @@ export default defineComponent({
           <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
           <div class={nodeContentClass.value} onClick={() => { selectNode(data.value); }}>
             <span class={nodeHLineClass.value}></span>
-            <DTreeNodeToggle data={data.value} />
+            {
+              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
                 key={data.value?.id}
@@ -41,7 +45,11 @@ export default defineComponent({
                 onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
                 onClick={(event: MouseEvent) => { event.stopPropagation(); }}
               />
-              <span class={nodeTitleClass.value}>{data.value?.label}</span>
+              {
+                slots.default
+                ? renderSlot(useSlots(), 'default', { nodeData: data })
+                : <DTreeNodeContent data={data} />
+              }
             </div>
           </div>
         </div>

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

@@ -1,6 +1,8 @@
 import { defineComponent, PropType, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
 import type { ITreeNode } from './core/use-tree-types';
 import DTreeNode from './components/tree-node';
+import DTreeNodeContent from './components/tree-node-content';
+import DTreeNodeToggle from './components/tree-node-toggle';
 import useTree from './core/use-tree';
 import useCheck from './core/use-check';
 import useSelect from './core/use-select';
@@ -26,6 +28,7 @@ export default defineComponent({
     const {
       setTree,
       getExpendedTree,
+      toggleNode,
     } = treeFactory;
 
     // 外部同步内部
@@ -42,7 +45,16 @@ export default defineComponent({
               ? renderSlot(useSlots(), 'default', {
                   treeFactory: treeFactory, nodeData: treeNode
                 })
-              : <DTreeNode data={treeNode} />
+              : <DTreeNode data={treeNode}>
+                  {{
+                    default: () => slots.content
+                      ? renderSlot(useSlots(), 'content', { nodeData: treeNode })
+                      : <DTreeNodeContent data={treeNode} />,
+                    icon: () => slots.icon
+                      ? renderSlot(useSlots(), 'icon', { nodeData: treeNode, toggleNode })
+                      : <DTreeNodeToggle data={treeNode} />,
+                  }}
+                </DTreeNode>
             ))
           }
         </div>

packages/devui-vue/docs/components/tree/index.md

@@ -1038,7 +1038,23 @@ export default defineComponent({
 ```vue
 <template>
   <d-button @click="changeData">changeData</d-button>
-  <d-new-tree :data="data"></d-new-tree>
+  <d-new-tree :data="data">
+    <template #content="{nodeData}">
+      <svg t="1649231851892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2194" width="16" height="16"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="2195"></path></svg>
+      {{nodeData.label}}
+    </template>
+    <template #icon="{nodeData, toggleNode}">
+      <span v-if="nodeData.isLeaf" class="devui-tree-node__indent"></span>
+      <span v-else @click="(event) => {
+          event.stopPropagation();
+          toggleNode(nodeData);
+        }"
+      >
+        <svg v-if="!nodeData.expanded" t="1649233280637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4033" width="12" height="12"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" p-id="4034" fill="#c0c4cc"></path></svg>
+        <svg v-else t="1649232304515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3732" width="12" height="12"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="3733" fill="#c0c4cc"></path></svg>
+      </span>
+    </template>
+  </d-new-tree>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';