feat(pagination): add size prop (#2943)

* feat(pagination): add `size` prop

Signed-off-by: Sepush <sepush@outlook.com>

* refactor(pagination): remove comment

Signed-off-by: Sepush <sepush@outlook.com>

* fix(ci): update tusimple theme and snapshot

Signed-off-by: Sepush <sepush@outlook.com>

* fix(ci): tusimple theme

Signed-off-by: Sepush <sepush@outlook.com>

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -13,6 +13,7 @@
 ### Feats
 
 - `n-notification-provider`'s `placement` prop supports `'top'` and `'bottom'`, closes [#2930](https://github.com/TuSimple/naive-ui/issues/2930).
+- `n-pagination` add `size` prop, closes [#2888](https://github.com/TuSimple/naive-ui/issues/2888).
 
 ### i18n
 

CHANGELOG.zh-CN.md

@@ -13,6 +13,7 @@
 ### Feats
 
 - `n-notification-provider` 的 `placement` 属性支持 `'top'` 和 `'bottom'`，关闭 [#2930](https://github.com/TuSimple/naive-ui/issues/2930)
+- `n-pagination` 新增 `size` 属性，关闭 [#2888](https://github.com/TuSimple/naive-ui/issues/2888)
 - `n-config-provider` 新增 `preflight-style-disabled` 属性
 
 ### i18n

package.json

@@ -104,7 +104,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-vue": "^8.6.0",
-    "esno": "^0.15.0",
+    "esno": "^0.14.1",
     "express": "^4.17.3",
     "fast-glob": "^3.2.11",
     "fs-extra": "^10.0.1",

src/pagination/demos/enUS/index.demo-entry.md

@@ -10,6 +10,7 @@ Long data's friend.
 basic.vue
 slot.vue
 quick-jumper.vue
+size.vue
 size-picker.vue
 disabled.vue
 item-count.vue
@@ -37,6 +38,7 @@ page-size-option.vue
 | page-slot | `number` | `9` | The number of pages displayed. |  |
 | page | `number` | `undefined` | Current page in controlled mode. |  |
 | prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Paging prefix. |  |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | size of page item. | NEXT_VERSION |
 | show-quick-jumper | `boolean` | `false` | Whether to show fast jump. |  |
 | suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Page suffix. |  |
 | show-size-picker | `boolean` | `false` | Whether to show the selector of the number of items per page. |  |

src/pagination/demos/enUS/size.demo.vue

@@ -0,0 +1,23 @@
+<markdown>
+# Size
+</markdown>
+
+<template>
+  <n-spce vertical>
+    <n-pagination v-model:page="page" :page-count="100" :size="'small'" />
+    <n-pagination v-model:page="page" :page-count="100" :size="'medium'" />
+    <n-pagination v-model:page="page" :page-count="100" :size="'large'" />
+  </n-spce>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      page: ref(2)
+    }
+  }
+})
+</script>

src/pagination/demos/zhCN/index.demo-entry.md

@@ -10,6 +10,7 @@
 basic.vue
 slot.vue
 quick-jumper.vue
+size.vue
 size-picker.vue
 disabled.vue
 item-count.vue
@@ -38,6 +39,7 @@ rtl-debug.vue
 | page-slot | `number` | `9` | 页码显示的个数 |  |
 | page | `number` | `undefined` | 受控模式下的当前页 |  |
 | prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | 分页前缀 |  |
+| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 分页按钮的大小 | NEXT_VERSION |
 | show-quick-jumper | `boolean` | `false` | 是否显示快速跳转 |  |
 | suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | 分页后缀 |  |
 | show-size-picker | `boolean` | `false` | 是否显示每页条数的选择器 |  |

src/pagination/demos/zhCN/size.demo.vue

@@ -0,0 +1,23 @@
+<markdown>
+# 尺寸
+</markdown>
+
+<template>
+  <n-spce vertical>
+    <n-pagination v-model:page="page" :page-count="100" :size="'small'" />
+    <n-pagination v-model:page="page" :page-count="100" :size="'medium'" />
+    <n-pagination v-model:page="page" :page-count="100" :size="'large'" />
+  </n-spce>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      page: ref(2)
+    }
+  }
+})
+</script>

src/pagination/src/Pagination.tsx

@@ -29,11 +29,12 @@ import type { PaginationTheme } from '../styles'
 import { pageItems } from './utils'
 import type { PageItem } from './utils'
 import style from './styles/index.cssr'
-import { call, resolveSlot, warn, warnOnce } from '../../_utils'
+import { call, resolveSlot, warn, warnOnce, createKey } from '../../_utils'
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
 import type { Size as InputSize } from '../../input/src/interface'
 import type { Size as SelectSize } from '../../select/src/interface'
 import {
+  Size,
   RenderPrefix,
   RenderSuffix,
   RenderPrev,
@@ -69,6 +70,10 @@ const paginationProps = {
     }
   },
   showQuickJumper: Boolean,
+  size: {
+    type: String as PropType<Size>,
+    default: 'medium'
+  },
   disabled: Boolean,
   pageSlot: {
     type: Number,
@@ -332,9 +337,9 @@ export default defineComponent({
       disableTransitionOneTick()
     })
     const cssVarsRef = computed(() => {
+      const { size } = props
       const {
         self: {
-          itemSize,
           itemPadding,
           itemMargin,
           itemMarginRtl,
@@ -367,7 +372,6 @@ export default defineComponent({
           itemBorderActive,
           itemBorderDisabled,
           itemBorderRadius,
-          itemFontSize,
           jumperFontSize,
           jumperTextColor,
           jumperTextColorDisabled,
@@ -375,7 +379,9 @@ export default defineComponent({
           suffixMargin,
           buttonColor,
           buttonColorHover,
-          buttonColorPressed
+          buttonColorPressed,
+          [createKey('itemSize', size)]: itemSize,
+          [createKey('itemFontSize', size)]: itemFontSize
         },
         common: { cubicBezierEaseInOut }
       } = themeRef.value
@@ -426,7 +432,17 @@ export default defineComponent({
       }
     })
     const themeClassHandle = inlineThemeDisabled
-      ? useThemeClass('pagination', undefined, cssVarsRef, props)
+      ? useThemeClass(
+        'pagination',
+        computed(() => {
+          let hash = ''
+          const { size } = props
+          hash += size[0]
+          return hash
+        }),
+        cssVarsRef,
+        props
+      )
       : undefined
     return {
       rtlEnabled: rtlEnabledRef,

src/pagination/src/interface.ts

@@ -1,6 +1,8 @@
 import { VNode, VNodeChild } from 'vue'
 import { SelectBaseOption } from '../../select/src/interface'
 
+export type Size = 'small' | 'medium' | 'large'
+
 export type PaginationInfo = Parameters<RenderPrefix>[0]
 
 export type RenderPrefix = (info: {

src/pagination/styles/light.ts

@@ -14,7 +14,14 @@ export const self = (vars: ThemeCommonVars) => {
     textColorDisabled,
     borderColor,
     borderRadius,
-    fontSize
+    // item font size
+    fontSizeTiny,
+    fontSizeSmall,
+    fontSizeMedium,
+    // item size
+    heightTiny,
+    heightSmall,
+    heightMedium
   } = vars
 
   return {
@@ -45,7 +52,12 @@ export const self = (vars: ThemeCommonVars) => {
     itemBorderActive: `1px solid ${primaryColor}`,
     itemBorderDisabled: `1px solid ${borderColor}`,
     itemBorderRadius: borderRadius,
-    itemFontSize: fontSize,
+    itemSizeSmall: heightTiny,
+    itemSizeMedium: heightSmall,
+    itemSizeLarge: heightMedium,
+    itemFontSizeSmall: fontSizeTiny,
+    itemFontSizeMedium: fontSizeSmall,
+    itemFontSizeLarge: fontSizeMedium,
     jumperTextColor: textColor2,
     jumperTextColorDisabled: textColorDisabled
   }

src/pagination/tests/Pagination.spec.tsx

@@ -6,6 +6,20 @@ describe('n-pagination', () => {
   it('should work with import on demand', () => {
     mount(NPagination)
   })
+  it('should work with `size` prop', async () => {
+    const wrapper = mount(NPagination, {
+      props: {
+        pageCount: 20
+      }
+    })
+    expect(wrapper.attributes('style')).toContain('--n-item-size: 28px;')
+
+    await wrapper.setProps({ size: 'small' })
+    expect(wrapper.attributes('style')).toContain('--n-item-size: 22px;')
+
+    await wrapper.setProps({ size: 'large' })
+    expect(wrapper.attributes('style')).toContain('--n-item-size: 34px;')
+  })
   it('props.itemCount', async () => {
     const wrapper = mount(NPagination, {
       props: {

themes/tusimple/src/theme-overrides-dark.ts

@@ -412,10 +412,10 @@ export const themeOverridesDark: GlobalThemeOverrides = {
     boxShadow: vars.SPECIAL_BOX_SHADOW_DARK_THEME
   },
   Pagination: {
-    itemSize: '32px',
+    itemSizeMedium: '32px',
     itemPadding: '0',
     // buttonFontSize: '24px',
-    itemFontSize: '16px',
+    itemFontSizeMedium: '16px',
     inputWidth: '80px',
     selectWidth: '100px',
     inputMargin: '0 20px',

themes/tusimple/src/theme-overrides-light.ts

@@ -319,10 +319,10 @@ export const themeOverridesLight: GlobalThemeOverrides = {
     iconSize: '20px'
   },
   Pagination: {
-    itemSize: '32px',
+    itemSizeMedium: '32px',
     itemPadding: '0',
     // buttonFontSize: '24px',
-    itemFontSize: '16px',
+    itemFontSizeMedium: '16px',
     inputWidth: '80px',
     selectWidth: '100px',
     inputMargin: '0 20px',