fix: pagination mini size style

Author: tangjinzhou

components/pagination/Pagination.tsx

@@ -82,7 +82,7 @@ export default defineComponent({
   props: paginationProps(),
   // emits: ['change', 'showSizeChange', 'update:current', 'update:pageSize'],
   setup(props, { slots, attrs }) {
-    const { prefixCls, configProvider, direction } = useConfigInject('pagination', props);
+    const { prefixCls, configProvider, direction, size } = useConfigInject('pagination', props);
 
     // style
     const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -94,58 +94,54 @@ export default defineComponent({
     const [locale] = useLocaleReceiver('Pagination', enUS, toRef(props, 'locale'));
     const getIconsProps = (pre: string) => {
       const ellipsis = <span class={`${pre}-item-ellipsis`}>•••</span>;
-      let prevIcon = (
+      const prevIcon = (
         <button class={`${pre}-item-link`} type="button" tabindex={-1}>
-          <LeftOutlined />
+          {direction.value === 'rtl' ? <RightOutlined /> : <LeftOutlined />}
         </button>
       );
-      let nextIcon = (
+      const nextIcon = (
         <button class={`${pre}-item-link`} type="button" tabindex={-1}>
-          <RightOutlined />
+          {direction.value === 'rtl' ? <LeftOutlined /> : <RightOutlined />}
         </button>
       );
-      let jumpPrevIcon = (
+      const jumpPrevIcon = (
         <a rel="nofollow" class={`${pre}-item-link`}>
-          {/* You can use transition effects in the container :) */}
           <div class={`${pre}-item-container`}>
-            <DoubleLeftOutlined class={`${pre}-item-link-icon`} />
+            {direction.value === 'rtl' ? (
+              <DoubleRightOutlined class={`${pre}-item-link-icon`} />
+            ) : (
+              <DoubleLeftOutlined class={`${pre}-item-link-icon`} />
+            )}
             {ellipsis}
           </div>
         </a>
       );
-      let jumpNextIcon = (
+      const jumpNextIcon = (
         <a rel="nofollow" class={`${pre}-item-link`}>
-          {/* You can use transition effects in the container :) */}
           <div class={`${pre}-item-container`}>
-            <DoubleRightOutlined class={`${pre}-item-link-icon`} />
+            {direction.value === 'rtl' ? (
+              <DoubleLeftOutlined class={`${pre}-item-link-icon`} />
+            ) : (
+              <DoubleRightOutlined class={`${pre}-item-link-icon`} />
+            )}
             {ellipsis}
           </div>
         </a>
       );
-      // change arrows direction in right-to-left direction
-      if (direction.value === 'rtl') {
-        [prevIcon, nextIcon] = [nextIcon, prevIcon];
-        [jumpPrevIcon, jumpNextIcon] = [jumpNextIcon, jumpPrevIcon];
-      }
-      return {
-        prevIcon,
-        nextIcon,
-        jumpPrevIcon,
-        jumpNextIcon,
-      };
+      return { prevIcon, nextIcon, jumpPrevIcon, jumpNextIcon };
     };
 
     return () => {
       const {
-        size,
         itemRender = slots.itemRender,
         buildOptionText = slots.buildOptionText,
         selectComponentClass,
         responsive,
         ...restProps
       } = props;
 
-      const isSmall = size === 'small' || !!(breakpoint.value?.xs && !size && responsive);
+      const isSmall =
+        size.value === 'small' || !!(breakpoint.value?.xs && !size.value && responsive);
       const paginationProps = {
         ...restProps,
         ...getIconsProps(prefixCls.value),
@@ -156,7 +152,10 @@ export default defineComponent({
         buildOptionText,
         ...attrs,
         class: classNames(
-          { mini: isSmall, [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
+          {
+            [`${prefixCls.value}-mini`]: isSmall,
+            [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+          },
           attrs.class,
           hashId.value,
         ),

components/pagination/style/index.tsx

@@ -57,7 +57,16 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
 
     [`&${componentCls}-disabled`]: {
       cursor: 'not-allowed',
-
+      [`&${componentCls}-mini`]: {
+        [`
+          &:hover ${componentCls}-item:not(${componentCls}-item-active),
+          &:active ${componentCls}-item:not(${componentCls}-item-active),
+          &:hover ${componentCls}-item-link,
+          &:active ${componentCls}-item-link
+        `]: {
+          backgroundColor: 'transparent',
+        },
+      },
       [`${componentCls}-item`]: {
         cursor: 'not-allowed',
 
@@ -89,26 +98,38 @@ const genPaginationDisabledStyle: GenerateStyle<PaginationToken, CSSObject> = to
       [`${componentCls}-item-link`]: {
         color: token.colorTextDisabled,
         cursor: 'not-allowed',
-
         '&:hover, &:active': {
           backgroundColor: 'transparent',
         },
-
         [`${componentCls}-simple&`]: {
           backgroundColor: 'transparent',
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
         },
       },
 
-      [`${componentCls}-item-link-icon`]: {
-        opacity: 0,
+      [`${componentCls}-simple-pager`]: {
+        color: token.colorTextDisabled,
       },
 
-      [`${componentCls}-item-ellipsis`]: {
-        opacity: 1,
-      },
+      [`${componentCls}-jump-prev, ${componentCls}-jump-next`]: {
+        [`${componentCls}-item-link-icon`]: {
+          opacity: 0,
+        },
 
-      [`${componentCls}-simple-pager`]: {
-        color: token.colorTextDisabled,
+        [`${componentCls}-item-ellipsis`]: {
+          opacity: 1,
+        },
+      },
+    },
+    [`&${componentCls}-simple`]: {
+      [`${componentCls}-prev, ${componentCls}-next`]: {
+        [`&${componentCls}-disabled ${componentCls}-item-link`]: {
+          '&:hover, &:active': {
+            backgroundColor: 'transparent',
+          },
+        },
       },
     },
   };
@@ -134,13 +155,28 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = token
     [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
       backgroundColor: 'transparent',
       borderColor: 'transparent',
+      '&:hover': {
+        backgroundColor: token.colorBgTextHover,
+      },
+      '&:active': {
+        backgroundColor: token.colorBgTextActive,
+      },
     },
 
     [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
       minWidth: token.paginationItemSizeSM,
       height: token.paginationItemSizeSM,
       margin: 0,
       lineHeight: `${token.paginationItemSizeSM}px`,
+      [`&:hover ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextHover,
+      },
+      [`&:active ${componentCls}-item-link`]: {
+        backgroundColor: token.colorBgTextActive,
+      },
+      [`&${componentCls}-disabled:hover ${componentCls}-item-link`]: {
+        backgroundColor: 'transparent',
+      },
     },
 
     [`
@@ -200,7 +236,12 @@ const genPaginationSimpleStyle: GenerateStyle<PaginationToken, CSSObject> = toke
         height: token.paginationItemSizeSM,
         backgroundColor: 'transparent',
         border: 0,
-
+        '&:hover': {
+          backgroundColor: token.colorBgTextHover,
+        },
+        '&:active': {
+          backgroundColor: token.colorBgTextActive,
+        },
         '&::after': {
           height: token.paginationItemSizeSM,
           lineHeight: `${token.paginationItemSizeSM}px`,