refactor(pagination): clean codes

CHANGELOG.en-US.md

@@ -4,7 +4,7 @@
 
 ### Feats
 
-- `n-pagination` adds `fast-prev` and `fast-next` slots, ref [#648](https://github.com/TuSimple/naive-ui/issues/648).
+- `n-pagination` adds `prev` and `next` slots, ref [#648](https://github.com/TuSimple/naive-ui/issues/648).
 - `n-tag` add `color` prop, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
 - `n-dynamic-tags` add `color`, closes [#693](https://github.com/TuSimple/naive-ui/issues/693).
 - `n-time-picker` optimization the now button logic, closes [#401](https://github.com/TuSimple/naive-ui/issues/401).

CHANGELOG.zh-CN.md

@@ -4,7 +4,7 @@
 
 ### Feats
 
-- `n-pagination` 新增 `fast-prev`、`fast-next` 插槽，按下箭头会打开菜单，有关 [#648](https://github.com/TuSimple/naive-ui/issues/648)
+- `n-pagination` 新增 `prev`、`next` 插槽，有关 [#648](https://github.com/TuSimple/naive-ui/issues/648)
 - `n-tag` 新增 `color`，关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
 - `n-dynamic-tags` 新增 `color`，关闭 [#693](https://github.com/TuSimple/naive-ui/issues/693)
 - `n-time-picker` 优化 now 按钮的逻辑，关闭 [#401](https://github.com/TuSimple/naive-ui/issues/401)

src/pagination/demos/enUS/fast-prev.demo.md

@@ -1,8 +0,0 @@
-# Customize the previous and next steps
-
-```html
-<n-pagination :item-count="101">
-  <template #fast-prev> fastPrev </template>
-  <template #fast-next> fastNext </template>
-</n-pagination>
-```

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

@@ -13,7 +13,7 @@ quick-jumper
 size-picker
 disabled
 item-count
-fast-prev
+prev
 prefix
 ```
 
@@ -23,8 +23,8 @@ prefix
 | --- | --- | --- | --- |
 | default-page | `number` | `1` | Current page in uncontrolled mode. |
 | default-page-size | `number` | `10` | Page size in uncontrolled mode. |
-| fast-next | `(info: PaginationInfo) => VNodeChild` | `undefined` | Next page. |
+| next | `(info: PaginationInfo) => VNodeChild` | `undefined` | Next page. |
-| fast-prev | `(info: PaginationInfo) => VNodeChild` | `undefined` | Previous page. |
+| prev | `(info: PaginationInfo) => VNodeChild` | `undefined` | Previous page. |
 | item-count | `number` | `undefined` | Total number. |
 | page-count | `number` | `1` | Total pages. |
 | page-sizes | `Array<number>` | `['10']` | Number of items per page. |
@@ -40,12 +40,12 @@ prefix
 
 ## Slots
 
-| Name      | Parameters               | Description    |
+| Name   | Parameters               | Description    |
-| --------- | ------------------------ | -------------- |
+| ------ | ------------------------ | -------------- |
-| fast-next | `(info: PaginationInfo)` | Next page.     |
+| next   | `(info: PaginationInfo)` | Next page.     |
-| fast-prev | `(info: PaginationInfo)` | Previous page. |
+| prev   | `(info: PaginationInfo)` | Previous page. |
-| prefix    | `(info: PaginationInfo)` | Page prefix.   |
+| prefix | `(info: PaginationInfo)` | Page prefix.   |
-| suffix    | `(info: PaginationInfo)` | Page suffix.   |
+| suffix | `(info: PaginationInfo)` | Page suffix.   |
 
 ## API
 

src/pagination/demos/enUS/prev.demo.md

@@ -0,0 +1,8 @@
+# Customize the Previous and Next Button
+
+```html
+<n-pagination :page-count="101">
+  <template #prev>Go Prev</template>
+  <template #next>Go Next</template>
+</n-pagination>
+```

src/pagination/demos/zhCN/fast-prev.demo.md

@@ -1,8 +0,0 @@
-# 自定义上一步和下一步
-
-```html
-<n-pagination :item-count="101">
-  <template #fast-prev> fastPrev </template>
-  <template #fast-next> fastNext </template>
-</n-pagination>
-```

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

@@ -13,7 +13,7 @@ quick-jumper
 size-picker
 disabled
 item-count
-fast-prev
+prev
 prefix
 ```
 
@@ -23,8 +23,8 @@ prefix
 | --- | --- | --- | --- |
 | default-page | `number` | `1` | 非受控模式下的当前页 |
 | default-page-size | `number` | `10` | 非受控模式下的分页大小 |
-| fast-next | `(info: PaginationInfo) => VNodeChild` | `undefined` | 下一页 |
+| next | `(info: PaginationInfo) => VNodeChild` | `undefined` | 下一页 |
-| fast-prev | `(info: PaginationInfo) => VNodeChild` | `undefined` | 上一页 |
+| prev | `(info: PaginationInfo) => VNodeChild` | `undefined` | 上一页 |
 | item-count | `number` | `undefined` | 总条数 |
 | page-count | `number` | `1` | 总页数 |
 | page-sizes | `Array<number>` | `['10']` | 每页条数 |
@@ -40,12 +40,12 @@ prefix
 
 ## Slots
 
-| 名称      | 参数                     | 说明     |
+| 名称   | 参数                     | 说明     |
-| --------- | ------------------------ | -------- |
+| ------ | ------------------------ | -------- |
-| fast-next | `(info: PaginationInfo)` | 下一页   |
+| next   | `(info: PaginationInfo)` | 下一页   |
-| fast-prev | `(info: PaginationInfo)` | 上一页   |
+| prev   | `(info: PaginationInfo)` | 上一页   |
-| prefix    | `(info: PaginationInfo)` | 分页前缀 |
+| prefix | `(info: PaginationInfo)` | 分页前缀 |
-| suffix    | `(info: PaginationInfo)` | 分页后缀 |
+| suffix | `(info: PaginationInfo)` | 分页后缀 |
 
 ## API
 

src/pagination/demos/zhCN/prev.demo.md

@@ -0,0 +1,8 @@
+# 自定义上一步和下一步
+
+```html
+<n-pagination :page-count="101">
+  <template #prev>往回走</template>
+  <template #next>继续走</template>
+</n-pagination>
+```

src/pagination/src/Pagination.tsx

@@ -30,12 +30,7 @@ import style from './styles/index.cssr'
 import { call, ExtractPublicPropTypes, MaybeArray, warn } from '../../_utils'
 import type { Size as InputSize } from '../../input/src/interface'
 import type { Size as SelectSize } from '../../select/src/interface'
-import {
+import { RenderPrefix, RenderSuffix, RenderPrev, RenderNext } from './interface'
-  RenderPrefix,
-  RenderSuffix,
-  RenderFastPrev,
-  RenderFastNext
-} from './interface'
 
 const paginationProps = {
   ...(useTheme.props as ThemeProps<PaginationTheme>),
@@ -55,7 +50,9 @@ const paginationProps = {
   defaultPageSize: Number,
   pageSizes: {
     type: Array as PropType<number[]>,
-    default: () => [10]
+    default () {
+      return [10]
+    }
   },
   showQuickJumper: Boolean,
   disabled: Boolean,
@@ -63,8 +60,8 @@ const paginationProps = {
     type: Number,
     default: 9
   },
-  fastPrev: Function as PropType<RenderFastPrev>,
+  prev: Function as PropType<RenderPrev>,
-  fastNext: Function as PropType<RenderFastNext>,
+  next: Function as PropType<RenderNext>,
   prefix: Function as PropType<RenderPrefix>,
   suffix: Function as PropType<RenderSuffix>,
   'onUpdate:page': [Function, Array] as PropType<
@@ -172,17 +169,6 @@ export default defineComponent({
       return endIndex
     })
 
-    const mergedItemCountRef = computed(() => {
-      const { itemCount } = props
-      if (itemCount !== undefined) {
-        return itemCount
-      }
-      warn(
-        'pagination',
-        '`item-count` should be must have if you want to use total.'
-      )
-    })
-
     const disableTransitionOneTick = (): void => {
       void nextTick(() => {
         const { value: selfEl } = selfRef
@@ -329,7 +315,6 @@ export default defineComponent({
       mergedPageCount: mergedPageCountRef,
       startIndex: startIndexRef,
       endIndex: endIndexRef,
-      itemCount: mergedItemCountRef,
       handleJumperInput,
       handleBackwardClick: backward,
       handleForwardClick: forward,
@@ -445,8 +430,8 @@ export default defineComponent({
       mergedPageSize,
       pageSizeOptions,
       jumperValue,
-      fastPrev,
+      prev,
-      fastNext,
+      next,
       prefix,
       suffix,
       handleJumperInput,
@@ -458,6 +443,8 @@ export default defineComponent({
       handleForwardClick,
       handleQuickJumperKeyUp
     } = this
+    const renderPrev = prev || $slots.prev
+    const renderNext = next || $slots.next
     return (
       <div
         ref="selfRef"
@@ -484,22 +471,20 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-pagination-item`,
-            !(fastPrev || $slots['fast-prev']) &&
+            !renderPrev && `${mergedClsPrefix}-pagination-item--button`,
-              `${mergedClsPrefix}-pagination-item--button`,
             (mergedPage <= 1 || mergedPage > mergedPageCount || disabled) &&
               `${mergedClsPrefix}-pagination-item--disabled`
           ]}
           onClick={handleBackwardClick}
         >
-          {fastPrev || $slots['fast-prev'] ? (
+          {renderPrev ? (
-            ($slots['fast-prev']
+            renderPrev({
-              ? ($slots['fast-prev'] as unknown as RenderFastPrev)
-              : fastPrev!)({
               page: mergedPage,
               pageSize: mergedPageSize,
               pageCount: mergedPageCount,
               startIndex: this.startIndex,
-              endIndex: this.endIndex
+              endIndex: this.endIndex,
+              itemCount: this.itemCount
             })
           ) : (
             <NBaseIcon clsPrefix={mergedClsPrefix}>
@@ -552,8 +537,7 @@ export default defineComponent({
         <div
           class={[
             `${mergedClsPrefix}-pagination-item`,
-            !(fastNext || $slots['fast-prev']) &&
+            !renderNext && `${mergedClsPrefix}-pagination-item--button`,
-              `${mergedClsPrefix}-pagination-item--button`,
             {
               [`${mergedClsPrefix}-pagination-item--disabled`]:
                 mergedPage < 1 || mergedPage >= mergedPageCount || disabled
@@ -561,13 +545,12 @@ export default defineComponent({
           ]}
           onClick={handleForwardClick}
         >
-          {fastNext || $slots['fast-next'] ? (
+          {renderNext ? (
-            ($slots['fast-next']
+            renderNext({
-              ? ($slots['fast-next'] as unknown as RenderFastPrev)
-              : fastNext!)({
               page: mergedPage,
               pageSize: mergedPageSize,
               pageCount: mergedPageCount,
+              itemCount: this.itemCount,
               startIndex: this.startIndex,
               endIndex: this.endIndex
             })

src/pagination/src/interface.ts

@@ -10,5 +10,5 @@ export type RenderPrefix = (info: {
 }) => VNodeChild
 
 export type RenderSuffix = RenderPrefix
-export type RenderFastNext = RenderPrefix
+export type RenderNext = RenderPrefix
-export type RenderFastPrev = RenderPrefix
+export type RenderPrev = RenderPrefix

src/pagination/src/styles/index.cssr.ts

@@ -95,13 +95,15 @@ export default cB('pagination', `
       background-color .3s var(--bezier),
       fill .3s var(--bezier);
   `, [
-
+    cM('button', `
-    cM('button', {
+      background: var(--item-color);
-      background: 'var(--item-color)',
+      color: var(--button-icon-color);
-      color: 'var(--button-icon-color)',
+      border: var(--button-border);
-      border: 'var(--button-border)',
+    `, [
-      fontSize: 'var(--button-icon-size)'
+      cB('base-icon', `
-    }),
+        font-size: var(--button-icon-size);
+      `)
+    ]),
     cNotM('disabled', [
       c('&:hover', {
         background: 'var(--item-color-hover)',

src/pagination/tests/Pagination.spec.ts

@@ -18,12 +18,12 @@ describe('n-pagination', () => {
     })
     expect(wrapper.findAll('.n-pagination-item').length).toEqual(4)
   })
-  it('should work with fast-prev slot', async () => {
+  it('should work with prev slot', async () => {
     const wrapper = mount(NPagination, {
       slots: {
-        'fast-prev': () => 'fastPrev'
+        prev: () => 'Prev'
       }
     })
-    expect(wrapper.find('.n-pagination-item').text()).toContain('fastPrev')
+    expect(wrapper.find('.n-pagination-item').text()).toContain('Prev')
   })
 })