chore(tree): 修复eslint文件

packages/devui-vue/devui/tree/__tests__/checkable-tree/checkable-tree.spec.tsx

@@ -37,4 +37,4 @@ describe('Checkable tree', () => {
   it.todo('The checkbox should be checked when setting checked to true.');
 
   it.todo('The checkbox can\'t  be checked when setting disableCheck to true.');
-});
+});

packages/devui-vue/devui/tree/__tests__/node-merge/node-merge.spec.tsx

@@ -28,4 +28,4 @@ describe('Tree node merge', () => {
     expect(childNodes[0].text()).toBe('Parent node 1 / Parent node 1-1');
     expect(childNodes[1].text()).toBe('Leaf node 1-1-1');
   });
-});
+});

packages/devui-vue/devui/tree/src/components/icon-close.tsx

@@ -1,4 +1,4 @@
-export const IconClose = () => (
+export const IconClose = (): JSX.Element => (
   <svg
     width="16px"
     height="16px"

packages/devui-vue/devui/tree/src/components/icon-open.tsx

@@ -1,4 +1,4 @@
-export const IconOpen = () => (
+export const IconOpen = (): JSX.Element => (
   <svg
     width="16px"
     height="16px"

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

@@ -1,19 +1,21 @@
+import type { ComputedRef } from 'vue';
 import { defineComponent, PropType, toRefs } from 'vue';
-import { ITreeNode } from '../core/use-tree-types';
+import { ITreeNode, IInnerTreeNode } from '../core/use-tree-types';
 import useTreeNode from './use-tree-node';
 
 export default defineComponent({
   name: 'DTreeNodeContent',
   props: {
     data: {
       type: Object as PropType<ITreeNode>,
+      default: () => ({}),
     },
   },
   setup(props) {
     const { data } = toRefs(props);
     const {
       nodeTitleClass,
-    } = useTreeNode(data);
+    } = useTreeNode(data as ComputedRef<IInnerTreeNode>);
 
     return () => {
       return (

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 } from '../core/use-tree-types';
+import { ITreeNode, IUseTree } from '../core/use-tree-types';
 import { IconClose } from './icon-close';
 import { IconOpen } from './icon-open';
 
@@ -9,26 +9,29 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ITreeNode>,
+      default: () => ({})
     },
   },
   setup(props) {
     const { data } = toRefs(props);
-    const { toggleNode } = inject(USE_TREE_TOKEN);
+    const { toggleNode } = inject(USE_TREE_TOKEN) as Partial<IUseTree>;
 
     return () => {
       return (
         <span
           class={['devui-tree-node__folder', data.value?.disableToggle && 'toggle-disabled']}
           onClick={(event: MouseEvent) => {
             event.stopPropagation();
-            toggleNode(data.value);
+            if (toggleNode) {
+              toggleNode(data.value);
+            }
           }}>
           {
             data.value.isLeaf
-            ? <span class="devui-tree-node__indent" />
-            : data.value.expanded
-              ? <IconOpen class="mr-xs" />
-              : <IconClose class="mr-xs" />
+              ? <span class="devui-tree-node__indent" />
+              : data.value.expanded
+                ? <IconOpen class="mr-xs" />
+                : <IconClose class="mr-xs" />
           }
         </span>
       );

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

@@ -1,6 +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 } from '../core/use-tree-types';
+import { IInnerTreeNode, IUseTree } from '../core/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
 import DTreeNodeContent from './tree-node-content';
@@ -11,6 +12,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<IInnerTreeNode>,
+      default: () => ({})
     },
     check: {
       type: Boolean,
@@ -19,7 +21,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { data, check } = toRefs(props);
-    const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN);
+    const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN) as Partial<IUseTree>;
 
     const {
       nodeClass,
@@ -28,11 +30,11 @@ export default defineComponent({
       nodeVLineClass,
       nodeVLineStyle,
       nodeHLineClass,
-    } = useTreeNode(data);
+    } = useTreeNode(data as ComputedRef<IInnerTreeNode>);
 
     const halfChecked = computed(() => {
-      const children = getChildren(data.value);
-      const checkedChildren = children.filter((item: IInnerTreeNode) => item.checked);
+      const children = getChildren?.(data.value);
+      const checkedChildren = children?.filter((item: IInnerTreeNode) => item.checked);
 
       if (['upward', 'both'].includes(check.value)) {
         return checkedChildren.length > 0 && checkedChildren.length < children.length;
@@ -42,32 +44,33 @@ export default defineComponent({
     });
 
     return () => {
+      const checkboxProps = {
+        key: data.value?.id,
+        disabled: data.value?.disableCheck,
+        halfchecked: halfChecked.value,
+        modelValue: data.value?.checked,
+        'onUpdate:modelValue': () => { toggleCheckNode(data.value); },
+        onClick: (event: MouseEvent) => { event.stopPropagation(); },
+      };
       return (
         <div class={nodeClass.value} style={nodeStyle.value}>
           <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
           <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} />
+                ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode })
+                : <DTreeNodeToggle data={data.value} />
             }
-            <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
+            <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px` }}>
               {
                 check.value &&
-                <Checkbox
-                  key={data.value?.id}
-                  disabled={data.value?.disableCheck}
-                  halfchecked={halfChecked.value}
-                  modelValue={data.value.checked}
-                  onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
-                  onClick={(event: MouseEvent) => { event.stopPropagation(); }}
-                />
+                <Checkbox {...checkboxProps}/>
               }
               {
                 slots.default
-                ? renderSlot(useSlots(), 'default', { nodeData: data })
-                : <DTreeNodeContent data={data} />
+                  ? renderSlot(useSlots(), 'default', { nodeData: data })
+                  : <DTreeNodeContent data={data} />
               }
             </div>
           </div>

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

@@ -1,24 +1,41 @@
-import { computed, ComputedRef, inject } from 'vue';
+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';
 
-export default function useTreeNode(data: ComputedRef<IInnerTreeNode>) {
-  const { getChildren } = inject<IUseTree>(USE_TREE_TOKEN);
+export interface IUseTreeNode {
+  nodeClass: ComputedRef<(string | false | undefined)[]>;
+  nodeStyle: ComputedRef<{ paddingLeft: string }>;
+  nodeContentClass: ComputedRef<(string | false | undefined)[]>;
+  nodeTitleClass: ComputedRef<(string | false | undefined)[]>;
+  nodeVLineClass: ComputedRef<(string | false | undefined)[]>;
+  nodeVLineStyle: ComputedRef<{ height: string; left: string; top: string }>;
+  nodeHLineClass: ComputedRef<(string | false | undefined)[]>;
+}
+
+export default function useTreeNode(data: ComputedRef<IInnerTreeNode>): IUseTreeNode {
+  const { getChildren } = inject(USE_TREE_TOKEN) as Partial<IUseTree>;
 
   const nodeClass = computed(() => [
     'devui-tree-node',
     data.value?.expanded && 'devui-tree-node__open',
   ]);
-  const nodeStyle = computed(() => {return { paddingLeft: `${NODE_INDENT * (data.value?.level - 1)}px` }});
+  const nodeStyle = computed(() => {
+    return { paddingLeft: `${NODE_INDENT * (data.value?.level - 1)}px` };
+  });
 
   const nodeVLineClass = computed(() => [
     !data.value?.isLeaf && data.value?.expanded && 'devui-tree-node__vline',
   ]);
-  const nodeVLineStyle = computed(() => {return {
-    height: `${NODE_HEIGHT * (getChildren(data.value, { expanded: true }).length - 1) + NODE_HEIGHT / 2 + 1}px`,
-    left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`,
-    top: `${NODE_HEIGHT}px`,
-  }});
+  const nodeVLineStyle = computed(() => {
+    return {
+      height: `${NODE_HEIGHT * (
+        getChildren(data.value, { expanded: true }).length - 1
+      ) + NODE_HEIGHT / 2 + 1}px`,
+      left: `${NODE_INDENT * (data.value?.level - 1) + 9}px`,
+      top: `${NODE_HEIGHT}px`,
+    };
+  });
   const nodeHLineClass = computed(() => [
     data.value?.level !== 1 && 'devui-tree-node__hline',
   ]);

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

@@ -1,21 +1,23 @@
 import { ref, Ref } from 'vue';
-import { CheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types';
-
-export default function(options?: Ref<{
-  checkStrategy: CheckStrategy
-}> = ref({
-  checkStrategy: 'both'
-})) {
-  return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
+import { ICheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types';
+export interface IUseCheck {
+  checkNode: (node: IInnerTreeNode) => void;
+  uncheckNode: (node: IInnerTreeNode) => void;
+  toggleCheckNode: (node: IInnerTreeNode) => void;
+}
+export default function (
+  options: Ref<{ checkStrategy: ICheckStrategy }> = ref({ checkStrategy: 'both' as ICheckStrategy })
+) {
+  return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore): IUseCheck {
     const { setNodeValue, getNode, getChildren, getParent } = core;
 
     const checkNode = (node: IInnerTreeNode): void => {
       setNodeValue(node, 'checked', true);
-    }
+    };
 
     const uncheckNode = (node: IInnerTreeNode): void => {
       setNodeValue(node, 'checked', false);
-    }
+    };
 
     const controlParentNodeChecked = (node: IInnerTreeNode): void => {
       const parentNode = getParent(node);
@@ -32,7 +34,7 @@ export default function(options?: Ref<{
         } else if (checkedSiblingNodes.length === siblingNodes.length) {
           setNodeValue(parentNode, 'checked', true);
         }
-      }
+      };
 
       if (parentNode.parentId) {
         toggleParentChecked();
@@ -42,7 +44,7 @@ export default function(options?: Ref<{
       } else {
         toggleParentChecked();
       }
-    }
+    };
 
     const toggleCheckNode = (node: IInnerTreeNode): void => {
       if (getNode(node).checked) {
@@ -62,12 +64,12 @@ export default function(options?: Ref<{
       if (['upward', 'both'].includes(options.value.checkStrategy)) {
         controlParentNodeChecked(node);
       }
-    }
+    };
 
     return {
       checkNode,
       uncheckNode,
       toggleCheckNode,
-    }
+    };
   };
 }