naive-ui 2.23.2 → 2.24.3

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>>;
@@ -139,6 +140,7 @@ declare const paginationProps: {
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -366,6 +368,7 @@ declare const paginationProps: {
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -593,6 +596,7 @@ declare const paginationProps: {
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -740,7 +744,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 +763,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>>;
@@ -862,6 +867,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -1089,6 +1095,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -1316,6 +1323,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -1676,6 +1684,7 @@ declare const _default: import("vue").DefineComponent<{
                     clearColorHover: string;
                     clearColorPressed: string;
                     paddingSingle: string;
+                    paddingMultiple: string;
                     clearSize: string;
                     arrowSize: string;
                 }, {
@@ -1861,6 +1870,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorHover: string;
                         clearColorPressed: string;
                         paddingSingle: string;
+                        paddingMultiple: string;
                         clearSize: string;
                         arrowSize: string;
                     }, {
@@ -1994,46 +2004,48 @@ declare const _default: import("vue").DefineComponent<{
         '--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;
-    readonly defaultPage?: unknown;
-    readonly itemCount?: unknown;
-    readonly pageCount?: unknown;
-    readonly defaultPageCount?: unknown;
-    readonly showSizePicker?: unknown;
-    readonly pageSize?: unknown;
-    readonly defaultPageSize?: unknown;
-    readonly pageSizes?: unknown;
-    readonly showQuickJumper?: unknown;
-    readonly disabled?: unknown;
-    readonly pageSlot?: unknown;
-    readonly prev?: unknown;
-    readonly next?: unknown;
-    readonly prefix?: unknown;
-    readonly suffix?: unknown;
-    readonly 'onUpdate:page'?: unknown;
-    readonly onUpdatePage?: unknown;
-    readonly 'onUpdate:pageSize'?: unknown;
-    readonly onUpdatePageSize?: unknown;
-    readonly onPageSizeChange?: unknown;
-    readonly onChange?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    disabled: boolean;
-    defaultPage: number;
-    defaultPageCount: number;
-    showSizePicker: boolean;
-    defaultPageSize: number;
-    pageSizes: (number | PaginationSizeOption)[];
-    showQuickJumper: boolean;
-    pageSlot: number;
-} & {
-    prefix?: RenderPrefix | undefined;
-    page?: number | undefined;
-    onChange?: MaybeArray<(page: number) => void> | undefined;
-    theme?: import("../../_mixins").Theme<"Pagination", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly page: NumberConstructor;
+    readonly defaultPage: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly itemCount: NumberConstructor;
+    readonly pageCount: NumberConstructor;
+    readonly defaultPageCount: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly showSizePicker: BooleanConstructor;
+    readonly pageSize: NumberConstructor;
+    readonly defaultPageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 10;
+    };
+    readonly pageSizes: {
+        readonly type: PropType<(number | PaginationSizeOption)[]>;
+        readonly default: () => number[];
+    };
+    readonly showQuickJumper: BooleanConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly pageSlot: {
+        readonly type: NumberConstructor;
+        readonly default: 9;
+    };
+    readonly prev: PropType<RenderPrefix>;
+    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>>;
+    readonly onUpdatePageSize: PropType<MaybeArray<(pageSize: number) => void>>;
+    /** @deprecated */
+    readonly onPageSizeChange: PropType<MaybeArray<(pageSize: number) => void>>;
+    /** @deprecated */
+    readonly onChange: PropType<MaybeArray<(page: number) => void>>;
+    readonly theme: PropType<import("../../_mixins").Theme<"Pagination", {
         buttonColor: string;
         buttonColorHover: string;
         buttonColorPressed: string;
@@ -2128,6 +2140,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -2259,8 +2272,8 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Pagination", {
+    }>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Pagination", {
         buttonColor: string;
         buttonColorHover: string;
         buttonColorPressed: string;
@@ -2355,6 +2368,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -2486,8 +2500,8 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Pagination", {
+    }>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Pagination", {
         buttonColor: string;
         buttonColorHover: string;
         buttonColorPressed: string;
@@ -2582,6 +2596,7 @@ declare const _default: import("vue").DefineComponent<{
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {
@@ -2713,19 +2728,8 @@ declare const _default: import("vue").DefineComponent<{
             paddingLarge: string;
             clearSize: string;
         }, any>;
-    }>> | undefined;
-    prev?: RenderPrefix | undefined;
-    next?: RenderPrefix | undefined;
-    suffix?: RenderPrefix | undefined;
-    itemCount?: number | undefined;
-    pageCount?: number | undefined;
-    pageSize?: number | undefined;
-    "onUpdate:page"?: MaybeArray<(page: number) => void> | undefined;
-    onUpdatePage?: MaybeArray<(page: number) => void> | undefined;
-    "onUpdate:pageSize"?: MaybeArray<(pageSize: number) => void> | undefined;
-    onUpdatePageSize?: MaybeArray<(pageSize: number) => void> | undefined;
-    onPageSizeChange?: MaybeArray<(pageSize: number) => void> | undefined;
-}>, {
+    }>>>;
+}>>, {
     disabled: boolean;
     defaultPage: number;
     defaultPageCount: number;

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);
@@ -195,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;
             }
@@ -207,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:
@@ -222,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:
@@ -318,16 +324,17 @@ export default defineComponent({
     },
     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,
@@ -349,16 +356,58 @@ export default defineComponent({
                 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`,
@@ -378,9 +427,7 @@ 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,

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;

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

@@ -1,7 +1,7 @@
 declare function pagesToShow(currentPage: number, pageCount: number, pageSlot?: number): number[];
 export declare type PageItem = {
-    type: 'fastBackward' | 'fastForward';
-    label: string;
+    type: 'fast-backward' | 'fast-forward';
+    label?: undefined;
     active: false;
 } | {
     type: 'page';

package/es/pagination/src/utils.js

@@ -45,14 +45,12 @@ function mapPagesToPageItems(pages, currentPage) {
         switch (page) {
             case -2:
                 return {
-                    type: 'fastBackward',
-                    label: 'fastBackward',
+                    type: 'fast-backward',
                     active: false
                 };
             case -1:
                 return {
-                    type: 'fastForward',
-                    label: 'fastForward',
+                    type: 'fast-forward',
                     active: false
                 };
             default:

package/es/pagination/styles/light.d.ts

@@ -137,6 +137,7 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             clearColorHover: string;
             clearColorPressed: string;
             paddingSingle: string;
+            paddingMultiple: string;
             clearSize: string;
             arrowSize: string;
         }, {