feat(pagination): adds show-quick-jump-dropdown prop, closes #5251

CHANGELOG.en-US.md

@@ -4,7 +4,7 @@
 
 ### Fixes
 
-- Fix n-space vnode reuse problem caused by filtering out comment nodes of slot, closes [#5136](https://github.com/tusen-ai/naive-ui/issues/5136).
+- Fix `n-space` vnode reuse problem caused by filtering out comment nodes of slot, closes [#5136](https://github.com/tusen-ai/naive-ui/issues/5136).
 - Fix `n-data-table`'s prop `pagination`'s `default-page-size` and `default-page` not work in uncontrolled mode, closes [#5201](https://github.com/tusen-ai/naive-ui/issues/5201).
 - Fix `n-time-picker` formatting (format="HH: mm: ss. SSS") preventing modification of milliseconds in the edit box, closes [#5224](https://github.com/tusen-ai/naive-ui/issues/5224).
 - Fix `n-notification` notification clips out of screen when screen width is less than 400px wide.
@@ -52,6 +52,7 @@
 - `n-tree` adds `override-default-node-click-behavior` prop.
 - `n-tree-select` adds `override-default-node-click-behavior` prop.
 - Adds `n-flex` component.
+- `n-pagination` adds `show-quick-jump-dropdown` prop, closes [#5251](https://github.com/tusen-ai/naive-ui/issues/5251).
 
 ## 2.36.0
 

CHANGELOG.zh-CN.md

@@ -53,6 +53,7 @@
 - `n-tree` 新增 `override-default-node-click-behavior` 属性
 - `n-tree-select` 新增 `override-default-node-click-behavior` 属性
 - 新增 `n-flex` 组件
+- `n-pagination` 新增 `show-quick-jump-dropdown` 属性，关闭 [#5251](https://github.com/tusen-ai/naive-ui/issues/5251)
 
 ## 2.36.0
 

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

@@ -42,7 +42,8 @@ page-size-option.vue
 | page | `number` | `undefined` | Current page in controlled mode. |  |
 | prefix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Paging prefix. |  |
 | select-props | `SelectProps` | `undefined` | Page size select's props. | 2.34.3 |
-| show-quick-jumper | `boolean` | `false` | Whether to show fast jump. |  |
+| show-quick-jumper | `boolean` | `false` | Whether to show quick jump input. |  |
+| show-quick-jump-dropdown | `boolean` | `true` | Whether to show quick jump dropdown. If you have too many pages, it could cause performance issue to create quick jump dropdown data. You can set it to `false` to enhance render performance. | NEXT_VERSION |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` | size of page item. | 2.29.0 |
 | simple | `boolean` | `false` | Whether to use simple mode. | 2.32.2 |
 | suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | Page suffix. |  |

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

@@ -49,6 +49,7 @@ rtl-debug.vue
 | simple | `boolean` | `false` | 是否显示为简单分页 | 2.32.2 |
 | suffix | `(info: PaginationInfo) => VNodeChild` | `undefined` | 分页后缀 |  |
 | show-size-picker | `boolean` | `false` | 是否显示每页条数的选择器 |  |
+| show-quick-jump-dropdown | `boolean` | `true` | 展示快速跳转的下拉菜单。如果页数过多，可能导致分页的数据创建性能消耗较高，可以通过设为 `false` 来提升性能 | NEXT_VERSION |
 | to | `string \| HTMLElement \| false` | `body` | 弹出菜单的容器节点，`false` 会待在原地 | 2.33.4 |
 | on-update:page | `(page: number) => void` | `undefined` | 当前页发生改变时的回调函数 |  |
 | on-update:page-size | `(pageSize: number) => void` | `undefined` | 当前分页大小发生改变时的回调函数 |  |

src/pagination/src/Pagination.tsx

@@ -101,6 +101,7 @@ export const paginationProps = {
     default: ['pages', 'size-picker', 'quick-jumper']
   },
   to: useAdjustedTo.propTo,
+  showQuickJumpDropdown: { type: Boolean, default: true },
   'onUpdate:page': [Function, Array] as PropType<
   MaybeArray<(page: number) => void>
   >,
@@ -222,7 +223,8 @@ export default defineComponent({
       createPageItemsInfo(
         mergedPageRef.value,
         mergedPageCountRef.value,
-        props.pageSlot
+        props.pageSlot,
+        props.showQuickJumpDropdown
       )
     )
 
@@ -769,6 +771,9 @@ export default defineComponent({
                               ? 'fast-backward'
                               : 'fast-forward'
                             : pageItem.type
+                        if (pageItem.type !== 'page' && !pageItem.options) {
+                          return itemNode
+                        }
                         return (
                           <NPopselect
                             to={this.to}
@@ -812,7 +817,9 @@ export default defineComponent({
                               }
                             }}
                             options={
-                              pageItem.type !== 'page' ? pageItem.options : []
+                              pageItem.type !== 'page' && pageItem.options
+                                ? pageItem.options
+                                : []
                             }
                             onUpdateValue={this.handleMenuSelect}
                             scrollable

src/pagination/src/utils.ts

@@ -14,7 +14,8 @@ export const getDefaultPageSize = (
 function createPageItemsInfo (
   currentPage: number,
   pageCount: number,
-  pageSlot: number
+  pageSlot: number,
+  showQuickJumpDropdown: boolean
 ): {
     hasFastBackward: boolean
     hasFastForward: boolean
@@ -101,7 +102,9 @@ function createPageItemsInfo (
       type: 'fast-backward',
       active: false,
       label: undefined,
-      options: createRange(firstPage + 1, middleStart - 1)
+      options: showQuickJumpDropdown
+        ? createRange(firstPage + 1, middleStart - 1)
+        : null
     })
   } else if (lastPage >= firstPage + 1) {
     items.push({
@@ -128,7 +131,9 @@ function createPageItemsInfo (
       type: 'fast-forward',
       active: false,
       label: undefined,
-      options: createRange(middleEnd + 1, lastPage - 1)
+      options: showQuickJumpDropdown
+        ? createRange(middleEnd + 1, lastPage - 1)
+        : null
     })
   } else if (
     middleEnd === lastPage - 2 &&
@@ -165,7 +170,7 @@ export type PageItem =
     type: 'fast-backward' | 'fast-forward'
     label: undefined
     active: false
-    options: Array<{ label: string, value: number }>
+    options: Array<{ label: string, value: number }> | null
   }
   | {
     type: 'page'