feat: pagination add responsive

Author: tangjinzhou

components/modal/style/confirm.less

@@ -23,7 +23,7 @@
       overflow: hidden;
       color: @heading-color;
       font-weight: 500;
-      font-size: @font-size-lg;
+      font-size: @modal-confirm-title-font-size;
       line-height: 1.4;
     }
 

components/pagination/Pagination.tsx

@@ -11,6 +11,7 @@ import VcPagination from '../vc-pagination';
 import enUS from '../vc-pagination/locale/en_US';
 import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import useBreakpoint from '../_util/hooks/useBreakpoint';
 
 export const paginationProps = () => ({
   total: Number,
@@ -43,6 +44,7 @@ export const paginationProps = () => ({
     }) => any
   >,
   role: String,
+  responsive: Boolean,
   showLessItems: { type: Boolean, default: undefined },
   onChange: Function as PropType<(page: number, pageSize: number) => void>,
   onShowSizeChange: Function as PropType<(current: number, size: number) => void>,
@@ -82,6 +84,7 @@ export default defineComponent({
     const selectPrefixCls = computed(() =>
       configProvider.getPrefixCls('select', props.selectPrefixCls),
     );
+    const breakpoint = useBreakpoint();
     const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale'));
     const getIconsProps = (pre: string) => {
       const ellipsis = <span class={`${pre}-item-ellipsis`}>•••</span>;
@@ -132,10 +135,11 @@ export default defineComponent({
         itemRender = slots.itemRender,
         buildOptionText = slots.buildOptionText,
         selectComponentClass,
+        responsive,
         ...restProps
       } = props;
 
-      const isSmall = size === 'small';
+      const isSmall = size === 'small' || !!(breakpoint.value?.xs && !size && responsive);
       const paginationProps = {
         ...restProps,
         ...getIconsProps(prefixCls.value),

components/pagination/demo/custom-changer.vue

@@ -18,10 +18,10 @@ Customize dropdown options such as adding all options
 <template>
   <a-pagination
     v-model:current="current"
+    v-model:page-size="pageSize"
     :page-size-options="pageSizeOptions"
     :total="total"
     show-size-changer
-    :page-size="pageSize"
     @showSizeChange="onShowSizeChange"
   >
     <template #buildOptionText="props">

components/pagination/demo/total.vue

@@ -19,16 +19,16 @@ You can show the total number of data by setting `showTotal`.
   <div>
     <a-pagination
       v-model:current="current1"
+      v-model:page-size="pageSize1"
       :total="85"
       :show-total="total => `Total ${total} items`"
-      :page-size="20"
     />
     <br />
     <a-pagination
       v-model:current="current2"
+      v-model:page-size="pageSize2"
       :total="85"
       :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
-      :page-size="20"
     />
   </div>
 </template>
@@ -38,12 +38,16 @@ export default defineComponent({
   setup() {
     const current1 = ref<number>(1);
     const current2 = ref<number>(2);
+    const pageSize1 = ref<number>(20);
+    const pageSize2 = ref<number>(20);
     const onChange = (pageNumber: number) => {
       console.log('Page: ', pageNumber);
     };
     return {
       current1,
       current2,
+      pageSize1,
+      pageSize2,
       onChange,
     };
   },

components/pagination/index.en-US.md

@@ -29,6 +29,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
 | itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode \| v-slot | - |  |
 | pageSize(v-model) | number of data items per page | number | - |  |
 | pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] |  |
+| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | 3.1 |
 | showLessItems | Show less page items | boolean | false | 1.5.0 |
 | showQuickJumper | determine whether you can jump to pages directly | boolean | false |  |
 | showSizeChanger | determine whether `pageSize` can be changed | boolean | false |  |

components/pagination/index.zh-CN.md

@@ -24,6 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
 | itemRender | 用于自定义页码的结构，可用于优化 SEO | ({page, type: 'page' \| 'prev' \| 'next', originalElement}) => vNode \| v-slot | - |  |
 | pageSize(v-model) | 每页条数 | number | - |  |
 | pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] |  |
+| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | 3.1 |
 | showLessItems | 是否显示较少页面内容 | boolean | false | 1.5.0 |
 | showQuickJumper | 是否可以快速跳转至某页 | boolean | false |  |
 | showSizeChanger | 是否可以改变 pageSize | boolean | false |  |

components/pagination/style/index.less

@@ -59,7 +59,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
@@ -69,6 +68,17 @@
       }
     }
 
+    // cannot merge with `&:hover`
+    // see https://github.com/ant-design/ant-design/pull/34002
+    &:focus-visible {
+      border-color: @primary-color;
+      transition: all 0.3s;
+
+      a {
+        color: @primary-color;
+      }
+    }
+
     &-active {
       font-weight: @pagination-font-weight-active;
       background: @pagination-item-bg-active;
@@ -78,15 +88,21 @@
         color: @primary-color;
       }
 
-      &:focus-visible,
       &:hover {
         border-color: @primary-5;
       }
 
-      &:focus-visible a,
+      &:focus-visible {
+        border-color: @primary-5;
+      }
+
       &:hover a {
         color: @primary-5;
       }
+
+      &:focus-visible a {
+        color: @primary-5;
+      }
     }
   }
 
@@ -130,7 +146,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       .@{pagination-prefix-cls}-item-link-icon {
         opacity: 1;
@@ -139,6 +154,15 @@
         opacity: 0;
       }
     }
+
+    &:focus-visible {
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
+      }
+    }
   }
 
   &-prev,
@@ -194,7 +218,11 @@
       transition: all 0.3s;
     }
 
-    &:focus-visible .@{pagination-prefix-cls}-item-link,
+    &:focus-visible .@{pagination-prefix-cls}-item-link {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+
     &:hover .@{pagination-prefix-cls}-item-link {
       color: @primary-color;
       border-color: @primary-color;
@@ -203,7 +231,15 @@
 
   &-disabled {
     &,
-    &:hover,
+    &:hover {
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-item-link {
+        color: @disabled-color;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+
     &:focus-visible {
       cursor: not-allowed;
       .@{pagination-prefix-cls}-item-link {