feat(comp: tree): add tree component (#476)

fix #446
IDuxFE · Oct 14, 2021 · 8f8ebca · 8f8ebca
1 parent 78738c2
commit 8f8ebca
Show file tree

Hide file tree

Showing 73 changed files with 4,297 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -15,7 +15,6 @@
 - 全面拥抱 Composition Api，从源码到文档
 - 完全使用 TypeScript 开发，提供完整的类型定义
 - 开箱即用的 Tree Shaking
-- 高覆盖率的单元测试
 - 国际化语言支持
 - 灵活的全局配置
 - 深入细节的主题定制能力

diff --git a/jest.config.js b/jest.config.js
@@ -1,8 +1,11 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
 module.exports = {
   // u can change this option to a more specific folder for test single component or util when dev
-  // for example, ['<rootDir>/packages/components/button']
+  // for example, roots: ['<rootDir>/packages/components/button'],
   roots: ['<rootDir>/packages/'],
-
+  // when running jst locally, you can turn off coverage.
+  // for example, collectCoverage: false,
+  collectCoverage: true,
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.vue$': 'vue3-jest',
@@ -34,7 +37,6 @@ module.exports = {
     '^dayjs/esm$': 'dayjs',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-  collectCoverage: true,
   coverageReporters: ['json', 'lcov', 'text', 'cobertura'],
   coverageThreshold: {
     global: {

diff --git a/package.json b/package.json
@@ -124,7 +124,6 @@
     "typescript": "^4.3.5",
     "unplugin-vue-components": "^0.15.0",
     "vite": "^2.5.1",
-    "vite-plugin-eslint": "^1.3.0",
     "vue3-jest": "^27.0.0-alpha.2",
     "yaml-front-matter": "^4.1.1"
   },

diff --git a/packages/cdk/utils/src/props.ts b/packages/cdk/utils/src/props.ts
@@ -199,3 +199,7 @@ export function callEmit<T extends (...args: any[]) => any>(
     return funcs(...args)
   }
 }
+
+export type VKey = string | number | symbol
+
+export const vKeyPropDef = IxPropTypes.oneOf([String, Number, Symbol])
diff --git a/packages/components/_private/collapse-transition/src/CollapseTransition.tsx b/packages/components/_private/collapse-transition/src/CollapseTransition.tsx
@@ -7,6 +7,8 @@
 
 import { Transition, defineComponent } from 'vue'
 
+import { callEmit } from '@idux/cdk/utils'
+
 import { collapseTransitionProps } from './types'
 
 export default defineComponent({
@@ -26,6 +28,8 @@ export default defineComponent({
       const mode = props.mode
       el.style[mode] = ''
       el.style.opacity = ''
+
+      callEmit(props.onAfterEnter)
     }
     const onBeforeLeave = (el: HTMLElement) => {
       const mode = props.mode
@@ -40,11 +44,13 @@ export default defineComponent({
       const mode = props.mode
       el.style[mode] = ''
       el.style.opacity = ''
+
+      callEmit(props.onAfterLeave)
     }
 
     return () => (
       <Transition
-        appear
+        appear={props.appear}
         name={props.name}
         onBeforeEnter={onBeforeEnter}
         onEnter={onEnter}

diff --git a/packages/components/_private/collapse-transition/src/types.ts b/packages/components/_private/collapse-transition/src/types.ts
@@ -13,8 +13,11 @@ import { IxPropTypes } from '@idux/cdk/utils'
 export type CollapseTransitionMode = 'height' | 'width'
 
 export const collapseTransitionProps = {
+  appear: IxPropTypes.bool.def(false),
   name: IxPropTypes.string.def('ix-collapse-transition'),
   mode: IxPropTypes.oneOf<CollapseTransitionMode>(['height', 'width']).def('height'),
+  onAfterEnter: IxPropTypes.emit(),
+  onAfterLeave: IxPropTypes.emit(),
 }
 
 export type CollapseTransitionProps = IxInnerPropTypes<typeof collapseTransitionProps>

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -1,5 +1,4 @@
 @import '../../style/themes/default.less';
-@import '../../icon/style/index.less';
 @import './mixin.less';
 
 @button-prefix: ~'@{idux-prefix}-button';
@@ -90,7 +89,7 @@
   }
 
   &-icon-only {
-    .button-icon-only(@button-prefix; @icon-prefix);
+    .button-icon-only(@button-prefix;);
   }
 
   &::before {
@@ -114,8 +113,8 @@
     position: relative;
   }
 
-  > .@{icon-prefix} + span,
-  > span + .@{icon-prefix} {
+  > .@{idux-prefix}-icon + span,
+  > span + .@{idux-prefix}-icon {
     margin-left: @button-icon-margin-left;
   }
 

diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -295,7 +295,7 @@
   }
 }
 
-.button-icon-only(@buttonPrefix; @icon-prefix) {
+.button-icon-only(@buttonPrefix;) {
   line-height: 1;
   font-size: @button-font-size-md + 2;
   &.@{buttonPrefix}-small {

diff --git a/packages/components/collapse/src/CollapsePanel.tsx b/packages/components/collapse/src/CollapsePanel.tsx
@@ -50,7 +50,7 @@ export default defineComponent({
       return (
         <div class={classes.value}>
           {headerNode}
-          <IxCollapseTransition>
+          <IxCollapseTransition appear>
             <div v-show={expanded} class="ix-collapse-panel-content">
               <div class="ix-collapse-panel-content-box">{slots.default?.()}</div>
             </div>

diff --git a/packages/components/components.less b/packages/components/components.less
@@ -25,6 +25,7 @@
 @import './switch/style/index.less';
 @import './textarea/style/index.less';
 // import Data Display
+@import './tree/style/index.less';
 @import './table/style/index.less';
 @import './avatar/style/index.less';
 @import './collapse/style/index.less';

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -50,6 +50,7 @@ import type {
 
 import { shallowReactive } from 'vue'
 
+import { TreeConfig } from '..'
 import { numFormatter } from './numFormatter'
 
 // --------------------- Common ---------------------
@@ -239,6 +240,13 @@ const tooltip = shallowReactive<TooltipConfig>({
   trigger: 'hover',
 })
 
+const tree = shallowReactive<TreeConfig>({
+  blocked: false,
+  expandIcon: 'right',
+  nodeKey: 'key',
+  showLine: false,
+})
+
 const popover = shallowReactive<PopoverConfig>({
   autoAdjust: true,
   delay: 100,
@@ -337,6 +345,7 @@ export const defaultConfig: GlobalConfig = {
   statistic,
   table,
   tooltip,
+  tree,
   popover,
   // Feedback
   message,

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -240,6 +240,13 @@ export interface TableColumnExpandableConfig {
   icon: [string, string]
 }
 
+export interface TreeConfig {
+  blocked: boolean
+  expandIcon: string
+  nodeKey: string
+  showLine: boolean
+}
+
 export interface TooltipConfig {
   autoAdjust: boolean
   delay: number | [number | null, number | null]
@@ -358,6 +365,7 @@ export interface GlobalConfig {
   statistic: StatisticConfig
   table: TableConfig
   tooltip: TooltipConfig
+  tree: TreeConfig
   popover: PopoverConfig
   stepper: StepperConfig
   // Feedback

diff --git a/packages/components/drawer/src/Drawer.tsx b/packages/components/drawer/src/Drawer.tsx
@@ -86,7 +86,7 @@ const useTrigger = (props: DrawerProps, updateVisible: (value: boolean) => void)
   const open = () => updateVisible(true)
 
   const close = async (evt?: Event | unknown) => {
-    const result = await Promise.resolve(callEmit(props.onClose, evt))
+    const result = await callEmit(props.onClose, evt)
     if (result === false) {
       return
     }

diff --git a/packages/components/empty/style/index.less b/packages/components/empty/style/index.less
@@ -1,5 +1,4 @@
 @import '../../style/themes/default.less';
-@import '../../icon/style/index.less';
 
 @empty-prefix: ~'@{idux-prefix}-empty';
 
@@ -17,7 +16,7 @@
       height: 100%;
     }
 
-    .@{icon-prefix} {
+    .@{idux-prefix}-icon {
       font-size: @empty-icon-font-size-md;
     }
   }

diff --git a/packages/components/icon/src/staticIcons.ts b/packages/components/icon/src/staticIcons.ts
@@ -9,6 +9,8 @@ import type { IconDefinition } from './types'
 
 import {
   Calendar,
+  CaretDown,
+  CaretUp,
   Check,
   CheckCircle,
   CheckCircleFilled,
@@ -47,7 +49,9 @@ export const staticIcons: IconDefinition[] = [
   Up,
   Down,
   Left,
-  Right,
+  Right, // Tree
+  CaretDown, // Table
+  CaretUp, // Table
   DoubleLeft,
   DoubleRight,
   Loading,

diff --git a/packages/components/index.ts b/packages/components/index.ts
@@ -49,6 +49,7 @@ import { IxTextarea } from '@idux/components/textarea'
 import { IxTimePicker } from '@idux/components/time-picker'
 import { IxTimeline, IxTimelineItem } from '@idux/components/timeline'
 import { IxTooltip } from '@idux/components/tooltip'
+import { IxTree } from '@idux/components/tree'
 import { IxTypography } from '@idux/components/typography'
 import { version } from '@idux/components/version'
 
@@ -91,6 +92,7 @@ const components = [
   IxSwitch,
   IxTimePicker,
   IxTable,
+  IxTree,
   IxAvatar,
   IxCollapse,
   IxCollapsePanel,

diff --git a/packages/components/menu/src/menu-sub/InlineContent.tsx b/packages/components/menu/src/menu-sub/InlineContent.tsx
@@ -23,7 +23,7 @@ export default defineComponent({
     })
 
     return () => (
-      <IxCollapseTransition>
+      <IxCollapseTransition appear>
         <ul v-show={isExpanded.value} class={classes.value}>
           {slots.default?.()}
         </ul>

diff --git a/packages/components/message/style/index.less b/packages/components/message/style/index.less
@@ -27,7 +27,7 @@
       width: calc(100% - @font-size-lg - @message-icon-margin-right);
     }
 
-    .@{icon-prefix} {
+    .@{idux-prefix}-icon {
       position: relative;
       vertical-align: top;
       top: 2px;

diff --git a/packages/components/message/style/mixin.less b/packages/components/message/style/mixin.less
@@ -1,5 +1,5 @@
 .message-icon-color (@type, @color) {
-  &.@{message-prefix}-@{type} .@{icon-prefix} {
+  &.@{message-prefix}-@{type} .@{idux-prefix}-icon {
     color: @color;
   }
 }
diff --git a/packages/components/modal/src/Modal.tsx b/packages/components/modal/src/Modal.tsx
@@ -88,7 +88,7 @@ const useTrigger = (props: ModalProps, updateVisible: (value: boolean) => void)
   const open = () => updateVisible(true)
 
   const close = async (evt?: Event | unknown) => {
-    const result = await Promise.resolve(callEmit(props.onClose, evt))
+    const result = await callEmit(props.onClose, evt)
     if (result === false) {
       return
     }

diff --git a/packages/components/result/style/index.less b/packages/components/result/style/index.less
@@ -1,5 +1,4 @@
 @import '../../style/themes/default.less';
-@import '../../icon/style/index.less';
 @import './mixins.less';
 
 @result-prefix: ~'@{idux-prefix}-result';
@@ -11,7 +10,7 @@
   &-icon {
     margin-bottom: @result-icon-margin;
 
-    & > .@{icon-prefix} {
+    & > .@{idux-prefix}-icon {
       font-size: @result-icon-size;
     }
   }

diff --git a/packages/components/style/core/reset.less b/packages/components/style/core/reset.less
@@ -22,7 +22,7 @@ html {
 body {
   // 2
   color: @text-color;
-  background-color: @background-color-body;
+  background-color: @background-color-component;
   font-family: @font-family;
   font-size: @font-size-md;
   font-weight: @font-weight-md;

diff --git a/packages/components/style/variable/color/color.less b/packages/components/style/variable/color/color.less
@@ -304,10 +304,21 @@
 /* color -------------------------- */
 @background-color-base: hsv(0, 0, 95%); // Default grey background color
 @background-color-light: hsv(0, 0, 98%); // background of header and selected item
-@background-color-body: @color-white;
+
 @background-color-component: @color-white;
 @background-color-component-dark: #191c24;
 
+@background-color-hover-dark: @color-grey-l30;
+@background-color-hover: @color-grey-l40;
+@background-color-hover-light: @color-grey-l50;
+
+@background-color-selected-dark: @color-primary-l30;
+@background-color-selected: @color-primary-l40;
+@background-color-selected-light: @color-primary-l50;
+
+@background-color-disabled: hsv(0, 0, 95%);
+
+// @deprecated
 @disabled-color: fade(@color-black, 25%);
 @disabled-color-dark: fade(@color-white, 35%);
 @disabled-bg-color: @background-color-base;
@@ -317,3 +328,5 @@
 @text-color-secondary: fade(@color-black, 45%);
 @text-color-dark: fade(@color-white, 85%);
 @text-color-secondary-dark: fade(@color-white, 65%);
+@text-color-disabled: fade(@color-black, 25%);
+@text-color-disabled-dark: fade(@color-white, 35%);
diff --git a/packages/components/table/demo/Basic.vue b/packages/components/table/demo/Basic.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxTable :columns="columns" :dataSource="data">
+  <IxTable :columns="columns" :dataSource="data" ex>
     <template #name="{ value }">
       <a>{{ value }}</a>
     </template>

diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
@@ -21,14 +21,14 @@ single: true
 | `v-model:expandedRowKeys` | 展开行的 `key` 数组 | `(string \| number)[]` | - | - | - |
 | `v-model:selectedRowKeys` | 选中行的 `key` 数组 | `(string \| number)[]` | - | - | - |
 | `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - |
-| `childrenKey` | 指定树形结构的列名 | `string` | `children` | - | - |
+| `childrenKey` | 指定树形结构的 `key` | `string` | `children` | - | - |
 | `columns` | 表格列的配置描述, 参见[TableColumn](#TableColumn) | `TableColumn[]` | - | - | - |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- |
 | `pagination` | 配置分页器, 参见[TablePagination](#TablePagination) | `TablePagination \| null` | - | ✅ | 设置 `null` 时表示不显示分页 |
 | `rowClassName` | 表格行的类名 | `(record: T, rowIndex: number) => string` | - | - | - |
-| `rowKey` | 表格行 `key` 的取值 | `string \| record => string \| number` | `key` | ✅ | - |
+| `rowKey` | 表格行 `key` 的取值 | `string \| record => string \| number` | `key` | - | - |
 | `scroll` | 表格滚动配置项，可以指定滚动区域的宽、高, 参见[TableScroll](#TableScroll) | `TableScroll` | - | - | - |
 | `size` | 表格大小 | `'large' \| 'medium' \| 'small'` | `medium` | ✅ |- |
 | `spin` | 表格是否加载中 | `boolean \| SpinProps` | - | - | - |
@@ -93,7 +93,7 @@ export type TableColumnTitleFn = (options: { title?: string }) => VNodeTypes
 | `type` | 列类型 | `'expandable'` | - | - | `type` 设置为 `expandable`,即为展开列 |
 | `customExpand` | 自定义展开内容 | `string \| TableColumnExpandableExpandFn<T>` | - | - | 类型为 `string` 时，对应插槽名 |
 | `customIcon` | 自定义展开图标 | `string \| TableColumnExpandableIconFn<T>` | - | - | 类型为 `string` 时，对应插槽名 |
-| `enabled` |  设置是否允许行展开 | `(record:T, rowIndex: number) => boolean` | - | - | - |
+| `disabled` |  设置是否允许行展开 | `(record:T, rowIndex: number) => boolean` | - | - | - |
 | `icon` | 展开按钮图标 | `[string, string]` | `['plus', 'minus']` | ✅ | - |
 | `indent` | 展示树形数据时，每层缩进的宽度 | `number` | `12` | - | - |
 | `trigger` | 不通过图标，触发行展开的方式 | `'click' \| 'doubleClick'` | - | - | - |
@@ -116,10 +116,10 @@ export type TableColumnExpandableIconFn<T = unknown> = (options: {
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `type` | 列类型 | `'selectable'` | - | - | `type` 设置为 `selectable`,即为选择列 |
-| `enabled` |  设置是否允许行选择 | `(record: T, rowIndex: number) => boolean` | - | - | - |
+| `disabled` |  设置是否允许行选择 | `(record: T, rowIndex: number) => boolean` | - | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `true` | - | - |
 | `options` | 自定义列头选择项 | `boolean \| TableSelectableSelection[]` | `false` | - | 为 `false` 时，不显示，为 `true` 时，显示默认的选择项 |
-| `trigger` | 不通过 `type`，触发行选择的方式 | `'click' \| 'doubleClick'` | - | - | - |
+| `trigger` | 不通过点击选择框，触发行选择的方式 | `'click' \| 'doubleClick'` | - | - | - |
 | `onChange` | 选中状态发生变化时触发 | `(selectedRowKeys: (string \| number)[], selectedRecords: T[]) => void` | - | - | - |
 | `onSelect` | 点击选择框，或通过 `trigger` 触发 | `(selected: boolean, record: T) => void` | - | - | - |
 | `onSelectAll` | 点击全选所有时触发 | `(selectedRowKeys: (string \| number)[]) => void` | - | - | - |