naive-ui 2.22.0 → 2.24.0

package/es/pagination/src/Pagination.d.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
 import type { PageItem } from './utils';
-import { ExtractPublicPropTypes, MaybeArray } 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 { RenderPrefix, PaginationSizeOption } from './interface';
+import { RenderPrefix, PaginationRenderLabel, PaginationSizeOption } from './interface';
 declare const paginationProps: {
     readonly page: NumberConstructor;
     readonly defaultPage: {
@@ -17,7 +17,7 @@ declare const paginationProps: {
         readonly default: 1;
     };
     readonly showSizePicker: BooleanConstructor;
-    readonly pageSize: PropType<number>;
+    readonly pageSize: NumberConstructor;
     readonly defaultPageSize: {
         readonly type: NumberConstructor;
         readonly default: 10;
@@ -36,6 +36,7 @@ declare const paginationProps: {
     readonly next: PropType<RenderPrefix>;
     readonly prefix: PropType<RenderPrefix>;
     readonly suffix: PropType<RenderPrefix>;
+    readonly label: PropType<PaginationRenderLabel>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -740,7 +741,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 1;
     };
     readonly showSizePicker: BooleanConstructor;
-    readonly pageSize: PropType<number>;
+    readonly pageSize: NumberConstructor;
     readonly defaultPageSize: {
         readonly type: NumberConstructor;
         readonly default: 10;
@@ -759,6 +760,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly next: PropType<RenderPrefix>;
     readonly prefix: PropType<RenderPrefix>;
     readonly suffix: PropType<RenderPrefix>;
+    readonly label: PropType<PaginationRenderLabel>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -1470,6 +1472,7 @@ declare const _default: import("vue").DefineComponent<{
     showFastBackward: import("vue").Ref<boolean>;
     showFastForward: import("vue").Ref<boolean>;
     pageItems: import("vue").ComputedRef<PageItem[]>;
+    mergedItemCount: import("vue").ComputedRef<number>;
     jumperValue: import("vue").Ref<string>;
     pageSizeOptions: import("vue").ComputedRef<PaginationSizeOption[]>;
     mergedPageSize: import("vue").ComputedRef<number>;
@@ -1951,47 +1954,47 @@ declare const _default: import("vue").DefineComponent<{
     handlePageItemMouseEnter: (pageItem: PageItem) => void;
     handlePageItemMouseLeave: (pageItem: PageItem) => void;
     cssVars: import("vue").ComputedRef<{
-        '--prefix-margin': string;
-        '--suffix-margin': string;
-        '--item-font-size': string;
-        '--select-width': string;
-        '--select-margin': string;
-        '--input-width': string;
-        '--input-margin': string;
-        '--item-size': string;
-        '--item-text-color': string;
-        '--item-text-color-disabled': string;
-        '--item-text-color-hover': string;
-        '--item-text-color-active': string;
-        '--item-text-color-pressed': string;
-        '--item-color': string;
-        '--item-color-hover': string;
-        '--item-color-disabled': string;
-        '--item-color-active': string;
-        '--item-color-active-hover': string;
-        '--item-color-pressed': string;
-        '--item-border': string;
-        '--item-border-hover': string;
-        '--item-border-disabled': string;
-        '--item-border-active': string;
-        '--item-border-pressed': string;
-        '--item-padding': string;
-        '--item-border-radius': string;
-        '--bezier': string;
-        '--jumper-font-size': string;
-        '--jumper-text-color': string;
-        '--jumper-text-color-disabled': string;
-        '--item-margin': string;
-        '--button-icon-size': string;
-        '--button-icon-color': string;
-        '--button-icon-color-hover': string;
-        '--button-icon-color-pressed': string;
-        '--button-color-hover': string;
-        '--button-color': string;
-        '--button-color-pressed': string;
-        '--button-border': string;
-        '--button-border-hover': string;
-        '--button-border-pressed': string;
+        '--n-prefix-margin': string;
+        '--n-suffix-margin': string;
+        '--n-item-font-size': string;
+        '--n-select-width': string;
+        '--n-select-margin': string;
+        '--n-input-width': string;
+        '--n-input-margin': string;
+        '--n-item-size': string;
+        '--n-item-text-color': string;
+        '--n-item-text-color-disabled': string;
+        '--n-item-text-color-hover': string;
+        '--n-item-text-color-active': string;
+        '--n-item-text-color-pressed': string;
+        '--n-item-color': string;
+        '--n-item-color-hover': string;
+        '--n-item-color-disabled': string;
+        '--n-item-color-active': string;
+        '--n-item-color-active-hover': string;
+        '--n-item-color-pressed': string;
+        '--n-item-border': string;
+        '--n-item-border-hover': string;
+        '--n-item-border-disabled': string;
+        '--n-item-border-active': string;
+        '--n-item-border-pressed': string;
+        '--n-item-padding': string;
+        '--n-item-border-radius': string;
+        '--n-bezier': string;
+        '--n-jumper-font-size': string;
+        '--n-jumper-text-color': string;
+        '--n-jumper-text-color-disabled': string;
+        '--n-item-margin': string;
+        '--n-button-icon-size': string;
+        '--n-button-icon-color': string;
+        '--n-button-icon-color-hover': string;
+        '--n-button-icon-color-pressed': string;
+        '--n-button-color-hover': string;
+        '--n-button-color': string;
+        '--n-button-color-pressed': string;
+        '--n-button-border': string;
+        '--n-button-border-hover': string;
+        '--n-button-border-pressed': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly page?: unknown;
@@ -2010,6 +2013,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly next?: unknown;
     readonly prefix?: unknown;
     readonly suffix?: unknown;
+    readonly label?: unknown;
     readonly 'onUpdate:page'?: unknown;
     readonly onUpdatePage?: unknown;
     readonly 'onUpdate:pageSize'?: unknown;
@@ -2029,6 +2033,7 @@ declare const _default: import("vue").DefineComponent<{
     showQuickJumper: boolean;
     pageSlot: number;
 } & {
+    label?: PaginationRenderLabel | undefined;
     prefix?: RenderPrefix | undefined;
     page?: number | undefined;
     onChange?: MaybeArray<(page: number) => void> | undefined;

package/es/pagination/src/Pagination.js

@@ -9,7 +9,7 @@ import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { paginationLight } from '../styles';
 import { pageItems } from './utils';
 import style from './styles/index.cssr';
-import { call, warn } from '../../_utils';
+import { call, warn, warnOnce } from '../../_utils';
 const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page: Number, defaultPage: {
         type: Number,
         default: 1
@@ -27,7 +27,7 @@ const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page:
     }, showQuickJumper: Boolean, disabled: Boolean, pageSlot: {
         type: Number,
         default: 9
-    }, prev: Function, next: Function, prefix: Function, suffix: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
+    }, prev: Function, next: Function, prefix: Function, suffix: Function, label: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
     /** @deprecated */
     onPageSizeChange: [Function, Array], 
     /** @deprecated */
@@ -41,6 +41,12 @@ export default defineComponent({
                 if (props.pageCount !== undefined && props.itemCount !== undefined) {
                     warn('pagination', "`page-count` and `item-count` should't be specified together. Only `item-count` will take effect.");
                 }
+                if (props.onPageSizeChange) {
+                    warnOnce('pagination', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onChange) {
+                    warnOnce('pagination', '`on-change` is deprecated, please use `on-update:page` instead.');
+                }
             });
         }
         const { NConfigProvider, mergedClsPrefixRef } = useConfig(props);
@@ -100,6 +106,12 @@ export default defineComponent({
             }
             return endIndex;
         });
+        const mergedItemCountRef = computed(() => {
+            const { itemCount } = props;
+            if (itemCount !== undefined)
+                return itemCount;
+            return (props.pageCount || 1) * mergedPageSizeRef.value;
+        });
         const disableTransitionOneTick = () => {
             void nextTick(() => {
                 var _a;
@@ -189,10 +201,10 @@ export default defineComponent({
                 case 'page':
                     doUpdatePage(pageItem.label);
                     break;
-                case 'fastBackward':
+                case 'fast-backward':
                     fastBackward();
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     fastForward();
                     break;
             }
@@ -201,10 +213,10 @@ export default defineComponent({
             if (props.disabled)
                 return;
             switch (pageItem.type) {
-                case 'fastBackward':
+                case 'fast-backward':
                     showFastBackwardRef.value = true;
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     showFastForwardRef.value = true;
                     break;
                 default:
@@ -216,10 +228,10 @@ export default defineComponent({
             if (props.disabled)
                 return;
             switch (pageItem.type) {
-                case 'fastBackward':
+                case 'fast-backward':
                     showFastBackwardRef.value = false;
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     showFastForwardRef.value = false;
                     break;
                 default:
@@ -244,6 +256,7 @@ export default defineComponent({
             showFastBackward: showFastBackwardRef,
             showFastForward: showFastForwardRef,
             pageItems: computed(() => pageItems(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot)),
+            mergedItemCount: mergedItemCountRef,
             jumperValue: jumperValueRef,
             pageSizeOptions: pageSizeOptionsRef,
             mergedPageSize: mergedPageSizeRef,
@@ -264,69 +277,70 @@ export default defineComponent({
             cssVars: computed(() => {
                 const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--prefix-margin': prefixMargin,
-                    '--suffix-margin': suffixMargin,
-                    '--item-font-size': itemFontSize,
-                    '--select-width': selectWidth,
-                    '--select-margin': selectMargin,
-                    '--input-width': inputWidth,
-                    '--input-margin': inputMargin,
-                    '--item-size': itemSize,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-disabled': itemTextColorDisabled,
-                    '--item-text-color-hover': itemTextColorHover,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--item-text-color-pressed': itemTextColorPressed,
-                    '--item-color': itemColor,
-                    '--item-color-hover': itemColorHover,
-                    '--item-color-disabled': itemColorDisabled,
-                    '--item-color-active': itemColorActive,
-                    '--item-color-active-hover': itemColorActiveHover,
-                    '--item-color-pressed': itemColorPressed,
-                    '--item-border': itemBorder,
-                    '--item-border-hover': itemBorderHover,
-                    '--item-border-disabled': itemBorderDisabled,
-                    '--item-border-active': itemBorderActive,
-                    '--item-border-pressed': itemBorderPressed,
-                    '--item-padding': itemPadding,
-                    '--item-border-radius': itemBorderRadius,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--jumper-font-size': jumperFontSize,
-                    '--jumper-text-color': jumperTextColor,
-                    '--jumper-text-color-disabled': jumperTextColorDisabled,
-                    '--item-margin': itemMargin,
-                    '--button-icon-size': buttonIconSize,
-                    '--button-icon-color': buttonIconColor,
-                    '--button-icon-color-hover': buttonIconColorHover,
-                    '--button-icon-color-pressed': buttonIconColorPressed,
-                    '--button-color-hover': buttonColorHover,
-                    '--button-color': buttonColor,
-                    '--button-color-pressed': buttonColorPressed,
-                    '--button-border': buttonBorder,
-                    '--button-border-hover': buttonBorderHover,
-                    '--button-border-pressed': buttonBorderPressed
+                    '--n-prefix-margin': prefixMargin,
+                    '--n-suffix-margin': suffixMargin,
+                    '--n-item-font-size': itemFontSize,
+                    '--n-select-width': selectWidth,
+                    '--n-select-margin': selectMargin,
+                    '--n-input-width': inputWidth,
+                    '--n-input-margin': inputMargin,
+                    '--n-item-size': itemSize,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-disabled': itemTextColorDisabled,
+                    '--n-item-text-color-hover': itemTextColorHover,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-item-text-color-pressed': itemTextColorPressed,
+                    '--n-item-color': itemColor,
+                    '--n-item-color-hover': itemColorHover,
+                    '--n-item-color-disabled': itemColorDisabled,
+                    '--n-item-color-active': itemColorActive,
+                    '--n-item-color-active-hover': itemColorActiveHover,
+                    '--n-item-color-pressed': itemColorPressed,
+                    '--n-item-border': itemBorder,
+                    '--n-item-border-hover': itemBorderHover,
+                    '--n-item-border-disabled': itemBorderDisabled,
+                    '--n-item-border-active': itemBorderActive,
+                    '--n-item-border-pressed': itemBorderPressed,
+                    '--n-item-padding': itemPadding,
+                    '--n-item-border-radius': itemBorderRadius,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-jumper-font-size': jumperFontSize,
+                    '--n-jumper-text-color': jumperTextColor,
+                    '--n-jumper-text-color-disabled': jumperTextColorDisabled,
+                    '--n-item-margin': itemMargin,
+                    '--n-button-icon-size': buttonIconSize,
+                    '--n-button-icon-color': buttonIconColor,
+                    '--n-button-icon-color-hover': buttonIconColorHover,
+                    '--n-button-icon-color-pressed': buttonIconColorPressed,
+                    '--n-button-color-hover': buttonColorHover,
+                    '--n-button-color': buttonColor,
+                    '--n-button-color-pressed': buttonColorPressed,
+                    '--n-button-border': buttonBorder,
+                    '--n-button-border-hover': buttonBorderHover,
+                    '--n-button-border-pressed': buttonBorderPressed
                 };
             })
         };
     },
     render() {
         // it's ok to expand all prop here since no slots' deps
-        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const renderPrefix = $slots.prefix || prefix;
+        const renderSuffix = $slots.suffix || suffix;
         const renderPrev = prev || $slots.prev;
         const renderNext = next || $slots.next;
+        const renderLabel = label || $slots.label;
         return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-pagination`,
                 disabled && `${mergedClsPrefix}-pagination--disabled`
             ], style: cssVars },
-            prefix || $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, ($slots.prefix
-                ? $slots.prefix
-                : prefix)({
+            renderPrefix ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             }))) : null,
             h("div", { class: [
                     `${mergedClsPrefix}-pagination-item`,
@@ -339,19 +353,61 @@ export default defineComponent({
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(BackwardIcon, null) }))),
             pageItems.map((pageItem, index) => {
+                let contentNode;
+                switch (pageItem.type) {
+                    case 'page':
+                        // eslint-disable-next-line no-case-declarations
+                        const pageNode = pageItem.label;
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'page',
+                                node: pageNode,
+                                active: pageItem.active
+                            });
+                        }
+                        else {
+                            contentNode = pageNode;
+                        }
+                        break;
+                    case 'fast-forward':
+                        // eslint-disable-next-line no-case-declarations
+                        const fastForwardNode = showFastForward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastForwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'fast-forward',
+                                node: fastForwardNode,
+                                active: showFastForward
+                            });
+                        }
+                        else {
+                            contentNode = fastForwardNode;
+                        }
+                        break;
+                    case 'fast-backward':
+                        // eslint-disable-next-line no-case-declarations
+                        const fastBackwardNode = showFastBackward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastBackwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'fast-backward',
+                                node: fastBackwardNode,
+                                active: showFastBackward
+                            });
+                        }
+                        else {
+                            contentNode = fastBackwardNode;
+                        }
+                        break;
+                }
                 return (h("div", { key: index, class: [
                         `${mergedClsPrefix}-pagination-item`,
                         {
                             [`${mergedClsPrefix}-pagination-item--active`]: pageItem.active,
                             [`${mergedClsPrefix}-pagination-item--disabled`]: disabled
                         }
-                    ], onClick: () => handlePageItemClick(pageItem), onMouseenter: () => handlePageItemMouseEnter(pageItem), onMouseleave: () => handlePageItemMouseLeave(pageItem) },
-                    pageItem.type === 'page' ? pageItem.label : null,
-                    pageItem.type === 'fastBackward' ? (showFastBackward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastBackwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }))) : null,
-                    pageItem.type === 'fastForward' ? (showFastForward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastForwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }))) : null));
+                    ], onClick: () => handlePageItemClick(pageItem), onMouseenter: () => handlePageItemMouseEnter(pageItem), onMouseleave: () => handlePageItemMouseLeave(pageItem) }, contentNode));
             }),
             h("div", { class: [
                     `${mergedClsPrefix}-pagination-item`,
@@ -363,7 +419,7 @@ export default defineComponent({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,
-                itemCount: this.itemCount,
+                itemCount: this.mergedItemCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex
             })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ForwardIcon, null) }))),
@@ -371,15 +427,13 @@ export default defineComponent({
             showQuickJumper ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
                 locale.goto,
                 h(NInput, { ref: "jumperRef", value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleQuickJumperKeyUp }))) : null,
-            suffix || $slots.suffix ? (h("div", { class: `${mergedClsPrefix}-pagination-suffix` }, ($slots.suffix
-                ? $slots.suffix
-                : suffix)({
+            renderSuffix ? (h("div", { class: `${mergedClsPrefix}-pagination-suffix` }, renderSuffix({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,
                 startIndex: this.startIndex,
                 endIndex: this.endIndex,
-                itemCount: this.itemCount
+                itemCount: this.mergedItemCount
             }))) : null));
     }
 });

package/es/pagination/src/interface.d.ts

@@ -1,4 +1,4 @@
-import { VNodeChild } from 'vue';
+import { VNode, VNodeChild } from 'vue';
 import { SelectBaseOption } from '../../select/src/interface';
 export declare type PaginationInfo = Parameters<RenderPrefix>[0];
 export declare type RenderPrefix = (info: {
@@ -13,3 +13,12 @@ export declare type PaginationSizeOption = SelectBaseOption<number, string>;
 export declare type RenderSuffix = RenderPrefix;
 export declare type RenderNext = RenderPrefix;
 export declare type RenderPrev = RenderPrefix;
+export declare type PaginationRenderLabel = (info: {
+    type: 'fast-backward' | 'fast-forward';
+    node: VNode;
+    active: boolean;
+} | {
+    type: 'page';
+    node: number;
+    active: boolean;
+}) => VNodeChild;