refactor: list (#4242)

components/_util/hooks/useConfigInject.ts

@@ -1,5 +1,5 @@
 import { RequiredMark } from '../../form/Form';
-import { computed, ComputedRef, inject, UnwrapRef } from 'vue';
+import { computed, ComputedRef, inject, UnwrapRef, VNodeChild } from 'vue';
 import {
   ConfigProviderProps,
   defaultConfigProvider,
@@ -21,6 +21,7 @@ export default (
   form?: ComputedRef<{
     requiredMark?: RequiredMark;
   }>;
+  renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
     'configProvider',
@@ -28,6 +29,7 @@ export default (
   );
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
   const direction = computed(() => configProvider.direction);
+  const renderEmpty = computed(() => configProvider.renderEmpty);
   const space = computed(() => configProvider.space);
   const pageHeader = computed(() => configProvider.pageHeader);
   const form = computed(() => configProvider.form);
@@ -42,5 +44,6 @@ export default (
     space,
     pageHeader,
     form,
+    renderEmpty,
   };
 };

components/list/Item.tsx

@@ -1,80 +1,36 @@
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';
-import { getComponent, isStringElement, isEmptyElement, getSlot } from '../_util/props-util';
+import { isStringElement, isEmptyElement, flattenChildren } from '../_util/props-util';
 import { Col } from '../grid';
-import { defaultConfigProvider } from '../config-provider';
 import { cloneElement } from '../_util/vnode';
-import { defineComponent, ExtractPropTypes, FunctionalComponent, inject } from 'vue';
+import { defineComponent, inject, ref } from 'vue';
+import ItemMeta from './ItemMeta';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import { ListContextKey } from '.';
 
 export const ListItemProps = {
   prefixCls: PropTypes.string,
   extra: PropTypes.any,
   actions: PropTypes.array,
   grid: PropTypes.any,
+  colStyle: PropTypes.style,
 };
 
-export const ListItemMetaProps = {
-  avatar: PropTypes.any,
-  description: PropTypes.any,
-  prefixCls: PropTypes.string,
-  title: PropTypes.any,
-};
-
-export const ListItemMeta: FunctionalComponent<Partial<
-  ExtractPropTypes<typeof ListItemMetaProps>
->> = (props, { slots }) => {
-  const configProvider = inject('configProvider', defaultConfigProvider);
-  const { getPrefixCls } = configProvider;
-  const { prefixCls: customizePrefixCls } = props;
-  const prefixCls = getPrefixCls('list', customizePrefixCls);
-  const avatar = props.avatar || slots.avatar?.();
-  const title = props.title || slots.title?.();
-  const description = props.description || slots.description?.();
-  const content = (
-    <div class={`${prefixCls}-item-meta-content`}>
-      {title && <h4 class={`${prefixCls}-item-meta-title`}>{title}</h4>}
-      {description && <div class={`${prefixCls}-item-meta-description`}>{description}</div>}
-    </div>
-  );
-  return (
-    <div class={`${prefixCls}-item-meta`}>
-      {avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
-      {(title || description) && content}
-    </div>
-  );
-};
-
-Object.assign(ListItemMeta, {
-  props: ListItemMetaProps,
-  __ANT_LIST_ITEM_META: true,
-  displayName: 'AListItemMeta',
-});
-
-function getGrid(grid, t) {
-  return grid[t] && Math.floor(24 / grid[t]);
-}
-
-export interface ListContext {
-  grid?: any;
-  itemLayout?: string;
-}
-
 export default defineComponent({
   name: 'AListItem',
   inheritAttrs: false,
-  Meta: ListItemMeta,
+  Meta: ItemMeta,
   props: ListItemProps,
-  setup() {
+  slots: ['actions', 'extra'],
-    const listContext = inject<ListContext>('listContext', {});
+  setup(props, { slots, attrs }) {
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { itemLayout, grid } = inject(ListContextKey, {
-    return {
+      grid: ref(),
-      listContext,
+      itemLayout: ref(),
-      configProvider,
+    });
-    };
+    const { prefixCls } = useConfigInject('list', props);
-  },
+
-  methods: {
+    const isItemContainsTextNodeAndNotSingular = () => {
-    isItemContainsTextNodeAndNotSingular() {
+      const children = slots.default?.() || [];
-      const children = getSlot(this) || [];
       let result;
       children.forEach(element => {
         if (isStringElement(element) && !isEmptyElement(element)) {
@@ -82,75 +38,65 @@ export default defineComponent({
         }
       });
       return result && children.length > 1;
-    },
+    };
 
-    isFlexMode() {
+    const isFlexMode = () => {
-      const extra = getComponent(this, 'extra');
+      const extra = props.extra ?? slots.extra?.();
-      const { itemLayout } = this.listContext;
+      if (itemLayout.value === 'vertical') {
-      if (itemLayout === 'vertical') {
         return !!extra;
       }
-      return !this.isItemContainsTextNodeAndNotSingular();
+      return !isItemContainsTextNodeAndNotSingular();
-    },
+    };
-  },
+
-  render() {
+    return () => {
-    const { grid, itemLayout } = this.listContext;
+      const { class: className, ...restAttrs } = attrs;
-    const { prefixCls: customizePrefixCls, $attrs } = this;
+      const pre = prefixCls.value;
-    const { class: _className, ...restAttrs } = $attrs;
+      const extra = props.extra ?? slots.extra?.();
-    const getPrefixCls = this.configProvider.getPrefixCls;
+      const children = slots.default?.();
-    const prefixCls = getPrefixCls('list', customizePrefixCls);
+      let actions = props.actions ?? flattenChildren(slots.actions?.());
-    const extra = getComponent(this, 'extra');
-    let actions = getComponent(this, 'actions');
       actions = actions && !Array.isArray(actions) ? [actions] : actions;
       const actionsContent = actions && actions.length > 0 && (
-      <ul class={`${prefixCls}-item-action`} key="actions">
+        <ul class={`${pre}-item-action`} key="actions">
           {actions.map((action, i) => (
-          <li key={`${prefixCls}-item-action-${i}`}>
+            <li key={`${pre}-item-action-${i}`}>
               {action}
-            {i !== actions.length - 1 && <em class={`${prefixCls}-item-action-split`} />}
+              {i !== actions.length - 1 && <em class={`${pre}-item-action-split`} />}
             </li>
           ))}
         </ul>
       );
-    const children = getSlot(this);
+      const Element = grid.value ? 'div' : 'li';
-    const Tag = grid ? 'div' : 'li';
       const itemChildren = (
-      <Tag
+        <Element
-        {...restAttrs}
+          {...(restAttrs as any)} // `li` element `onCopy` prop args is not same as `div`
-        class={classNames(`${prefixCls}-item`, _className, {
+          class={classNames(
-          [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
+            `${pre}-item`,
-        })}
+            {
+              [`${pre}-item-no-flex`]: !isFlexMode(),
+            },
+            className,
+          )}
         >
-        {itemLayout === 'vertical' && extra
+          {itemLayout.value === 'vertical' && extra
             ? [
-              <div class={`${prefixCls}-item-main`} key="content">
+                <div class={`${pre}-item-main`} key="content">
                   {children}
                   {actionsContent}
                 </div>,
-              <div class={`${prefixCls}-item-extra`} key="extra">
+                <div class={`${pre}-item-extra`} key="extra">
                   {extra}
                 </div>,
               ]
             : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
-      </Tag>
+        </Element>
       );
-
+      return grid.value ? (
-    const mainContent = grid ? (
+        <Col flex={1} style={props.colStyle}>
-      <Col
-        span={getGrid(grid, 'column')}
-        xs={getGrid(grid, 'xs')}
-        sm={getGrid(grid, 'sm')}
-        md={getGrid(grid, 'md')}
-        lg={getGrid(grid, 'lg')}
-        xl={getGrid(grid, 'xl')}
-        xxl={getGrid(grid, 'xxl')}
-      >
           {itemChildren}
         </Col>
       ) : (
         itemChildren
       );
-
+    };
-    return mainContent;
   },
 });

components/list/ItemMeta.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, ExtractPropTypes } from 'vue';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import PropTypes from '../_util/vue-types';
+
+export const listItemMetaProps = {
+  avatar: PropTypes.any,
+  description: PropTypes.any,
+  prefixCls: PropTypes.string,
+  title: PropTypes.any,
+};
+
+export type ListItemMetaProps = Partial<ExtractPropTypes<typeof listItemMetaProps>>;
+
+export default defineComponent({
+  name: 'AListItemMeta',
+  props: listItemMetaProps,
+  displayName: 'AListItemMeta', // 兼容历史函数式组件
+  __ANT_LIST_ITEM_META: true,
+  slots: ['avatar', 'description', 'title'],
+  setup(props, { slots }) {
+    const { prefixCls } = useConfigInject('list', props);
+    return () => {
+      const classString = `${prefixCls.value}-item-meta`;
+      const title = props.title ?? slots.title?.();
+      const description = props.description ?? slots.description?.();
+      const avatar = props.avatar ?? slots.avatar?.();
+      const content = (
+        <div class={`${prefixCls.value}-item-meta-content`}>
+          {title && <h4 class={`${prefixCls.value}-item-meta-title`}>{title}</h4>}
+          {description && (
+            <div class={`${prefixCls.value}-item-meta-description`}>{description}</div>
+          )}
+        </div>
+      );
+      return (
+        <div class={classString}>
+          {avatar && <div class={`${prefixCls.value}-item-meta-avatar`}>{avatar}</div>}
+          {(title || description) && content}
+        </div>
+      );
+    };
+  },
+});

components/list/index.tsx

@@ -1,51 +1,65 @@
-import { provide, inject, defineComponent, App, Plugin, ExtractPropTypes } from 'vue';
+import {
-import omit from 'omit.js';
+  provide,
+  defineComponent,
+  App,
+  Plugin,
+  ExtractPropTypes,
+  PropType,
+  ref,
+  watch,
+  computed,
+  InjectionKey,
+  toRef,
+  Ref,
+} from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
-import classNames from '../_util/classNames';
+import { RenderEmptyHandler } from '../config-provider';
-import { defaultConfigProvider } from '../config-provider';
 
 import Spin from '../spin';
-import Pagination, { PaginationConfig } from '../pagination';
+import Pagination, { PaginationConfig, paginationConfig } from '../pagination';
 import { Row } from '../grid';
 
-import Item, { ListItemMeta } from './Item';
+import Item from './Item';
-import { getComponent, getSlot } from '../_util/props-util';
+import { flattenChildren } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { cloneElement } from '../_util/vnode';
 import { tuple } from '../_util/type';
+import ItemMeta from './ItemMeta';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import useBreakpoint from '../_util/hooks/useBreakpoint';
+import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 
-export { ListItemProps, ListItemMetaProps, ListItemMeta } from './Item';
+export { ListItemProps } from './Item';
+export { ListItemMetaProps } from './ItemMeta';
+export const ListItemMeta = ItemMeta;
 
-export const ColumnCount = ['', 1, 2, 3, 4, 6, 8, 12, 24];
+export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-export const ColumnType = ['gutter', 'column', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
 
 export const ListGridType = {
   gutter: PropTypes.number,
-  column: PropTypes.oneOf(ColumnCount),
+  column: PropTypes.number,
-  xs: PropTypes.oneOf(ColumnCount),
+  xs: PropTypes.number,
-  sm: PropTypes.oneOf(ColumnCount),
+  sm: PropTypes.number,
-  md: PropTypes.oneOf(ColumnCount),
+  md: PropTypes.number,
-  lg: PropTypes.oneOf(ColumnCount),
+  lg: PropTypes.number,
-  xl: PropTypes.oneOf(ColumnCount),
+  xl: PropTypes.number,
-  xxl: PropTypes.oneOf(ColumnCount),
+  xxl: PropTypes.number,
 };
 
 export const ListSize = tuple('small', 'default', 'large');
 
-const paginationProps = PaginationConfig();
+export type ListItemLayout = 'horizontal' | 'vertical';
 
-export const ListProps = () => ({
+export const listProps = {
   bordered: PropTypes.looseBool,
   dataSource: PropTypes.array,
   extra: PropTypes.any,
   grid: PropTypes.shape(ListGridType).loose,
-  itemLayout: PropTypes.string,
+  itemLayout: PropTypes.oneOf(tuple('horizontal', 'vertical')),
   loading: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
   loadMore: PropTypes.any,
   pagination: withUndefined(
     PropTypes.oneOfType([
-      PropTypes.shape<Partial<ExtractPropTypes<typeof paginationProps>>>(paginationProps).loose,
+      PropTypes.shape<PaginationConfig>(paginationConfig()).loose,
       PropTypes.looseBool,
     ]),
   ),
@@ -56,79 +70,186 @@ export const ListProps = () => ({
   split: PropTypes.looseBool,
   header: PropTypes.any,
   footer: PropTypes.any,
-  locale: PropTypes.object,
+  locale: {
-});
+    type: Object as PropType<ListLocale>,
+  },
+};
+
+export interface ListLocale {
+  emptyText: any;
+}
+
+export type ListProps = Partial<ExtractPropTypes<typeof listProps>>;
+
+export interface ListContext {
+  grid?: Ref<any>;
+  itemLayout?: Ref<string>;
+}
+
+export const ListContextKey: InjectionKey<ListContext> = Symbol('ListContextKey');
 
 const List = defineComponent({
   name: 'AList',
-  inheritAttrs: false,
   Item,
-  props: initDefaultProps(ListProps(), {
+  props: initDefaultProps(listProps, {
     dataSource: [],
     bordered: false,
     split: true,
     loading: false,
     pagination: false,
   }),
-  setup() {
+  slots: ['extra', 'loadMore', 'renderItem', 'header', 'footer'],
-    return {
+  setup(props, { slots }) {
-      keys: [],
+    provide(ListContextKey, {
-      defaultPaginationProps: {},
+      grid: toRef(props, 'grid'),
-      onPaginationChange: null,
+      itemLayout: toRef(props, 'itemLayout'),
-      onPaginationShowSizeChange: null,
+    });
-      configProvider: inject('configProvider', defaultConfigProvider),
+    const defaultPaginationProps = {
-    };
-  },
-
-  data() {
-    const { pagination } = this.$props;
-    const paginationObj: Partial<typeof pagination> =
-      pagination && typeof pagination === 'object' ? pagination : {};
-    return {
-      paginationCurrent: paginationObj.defaultCurrent || 1,
-      paginationSize: paginationObj.defaultPageSize || 10,
-    };
-  },
-  created() {
-    provide('listContext', this);
-    this.defaultPaginationProps = {
       current: 1,
-      pageSize: 10,
-      onChange: (page: number, pageSize: number) => {
-        const { pagination } = this;
-        this.paginationCurrent = page;
-        if (pagination && (pagination as any).onChange) {
-          (pagination as any).onChange(page, pageSize);
-        }
-      },
       total: 0,
     };
-    this.onPaginationChange = this.triggerPaginationEvent('onChange');
+    const { prefixCls, direction, renderEmpty } = useConfigInject('list', props);
-    this.onPaginationShowSizeChange = this.triggerPaginationEvent('onShowSizeChange');
+    const paginationObj = computed(() =>
-  },
+      props.pagination && typeof props.pagination === 'object' ? props.pagination : {},
-  methods: {
+    );
-    triggerPaginationEvent(eventName) {
+    const paginationCurrent = ref(paginationObj.value.defaultCurrent ?? 1);
-      return (page, pageSize) => {
+    const paginationSize = ref(paginationObj.value.defaultPageSize ?? 10);
-        const { pagination } = this.$props;
+    watch(paginationObj, () => {
-        this.paginationCurrent = page;
+      if ('current' in paginationObj.value) {
-        this.paginationSize = pageSize;
+        paginationCurrent.value = paginationObj.value.current;
-        if (pagination && pagination[eventName]) {
+      }
-          pagination[eventName](page, pageSize);
+      if ('pageSize' in paginationObj.value) {
+        paginationSize.value = paginationObj.value.pageSize;
+      }
+    });
+
+    const triggerPaginationEvent = (eventName: string) => (page: number, pageSize: number) => {
+      paginationCurrent.value = page;
+      paginationSize.value = pageSize;
+      if (paginationObj.value[eventName]) {
+        paginationObj.value[eventName](page, pageSize);
       }
     };
-    },
+
-    innerRenderItem(item, index) {
+    const onPaginationChange = triggerPaginationEvent('onChange');
-      const {
+
-        $slots: { renderItem },
+    const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');
-        rowKey,
+
-      } = this;
+    const renderEmptyFunc = (renderEmptyHandler: RenderEmptyHandler) => (
-      const renderer = this.renderItem || renderItem;
+      <div class={`${prefixCls.value}-empty-text`}>
-      if (!renderer) return null;
+        {props.locale?.emptyText || renderEmptyHandler('List')}
+      </div>
+    );
+
+    const loadingProp = computed(() => {
+      if (typeof props.loading === 'boolean') {
+        return {
+          spinning: props.loading,
+        };
+      } else {
+        return props.loading;
+      }
+    });
+
+    const isLoading = computed(() => loadingProp.value && loadingProp.value.spinning);
+
+    const sizeCls = computed(() => {
+      let size = '';
+      switch (props.size) {
+        case 'large':
+          size = 'lg';
+          break;
+        case 'small':
+          size = 'sm';
+          break;
+        default:
+          break;
+      }
+      return size;
+    });
+
+    const classObj = computed(() => ({
+      [`${prefixCls.value}`]: true,
+      [`${prefixCls.value}-vertical`]: props.itemLayout === 'vertical',
+      [`${prefixCls.value}-${sizeCls.value}`]: sizeCls.value,
+      [`${prefixCls.value}-split`]: props.split,
+      [`${prefixCls.value}-bordered`]: props.bordered,
+      [`${prefixCls.value}-loading`]: isLoading.value,
+      [`${prefixCls.value}-grid`]: !!props.grid,
+      [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+    }));
+
+    const paginationProps = computed(() => {
+      const pp = {
+        ...defaultPaginationProps,
+        total: props.dataSource.length,
+        current: paginationCurrent.value,
+        pageSize: paginationSize.value,
+        ...((props.pagination as PaginationConfig) || {}),
+      };
+
+      const largestPage = Math.ceil(pp.total / pp.pageSize);
+      if (pp.current > largestPage) {
+        pp.current = largestPage;
+      }
+      return pp;
+    });
+
+    const splitDataSource = computed(() => {
+      let dd = [...props.dataSource];
+      if (props.pagination) {
+        if (
+          props.dataSource.length >
+          (paginationProps.value.current - 1) * paginationProps.value.pageSize
+        ) {
+          dd = [...props.dataSource].splice(
+            (paginationProps.value.current - 1) * paginationProps.value.pageSize,
+            paginationProps.value.pageSize,
+          );
+        }
+      }
+      return dd;
+    });
+
+    const screens = useBreakpoint();
+
+    const currentBreakpoint = computed(() => {
+      for (let i = 0; i < responsiveArray.length; i += 1) {
+        const breakpoint: Breakpoint = responsiveArray[i];
+        if (screens.value[breakpoint]) {
+          return breakpoint;
+        }
+      }
+      return undefined;
+    });
+
+    const colStyle = computed(() => {
+      if (!props.grid) {
+        return undefined;
+      }
+      const columnCount =
+        currentBreakpoint.value && props.grid[currentBreakpoint.value]
+          ? props.grid[currentBreakpoint.value]
+          : props.grid.column;
+      if (columnCount) {
+        return {
+          width: `${100 / columnCount}%`,
+          maxWidth: `${100 / columnCount}%`,
+        };
+      }
+      return undefined;
+    });
+
+    const renderInnerItem = (keys: number[], item: any, index: number) => {
+      const renderItem = props.renderItem ?? slots.renderItem;
+      if (!renderItem) return null;
+
       let key;
-      if (typeof rowKey === 'function') {
+
-        key = rowKey(item);
+      if (typeof props.rowKey === 'function') {
-      } else if (typeof rowKey === 'string') {
+        key = props.rowKey(item);
-        key = item[rowKey];
+      } else if (typeof props.rowKey === 'string') {
+        key = item[props.rowKey];
       } else {
         key = item.key;
       }
@@ -137,155 +258,67 @@ const List = defineComponent({
         key = `list-item-${index}`;
       }
 
-      this.keys[index] = key;
+      keys[index] = key;
 
-      return renderer({ item, index });
+      return renderItem({ item, index });
-    },
-
-    isSomethingAfterLastItem() {
-      const { pagination } = this;
-      const loadMore = getComponent(this, 'loadMore');
-      const footer = getComponent(this, 'footer');
-      return !!(loadMore || pagination || footer);
-    },
-
-    renderEmpty(prefixCls, renderEmpty) {
-      const { locale } = this;
-      return (
-        <div class={`${prefixCls}-empty-text`}>
-          {(locale && locale.emptyText) || renderEmpty('List')}
-        </div>
-      );
-    },
-  },
-
-  render() {
-    const {
-      prefixCls: customizePrefixCls,
-      bordered,
-      split,
-      itemLayout,
-      pagination,
-      grid,
-      dataSource = [],
-      size,
-      loading,
-      paginationCurrent,
-      paginationSize,
-      $attrs,
-    } = this;
-    const { getPrefixCls } = this.configProvider;
-    const prefixCls = getPrefixCls('list', customizePrefixCls);
-    const { class: className, ...restAttrs } = $attrs;
-    const loadMore = getComponent(this, 'loadMore');
-    const footer = getComponent(this, 'footer');
-    const header = getComponent(this, 'header');
-    const children = getSlot(this);
-    let loadingProp = loading;
-    if (typeof loadingProp === 'boolean') {
-      loadingProp = {
-        spinning: loadingProp,
     };
-    }
-    const isLoading = loadingProp && loadingProp.spinning;
 
-    // large => lg
+    return () => {
-    // small => sm
+      const loadMore = props.loadMore ?? slots.loadMore?.();
-    let sizeCls = '';
+      const footer = props.footer ?? slots.footer?.();
-    switch (size) {
+      const header = props.header ?? slots.header?.();
-      case 'large':
+      const children = flattenChildren(slots.default?.());
-        sizeCls = 'lg';
+      const keys = [];
-        break;
+      const isSomethingAfterLastItem = !!(loadMore || props.pagination || footer);
-      case 'small':
+      const classString = {
-        sizeCls = 'sm';
+        ...classObj.value,
-        break;
+        [`${prefixCls.value}-something-after-last-item`]: isSomethingAfterLastItem,
-      default:
-        break;
-    }
-    const classString = classNames(
-      prefixCls,
-      {
-        [`${prefixCls}-vertical`]: itemLayout === 'vertical',
-        [`${prefixCls}-${sizeCls}`]: sizeCls,
-        [`${prefixCls}-split`]: split,
-        [`${prefixCls}-bordered`]: bordered,
-        [`${prefixCls}-loading`]: isLoading,
-        [`${prefixCls}-grid`]: grid,
-        [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
-      },
-      className,
-    );
-    const paginationProps = {
-      ...this.defaultPaginationProps,
-      total: dataSource.length,
-      current: paginationCurrent,
-      pageSize: paginationSize,
-      ...((pagination as any) || {}),
       };
-    classString;
+      const paginationContent = props.pagination ? (
-    const largestPage = Math.ceil(paginationProps.total / paginationProps.pageSize);
+        <div class={`${prefixCls.value}-pagination`}>
-    if (paginationProps.current > largestPage) {
-      paginationProps.current = largestPage;
-    }
-    const { class: cls, style, ...restProps } = paginationProps;
-    const paginationContent = pagination ? (
-      <div class={`${prefixCls}-pagination`}>
           <Pagination
-          {...{
+            {...paginationProps.value}
-            ...omit(restProps, ['onChange']),
+            onChange={onPaginationChange}
-            class: cls,
+            onShowSizeChange={onPaginationShowSizeChange}
-            style,
-            onChange: this.onPaginationChange,
-            onShowSizeChange: this.onPaginationShowSizeChange,
-          }}
           />
         </div>
       ) : null;
 
-    let splitDataSource = [...dataSource];
+      let childrenContent = isLoading.value && <div style={{ minHeight: '53px' }} />;
-    if (pagination) {
+      if (splitDataSource.value.length > 0) {
-      if (dataSource.length > (paginationProps.current - 1) * paginationProps.pageSize) {
+        const items = splitDataSource.value.map((item: any, index: number) =>
-        splitDataSource = [...dataSource].splice(
+          renderInnerItem(keys, item, index),
-          (paginationProps.current - 1) * paginationProps.pageSize,
-          paginationProps.pageSize,
         );
-      }
+        const childrenList = items.map((child: any, index) => (
-    }
+          <div key={keys[index]} style={colStyle.value}>
-
+            {child}
-    let childrenContent;
+          </div>
-    childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
+        ));
-    if (splitDataSource.length > 0) {
+        childrenContent = props.grid ? (
-      const items = splitDataSource.map((item, index) => this.innerRenderItem(item, index));
+          <Row gutter={props.grid.gutter}>{childrenList}</Row>
-      const childrenList = items.map((child, index) =>
-        cloneElement(child, {
-          key: this.keys[index],
-        }),
-      );
-
-      childrenContent = grid ? (
-        <Row gutter={grid.gutter}>{childrenList}</Row>
         ) : (
-        <ul class={`${prefixCls}-items`}>{childrenList}</ul>
+          <ul class={`${prefixCls.value}-items`}>{items}</ul>
         );
-    } else if (!children.length && !isLoading) {
+      } else if (!children.length && !isLoading.value) {
-      const renderEmpty = this.configProvider.renderEmpty;
+        childrenContent = renderEmptyFunc(renderEmpty.value);
-      childrenContent = this.renderEmpty(prefixCls, renderEmpty);
       }
-    const paginationPosition = paginationProps.position || 'bottom';
 
+      const paginationPosition = paginationProps.value.position || 'bottom';
       return (
-      <div class={classString} {...restAttrs}>
+        <div class={classString}>
           {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
-        {header && <div class={`${prefixCls}-header`}>{header}</div>}
+          {header && <div class={`${prefixCls.value}-header`}>{header}</div>}
-        <Spin {...loadingProp}>
+          <Spin {...loadingProp.value}>
             {childrenContent}
             {children}
           </Spin>
-        {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
+          {footer && <div class={`${prefixCls.value}-footer`}>{footer}</div>}
           {loadMore ||
-          ((paginationPosition === 'bottom' || paginationPosition === 'both') && paginationContent)}
+            ((paginationPosition === 'bottom' || paginationPosition === 'both') &&
+              paginationContent)}
         </div>
       );
+    };
   },
 });
 
@@ -293,13 +326,13 @@ const List = defineComponent({
 List.install = function(app: App) {
   app.component(List.name, List);
   app.component(List.Item.name, List.Item);
-  app.component(List.Item.Meta.displayName, List.Item.Meta);
+  app.component(List.Item.Meta.name, List.Item.Meta);
   return app;
 };
 
 export default List as typeof List &
   Plugin & {
     readonly Item: typeof Item & {
-      readonly Meta: typeof ListItemMeta;
+      readonly Meta: typeof ItemMeta;
     };
   };

components/list/style/bordered.less

@@ -1,41 +1,44 @@
+@import '../../style/themes/index';
+
 .@{list-prefix-cls}-bordered {
   border: 1px solid @border-color-base;
   border-radius: @border-radius-base;
   .@{list-prefix-cls}-header {
-    padding-right: 24px;
+    padding-right: @padding-lg;
-    padding-left: 24px;
+    padding-left: @padding-lg;
   }
 
   .@{list-prefix-cls}-footer {
-    padding-right: 24px;
+    padding-right: @padding-lg;
-    padding-left: 24px;
+    padding-left: @padding-lg;
   }
 
   .@{list-prefix-cls}-item {
-    padding-right: 24px;
+    padding-right: @padding-lg;
-    padding-left: 24px;
+    padding-left: @padding-lg;
-    border-bottom: 1px solid @border-color-split;
   }
 
   .@{list-prefix-cls}-pagination {
-    margin: 16px 24px;
+    margin: @margin-md @margin-lg;
   }
 
   &.@{list-prefix-cls}-sm {
     .@{list-prefix-cls}-item {
-      padding-right: 16px;
+      padding: @list-item-padding-sm;
-      padding-left: 16px;
     }
     .@{list-prefix-cls}-header,
     .@{list-prefix-cls}-footer {
-      padding: 8px 16px;
+      padding: @list-item-padding-sm;
     }
   }
 
   &.@{list-prefix-cls}-lg {
+    .@{list-prefix-cls}-item {
+      padding: @list-item-padding-lg;
+    }
     .@{list-prefix-cls}-header,
     .@{list-prefix-cls}-footer {
-      padding: 16px 24px;
+      padding: @list-item-padding-lg;
     }
   }
 }

components/list/style/customize.less

@@ -0,0 +1,12 @@
+@import './index.less';
+
+@card-prefix-cls: ~'@{ant-prefix}-card';
+
+.@{list-prefix-cls} {
+  // =================== Dard Hook Components ===================
+  .@{card-prefix-cls} {
+    & when (@theme = dark) {
+      background: @list-customize-card-bg;
+    }
+  }
+}

components/list/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './customize.less';
 
 @list-prefix-cls: ~'@{ant-prefix}-list';
 
@@ -13,7 +14,7 @@
   }
 
   &-pagination {
-    margin-top: 24px;
+    margin-top: @margin-lg;
     text-align: right;
 
     // https://github.com/ant-design/ant-design/issues/20037
@@ -23,7 +24,7 @@
   }
 
   &-more {
-    margin-top: 12px;
+    margin-top: @margin-sm;
     text-align: center;
     button {
       padding-right: 32px;
@@ -54,27 +55,27 @@
     align-items: center;
     justify-content: space-between;
     padding: @list-item-padding;
-
-    &-content {
     color: @text-color;
-    }
 
     &-meta {
       display: flex;
       flex: 1;
       align-items: flex-start;
-      font-size: 0;
+      max-width: 100%;
+
       &-avatar {
         margin-right: @list-item-meta-avatar-margin-right;
       }
       &-content {
         flex: 1 0;
+        width: 0;
+        color: @text-color;
       }
       &-title {
         margin-bottom: 4px;
         color: @text-color;
         font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
         > a {
           color: @text-color;
           transition: all 0.3s;
@@ -85,8 +86,8 @@
       }
       &-description {
         color: @text-color-secondary;
-        font-size: @font-size-base;
+        font-size: @list-item-meta-description-font-size;
-        line-height: 22px;
+        line-height: @line-height-base;
       }
     }
     &-action {
@@ -95,19 +96,21 @@
       padding: 0;
       font-size: 0;
       list-style: none;
+
       & > li {
         position: relative;
         display: inline-block;
-        padding: 0 8px;
+        padding: 0 @padding-xs;
         color: @text-color-secondary;
         font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
         text-align: center;
-        cursor: pointer;
+
-      }
+        &:first-child {
-      & > li:first-child {
           padding-left: 0;
         }
+      }
+
       &-split {
         position: absolute;
         top: 50%;
@@ -130,12 +133,12 @@
 
   &-header,
   &-footer {
-    padding-top: 12px;
+    padding-top: @padding-sm;
-    padding-bottom: 12px;
+    padding-bottom: @padding-sm;
   }
 
   &-empty {
-    padding: 16px 0;
+    padding: @padding-md 0;
     color: @text-color-secondary;
     font-size: 12px;
     text-align: center;
@@ -152,22 +155,24 @@
     border-bottom: 1px solid @border-color-split;
   }
 
+  &-split&-empty &-footer {
+    border-top: 1px solid @border-color-split;
+  }
+
   &-loading &-spin-nested-loading {
     min-height: 32px;
   }
 
-  &-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
+  &-split&-something-after-last-item .@{ant-prefix}-spin-container > &-items > &-item:last-child {
     border-bottom: 1px solid @border-color-split;
   }
 
   &-lg &-item {
-    padding-top: 16px;
+    padding: @list-item-padding-lg;
-    padding-bottom: 16px;
   }
 
   &-sm &-item {
-    padding-top: 8px;
+    padding: @list-item-padding-sm;
-    padding-bottom: 8px;
   }
 
   &-vertical &-item {
@@ -198,7 +203,7 @@
       margin-left: auto;
 
       > li {
-        padding: 0 16px;
+        padding: 0 @padding-md;
         &:first-child {
           padding-left: 0;
         }
@@ -209,7 +214,7 @@
   &-grid .@{ant-prefix}-col > &-item {
     display: block;
     max-width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: @margin-md;
     padding-top: 0;
     padding-bottom: 0;
     border-bottom: none;
@@ -232,3 +237,4 @@
 
 @import './bordered';
 @import './responsive';
+@import './rtl';

components/list/style/rtl.less

@@ -0,0 +1,139 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './customize.less';
+
+@list-prefix-cls: ~'@{ant-prefix}-list';
+
+.@{list-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+    text-align: right;
+
+    // fix for virtual scroll style attribute > (direction:ltr)
+    .ReactVirtualized__List .@{list-prefix-cls}-item {
+      direction: rtl;
+    }
+  }
+
+  &-pagination {
+    .@{list-prefix-cls}-rtl & {
+      text-align: left;
+    }
+  }
+
+  &-item {
+    &-meta {
+      &-avatar {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 0;
+          margin-left: @list-item-meta-avatar-margin-right;
+        }
+      }
+    }
+
+    &-action {
+      .@{list-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+
+      & > li:first-child {
+        .@{list-prefix-cls}.@{list-prefix-cls}-rtl & {
+          padding-right: 0;
+          padding-left: @padding-md;
+        }
+      }
+
+      &-split {
+        .@{list-prefix-cls}-rtl & {
+          right: auto;
+          left: 0;
+        }
+      }
+    }
+  }
+
+  &-vertical &-item {
+    &-extra {
+      .@{list-prefix-cls}-rtl& {
+        margin-right: 40px;
+        margin-left: 0;
+      }
+    }
+
+    &-action {
+      .@{list-prefix-cls}-rtl& {
+        margin-right: auto;
+      }
+
+      > li {
+        &:first-child {
+          .@{list-prefix-cls}-rtl & {
+            padding-right: 0;
+            padding-left: @padding-md;
+          }
+        }
+      }
+    }
+  }
+
+  // Horizontal
+  &:not(.@{list-prefix-cls}-vertical) {
+    .@{list-prefix-cls}-item-no-flex {
+      .@{list-prefix-cls}-item-action {
+        .@{list-prefix-cls}-rtl & {
+          float: left;
+        }
+      }
+    }
+  }
+}
+
+// responsive
+@media screen and (max-width: @screen-md) {
+  .@{list-prefix-cls} {
+    &-item {
+      &-action {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 24px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .@{list-prefix-cls}-vertical {
+    .@{list-prefix-cls}-item {
+      &-extra {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 24px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: @screen-sm) {
+  .@{list-prefix-cls} {
+    &-item {
+      &-action {
+        .@{list-prefix-cls}-rtl & {
+          margin-right: 22px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .@{list-prefix-cls}-vertical {
+    .@{list-prefix-cls}-item {
+      &-extra {
+        // to override margins on rtl view
+        .@{list-prefix-cls}-rtl& {
+          margin: auto auto 16px;
+        }
+      }
+    }
+  }
+}

components/pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject } from 'vue';
+import { defineComponent, ExtractPropTypes, inject } from 'vue';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined';
@@ -14,7 +14,7 @@ import enUS from '../vc-pagination/locale/en_US';
 import { defaultConfigProvider } from '../config-provider';
 import classNames from '../_util/classNames';
 
-export const PaginationProps = () => ({
+export const paginationProps = () => ({
   total: PropTypes.number,
   defaultCurrent: PropTypes.number,
   disabled: PropTypes.looseBool,
@@ -42,16 +42,19 @@ export const PaginationProps = () => ({
   'onUpdate:pageSize': PropTypes.func,
 });
 
-export const PaginationConfig = () => ({
+export const paginationConfig = () => ({
-  ...PaginationProps(),
+  ...paginationProps(),
   position: PropTypes.oneOf(tuple('top', 'bottom', 'both')),
 });
 
+export type PaginationProps = Partial<ExtractPropTypes<ReturnType<typeof paginationProps>>>;
+export type PaginationConfig = Partial<ExtractPropTypes<ReturnType<typeof paginationConfig>>>;
+
 export default defineComponent({
   name: 'APagination',
   inheritAttrs: false,
   props: {
-    ...PaginationProps(),
+    ...paginationProps(),
   },
   emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
   setup() {

components/pagination/index.ts

@@ -1,6 +1,6 @@
 import Pagination from './Pagination';
 import { withInstall } from '../_util/type';
 
-export { PaginationProps, PaginationConfig } from './Pagination';
+export { paginationProps, PaginationProps, PaginationConfig, paginationConfig } from './Pagination';
 
 export default withInstall(Pagination);

components/style/themes/default.less

@@ -803,9 +803,13 @@
 @list-footer-background: transparent;
 @list-empty-text-padding: @padding-md;
 @list-item-padding: @padding-sm 0;
+@list-item-padding-sm: @padding-xs @padding-md;
+@list-item-padding-lg: 16px 24px;
 @list-item-meta-margin-bottom: @padding-md;
 @list-item-meta-avatar-margin-right: @padding-md;
 @list-item-meta-title-margin-bottom: @padding-sm;
+@list-customize-card-bg: @component-background;
+@list-item-meta-description-font-size: @font-size-base;
 
 // Statistic
 // ---

components/table/interface.ts

@@ -1,6 +1,6 @@
 import { ExtractPropTypes, PropType, UnwrapRef } from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
-import { PaginationProps as getPaginationProps, PaginationConfig } from '../pagination';
+import { paginationProps as getPaginationProps, paginationConfig } from '../pagination';
 import { getSpinProps } from '../spin';
 import { tuple } from '../_util/type';
 
@@ -103,7 +103,7 @@ export const tableRowSelection = {
 
 export type SortOrder = 'descend' | 'ascend';
 
-const paginationProps = PaginationConfig();
+const paginationProps = paginationConfig();
 
 export const tableProps = {
   prefixCls: PropTypes.string,