test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-04 21:18:14 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

chore: update table, list types (#2694)

Browse Source 
* fix: table typo

* fix: list typo

* fix: update table, list return JSX.Element typo

* fix: xxxRender merge params

* fix: change table event return type `void`
This commit is contained in:
言肆 2020-08-17 21:12:17 +08:00 committed by GitHub
parent 17456b68fc
commit 54d2418249
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 516 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
types/list/list-item.d.ts vendored
View File

@ -4,21 +4,24 @@
import { AntdComponent } from '../component'; import { AntdComponent } from '../component';
import { Meta } from '../meta'; import { Meta } from '../meta';
import { VNodeChild } from 'vue';
export declare class ListItem extends AntdComponent { export declare class ListItem extends AntdComponent {
static Meta: typeof Meta; static Meta: typeof Meta;
/** $props: {
* The actions content of list item. If itemLayout is vertical, shows the content on bottom, /**
* otherwise shows content on the far right. * The actions content of list item. If itemLayout is vertical, shows the content on bottom,
* @type any (VNode[] | slot) * otherwise shows content on the far right.
*/ * @type any (VNode[] | slot)
actions: any; */
actions?: VNodeChild | JSX.Element;
/** /**
* The extra content of list item. If itemLayout is vertical, shows the content on right, * The extra content of list item. If itemLayout is vertical, shows the content on right,
* otherwise shows content on the far right. * otherwise shows content on the far right.
* @type any (string | slot) * @type any (string | slot)
*/ */
extra: any; extra?: VNodeChild | JSX.Element;
};
} }

186
types/list/list.d.ts vendored
View File

@ -3,104 +3,118 @@
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from '../component'; import { AntdComponent } from '../component';
import { VNode } from 'vue'; import { VNodeChild } from 'vue';
import { Pagination } from '../pagination'; import { Pagination } from '../pagination';
import { ListItem } from './list-item'; import { ListItem } from './list-item';
export declare type ColumnCount = '' | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24; export declare type ColumnCount = '' | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
export declare class PaginationConfig extends Pagination { export declare class PaginationConfig extends Pagination {
position: 'top' | 'bottom' | 'both'; position?: 'top' | 'bottom' | 'both';
}
export interface Item {
item?: any;
index?: number;
} }
export class List extends AntdComponent { export class List extends AntdComponent {
static Item: typeof ListItem; static Item: typeof ListItem;
/** $props: {
* Toggles rendering of the border around the list /**
* @default false * Toggles rendering of the border around the list
* @type boolean * @default false
*/ * @type boolean
bordered: boolean; */
bordered?: boolean;
/** /**
* List footer renderer * List footer renderer
* @type any (string | slot) * @type any (string | slot)
*/ */
footer: any; footer?: VNodeChild | JSX.Element;
/** /**
* The grid type of list. You can set grid to something like {gutter: 16, column: 4} * The grid type of list. You can set grid to something like {gutter: 16, column: 4}
* @type object * @type object
*/ */
grid: { grid?: {
gutter: number; gutter?: number;
column: ColumnCount; column?: ColumnCount;
xs: ColumnCount; xs?: ColumnCount;
sm: ColumnCount; sm?: ColumnCount;
md: ColumnCount; md?: ColumnCount;
lg: ColumnCount; lg?: ColumnCount;
xl: ColumnCount; xl?: ColumnCount;
xxl: ColumnCount; xxl?: ColumnCount;
};
/**
* List header renderer
* @type any (string | slot)
*/
header?: VNodeChild | JSX.Element;
/**
* The layout of list, default is horizontal,
* If a vertical list is desired, set the itemLayout property to vertical
*
* @type string
*/
itemLayout?: string | 'horizontal' | 'vertical';
/**
* Shows a loading indicator while the contents of the list are being fetched
* @default false
* @type boolean | object
*/
loading?: boolean | object;
/**
* Shows a load more content
* @type any (string | slot)
*/
loadMore?: VNodeChild | JSX.Element;
/**
* i18n text including empty text
* @default emptyText: 'No Data'
* @type object
*/
locale?: object;
/**
* Pagination config, hide it by setting it to false
* @default false
* @type boolean | object
*/
pagination?: boolean | PaginationConfig;
/**
* Toggles rendering of the split under the list item
* @default true
* @type boolean
*/
split?: boolean;
/**
* dataSource array for list
*/
dataSource?: any[];
/**
* Custom item renderer, slot="renderItem" and slot-scope="{ item, index }"
* @default null
* @type Function()
*/
renderItem?: (item?: Item) => VNodeChild | JSX.Element;
/**
* Specify the key that will be used for uniquely identify each element
* @default null
* @type Function
*/
rowKey?: (item: any) => string | number;
}; };
/**
* List header renderer
* @type any (string | slot)
*/
header: any;
/**
* The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical
* @type string
*/
itemLayout: string;
/**
* Shows a loading indicator while the contents of the list are being fetched
* @default false
* @type boolean | object
*/
loading: boolean | object;
/**
* Shows a load more content
* @type any (string | slot)
*/
loadMore: any;
/**
* i18n text including empty text
* @default emptyText: 'No Data'
* @type object
*/
locale: object;
/**
* Pagination config, hide it by setting it to false
* @default false
* @type boolean | object
*/
pagination: boolean | PaginationConfig;
/**
* Toggles rendering of the split under the list item
* @default true
* @type boolean
*/
split: boolean;
/**
* Custom item renderer, slot="renderItem" and slot-scope="item, index"
* @default null
* @type Function
*/
renderItem: (item: any, index: number) => VNode;
/**
* Specify the key that will be used for uniquely identify each element
* @default null
* @type Function
*/
rowKey: (item: any) => string | number;
} }

8
types/meta.d.ts vendored
View File

@ -2,7 +2,7 @@
// Definitions by: akki-jat <https://github.com/akki-jat> // Definitions by: akki-jat <https://github.com/akki-jat>
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from './component'; import { VNodeChild } from 'vue';
export declare class Meta { export declare class Meta {
$props: { $props: {
@ -10,18 +10,18 @@ export declare class Meta {
* The avatar of list item * The avatar of list item
* @type any (slot) * @type any (slot)
*/ */
avatar: any; avatar?: VNodeChild;
/** /**
* The description of list item * The description of list item
* @type any (string | slot) * @type any (string | slot)
*/ */
description: any; description?: string | VNodeChild;
/** /**
* The title of list item * The title of list item
* @type any (string | slot) * @type any (string | slot)
*/ */
title: any; title?: string | VNodeChild;
}; };
} }

25
types/table/column-group.d.ts vendored
View File

@ -3,18 +3,21 @@
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from '../component'; import { AntdComponent } from '../component';
import { VNodeChild } from 'vue';
export declare class ColumnGroup extends AntdComponent { export declare class ColumnGroup extends AntdComponent {
/** $props: {
* Title of the column group /**
* @type any * Title of the column group
*/ * @type any
title: any; */
title?: VNodeChild | JSX.Element;
/** /**
* When using columns, you can use this property to configure the properties that support the slot, * When using columns, you can use this property to configure the properties that support the slot,
* such as slots: { title: 'XXX'} * such as slots: { title: 'XXX'}
* @type object * @type object
*/ */
slots: object; slots?: object;
};
} }

370
types/table/column.d.ts vendored
View File

@ -3,8 +3,7 @@
// Definitions: https://github.com/vueComponent/ant-design-vue/types // Definitions: https://github.com/vueComponent/ant-design-vue/types
import { AntdComponent } from '../component'; import { AntdComponent } from '../component';
import { VNode } from 'vue'; import { VNodeChild } from 'vue';
import { ScopedSlot } from 'vue/types/vnode';
export interface ColumnFilterItem { export interface ColumnFilterItem {
text?: string; text?: string;
@ -14,196 +13,179 @@ export interface ColumnFilterItem {
export declare type SortOrder = 'ascend' | 'descend'; export declare type SortOrder = 'ascend' | 'descend';
export declare class Column extends AntdComponent { export interface Record {
/** text?: any;
* specify how content is aligned record?: object;
* @default 'left' index?: number;
* @type string }
*/
align?: 'left' | 'right' | 'center'; export declare type CustomRenderFunction = (record: Record) => VNodeChild | JSX.Element;
/** export declare class Column extends AntdComponent {
* ellipsize cell content, not working with sorter and filters for now. $props: {
* tableLayout would be fixed when ellipsis is true. /**
* @default false * specify how content is aligned
* @type boolean * @default 'left'
*/ * @type string
ellipsis?: boolean; */
align?: 'left' | 'right' | 'center';
/** /**
* Span of this column's title * ellipsize cell content, not working with sorter and filters for now.
* @type number * tableLayout would be fixed when ellipsis is true.
*/ * @default false
colSpan?: number; * @type boolean
*/
/** ellipsis?: boolean;
* Display field of the data record, could be set like a.b.c
* @type string /**
*/ * Span of this column's title
dataIndex?: string; * @type number
*/
/** colSpan?: number;
* Default filtered values
* @type string[] /**
*/ * Display field of the data record, could be set like a.b.c
defaultFilteredValue?: string[]; * @type string
*/
/** dataIndex?: string;
* Default order of sorted values: 'ascend' 'descend' null
* @type string /**
*/ * Default filtered values
defaultSortOrder?: SortOrder; * @type string[]
*/
/** defaultFilteredValue?: string[];
* Customized filter overlay
* @type any (slot) /**
*/ * Default order of sorted values: 'ascend' 'descend' null
filterDropdown?: any; * @type string
*/
/** defaultSortOrder?: SortOrder;
* Whether filterDropdown is visible
* @type boolean /**
*/ * Customized filter overlay
filterDropdownVisible?: boolean; * @type any (slot)
*/
/** filterDropdown?: any;
* Whether the dataSource is filtered
* @default false /**
* @type boolean * Whether filterDropdown is visible
*/ * @type boolean
filtered?: boolean; */
filterDropdownVisible?: boolean;
/**
* Controlled filtered value, filter icon will highlight /**
* @type string[] * Whether the dataSource is filtered
*/ * @default false
filteredValue?: string[]; * @type boolean
*/
/** filtered?: boolean;
* Customized filter icon
* @default false /**
* @type any * Controlled filtered value, filter icon will highlight
*/ * @type string[]
filterIcon?: any; */
filteredValue?: string[];
/**
* Whether multiple filters can be selected /**
* @default true * Customized filter icon
* @type boolean * @default false
*/ * @type any
filterMultiple?: boolean; */
filterIcon?: any;
/**
* Filter menu config /**
* @type object[] * Whether multiple filters can be selected
*/ * @default true
filters?: ColumnFilterItem[]; * @type boolean
*/
/** filterMultiple?: boolean;
* Set column to be fixed: true(same as left) 'left' 'right'
* @default false /**
* @type boolean | string * Filter menu config
*/ * @type object[]
fixed?: boolean | 'left' | 'right'; */
filters?: ColumnFilterItem[];
/**
* Unique key of this column, you can ignore this prop if you've set a unique dataIndex /**
* @type string * Set column to be fixed: true(same as left) 'left' 'right'
*/ * @default false
key?: string; * @type boolean | string
*/
/** fixed?: boolean | 'left' | 'right';
* Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
* @type Function | ScopedSlot /**
*/ * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
customRender?: Function | ScopedSlot; * @type string
*/
/** key?: string;
* Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
* @type boolean | Function /**
*/ * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
sorter?: boolean | Function; * @type Function | ScopedSlot
*/
/** customRender?: CustomRenderFunction | VNodeChild | JSX.Element;
* Order of sorted values: 'ascend' 'descend' false
* @type boolean | string /**
*/ * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
sortOrder?: boolean | SortOrder; * @type boolean | Function
*/
/** sorter?: boolean | Function;
* supported sort way, could be 'ascend', 'descend'
* @default ['ascend', 'descend'] /**
* @type string[] * Order of sorted values: 'ascend' 'descend' false
*/ * @type boolean | string
sortDirections?: string[]; */
sortOrder?: boolean | SortOrder;
/**
* Title of this column /**
* @type any (string | slot) * supported sort way, could be 'ascend', 'descend'
*/ * @default ['ascend', 'descend']
title?: any; * @type string[]
*/
/** sortDirections?: string[];
* Width of this column
* @type string | number /**
*/ * Title of this column
width?: string | number; * @type any (string | slot)
*/
/** title?: VNodeChild | JSX.Element;
* Set props on per cell
* @type Function /**
*/ * Width of this column
customCell?: ( * @type string | number
record: any, */
rowIndex: number, width?: string | number;
) => {
props: object; /**
attrs: object; * Set props on per cell
on: object; * @type Function
class: object; */
style: object; customCell?: (record: any, rowIndex: number) => object;
nativeOn: object;
}; /**
* Set props on per header cell
/** * @type object
* Set props on per header cell */
* @type customHeaderCell?: (column: any) => object;
*/
customHeaderCell?: ( /**
column: any, * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
) => { * @type Function
props: object; */
attrs: object; onFilter?: Function;
on: object;
class: object; /**
style: object; * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx
nativeOn: object; * @type Function
}; */
onFilterDropdownVisibleChange?: (visible: boolean) => void;
/**
* Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx /**
* @type Function * When using columns, you can use this property to configure the properties that support the slot,
*/ * such as slots: { filterIcon: 'XXX'}
onFilter?: Function; * @type object
*/
/** slots?: object;
* Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx };
* @type Function
*/
onFilterDropdownVisibleChange?: (visible: boolean) => void;
/**
* When using columns, you can use this property to configure the properties that support the slot,
* such as slots: { filterIcon: 'XXX'}
* @type object
*/
slots?: object;
/**
* When using columns, you can use this property to configure the properties that support the slot-scope,
* such as scopedSlots: { customRender: 'XXX'}
* @type object
*/
scopedSlots?: object;
} }

370
types/table/table.d.ts vendored
View File

@ -4,13 +4,13 @@
import { AntdComponent } from '../component'; import { AntdComponent } from '../component';
import { Spin } from '../spin'; import { Spin } from '../spin';
import { ScopedSlot, VNode } from 'vue/types/vnode';
import { Pagination } from '../pagination'; import { Pagination } from '../pagination';
import { Column } from './column'; import { Column } from './column';
import { ColumnGroup } from './column-group'; import { ColumnGroup } from './column-group';
import { VNodeChild } from 'vue';
export declare class PaginationConfig extends Pagination { export declare class PaginationConfig extends Pagination {
position: 'top' | 'bottom' | 'both'; position?: 'top' | 'bottom' | 'both';
} }
export interface customSelection { export interface customSelection {
@ -28,7 +28,7 @@ export interface customSelection {
* @default undefined * @default undefined
* @type string | VNode * @type string | VNode
*/ */
text?: string | VNode; text?: string | VNodeChild | JSX.Element;
/** /**
* On Select * On Select
@ -36,7 +36,7 @@ export interface customSelection {
* @default undefined * @default undefined
* @type Function * @type Function
*/ */
onSelect?: (changeableRowKeys?: any) => any; onSelect?: (changeableRowKeys?: any[]) => any;
} }
export interface TableRowSelection { export interface TableRowSelection {
@ -88,7 +88,7 @@ export interface TableRowSelection {
* Set the title of the selection column * Set the title of the selection column
* @type string | VNode * @type string | VNode
*/ */
columnTitle?: string | VNode; columnTitle?: VNodeChild | JSX.Element;
/** /**
* Callback executed when selected rows change * Callback executed when selected rows change
@ -115,190 +115,234 @@ export interface TableRowSelection {
onSelectInvert?: (selectedRows: Object[]) => any; onSelectInvert?: (selectedRows: Object[]) => any;
} }
export interface TableCustomRecord {
record?: any;
index?: number;
}
export interface ExpandedRowRenderRecord extends TableCustomRecord {
indent?: number;
expanded?: boolean;
}
export declare class Table extends AntdComponent { export declare class Table extends AntdComponent {
static Column: typeof Column; static Column: typeof Column;
static ColumnGroup: typeof ColumnGroup; static ColumnGroup: typeof ColumnGroup;
/** $props: {
* Whether to show all table borders /**
* @default false * Whether to show all table borders
* @type boolean * @default false
*/ * @type boolean
bordered: boolean; */
bordered?: boolean;
/** /**
* The column contains children to display * The column contains children to display
* @default 'children' * @default 'children'
* @type string | string[] * @type string | string[]
*/ */
childrenColumnName: string | string[]; childrenColumnName?: string | string[];
/** /**
* Columns of table * Columns of table
* @type any * @type array
*/ */
columns: any; columns: any[];
/** /**
* Override default table elements * Override default table elements
* @type object * @type object
*/ */
components: object; components?: object;
/** /**
* Data record array to be displayed * Data record array to be displayed
* @type any * @type array
*/ */
dataSource: any; dataSource: any;
/** /**
* Expand all rows initially * Expand all rows initially
* @default false * @default false
* @type boolean * @type boolean
*/ */
defaultExpandAllRows: boolean; defaultExpandAllRows?: boolean;
/** /**
* Initial expanded row keys * Initial expanded row keys
* @type string[] * @type string[]
*/ */
defaultExpandedRowKeys: string[]; defaultExpandedRowKeys?: string[];
/** /**
* Current expanded row keys * Current expanded row keys
* @type string[] * @type string[]
*/ */
expandedRowKeys: string[]; expandedRowKeys?: string[];
/** /**
* Expanded container render for each row * Expanded container render for each row
* @type Function * @type Function
*/ */
expandedRowRender: (record: any, index: number, indent: number, expanded: boolean) => any; expandedRowRender?: (record?: ExpandedRowRenderRecord) => any;
/** /**
* Customize row expand Icon. * Customize row expand Icon.
* @type Function | ScopedSlot * @type Function | VNodeChild
*/ */
expandIcon: Function | ScopedSlot; expandIcon?: Function | VNodeChild | JSX.Element;
/** /**
* Whether to expand row by clicking anywhere in the whole row * Whether to expand row by clicking anywhere in the whole row
* @default false * @default false
* @type boolean * @type boolean
*/ */
expandRowByClick: boolean; expandRowByClick?: boolean;
/** /**
* Table footer renderer * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
* @type Function | ScopedSlot */
*/ expandIconColumnIndex?: number;
footer: Function | ScopedSlot;
/** /**
* Indent size in pixels of tree data * Table footer renderer
* @default 15 * @type Function | VNodeChild
* @type number */
*/ footer?: Function | VNodeChild | JSX.Element;
indentSize: number;
/** /**
* Loading status of table * Indent size in pixels of tree data
* @default false * @default 15
* @type boolean | object * @type number
*/ */
loading: boolean | Spin; indentSize?: number;
/** /**
* i18n text including filter, sort, empty text, etc * Loading status of table
* @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' } * @default false
* @type object * @type boolean | object
*/ */
locale: object; loading?: boolean | Spin | VNodeChild | JSX.Element;
/** /**
* Pagination config or [Pagination] (/components/pagination/), hide it by setting it to false * i18n text including filter, sort, empty text, etc
* @type boolean | PaginationConfig * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
*/ * @type object
pagination: boolean | PaginationConfig; */
locale?: object;
/** /**
* Row's className * Pagination config or [Pagination] (/components/pagination/), hide it by setting it to false
* @type Function * @type boolean | PaginationConfig
*/ */
rowClassName: (record: any, index: number) => string; pagination?: boolean | PaginationConfig;
/** /**
* Row's unique key, could be a string or function that returns a string * Row's className
* @default 'key' * @type Function
* @type string | Function */
*/ rowClassName?: (record?: TableCustomRecord) => string;
rowKey: string | Function;
/** /**
* Row selection config * Row's unique key, could be a string or function that returns a string
* @type object * @default 'key'
*/ * @type string | Function
rowSelection: TableRowSelection; */
rowKey?: string | Function;
/** /**
* Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. * Row selection config
* It is recommended to set a number for x, if you want to set it to true, * @type object
* you need to add style .ant-table td { white-space: nowrap; }. */
* @type object rowSelection?: TableRowSelection;
*/
scroll: { x: number | true; y: number };
/** /**
* Whether to show table header * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
* @default true * It is recommended to set a number for x, if you want to set it to true,
* @type boolean * you need to add style .ant-table td { white-space: nowrap; }.
*/ * @type object
showHeader: boolean; */
scroll?: { x: number | true; y: number };
/** /**
* Size of table * Whether to show table header
* @default 'default' * @default true
* @type string * @type boolean
*/ */
size: 'default' | 'middle' | 'small' | 'large'; showHeader?: boolean;
/** /**
* Table title renderer * Size of table
* @type Function | ScopedSlot * @default 'default'
*/ * @type string
title: Function | ScopedSlot; */
size?: 'default' | 'middle' | 'small' | 'large';
/** /**
* Set props on per header row * Table title renderer
* @type Function * @type Function | ScopedSlot
*/ */
customHeaderRow: ( title?: Function | VNodeChild | JSX.Element;
column: any,
index: number, /**
) => { * Set props on per header row
props: object; * @type Function
attrs: object; */
on: object; customHeaderRow?: (column: any, index: number) => object;
class: object;
style: object; /**
nativeOn: object; * Set props on per row
* @type Function
*/
customRow?: (record: any, index: number) => object;
/**
* `table-layout` attribute of table element
* `fixed` when header/columns are fixed, or using `column.ellipsis`
*
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
* @version 1.5.0
*/
tableLayout?: 'auto' | 'fixed' | string;
/**
* the render container of dropdowns in table
* @param triggerNode
* @version 1.5.0
*/
getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
/**
* Data can be changed again before rendering.
* The default configuration of general user empty data.
* You can configured globally through [ConfigProvider](https://antdv.com/components/config-provider-cn/)
*
* @version 1.5.4
*/
transformCellText?: Function;
/**
* Callback executed when pagination, filters or sorter is changed
* @param pagination
* @param filters
* @param sorter
* @param currentDataSource
*/
onChange?: (pagination: object, filters, sorter, { currentDataSource }) => void;
/**
* Callback executed when the row expand icon is clicked
*
* @param expanded
* @param record
*/
onExpand: (expanded, record) => void;
/**
* Callback executed when the expanded rows change
* @param expandedRows
*/
onExpandedRowsChange: (expandedRows: any) => void;
}; };
/**
* Set props on per row
* @type Function
*/
customRow: (
record: any,
index: number,
) => {
props: object;
attrs: object;
on: object;
class: object;
style: object;
nativeOn: object;
};
transformCellText: Function;
} }