chore: update table, list types (#2694)

* 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`

types/list/list-item.d.ts

@@ -4,21 +4,24 @@
 
 import { AntdComponent } from '../component';
 import { Meta } from '../meta';
+import { VNodeChild } from 'vue';
 
 export declare class ListItem extends AntdComponent {
   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.
      * @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,
      * otherwise shows content on the far right.
      * @type any (string | slot)
      */
-  extra: any;
+    extra?: VNodeChild | JSX.Element;
+  };
 }

types/list/list.d.ts

@@ -3,104 +3,118 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from '../component';
-import { VNode } from 'vue';
+import { VNodeChild } from 'vue';
 import { Pagination } from '../pagination';
 import { ListItem } from './list-item';
 
 export declare type ColumnCount = '' | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
 
 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 {
   static Item: typeof ListItem;
 
+  $props: {
     /**
      * Toggles rendering of the border around the list
      * @default false
      * @type boolean
      */
-  bordered: boolean;
+    bordered?: boolean;
 
     /**
      * List footer renderer
      * @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}
      * @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: any;
+    header?: VNodeChild | JSX.Element;
 
     /**
-   * The layout of list, default is horizontal, If a vertical list is desired, set the itemLayout property to vertical
+     * The layout of list, default is horizontal,
+     * If a vertical list is desired, set the itemLayout property to vertical
+     *
      * @type string
      */
-  itemLayout: 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;
+    loading?: boolean | object;
 
     /**
      * Shows a load more content
      * @type any (string | slot)
      */
-  loadMore: any;
+    loadMore?: VNodeChild | JSX.Element;
 
     /**
      * i18n text including empty text
      * @default emptyText: 'No Data'
      * @type object
      */
-  locale: object;
+    locale?: object;
 
     /**
      * Pagination config, hide it by setting it to false
      * @default false
      * @type boolean | object
      */
-  pagination: boolean | PaginationConfig;
+    pagination?: boolean | PaginationConfig;
 
     /**
      * Toggles rendering of the split under the list item
      * @default true
      * @type boolean
      */
-  split: boolean;
+    split?: boolean;
 
     /**
-   * Custom item renderer, slot="renderItem" and slot-scope="item, index"
+     * dataSource array for list
-   * @default null
-   * @type Function
      */
-  renderItem: (item: any, index: number) => VNode;
+    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;
+    rowKey?: (item: any) => string | number;
+  };
 }

types/meta.d.ts

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

types/table/column-group.d.ts

@@ -3,18 +3,21 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from '../component';
+import { VNodeChild } from 'vue';
 
 export declare class ColumnGroup extends AntdComponent {
+  $props: {
     /**
      * 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,
      * such as slots: { title: 'XXX'}
      * @type object
      */
-  slots: object;
+    slots?: object;
+  };
 }

types/table/column.d.ts

@@ -3,8 +3,7 @@
 // Definitions: https://github.com/vueComponent/ant-design-vue/types
 
 import { AntdComponent } from '../component';
-import { VNode } from 'vue';
+import { VNodeChild } from 'vue';
-import { ScopedSlot } from 'vue/types/vnode';
 
 export interface ColumnFilterItem {
   text?: string;
@@ -14,7 +13,16 @@ export interface ColumnFilterItem {
 
 export declare type SortOrder = 'ascend' | 'descend';
 
+export interface Record {
+  text?: any;
+  record?: object;
+  index?: number;
+}
+
+export declare type CustomRenderFunction = (record: Record) => VNodeChild | JSX.Element;
+
 export declare class Column extends AntdComponent {
+  $props: {
     /**
      * specify how content is aligned
      * @default 'left'
@@ -30,7 +38,6 @@ export declare class Column extends AntdComponent {
      */
     ellipsis?: boolean;
 
-
     /**
      * Span of this column's title
      * @type number
@@ -117,7 +124,7 @@ export declare class Column extends AntdComponent {
      * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
      * @type Function | ScopedSlot
      */
-  customRender?: Function | ScopedSlot;
+    customRender?: CustomRenderFunction | VNodeChild | JSX.Element;
 
     /**
      * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
@@ -142,7 +149,7 @@ export declare class Column extends AntdComponent {
      * Title of this column
      * @type any (string | slot)
      */
-  title?: any;
+    title?: VNodeChild | JSX.Element;
 
     /**
      * Width of this column
@@ -154,32 +161,13 @@ export declare class Column extends AntdComponent {
      * Set props on per cell
      * @type Function
      */
-  customCell?: (
+    customCell?: (record: any, rowIndex: number) => object;
-    record: any,
-    rowIndex: number,
-  ) => {
-    props: object;
-    attrs: object;
-    on: object;
-    class: object;
-    style: object;
-    nativeOn: object;
-  };
 
     /**
      * Set props on per header cell
-   * @type
+     * @type object
      */
-  customHeaderCell?: (
+    customHeaderCell?: (column: any) => object;
-    column: any,
-  ) => {
-    props: object;
-    attrs: object;
-    on: object;
-    class: object;
-    style: object;
-    nativeOn: object;
-  };
 
     /**
      * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
@@ -199,11 +187,5 @@ export declare class Column extends AntdComponent {
      * @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;
 }

types/table/table.d.ts

@@ -4,13 +4,13 @@
 
 import { AntdComponent } from '../component';
 import { Spin } from '../spin';
-import { ScopedSlot, VNode } from 'vue/types/vnode';
 import { Pagination } from '../pagination';
 import { Column } from './column';
 import { ColumnGroup } from './column-group';
+import { VNodeChild } from 'vue';
 
 export declare class PaginationConfig extends Pagination {
-  position: 'top' | 'bottom' | 'both';
+  position?: 'top' | 'bottom' | 'both';
 }
 
 export interface customSelection {
@@ -28,7 +28,7 @@ export interface customSelection {
    * @default undefined
    * @type string | VNode
    */
-  text?: string | VNode;
+  text?: string | VNodeChild | JSX.Element;
 
   /**
    * On Select
@@ -36,7 +36,7 @@ export interface customSelection {
    * @default undefined
    * @type Function
    */
-  onSelect?: (changeableRowKeys?: any) => any;
+  onSelect?: (changeableRowKeys?: any[]) => any;
 }
 
 export interface TableRowSelection {
@@ -88,7 +88,7 @@ export interface TableRowSelection {
    * Set the title of the selection column
    * @type string | VNode
    */
-  columnTitle?: string | VNode;
+  columnTitle?: VNodeChild | JSX.Element;
 
   /**
    * Callback executed when selected rows change
@@ -115,39 +115,50 @@ export interface TableRowSelection {
   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 {
   static Column: typeof Column;
   static ColumnGroup: typeof ColumnGroup;
 
+  $props: {
     /**
      * Whether to show all table borders
      * @default false
      * @type  boolean
      */
-  bordered: boolean;
+    bordered?: boolean;
 
     /**
      * The column contains children to display
      * @default 'children'
      * @type string | string[]
      */
-  childrenColumnName: string | string[];
+    childrenColumnName?: string | string[];
 
     /**
      * Columns of table
-   * @type any
+     * @type array
      */
-  columns: any;
+    columns: any[];
 
     /**
      * Override default table elements
      * @type object
      */
-  components: object;
+    components?: object;
 
     /**
      * Data record array to be displayed
-   * @type any
+     * @type array
      */
     dataSource: any;
 
@@ -156,90 +167,95 @@ export declare class Table extends AntdComponent {
      * @default false
      * @type boolean
      */
-  defaultExpandAllRows: boolean;
+    defaultExpandAllRows?: boolean;
 
     /**
      * Initial expanded row keys
      * @type string[]
      */
-  defaultExpandedRowKeys: string[];
+    defaultExpandedRowKeys?: string[];
 
     /**
      * Current expanded row keys
      * @type string[]
      */
-  expandedRowKeys: string[];
+    expandedRowKeys?: string[];
 
     /**
      * Expanded container render for each row
      * @type Function
      */
-  expandedRowRender: (record: any, index: number, indent: number, expanded: boolean) => any;
+    expandedRowRender?: (record?: ExpandedRowRenderRecord) => any;
 
     /**
      * 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
      * @default false
      * @type boolean
      */
-  expandRowByClick: boolean;
+    expandRowByClick?: boolean;
+
+    /**
+     * The index of `expandIcon` which column will be inserted when `expandIconAsCell` is false. default 0
+     */
+    expandIconColumnIndex?: number;
 
     /**
      * Table footer renderer
-   * @type Function | ScopedSlot
+     * @type Function | VNodeChild
      */
-  footer: Function | ScopedSlot;
+    footer?: Function | VNodeChild | JSX.Element;
 
     /**
      * Indent size in pixels of tree data
      * @default 15
      * @type number
      */
-  indentSize: number;
+    indentSize?: number;
 
     /**
      * Loading status of table
      * @default false
      * @type boolean | object
      */
-  loading: boolean | Spin;
+    loading?: boolean | Spin | VNodeChild | JSX.Element;
 
     /**
      * i18n text including filter, sort, empty text, etc
      * @default { filterConfirm: 'Ok', filterReset: 'Reset', emptyText: 'No Data' }
      * @type object
      */
-  locale: object;
+    locale?: object;
 
     /**
      * Pagination config or [Pagination] (/components/pagination/), hide it by setting it to false
      * @type boolean | PaginationConfig
      */
-  pagination: boolean | PaginationConfig;
+    pagination?: boolean | PaginationConfig;
 
     /**
      * Row's className
      * @type Function
      */
-  rowClassName: (record: any, index: number) => string;
+    rowClassName?: (record?: TableCustomRecord) => string;
 
     /**
      * Row's unique key, could be a string or function that returns a string
      * @default 'key'
      * @type string | Function
      */
-  rowKey: string | Function;
+    rowKey?: string | Function;
 
     /**
      * Row selection config
      * @type object
      */
-  rowSelection: TableRowSelection;
+    rowSelection?: TableRowSelection;
 
     /**
      * Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area.
@@ -247,58 +263,86 @@ export declare class Table extends AntdComponent {
      * you need to add style .ant-table td { white-space: nowrap; }.
      * @type object
      */
-  scroll: { x: number | true; y: number };
+    scroll?: { x: number | true; y: number };
 
     /**
      * Whether to show table header
      * @default true
      * @type boolean
      */
-  showHeader: boolean;
+    showHeader?: boolean;
 
     /**
      * Size of table
      * @default 'default'
      * @type string
      */
-  size: 'default' | 'middle' | 'small' | 'large';
+    size?: 'default' | 'middle' | 'small' | 'large';
 
     /**
      * Table title renderer
      * @type Function | ScopedSlot
      */
-  title: Function | ScopedSlot;
+    title?: Function | VNodeChild | JSX.Element;
 
     /**
      * Set props on per header row
      * @type Function
      */
-  customHeaderRow: (
+    customHeaderRow?: (column: any, index: number) => object;
-    column: any,
-    index: number,
-  ) => {
-    props: object;
-    attrs: object;
-    on: object;
-    class: object;
-    style: object;
-    nativeOn: object;
-  };
 
     /**
      * Set props on per row
      * @type Function
      */
-  customRow: (
+    customRow?: (record: any, index: number) => object;
-    record: any,
+
-    index: number,
+    /**
-  ) => {
+     * `table-layout` attribute of table element
-    props: object;
+     * `fixed` when header/columns are fixed, or using `column.ellipsis`
-    attrs: object;
+     *
-    on: object;
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
-    class: object;
+     * @version 1.5.0
-    style: object;
+     */
-    nativeOn: object;
+    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;
   };
-  transformCellText: Function;
 }