feat(pro:table): support resizable column (#945)

IDuxFE · Jun 9, 2022 · 47b90dd · 47b90dd
1 parent ae91476
commit 47b90dd
Show file tree

Hide file tree

Showing 22 changed files with 374 additions and 99 deletions.
diff --git a/packages/cdk/resize/demo/ResizableBasic.vue b/packages/cdk/resize/demo/ResizableBasic.vue
@@ -88,31 +88,27 @@
     }
   }
 
-  &:not(.cdk-resizable-resizing) {
-    .cdk-resizable-handler {
-      &-top,
-      &-bottom {
-        cursor: ns-resize;
-      }
-      &-start,
-      &-end {
-        cursor: ew-resize;
-      }
-      &-topStart,
-      &-bottomEnd {
-        cursor: nwse-resize;
-      }
-      &-topEnd,
-      &-bottomStart {
-        cursor: nesw-resize;
-      }
+  &:not(&-resizing) &-handler {
+    &-top,
+    &-bottom {
+      cursor: ns-resize;
+    }
+    &-start,
+    &-end {
+      cursor: ew-resize;
+    }
+    &-topStart,
+    &-bottomEnd {
+      cursor: nwse-resize;
+    }
+    &-topEnd,
+    &-bottomStart {
+      cursor: nesw-resize;
     }
   }
 
-  &-disabled {
-    .cdk-resizable-handler {
-      pointer-events: none;
-    }
+  &-disabled &-handler {
+    pointer-events: none;
   }
 }
 </style>
diff --git a/packages/cdk/resize/demo/ResizableHandler.vue b/packages/cdk/resize/demo/ResizableHandler.vue
@@ -117,31 +117,27 @@
     }
   }
 
-  &:not(.cdk-resizable-resizing) {
-    .cdk-resizable-handler {
-      &-top,
-      &-bottom {
-        cursor: ns-resize;
-      }
-      &-start,
-      &-end {
-        cursor: ew-resize;
-      }
-      &-topStart,
-      &-bottomEnd {
-        cursor: nwse-resize;
-      }
-      &-topEnd,
-      &-bottomStart {
-        cursor: nesw-resize;
-      }
+  &:not(&-resizing) &-handler {
+    &-top,
+    &-bottom {
+      cursor: ns-resize;
+    }
+    &-start,
+    &-end {
+      cursor: ew-resize;
+    }
+    &-topStart,
+    &-bottomEnd {
+      cursor: nwse-resize;
+    }
+    &-topEnd,
+    &-bottomStart {
+      cursor: nesw-resize;
     }
   }
 
-  &-disabled {
-    .cdk-resizable-handler {
-      pointer-events: none;
-    }
+  &-disabled &-handler {
+    pointer-events: none;
   }
 }
 </style>
diff --git a/packages/cdk/resize/src/resizable/types.ts b/packages/cdk/resize/src/resizable/types.ts
@@ -76,7 +76,7 @@ export type ResizableHandlerComponent = DefineComponent<
 >
 export type ResizableHandlerInstance = InstanceType<DefineComponent<ResizableHandlerProps>>
 
-export type ResizableOptions = Omit<ResizablePublicProps, 'disabled' | 'is'>
+export type ResizableOptions = Omit<ResizablePublicProps, 'disabled' | 'is' | 'handlers'>
 
 export type ResizableHandlerPlacement = typeof allHandlerPlacements[number]
 

diff --git a/packages/cdk/resize/src/resizable/useResizable.ts b/packages/cdk/resize/src/resizable/useResizable.ts
@@ -136,7 +136,7 @@ export function useResizable(
     if (!startPosition.value) {
       return
     }
-
+    setBodyCursor(_placement)
     resizing.value = true
 
     const { width: currWidth, height: currHeight } = calcSizeByEvent(_placement, evt)
@@ -158,7 +158,7 @@ export function useResizable(
     if (!startPosition.value) {
       return
     }
-
+    clearBodyCursor()
     resizing.value = false
 
     startPosition.value = undefined
@@ -174,6 +174,35 @@ export function useResizable(
   }
 }
 
-function ensureInBounds(value: number, boundValue: number): number {
+function ensureInBounds(value: number, boundValue: number) {
   return value < boundValue ? value : boundValue
 }
+
+function setBodyCursor(placement: ResizableHandlerPlacement) {
+  let cursor = ''
+  switch (placement) {
+    case 'top':
+    case 'bottom':
+      cursor = 'ns-resize'
+      break
+    case 'start':
+    case 'end':
+      cursor = 'ew-resize'
+      break
+    case 'topStart':
+    case 'bottomEnd':
+      cursor = 'nwse-resize'
+      break
+    case 'topEnd':
+    case 'bottomStart':
+      cursor = 'nesw-resize'
+      break
+  }
+  document.body.style.cursor = cursor
+  document.body.style.userSelect = 'none'
+}
+
+function clearBodyCursor() {
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
diff --git a/packages/components/table/index.ts b/packages/components/table/index.ts
@@ -26,6 +26,7 @@ export type {
   TableColumnExpandable,
   TableColumnSelectable,
   TableCustomAdditional,
+  TableCustomTag,
   TablePagination,
   TablePaginationPosition,
   TableScroll,

diff --git a/packages/components/table/src/main/ColGroup.tsx b/packages/components/table/src/main/ColGroup.tsx
@@ -59,7 +59,7 @@ function renderCol(
     [`${prefixCls}-selectable-with-dropdown`]: type === 'selectable' && mergedSelectableMenus.value.length > 0,
   })
 
-  const mergedWidth = width ?? column.width
+  const mergedWidth = column.width ?? width
   const style = mergedWidth ? { width: convertCssPixel(mergedWidth) } : undefined
   return <col key={column.key} class={className} style={style}></col>
 }
diff --git a/packages/components/table/src/main/body/BodyCell.tsx b/packages/components/table/src/main/body/BodyCell.tsx
@@ -106,12 +106,13 @@ export default defineComponent({
       const customAdditional = customAdditionalFn
         ? customAdditionalFn({ column, record: props.record, rowIndex: props.rowIndex })
         : undefined
-
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Tag = (tableProps.customTag?.bodyCell ?? 'td') as any
       return (
-        <td class={classes.value} style={style.value} title={title} {...additional} {...customAdditional}>
+        <Tag class={classes.value} style={style.value} title={title} {...additional} {...customAdditional}>
           {type === 'expandable' && renderExpandableChildren(props, slots, expandable, mergedPrefixCls.value)}
           {children}
-        </td>
+        </Tag>
       )
     }
   },

diff --git a/packages/components/table/src/main/body/BodyRow.tsx b/packages/components/table/src/main/body/BodyRow.tsx
@@ -69,9 +69,10 @@ export default defineComponent({
       const customAdditional = customAdditionalFn
         ? customAdditionalFn({ record: props.record, rowIndex: props.rowIndex })
         : undefined
-
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Tag = (tableProps.customTag?.bodyRow ?? 'tr') as any
       return (
-        <tr class={classes.value} {...clickEvents.value} {...customAdditional}>
+        <Tag class={classes.value} {...clickEvents.value} {...customAdditional}>
           {renderChildren(
             props,
             flattedColumns,
@@ -82,7 +83,7 @@ export default defineComponent({
             selectDisabled,
             handleSelect,
           )}
-        </tr>
+        </Tag>
       )
     }
   },

diff --git a/packages/components/table/src/main/head/HeadCell.tsx b/packages/components/table/src/main/head/HeadCell.tsx
@@ -143,9 +143,10 @@ export default defineComponent({
 
       const customAdditionalFn = tableProps.customAdditional?.headCell
       const customAdditional = customAdditionalFn ? customAdditionalFn({ column }) : undefined
-
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Tag = (tableProps.customTag?.headCell ?? 'th') as any
       return (
-        <th
+        <Tag
           class={classes.value}
           style={style.value}
           colSpan={titleColSpan === 1 ? undefined : titleColSpan}
@@ -156,7 +157,7 @@ export default defineComponent({
           onClick={onClick}
         >
           {children}
-        </th>
+        </Tag>
       )
     }
   },

diff --git a/packages/components/table/src/main/head/HeadRow.tsx b/packages/components/table/src/main/head/HeadRow.tsx
@@ -20,14 +20,16 @@ export default defineComponent({
       const { columns } = props
       const customAdditionalFn = tableProps.customAdditional?.headRow
       const customAdditional = customAdditionalFn ? customAdditionalFn({ columns }) : undefined
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const Tag = (tableProps.customTag?.headRow ?? 'tr') as any
       return (
-        <tr {...customAdditional}>
+        <Tag {...customAdditional}>
           {columns
             .filter(column => column.titleColSpan !== 0)
             .map(column => (
               <HeadCell key={column.key} column={column} />
             ))}
-        </tr>
+        </Tag>
       )
     }
   },

diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts
@@ -7,21 +7,19 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import { type DefineComponent, FunctionalComponent, type HTMLAttributes, type PropType, type VNodeChild } from 'vue'
-
-import { type BreakpointKey } from '@idux/cdk/breakpoint'
-import { type VirtualScrollToFn } from '@idux/cdk/scroll'
-import { type ExtractInnerPropTypes, type ExtractPublicPropTypes, type MaybeArray, type VKey } from '@idux/cdk/utils'
-import { type EmptyProps } from '@idux/components/empty'
-import { type HeaderProps } from '@idux/components/header'
-import { type MenuClickOptions, type MenuData } from '@idux/components/menu'
-import { type PaginationProps } from '@idux/components/pagination'
-import { type SpinProps } from '@idux/components/spin'
-
-import { type TableColumnMerged, type TableColumnMergedExtra } from './composables/useColumns'
-import { type FlattedData } from './composables/useDataSource'
-import { type ActiveFilter } from './composables/useFilterable'
-import { type ActiveSorter } from './composables/useSortable'
+import type { TableColumnMerged, TableColumnMergedExtra } from './composables/useColumns'
+import type { FlattedData } from './composables/useDataSource'
+import type { ActiveFilter } from './composables/useFilterable'
+import type { ActiveSorter } from './composables/useSortable'
+import type { BreakpointKey } from '@idux/cdk/breakpoint'
+import type { VirtualScrollToFn } from '@idux/cdk/scroll'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
+import type { EmptyProps } from '@idux/components/empty'
+import type { HeaderProps } from '@idux/components/header'
+import type { MenuClickOptions, MenuData } from '@idux/components/menu'
+import type { PaginationProps } from '@idux/components/pagination'
+import type { SpinProps } from '@idux/components/spin'
+import type { Component, DefineComponent, FunctionalComponent, HTMLAttributes, PropType, VNodeChild } from 'vue'
 
 export const tableProps = {
   expandedRowKeys: { type: Array as PropType<VKey[]>, default: undefined },
@@ -32,6 +30,7 @@ export const tableProps = {
   childrenKey: { type: String, default: undefined },
   columns: { type: Array as PropType<TableColumn[]>, default: () => [] },
   customAdditional: { type: Object as PropType<TableCustomAdditional>, default: undefined },
+  customTag: { type: Object as PropType<TableCustomTag>, default: undefined },
   dataSource: { type: Array as PropType<any[]>, default: () => [] },
   ellipsis: { type: Boolean, default: false },
   empty: { type: [String, Object] as PropType<string | EmptyProps>, default: undefined },
@@ -161,6 +160,13 @@ export interface TableCustomAdditional<T = any> {
   headRow?: (data: { columns: TableColumn<T>[] }) => Record<string, any> | undefined
 }
 
+export interface TableCustomTag {
+  bodyCell?: string | Component
+  bodyRow?: string | Component
+  headCell?: string | Component
+  headRow?: string | Component
+}
+
 export interface TablePagination extends PaginationProps {
   position?: TablePaginationPosition
 }

diff --git a/packages/pro/table/demo/Basic.vue b/packages/pro/table/demo/Basic.vue
@@ -13,9 +13,6 @@
       <a style="margin-right: 8px">Invite {{ record.name }}</a>
       <a>Delete</a>
     </template>
-    <template #expand="{ record }">
-      <span>{{ record.description }}</span>
-    </template>
   </IxProTable>
 </template>
 
@@ -46,11 +43,7 @@ const onColumnsChange = console.log
 const columns: ProTableColumn<Data>[] = [
   {
     type: 'indexable',
-  },
-  {
-    type: 'expandable',
     changeVisible: false,
-    customExpand: 'expand',
   },
   {
     title: 'Name',

diff --git a/packages/pro/table/demo/HeadGroup.vue b/packages/pro/table/demo/HeadGroup.vue
@@ -7,9 +7,6 @@
       <a style="margin-right: 8px">Invite {{ record.name }}</a>
       <a>Delete</a>
     </template>
-    <template #expand="{ record }">
-      <span>{{ record.description }}</span>
-    </template>
   </IxProTable>
 </template>
 
@@ -33,13 +30,7 @@ const columns: ProTableColumn<Data>[] = [
   {
     type: 'indexable',
     fixed: 'start',
-  },
-  {
-    type: 'expandable',
-    fixed: 'start',
     changeVisible: false,
-    onChange: expendedRowKeys => console.log(expendedRowKeys),
-    customExpand: 'expand',
   },
   {
     title: 'Name',

diff --git a/packages/pro/table/demo/Resizable.md b/packages/pro/table/demo/Resizable.md
@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh: 可调整列宽
+  en: Resizable column
+---
+
+## zh
+
+可以通过配置 `resizable`，开启拖拽调整列宽，还可以配置 `maxWidth` `minWidth` 来限制列宽的范围。
+
+## en
+
+Column width can be adjusted by configuring `resizable`, enabling drag and drop, and column width can be limited by configuring `maxWidth` and `minWidth`.