refactor(tree): tree 组件 vue2,vue3 统一业务代码 (#2820)

* docs(tree): 添加分支维护备忘

* docs(tree): 完善分支维护说明

* refactor(tree): 改进代码与 vue3 api 的适配能力

* refactor(tree): 修正 treeItem 组件与 vue3 代码适配的问题

* refactor(tree): tree 类型文件更名为 tree-types.ts

* refactor(tree): tree 组件使用 useVModel 改进受控逻辑

* fix(tree): tree 组件，修正受控形态下，赋值结果为空时依然更新了选中状态的问题

* test(tree): tree 组件添加测试: actived 受控处理可赋值空值

* test(tree): tree 组件还原 state 示例

* refactor(tree): tree 组件适配 useVModel 方法，完善 vue3 适配方式

* refactor(tree): tree 组件，改进类型的 vue3 适配

* refactor(tree): tree 组件解决 vue3 类型警告问题

* refactor(tree): 解决 vue3 类型告警问题

* refactor(tree): 解决组件引用方式在 vue3 告警的问题

* refactor(tree): 对照 vue3 代码，改进 useVModel 的使用方式

* test(tree): 解决示例在控制台告警的问题

* refactor(tree): 解决 vue3 h 方法差异问题

* refactor(tree): tree 组件，修正 vue3 下 slots 获取方式差异

* refactor(tree): 示例消除 vue2, vue3 差异

* refactor(tree): 解决与 vue3 受控代码保持一致的问题

* refactor(tree): tree 组件统一受控示例

* refactor(tree): 解决 tree 组件 数据变更示例适配 vue3 环境需要调整逻辑的问题

* refactor(tree): tree 组件完善示例样式

* refactor(tree): tree 组件完善示例样式

* refactor(tree): tree 组件，示例代码与 vue3 统一

* refactor(tree): 改进代码结构，使用共享对象传递公共数据

* refactor(tree): tree 组件改进代码结构

* refactor(tree): 解决 vue3 未能触发 item render 的问题

* refactor(tree): 改进组件结构

* refactor(tree): 解决 vue3 props.disableCheck 未能正常工作的问题

* refactor(tree): 解决 empty 示例废弃 api 未生效的问题

* refactor(tree): 解决与 vue3 的示例差异

* refactor(tree): tree 组件完善节点操作示例

* refactor(tree): tree 组件完善属性变更逻辑

* refactor(tree): tree 组件，解决 setData 方法未能触发新增属性变更的问题

* refactor(tree): tree 组件，完善同步属性的示例

* refactor(tree): tree 组件虚拟滚动示例，降低节点数量便于调试

* refactor(tree): tree 组件，解决虚拟滚动数据变更的状态异常

* test(tree): tree 组件，屏蔽动画带来的测试概率性差异

* test(tree): tree 组件测试代码格式改进，适配 vue3 项目

* test(tree): tree 组件，测试代码与 vue3 版本统一

* refactor(tree): tree 组件虚拟滚动事件绑定适配 vue3

* test(tree): tree 组件统一vue2/vue3测试代码形式

* test(tree): tree 组件测试用例适配 vue-next 项目

* test(tree): tree 组件，vue2,vue3 统一测试用例

* test(tree): tree 组件，vue2,vue3 统一测试用例

* fix(tree): tree 组件虚拟滚动解决滚动条样式异常问题

* refactor(tree): tree 组件文件名称按规范重命名

* refactor(tree): tree 组件完善 expand-all 示例

* refactor(tree): tree 组件示例样式改进

* refactor(tree): tree 组件改进示例

* refactor(tree): 完善组件示例

* refactor(tree): tree 组件完善示例，分拆不同形式虚拟滚动示例

* refactor(tree): tree 组件改进清空节点的性能

* refactor(tree): tree 组件，完善虚拟滚动示例。变更受控实现

* fix(tree): tree 组件修正受控表现

* fix(tree): tree 组件修正事件触发规则

* test(tree): tree 组件完善单元测试

* chore(tree): tree 组件修改，更新 src/_common

* fix(tree): tree 组件, update api

* test(tree): tree, update snapshot

* refactor(tree-select): 修正类型告警问题

* chore(tree): update common

* chore(tree): update example

* test(tree): update snapshot

* chore: update common

* chore(tree): update common

* chore: revert style dir delete

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>

src/common.ts

@@ -45,7 +45,7 @@ export type OptionData = {
 } & PlainObject;
 
 export type TreeOptionData<T = string | number> = {
-  children?: Array<TreeOptionData<T>>;
+  children?: Array<TreeOptionData<T>> | boolean;
   /** option label content */
   label?: string | TNode;
   /** option search text */

src/tree-select/useTreeSelect.ts

@@ -177,7 +177,10 @@ export default function useTreeSelect(props: TdTreeSelectProps, context: SetupCo
       return;
     }
     const onlyLeafNode = Boolean(
-      !props.multiple && props.treeProps?.valueMode === 'onlyLeaf' && ctx.node?.data?.children?.length,
+      !props.multiple
+        && props.treeProps?.valueMode === 'onlyLeaf'
+        && Array.isArray(ctx.node?.data?.children)
+        && ctx.node?.data?.children?.length,
     );
     let current: TreeSelectValue = value;
     const nodeValue = Array.isArray(value) ? value[0] : value;

src/tree-select/utils.ts

@@ -18,7 +18,7 @@ export function getNodeDataByValue(
         // results.push(item);
         results.set(values[index], item);
       }
-      if (item.children?.length) {
+      if (Array.isArray(item.children) && item.children?.length) {
         getTreeNodeData(values, item.children, keys, results);
       }
       if (results.size >= values.length) {

src/tree/__tests__/activable.test.jsx

@@ -166,6 +166,55 @@ describe('Tree:activable', () => {
       expect(wrapper.find('[data-value="t1.1"]').classes('t-is-active')).toBe(false);
       expect(wrapper.find('[data-value="t1.2"]').classes('t-is-active')).toBe(false);
     });
+
+    it('actived 受控处理可赋值空值', async () => {
+      const data = [
+        {
+          value: 't1',
+          children: [
+            {
+              value: 't1.1',
+            },
+            {
+              value: 't1.2',
+            },
+          ],
+        },
+      ];
+      const wrapper = mount({
+        data() {
+          return {
+            actived: ['t1'],
+          };
+        },
+        methods: {
+          onActive(vals) {
+            const actived = vals.filter((val) => val !== 't1');
+            this.actived = actived;
+          },
+        },
+        render() {
+          return (
+            <Tree
+              ref="tree"
+              data={data}
+              activable
+              actived={this.actived}
+              onActive={this.onActive}
+              expand-all
+              transition={false}
+            ></Tree>
+          );
+        },
+      });
+      await delay(1);
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(true);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+      await delay(1);
+      await wrapper.find('[data-value="t1"] .t-tree__label').trigger('click');
+      expect(wrapper.find('[data-value="t1"]').classes('t-is-active')).toBe(false);
+    });
   });
 
   describe('props.activeMultiple', () => {

src/tree/__tests__/adapt.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { defineComponent } from '@vue/composition-api';

src/tree/__tests__/api.test.jsx

@@ -24,16 +24,14 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
       expect(wrapper.find('[data-value="t1"]').exists()).toBe(true);
       expect(wrapper.find('[data-value="t1.1"]').exists()).toBe(true);
       expect(wrapper.find('[data-value="t2"]').exists()).toBe(true);
-
       wrapper.vm.$refs.tree.remove('t2');
       await delay(10);
-
       expect(wrapper.find('[data-value="t2"]').exists()).toBe(false);
     });
   });
@@ -57,7 +55,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -86,7 +84,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -109,7 +107,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -146,7 +144,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} checkable />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} checkable />;
         },
       });
 
@@ -186,7 +184,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} />;
+          return <Tree ref="tree" transition={false} data={data} />;
         },
       });
 
@@ -224,7 +222,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -264,7 +262,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -308,7 +306,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -354,7 +352,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -392,7 +390,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -430,7 +428,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -472,7 +470,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -518,7 +516,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -556,7 +554,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -594,7 +592,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -636,7 +634,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -668,7 +666,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -690,7 +688,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -722,7 +720,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });
 
@@ -762,7 +760,7 @@ describe('Tree:api', () => {
       ];
       const wrapper = mount({
         render() {
-          return <Tree ref="tree" data={data} expandAll={true} />;
+          return <Tree ref="tree" transition={false} data={data} expandAll={true} />;
         },
       });