feat(comp:table): add ellipsis and less variable (#778)

fix #769
IDuxFE · Mar 1, 2022 · 3d1f3fe · 3d1f3fe
1 parent fa653f9
commit 3d1f3fe
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 27 deletions.
diff --git a/packages/components/select/demo/Size.vue b/packages/components/select/demo/Size.vue
@@ -14,6 +14,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import { FormSize } from '@idux/components/form'
 import { SelectData } from '@idux/components/select'
 
 const dataSource: SelectData[] = [
@@ -22,7 +23,7 @@ const dataSource: SelectData[] = [
   { label: 'Speike', value: 'speike', disabled: true },
 ]
 
-const size = ref('md')
+const size = ref<FormSize>('md')
 const singleValue = ref('tom')
 const multipleValue = ref(['tom'])
 </script>
diff --git a/packages/components/select/index.ts b/packages/components/select/index.ts
@@ -27,5 +27,5 @@ export type {
   SelectOptionGroupProps,
   SelectOptionGroupComponent,
   SelectData,
-  SelectFilterFn,
+  SelectSearchFn,
 } from './src/types'
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
@@ -21,7 +21,7 @@ const defaultCompareFn = (o1: any, o2: any) => o1 === o2
 
 export const selectProps = {
   control: controlPropDef,
-  value: IxPropTypes.oneOfType([String, Number, Object]),
+  value: IxPropTypes.any,
   open: IxPropTypes.bool,
 
   allowInput: IxPropTypes.bool.def(false),
@@ -54,10 +54,10 @@ export const selectProps = {
 
   // events
   // eslint-disable-next-line @typescript-eslint/ban-types
-  'onUpdate:value': IxPropTypes.emit<(value: string | number | Object) => void>(),
+  'onUpdate:value': IxPropTypes.emit<(value: any) => void>(),
   'onUpdate:open': IxPropTypes.emit<(open: boolean) => void>(),
   // eslint-disable-next-line @typescript-eslint/ban-types
-  onChange: IxPropTypes.emit<(value: string | number | Object, oldValue: string | number | Object) => void>(),
+  onChange: IxPropTypes.emit<(value: any, oldValue: any) => void>(),
   onClear: IxPropTypes.emit<(evt: Event) => void>(),
   onCompositionStart: IxPropTypes.emit<(evt: CompositionEvent) => void>(),
   onCompositionEnd: IxPropTypes.emit<(evt: CompositionEvent) => void>(),

diff --git a/packages/components/table/__tests__/table.spec.ts b/packages/components/table/__tests__/table.spec.ts
@@ -168,6 +168,50 @@ describe('Table', () => {
       expect(wrapper.classes()).not.toContain('ix-table-borderless')
     })
 
+    test('ellipsis work', async () => {
+      const wrapper = TableMount({ props: { ellipsis: true } })
+
+      expect(wrapper.find('thead').find('th').classes()).toContain('ix-table-ellipsis')
+      expect(wrapper.find('tbody').find('td').classes()).toContain('ix-table-ellipsis')
+
+      await wrapper.setProps({ ellipsis: false })
+
+      expect(wrapper.find('thead').find('th').classes()).not.toContain('ix-table-ellipsis')
+      expect(wrapper.find('tbody').find('td').classes()).not.toContain('ix-table-ellipsis')
+    })
+
+    test('ellipsis with columns work', async () => {
+      const wrapper = TableMount({
+        props: {
+          ellipsis: true,
+          columns: [
+            { title: 'Name', dataKey: 'name', ellipsis: true },
+            { title: 'Age', dataKey: 'age', ellipsis: false },
+            { title: 'Address', dataKey: 'address' },
+          ],
+        },
+      })
+
+      const ths = wrapper.find('thead').find('tr').findAll('th')
+      const tds = wrapper.find('tbody').find('tr').findAll('td')
+
+      expect(ths[0].classes()).toContain('ix-table-ellipsis')
+      expect(ths[1].classes()).not.toContain('ix-table-ellipsis')
+      expect(ths[2].classes()).toContain('ix-table-ellipsis')
+      expect(tds[0].classes()).toContain('ix-table-ellipsis')
+      expect(tds[1].classes()).not.toContain('ix-table-ellipsis')
+      expect(tds[2].classes()).toContain('ix-table-ellipsis')
+
+      await wrapper.setProps({ ellipsis: false })
+
+      expect(ths[0].classes()).toContain('ix-table-ellipsis')
+      expect(ths[1].classes()).not.toContain('ix-table-ellipsis')
+      expect(ths[2].classes()).not.toContain('ix-table-ellipsis')
+      expect(tds[0].classes()).toContain('ix-table-ellipsis')
+      expect(tds[1].classes()).not.toContain('ix-table-ellipsis')
+      expect(tds[2].classes()).not.toContain('ix-table-ellipsis')
+    })
+
     test('empty work', async () => {
       let emptyText = 'empty text'
       const wrapper = TableMount({ props: { empty: emptyText, dataSource: [] } })

diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
@@ -20,6 +20,7 @@ order: 0
 | `childrenKey` | 指定树形结构的 `key` | `string` | `children` | - | - |
 | `columns` | 表格列的配置描述, 参见[TableColumn](#TableColumn) | `TableColumn[]` | - | - | - |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |
+| `ellipsis` | 超过宽度将自动省略 | `boolean` | `false` | - | - |
 | `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- |
 | `pagination` | 配置分页器, 参见[TablePagination](#TablePagination) | `boolean \| TablePagination` | - | ✅ | 设置 `false` 时表示不显示分页 |
@@ -69,7 +70,7 @@ export type TableColumn<T = any, V = any> =
 | --- | --- | --- | --- | --- | --- |
 | `children` | 子列的配置项 | `TableColumnBase[]` | - | - | 用于设置分组表头 |
 | `dataKey` | 数据在数据项中对应的路径 | `string \| string[]` | - | - | 支持通过数组查询嵌套路径 |
-| `ellipsis` | 超过宽度将自动省略 | `boolean` | `false` | - | - |
+| `ellipsis` | 超过宽度将自动省略 | `boolean` | - | - | 优先级高于 `props` 中的 `ellipsis` |
 | `key` | 表格列 `key` 的取值 | `string \| number` | - | - | 默认为 `dataKey` |
 | `sortable` | 是否可排序, 参见[TableColumnSortable](#TableColumnSortable) | `TableColumnSortable` | - | - | - |
 | `title` | 列头的文本 | `string` | - | - | - |

diff --git a/packages/components/table/src/composables/useColumns.ts b/packages/components/table/src/composables/useColumns.ts
@@ -44,7 +44,9 @@ export function useColumns(
     scrollBarSizeOnFixedHolder,
   )
   const fixedColumnKeys = useFixedColumnKeys(flattedColumnsWithScrollBar)
-  const hasEllipsis = computed(() => flattedColumns.value.some(column => (column as TableColumnBase).ellipsis))
+  const hasEllipsis = computed(
+    () => props.ellipsis || flattedColumns.value.some(column => (column as TableColumnBase).ellipsis),
+  )
   const hasFixed = computed(() => flattedColumns.value.some(column => column.fixed))
 
   const { columnWidths, columnWidthsWithScrollBar, changeColumnWidth } = useColumnWidths(
@@ -148,7 +150,7 @@ function convertColumns(nodes: VNode[] | undefined) {
     const { key = index, editable, ellipsis, ...newColumn } = props || {}
     newColumn.key = key
     newColumn.editable = editable || editable === ''
-    newColumn.editable = ellipsis || ellipsis === ''
+    newColumn.ellipsis = ellipsis || ellipsis === ''
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { default: defaultSlot, cell, title, expand, icon } = (children || {}) as any
     if (defaultSlot) {

diff --git a/packages/components/table/src/main/StickyScroll.tsx b/packages/components/table/src/main/StickyScroll.tsx
@@ -7,9 +7,17 @@
 
 // eslint-disable vue/no-reserved-props
 
-import type { StyleValue } from 'vue'
-
-import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch, watchEffect } from 'vue'
+import {
+  type CSSProperties,
+  computed,
+  defineComponent,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  watchEffect,
+} from 'vue'
 
 import { getScrollBarSize } from '@idux/cdk/scroll'
 import { convertElement, getOffset, off, on } from '@idux/cdk/utils'
@@ -61,7 +69,7 @@ export default defineComponent({
       }
     })
 
-    const scrollBarStyle = computed<StyleValue>(() => {
+    const scrollBarStyle = computed<CSSProperties>(() => {
       return {
         width: `${scrollBarWidth.value}px`,
         transform: `translate3d(${stickyScrollLeft.value}px, 0, 0)`,

diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -31,8 +31,9 @@ export default defineComponent({
   props: tableBodyCellProps,
   setup(props) {
     const {
-      mergedPrefixCls,
+      props: tableProps,
       slots,
+      mergedPrefixCls,
       activeSortable,
       fixedColumnKeys,
       columnOffsets,
@@ -44,12 +45,12 @@ export default defineComponent({
     const dataValue = useDataValue(props)
 
     const classes = computed(() => {
-      const { key, fixed, align, ellipsis } = props.column as BodyColumn
+      const { key, fixed, align, ellipsis = tableProps.ellipsis } = props.column as BodyColumn
       const prefixCls = mergedPrefixCls.value
-      let classes: Record<string, boolean> = {
+      let classes = {
         [`${prefixCls}-sorted`]: activeSortable.key === key && !!activeSortable.orderBy,
         [`${prefixCls}-align-${align}`]: !!align,
-        [`${prefixCls}-ellipsis`]: !!ellipsis,
+        [`${prefixCls}-ellipsis`]: ellipsis,
       }
       if (fixed) {
         const { lastStartKey, firstEndKey } = fixedColumnKeys.value
@@ -93,7 +94,7 @@ export default defineComponent({
       if (type === 'selectable') {
         children = renderSelectableChildren(props, selectable, handleClick)
       } else {
-        const { ellipsis } = props.column
+        const { ellipsis = tableProps.ellipsis } = props.column
         const text = dataValue.value
         children = renderChildren(props, slots, dataValue.value)
         title = getColTitle(ellipsis, children, text)

diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
@@ -28,8 +28,9 @@ export default defineComponent({
   props: tableHeadCellProps,
   setup(props) {
     const {
-      mergedPrefixCls,
+      props: tableProps,
       slots,
+      mergedPrefixCls,
       fixedColumnKeys,
       columnOffsetsWithScrollBar,
       isSticky,
@@ -41,14 +42,24 @@ export default defineComponent({
     } = inject(TABLE_TOKEN)!
 
     const classes = computed(() => {
-      const { type, align, hasChildren, fixed, key, sortable, filterable } = props.column as HeadColumn
+      const {
+        type,
+        align,
+        ellipsis = tableProps.ellipsis,
+        fixed,
+        hasChildren,
+        key,
+        sortable,
+        filterable,
+      } = props.column as HeadColumn
       const prefixCls = mergedPrefixCls.value
       let classes: Record<string, boolean | undefined> = {
         [`${prefixCls}-cell-${type}`]: !!type,
-        [`${prefixCls}-cell-sortable`]: !!sortable,
         [`${prefixCls}-cell-filterable`]: !!filterable,
+        [`${prefixCls}-cell-sortable`]: !!sortable,
         [`${prefixCls}-align-${align}`]: !hasChildren && !!align,
         [`${prefixCls}-align-center`]: hasChildren,
+        [`${prefixCls}-ellipsis`]: ellipsis,
       }
       if (fixed) {
         const { lastStartKey, firstEndKey } = fixedColumnKeys.value
@@ -109,7 +120,7 @@ export default defineComponent({
       } else if (type === 'selectable') {
         children = <SelectableTrigger />
       } else {
-        const { title, customTitle, ellipsis, sortable, filterable } = props.column as HeadColumn
+        const { title, customTitle, ellipsis = tableProps.ellipsis, sortable, filterable } = props.column as HeadColumn
         children = renderChildren(title, customTitle, slots)
         _title = getColTitle(ellipsis, children!, title)
 

diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
@@ -28,6 +28,7 @@ export const tableProps = {
   childrenKey: IxPropTypes.string.def('children'),
   columns: IxPropTypes.array<TableColumn<any>>().def(() => []),
   dataSource: IxPropTypes.array().def(() => []),
+  ellipsis: IxPropTypes.bool.def(false),
   empty: IxPropTypes.oneOfType<string | EmptyProps>([String, IxPropTypes.object()]),
   header: IxPropTypes.oneOfType([String, IxPropTypes.object<HeaderProps>()]),
   headless: IxPropTypes.bool,

diff --git a/packages/components/table/src/utils/index.ts b/packages/components/table/src/utils/index.ts
@@ -11,11 +11,7 @@ import { isString } from 'lodash-es'
 
 import { getFirstValidNode } from '@idux/cdk/utils'
 
-export function getColTitle(
-  ellipsis: boolean | undefined,
-  children: VNodeChild,
-  title: string | undefined,
-): string | undefined {
+export function getColTitle(ellipsis: boolean, children: VNodeChild, title: string | undefined): string | undefined {
   if (!ellipsis) {
     return undefined
   }

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -253,7 +253,7 @@
     }
 
     &-active {
-      color: @color-primary;
+      color: @table-head-icon-active-color;
     }
   }
 

diff --git a/packages/components/table/style/themes/default.variable.less b/packages/components/table/style/themes/default.variable.less
@@ -30,6 +30,7 @@
 @table-head-split-color: rgba(0, 0, 0, 0.06);
 
 @table-head-icon-color: @color-black;
+@table-head-icon-active-color: @color-primary;
 @table-head-icon-hover-backgroud-color: @color-graphite-l40;
 @table-head-font-weight: @font-weight-lg;