feat(pagination): upgrade to v3 (#2541)

* feat(pagination): upgrade to v3

* feat(pagination): code review

Author: 逆寒

components/locale-provider/LocaleReceiver.jsx

@@ -41,6 +41,6 @@ export default {
     const { $slots } = this;
     const children = this.children || $slots.default;
     const { antLocale } = this.localeData;
-    return children(this.getLocale(), this.getLocaleCode(), antLocale);
+    return children?.(this.getLocale(), this.getLocaleCode(), antLocale);
   },
 };

components/pagination/MiniSelect.jsx

@@ -1,20 +1,19 @@
 import VcSelect, { SelectProps } from '../select';
-import { getOptionProps, filterEmpty, getListeners } from '../_util/props-util';
+import { getOptionProps, getSlot } from '../_util/props-util';
 
 export default {
+  inheritAttrs: false,
   props: {
     ...SelectProps,
   },
   Option: VcSelect.Option,
   render() {
     const selectOptionsProps = getOptionProps(this);
     const selelctProps = {
-      props: {
-        ...selectOptionsProps,
-        size: 'small',
-      },
-      on: getListeners(this),
+      ...selectOptionsProps,
+      size: 'small',
+      ...this.$attrs,
     };
-    return <VcSelect {...selelctProps}>{filterEmpty(this.$slots.default)}</VcSelect>;
+    return <VcSelect {...selelctProps}>{getSlot(this)}</VcSelect>;
   },
 };

components/pagination/Pagination.jsx

@@ -2,14 +2,16 @@ import PropTypes from '../_util/vue-types';
 import VcSelect from '../select';
 import MiniSelect from './MiniSelect';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { getOptionProps, getListeners } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
 import VcPagination from '../vc-pagination';
 import enUS from '../vc-pagination/locale/en_US';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons-vue/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined';
 import { ConfigConsumerProps } from '../config-provider';
+import { inject } from 'vue';
+import classNames from 'classnames';
 
 export const PaginationProps = () => ({
   total: PropTypes.number,
@@ -42,26 +44,27 @@ export const PaginationConfig = () => ({
 
 export default {
   name: 'APagination',
-  model: {
-    prop: 'current',
-    event: 'change.current',
-  },
+  inheritAttrs: false,
   props: {
     ...PaginationProps(),
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
+
   methods: {
     getIconsProps(prefixCls) {
       const prevIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <LeftOutlined/>
+          <LeftOutlined />
         </a>
       );
       const nextIcon = (
         <a class={`${prefixCls}-item-link`}>
-          <RightOutlined/>
+          <RightOutlined />
         </a>
       );
       const jumpPrevIcon = (
@@ -104,19 +107,15 @@ export default {
 
       const isSmall = size === 'small';
       const paginationProps = {
-        props: {
-          prefixCls,
-          selectPrefixCls,
-          ...restProps,
-          ...this.getIconsProps(prefixCls),
-          selectComponentClass: isSmall ? MiniSelect : VcSelect,
-          locale: { ...contextLocale, ...customLocale },
-          buildOptionText: buildOptionText || this.$scopedSlots.buildOptionText,
-        },
-        class: {
-          mini: isSmall,
-        },
-        on: getListeners(this),
+        prefixCls,
+        selectPrefixCls,
+        ...restProps,
+        ...this.getIconsProps(prefixCls),
+        selectComponentClass: isSmall ? MiniSelect : VcSelect,
+        locale: { ...contextLocale, ...customLocale },
+        buildOptionText: buildOptionText || this.$slots.buildOptionText?.(),
+        ...this.$attrs,
+        class: classNames({ mini: isSmall }, this.$attrs.class),
       };
 
       return <VcPagination {...paginationProps} />;
@@ -127,8 +126,8 @@ export default {
       <LocaleReceiver
         componentName="Pagination"
         defaultLocale={enUS}
-        scopedSlots={{ default: this.renderPagination }}
-      />
+        slots={{ default: this.renderPagination }}
+      ></LocaleReceiver>
     );
   },
 };

components/pagination/index.js

@@ -4,9 +4,9 @@ import Base from '../base';
 export { PaginationProps, PaginationConfig } from './Pagination';
 
 /* istanbul ignore next */
-Pagination.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Pagination.name, Pagination);
+Pagination.install = function(app) {
+  app.use(Base);
+  app.component(Pagination.name, Pagination);
 };
 
 export default Pagination;

components/vc-pagination/Pager.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export default {
   name: 'Pager',
+  inheritAttrs: false,
   props: {
     rootPrefixCls: PropTypes.string,
     page: PropTypes.number,
@@ -24,20 +25,27 @@ export default {
     },
   },
   render() {
+    const { class: _cls, style } = this.$attrs;
     const props = this.$props;
     const prefixCls = `${props.rootPrefixCls}-item`;
-    const cls = classNames(prefixCls, `${prefixCls}-${props.page}`, {
-      [`${prefixCls}-active`]: props.active,
-      [`${prefixCls}-disabled`]: !props.page,
-    });
+    const cls = classNames(
+      prefixCls,
+      `${prefixCls}-${props.page}`,
+      {
+        [`${prefixCls}-active`]: props.active,
+        [`${prefixCls}-disabled`]: !props.page,
+      },
+      _cls,
+    );
 
     return (
       <li
-        class={cls}
         onClick={this.handleClick}
         onKeypress={this.handleKeyPress}
         title={this.showTitle ? this.page : null}
         tabIndex="0"
+        class={cls}
+        style={style}
       >
         {this.itemRender(this.page, 'page', <a>{this.page}</a>)}
       </li>

components/vc-pagination/Pagination.jsx

@@ -1,10 +1,11 @@
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import { hasProp, getComponentFromProp, getOptionProps } from '../_util/props-util';
+import { hasProp, getOptionProps, getComponent } from '../_util/props-util';
 import Pager from './Pager';
 import Options from './Options';
 import LOCALE from './locale/zh_CN';
 import KEYCODE from './KeyCode';
+import classNames from 'classnames';
 
 function noop() {}
 
@@ -28,6 +29,7 @@ function calculatePage(p, state, props) {
 export default {
   name: 'Pagination',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   model: {
     prop: 'current',
     event: 'change.current',
@@ -151,7 +153,7 @@ export default {
     },
     getItemIcon(icon) {
       const { prefixCls } = this.$props;
-      const iconNode = getComponentFromProp(this, icon, this.$props) || (
+      const iconNode = getComponent(this, icon, this.$props) || (
         <a class={`${prefixCls}-item-link`} />
       );
       return iconNode;
@@ -359,8 +361,9 @@ export default {
       }
       const hasPrev = this.hasPrev();
       const hasNext = this.hasNext();
+
       return (
-        <ul class={`${prefixCls} ${prefixCls}-simple`}>
+        <ul class={classNames(`${prefixCls} ${prefixCls}-simple`, this.$attrs.class)}>
           <li
             title={this.showTitle ? locale.prev_page : null}
             onClick={this.prev}
@@ -409,16 +412,12 @@ export default {
     }
     if (allPages <= 5 + pageBufferSize * 2) {
       const pagerProps = {
-        props: {
-          locale,
-          rootPrefixCls: prefixCls,
-          showTitle: props.showTitle,
-          itemRender: props.itemRender,
-        },
-        on: {
-          click: this.handleChange,
-          keypress: this.runIfEnter,
-        },
+        locale,
+        rootPrefixCls: prefixCls,
+        showTitle: props.showTitle,
+        itemRender: props.itemRender,
+        onClick: this.handleChange,
+        onKeypress: this.runIfEnter,
       };
       if (!allPages) {
         pagerList.push(
@@ -580,12 +579,14 @@ export default {
     }
     const prevDisabled = !this.hasPrev() || !allPages;
     const nextDisabled = !this.hasNext() || !allPages;
-    const buildOptionText = this.buildOptionText || this.$scopedSlots.buildOptionText;
+    const buildOptionText = this.buildOptionText || this.$slots.buildOptionText?.();
+    const { class: _cls, style } = this.$attrs;
     return (
       <ul
-        class={{ [`${prefixCls}`]: true, [`${prefixCls}-disabled`]: disabled }}
         unselectable="unselectable"
         ref="paginationNode"
+        style={style}
+        class={classNames({ [`${prefixCls}`]: true, [`${prefixCls}-disabled`]: disabled }, _cls)}
       >
         {totalText}
         <li