diff --git a/packages/components/table-v2/src/column.ts b/packages/components/table-v2/src/column.ts new file mode 100644 index 0000000000..558cfc3c1f --- /dev/null +++ b/packages/components/table-v2/src/column.ts @@ -0,0 +1,59 @@ +import { buildProps, definePropType } from '@element-plus/utils' + +import type { ExtractPropTypes, StyleValue } from 'vue' +import type { + Alignment, + CellRenderer, + DataGetter, + FixedDirection, + HeaderRenderer, +} from './types' + +const widthType = { + type: Number, + default: undefined, +} as const + +export const tableV2ColumnProps = buildProps({ + /** + * Attributes + */ + align: { + type: definePropType(String), + default: 'left', + }, + class: String, + dataKey: String, + fixed: { + type: definePropType([String, Boolean]), + default: false, + }, + headerClass: String, + hidden: Boolean, + resizable: Boolean, + style: { + type: definePropType(Object), + }, + sortable: Boolean, + title: String, + + maxWidth: widthType, + minWidth: widthType, + width: { + type: Number, + required: true, + }, + + // getters & renderers + cellRenderer: { + type: definePropType>(Function), + }, + dataGetter: { + type: definePropType>(Function), + }, + headerRenderer: { + type: definePropType>(Function), + }, +} as const) + +export type TableV2ColumnProps = ExtractPropTypes diff --git a/packages/components/table-v2/src/constants.ts b/packages/components/table-v2/src/constants.ts new file mode 100644 index 0000000000..4836feeb25 --- /dev/null +++ b/packages/components/table-v2/src/constants.ts @@ -0,0 +1 @@ +export const sortOrders = ['asc', 'desc'] as const diff --git a/packages/components/table-v2/src/table.ts b/packages/components/table-v2/src/table.ts index 71e311e5e6..463d8aaf1d 100644 --- a/packages/components/table-v2/src/table.ts +++ b/packages/components/table-v2/src/table.ts @@ -1,49 +1,22 @@ import { buildProps, definePropType } from '@element-plus/utils' -import type { ExtractPropTypes, StyleValue, VNode } from 'vue' - -const sortOrders = ['asc', 'desc'] as const - -export type Alignment = 'left' | 'center' | 'right' -export type FixedDirection = 'left' | 'right' -export type KeyType = string | number | symbol -export type SortOrder = typeof sortOrders +import type { ExtractPropTypes, StyleValue } from 'vue' +import type { + Column, + ColumnCommonParams, + RowCommonParams, + SortOrder, +} from './types' /** * Param types */ -export type ColumnCommonParams = { - columns: Column[] - column: Column - columnIndex: number -} - -export type RowCommonParams = { - rowData: T[] - rowIndex: number -} - -export type CellRendererParams = { - cellData: T -} & RowCommonParams & - ColumnCommonParams - -export type HeaderRendererParams = { - headerIndex: number -} & ColumnCommonParams - export type ColumnSortParams = { column: Column key: KeyType order: SortOrder } -export type DataGetterParams = { - columns: Column[] - column: Column - columnIndex: number -} & RowCommonParams - export type RowExpandParams = { expanded: boolean rowKey: KeyType @@ -54,16 +27,9 @@ export type RowEventHandlerParams = { event: Event } & RowCommonParams -export type ClassNameGetterParams = CellRendererParams - /** * Renderer/Getter types */ -export type CellRenderer = (params: CellRendererParams) => VNode - -export type HeaderRenderer = (params: HeaderRendererParams) => VNode - -export type ClassNameGetter = (params: ClassNameGetterParams) => string export type ExtraCellPropGetter = ( params: ColumnCommonParams & RowCommonParams @@ -95,7 +61,6 @@ export type RowClassNameGetter = ( * Handler types */ export type ColumnSortHandler = (params: ColumnSortParams) => void -export type DataGetter = (params: DataGetterParams) => T export type RowExpandHandler = (params: RowExpandParams) => void export type RowEventHandler = (params: RowEventHandlerParams) => void @@ -107,38 +72,6 @@ export type RowEventHandlers = { mouseleave?: RowEventHandler } -export type Column = { - key: KeyType - /** - * Data part - */ - dataKey?: string - dataGetter?: DataGetter - /** - * Attributes - */ - align?: Alignment - className?: any | ClassNameGetter - fixed?: true | FixedDirection - title?: string - hidden?: boolean - maxWidth?: number - minWidth?: number - resizable?: boolean - style?: StyleValue - sortable?: boolean - width: number - /** - * Renderers - */ - cellRenderer?: CellRenderer - headerRenderer?: HeaderRenderer - /** - * Extendable sections - */ - [key: string]: any -} - export const tableV2Props = buildProps({ /** * Unique items diff --git a/packages/components/table-v2/src/types.ts b/packages/components/table-v2/src/types.ts new file mode 100644 index 0000000000..7a7065c880 --- /dev/null +++ b/packages/components/table-v2/src/types.ts @@ -0,0 +1,83 @@ +import type { StyleValue, VNode } from 'vue' +import type { sortOrders } from './constants' + +export type Alignment = 'left' | 'center' | 'right' +export type FixedDirection = 'left' | 'right' +export type KeyType = string | number | symbol +export type SortOrder = typeof sortOrders + +/** + * Param types + */ +export type CellRendererParams = { + cellData: T +} & RowCommonParams & + ColumnCommonParams + +export type ColumnCommonParams = { + columns: Column[] + column: Column + columnIndex: number +} + +export type HeaderRendererParams = { + headerIndex: number +} & ColumnCommonParams + +export type RowCommonParams = { + rowData: T[] + rowIndex: number +} + +export type ClassNameGetterParams = { + cellData: T +} & RowCommonParams & + ColumnCommonParams + +export type DataGetterParams = { + columns: Column[] + column: Column + columnIndex: number +} & RowCommonParams + +export type DataGetter = (params: DataGetterParams) => T +export type ClassNameGetter = (params: ClassNameGetterParams) => string + +/** + * Renderer/Getter types + */ +export type CellRenderer = (params: CellRendererParams) => VNode + +export type HeaderRenderer = (params: HeaderRendererParams) => VNode + +export type Column = { + key: KeyType + /** + * Data part + */ + dataKey?: string + dataGetter?: DataGetter + /** + * Attributes + */ + align?: Alignment + className?: any | ClassNameGetter + fixed?: true | FixedDirection + title?: string + hidden?: boolean + maxWidth?: number + minWidth?: number + resizable?: boolean + style?: StyleValue + sortable?: boolean + width: number + /** + * Renderers + */ + cellRenderer?: CellRenderer + headerRenderer?: HeaderRenderer + /** + * Extendable sections + */ + [key: string]: any +}