feat: update pagination ts

components/page-header/style/index.less

@@ -66,7 +66,7 @@
       color: @heading-color;
       font-weight: 600;
       font-size: @page-header-heading-title;
-      line-height: 32px;
+      line-height: @height-base;
       .text-overflow-ellipsis();
     }
 
@@ -90,6 +90,7 @@
         margin-left: @margin-sm;
         white-space: unset;
       }
+
       > *:first-child {
         margin-left: 0;
       }
@@ -105,6 +106,7 @@
     .@{ant-prefix}-tabs {
       > .@{ant-prefix}-tabs-nav {
         margin: 0;
+
         &::before {
           border: none;
         }

components/page-header/style/rtl.less

@@ -56,6 +56,7 @@
           margin-left: 0;
         }
       }
+
       > *:first-child {
         .@{pageheader-prefix-cls}-rtl & {
           margin-right: 0;

components/pagination/Pagination.tsx

@@ -1,11 +1,9 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
 import { computed, toRef, defineComponent } 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';
 import DoubleRightOutlined from '@ant-design/icons-vue/DoubleRightOutlined';
-import { tuple } from '../_util/type';
-import PropTypes, { withUndefined } from '../_util/vue-types';
 import VcSelect from '../select';
 import MiniSelect from './MiniSelect';
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
@@ -15,42 +13,65 @@ import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export const paginationProps = () => ({
-  total: PropTypes.number,
+  total: Number,
-  defaultCurrent: PropTypes.number,
+  defaultCurrent: Number,
-  disabled: PropTypes.looseBool,
+  disabled: { type: Boolean, default: undefined },
-  current: PropTypes.number,
+  current: Number,
-  defaultPageSize: PropTypes.number,
+  defaultPageSize: Number,
-  pageSize: PropTypes.number,
+  pageSize: Number,
-  hideOnSinglePage: PropTypes.looseBool,
+  hideOnSinglePage: { type: Boolean, default: undefined },
-  showSizeChanger: PropTypes.looseBool,
+  showSizeChanger: { type: Boolean, default: undefined },
-  pageSizeOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+  pageSizeOptions: Array as PropType<(string | number)[]>,
-  buildOptionText: PropTypes.func,
+  buildOptionText: Function as PropType<(opt: { value: any }) => any>,
-  showSizeChange: PropTypes.func,
+  showQuickJumper: {
-  showQuickJumper: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
+    type: [Boolean, Object] as PropType<boolean | { goButton?: any }>,
-  showTotal: PropTypes.any,
+    default: undefined as boolean | { goButton?: any },
-  size: PropTypes.string,
+  },
-  simple: PropTypes.looseBool,
+  showTotal: Function as PropType<(total: number, range: [number, number]) => any>,
-  locale: PropTypes.object,
+  size: String as PropType<'default' | 'small'>,
-  prefixCls: PropTypes.string,
+  simple: { type: Boolean, default: undefined },
-  selectPrefixCls: PropTypes.string,
+  locale: Object,
-  itemRender: PropTypes.func,
+  prefixCls: String,
-  role: PropTypes.string,
+  selectPrefixCls: String,
-  showLessItems: PropTypes.looseBool,
+  totalBoundaryShowSizeChanger: Number,
-  onChange: PropTypes.func,
+  selectComponentClass: String,
-  onShowSizeChange: PropTypes.func,
+  itemRender: Function as PropType<
-  'onUpdate:current': PropTypes.func,
+    (opt: {
-  'onUpdate:pageSize': PropTypes.func,
+      page: number;
+      type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next';
+      originalElement: any;
+    }) => any
+  >,
+  role: String,
+  showLessItems: { type: Boolean, default: undefined },
+  onChange: Function as PropType<(page: number, pageSize: number) => void>,
+  onShowSizeChange: Function as PropType<(current: number, size: number) => void>,
+  'onUpdate:current': Function as PropType<(current: number) => void>,
+  'onUpdate:pageSize': Function as PropType<(size: number) => void>,
 });
 
+export type PaginationPosition = 'top' | 'bottom' | 'both';
 export const paginationConfig = () => ({
   ...paginationProps(),
-  position: PropTypes.oneOf(tuple('top', 'bottom', 'both')),
+  position: String as PropType<PaginationPosition>,
 });
 
 export type PaginationProps = Partial<ExtractPropTypes<ReturnType<typeof paginationProps>>>;
 export type PaginationConfig = Partial<ExtractPropTypes<ReturnType<typeof paginationConfig>>>;
 
-export type PaginationLocale = any;
+export interface PaginationLocale {
+  items_per_page?: string;
+  jump_to?: string;
+  jump_to_confirm?: string;
+  page?: string;
+  prev_page?: string;
+  next_page?: string;
+  prev_5?: string;
+  next_5?: string;
+  prev_3?: string;
+  next_3?: string;
+}
+
 export default defineComponent({
   name: 'APagination',
   inheritAttrs: false,
@@ -110,6 +131,7 @@ export default defineComponent({
         size,
         itemRender = slots.itemRender,
         buildOptionText = slots.buildOptionText,
+        selectComponentClass,
         ...restProps
       } = props;
 
@@ -119,7 +141,7 @@ export default defineComponent({
         ...getIconsProps(prefixCls.value),
         prefixCls: prefixCls.value,
         selectPrefixCls: selectPrefixCls.value,
-        selectComponentClass: isSmall ? MiniSelect : VcSelect,
+        selectComponentClass: selectComponentClass || (isSmall ? MiniSelect : VcSelect),
         locale: locale.value,
         buildOptionText,
         ...attrs,

components/pagination/style/index.less

@@ -63,6 +63,7 @@
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
+
       a {
         color: @primary-color;
       }
@@ -101,6 +102,7 @@
         letter-spacing: -1px;
         opacity: 0;
         transition: all 0.2s;
+
         &-svg {
           top: 0;
           right: 0;
@@ -144,6 +146,7 @@
   &-jump-next {
     margin-right: 8px;
   }
+
   &-prev,
   &-next,
   &-jump-prev,
@@ -259,6 +262,7 @@
       height: @pagination-item-size-sm;
       background-color: transparent;
       border: 0;
+
       &::after {
         height: @pagination-item-size-sm;
         line-height: @pagination-item-size-sm;
@@ -287,6 +291,11 @@
         border-color: @primary-color;
       }
 
+      &:focus {
+        border-color: @primary-color-hover;
+        box-shadow: @input-outline-offset @outline-blur-size @outline-width @primary-color-outline;
+      }
+
       &[disabled] {
         color: @disabled-color;
         background: @disabled-bg;
@@ -326,6 +335,7 @@
   &.mini &-next &-item-link {
     background: transparent;
     border-color: transparent;
+
     &::after {
       height: @pagination-item-size-sm;
       line-height: @pagination-item-size-sm;
@@ -377,7 +387,7 @@
 
       &-active {
         background: @pagination-item-disabled-bg-active;
-        border-color: transparent;
+
         a {
           color: @pagination-item-disabled-color-active;
         }