naive-ui 2.30.3 → 2.30.6

package/es/pagination/src/Pagination.js

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { computed, defineComponent, h, nextTick, ref, toRef, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
+import { NPopselect } from '../../popselect';
 import { NSelect } from '../../select';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
 import { BackwardIcon, FastBackwardIcon, FastForwardIcon, ForwardIcon, MoreIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { paginationLight } from '../styles';
-import { pageItems } from './utils';
+import { createPageItemsInfo } from './utils';
 import style from './styles/index.cssr';
 import { call, resolveSlot, warn, warnOnce, createKey, smallerSize } from '../../_utils';
 import useRtl from '../../_mixins/use-rtl';
@@ -74,8 +75,40 @@ export default defineComponent({
                 return Math.max(pageCount, 1);
             return 1;
         });
-        const showFastForwardRef = ref(false);
-        const showFastBackwardRef = ref(false);
+        const fastForwardActiveRef = ref(false);
+        const fastBackwardActiveRef = ref(false);
+        const showFastForwardMenuRef = ref(false);
+        const showFastBackwardMenuRef = ref(false);
+        const handleFastForwardMouseenter = () => {
+            fastForwardActiveRef.value = true;
+            disableTransitionOneTick();
+        };
+        const handleFastForwardMouseleave = () => {
+            fastForwardActiveRef.value = false;
+            disableTransitionOneTick();
+        };
+        const handleFastBackwardMouseenter = () => {
+            fastBackwardActiveRef.value = true;
+            disableTransitionOneTick();
+        };
+        const handleFastBackwardMouseleave = () => {
+            fastBackwardActiveRef.value = false;
+            disableTransitionOneTick();
+        };
+        const handleMenuSelect = (value) => {
+            doUpdatePage(value);
+        };
+        const pageItemsInfo = computed(() => createPageItemsInfo(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot));
+        watchEffect(() => {
+            if (!pageItemsInfo.value.hasFastBackward) {
+                fastBackwardActiveRef.value = false;
+                showFastBackwardMenuRef.value = false;
+            }
+            else if (!pageItemsInfo.value.hasFastForward) {
+                fastForwardActiveRef.value = false;
+                showFastForwardMenuRef.value = false;
+            }
+        });
         const pageSizeOptionsRef = computed(() => {
             const suffix = localeRef.value.selectionSuffix;
             return props.pageSizes.map((size) => {
@@ -175,13 +208,13 @@ export default defineComponent({
         function fastForward() {
             if (props.disabled)
                 return;
-            const page = Math.min(mergedPageRef.value + (props.pageSlot - 4), mergedPageCountRef.value);
+            const page = Math.min(pageItemsInfo.value.fastForwardTo, mergedPageCountRef.value);
             doUpdatePage(page);
         }
         function fastBackward() {
             if (props.disabled)
                 return;
-            const page = Math.max(mergedPageRef.value - (props.pageSlot - 4), 1);
+            const page = Math.max(pageItemsInfo.value.fastBackwardTo, 1);
             doUpdatePage(page);
         }
         function handleSizePickerChange(value) {
@@ -213,36 +246,6 @@ export default defineComponent({
                     break;
             }
         }
-        function handlePageItemMouseEnter(pageItem) {
-            if (props.disabled)
-                return;
-            switch (pageItem.type) {
-                case 'fast-backward':
-                    showFastBackwardRef.value = true;
-                    break;
-                case 'fast-forward':
-                    showFastForwardRef.value = true;
-                    break;
-                default:
-                    return;
-            }
-            disableTransitionOneTick();
-        }
-        function handlePageItemMouseLeave(pageItem) {
-            if (props.disabled)
-                return;
-            switch (pageItem.type) {
-                case 'fast-backward':
-                    showFastBackwardRef.value = false;
-                    break;
-                case 'fast-forward':
-                    showFastForwardRef.value = false;
-                    break;
-                default:
-                    return;
-            }
-            disableTransitionOneTick();
-        }
         function handleJumperInput(value) {
             jumperValueRef.value = value.replace(/\D+/g, '');
         }
@@ -315,9 +318,9 @@ export default defineComponent({
             selfRef,
             jumperRef,
             mergedPage: mergedPageRef,
-            showFastBackward: showFastBackwardRef,
-            showFastForward: showFastForwardRef,
-            pageItems: computed(() => pageItems(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot)),
+            pageItems: computed(() => {
+                return pageItemsInfo.value.items;
+            }),
             mergedItemCount: mergedItemCountRef,
             jumperValue: jumperValueRef,
             pageSizeOptions: pageSizeOptionsRef,
@@ -328,14 +331,21 @@ export default defineComponent({
             mergedPageCount: mergedPageCountRef,
             startIndex: startIndexRef,
             endIndex: endIndexRef,
+            showFastForwardMenu: showFastForwardMenuRef,
+            showFastBackwardMenu: showFastBackwardMenuRef,
+            fastForwardActive: fastForwardActiveRef,
+            fastBackwardActive: fastBackwardActiveRef,
+            handleMenuSelect,
+            handleFastForwardMouseenter,
+            handleFastForwardMouseleave,
+            handleFastBackwardMouseenter,
+            handleFastBackwardMouseleave,
             handleJumperInput,
             handleBackwardClick: backward,
             handleForwardClick: forward,
             handlePageItemClick,
             handleSizePickerChange,
             handleQuickJumperKeyUp,
-            handlePageItemMouseEnter,
-            handlePageItemMouseLeave,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -343,7 +353,7 @@ 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, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp, onRender } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handleForwardClick, handleQuickJumperKeyUp, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const renderPrefix = $slots.prefix || prefix;
         const renderSuffix = $slots.suffix || suffix;
@@ -381,7 +391,10 @@ export default defineComponent({
             }))),
             pageItems.map((pageItem, index) => {
                 let contentNode;
-                switch (pageItem.type) {
+                let onMouseenter;
+                let onMouseleave;
+                const { type } = pageItem;
+                switch (type) {
                     case 'page':
                         // eslint-disable-next-line no-case-declarations
                         const pageNode = pageItem.label;
@@ -398,44 +411,94 @@ export default defineComponent({
                         break;
                     case 'fast-forward':
                         // eslint-disable-next-line no-case-declarations
-                        const fastForwardNode = showFastForward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                        const fastForwardNode = this.fastForwardActive ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                             default: () => this.rtlEnabled ? (h(FastBackwardIcon, null)) : (h(FastForwardIcon, null))
                         })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
                         if (renderLabel) {
                             contentNode = renderLabel({
                                 type: 'fast-forward',
                                 node: fastForwardNode,
-                                active: showFastForward
+                                active: this.fastForwardActive || this.showFastForwardMenu
                             });
                         }
                         else {
                             contentNode = fastForwardNode;
                         }
+                        onMouseenter = this.handleFastForwardMouseenter;
+                        onMouseleave = this.handleFastForwardMouseleave;
                         break;
                     case 'fast-backward':
                         // eslint-disable-next-line no-case-declarations
-                        const fastBackwardNode = showFastBackward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                        const fastBackwardNode = this.fastBackwardActive ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                             default: () => this.rtlEnabled ? (h(FastForwardIcon, null)) : (h(FastBackwardIcon, null))
                         })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
                         if (renderLabel) {
                             contentNode = renderLabel({
                                 type: 'fast-backward',
                                 node: fastBackwardNode,
-                                active: showFastBackward
+                                active: this.fastBackwardActive || this.showFastBackwardMenu
                             });
                         }
                         else {
                             contentNode = fastBackwardNode;
                         }
+                        onMouseenter = this.handleFastBackwardMouseenter;
+                        onMouseleave = this.handleFastBackwardMouseleave;
                         break;
                 }
-                return (h("div", { key: index, class: [
+                const itemNode = (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) }, contentNode));
+                        pageItem.active && `${mergedClsPrefix}-pagination-item--active`,
+                        type !== 'page' &&
+                            ((type === 'fast-backward' && this.showFastBackwardMenu) ||
+                                (type === 'fast-forward' && this.showFastForwardMenu)) &&
+                            `${mergedClsPrefix}-pagination-item--hover`,
+                        disabled && `${mergedClsPrefix}-pagination-item--disabled`,
+                        type === 'page' &&
+                            `${mergedClsPrefix}-pagination-item--clickable`
+                    ], onClick: () => handlePageItemClick(pageItem), onMouseenter: onMouseenter, onMouseleave: onMouseleave }, contentNode));
+                if (type === 'page' &&
+                    !pageItem.mayBeFastBackward &&
+                    !pageItem.mayBeFastForward) {
+                    return itemNode;
+                }
+                else {
+                    const key = pageItem.type === 'page'
+                        ? pageItem.mayBeFastBackward
+                            ? 'fast-backward'
+                            : 'fast-forward'
+                        : pageItem.type;
+                    return (h(NPopselect, { key: key, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
+                            peers: {
+                                InternalSelectMenu: {
+                                    height: 'calc(var(--n-option-height) * 4.6)'
+                                }
+                            }
+                        }, nodeProps: () => ({
+                            style: {
+                                justifyContent: 'center'
+                            }
+                        }), show: type === 'page'
+                            ? false
+                            : type === 'fast-backward'
+                                ? this.showFastBackwardMenu
+                                : this.showFastForwardMenu, onUpdateShow: (value) => {
+                            if (type === 'page')
+                                return;
+                            if (value) {
+                                if (type === 'fast-backward') {
+                                    this.showFastBackwardMenu = value;
+                                }
+                                else {
+                                    this.showFastForwardMenu = value;
+                                }
+                            }
+                            else {
+                                this.showFastBackwardMenu = false;
+                                this.showFastForwardMenu = false;
+                            }
+                        }, options: pageItem.type !== 'page' ? pageItem.options : [], onUpdateValue: this.handleMenuSelect, scrollable: true, internalShowCheckmark: false }, { default: () => itemNode }));
+                }
             }),
             h("div", { class: [
                     `${mergedClsPrefix}-pagination-item`,

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

@@ -1,4 +1,4 @@
-import { VNode, VNodeChild } from 'vue';
+import { VNodeChild } from 'vue';
 import { SelectBaseOption } from '../../select/src/interface';
 export declare type Size = 'small' | 'medium' | 'large';
 export declare type PaginationInfo = Parameters<RenderPrefix>[0];
@@ -16,7 +16,7 @@ export declare type RenderNext = RenderPrefix;
 export declare type RenderPrev = RenderPrefix;
 export declare type PaginationRenderLabel = (info: {
     type: 'fast-backward' | 'fast-forward';
-    node: VNode;
+    node: VNodeChild;
     active: boolean;
 } | {
     type: 'page';

package/es/pagination/src/styles/index.cssr.js

@@ -1,4 +1,14 @@
-import { cB, c, cM, cNotM } from '../../../_utils/cssr'; // vars:
+import { cB, c, cM, cNotM } from '../../../_utils/cssr';
+const hoverStyleProps = `
+ background: var(--n-item-color-hover);
+ color: var(--n-item-text-color-hover);
+ border: var(--n-item-border-hover);
+`;
+const hoverStyleChildren = [cM('button', `
+ background: var(--n-button-color-hover);
+ border: var(--n-button-border-hover);
+ color: var(--n-button-icon-color-hover);
+ `)]; // vars:
 // --n-item-font-size
 // --n-select-width
 // --n-input-width
@@ -90,15 +100,7 @@ export default cB('pagination', `
  padding: 0;
  `, [cB('base-icon', `
  font-size: var(--n-button-icon-size);
- `)]), cNotM('disabled', [c('&:hover', `
- background: var(--n-item-color-hover);
- color: var(--n-item-text-color-hover);
- border: var(--n-item-border-hover);
- `, [cM('button', `
- background: var(--n-button-color-hover);
- border: var(--n-button-border-hover);
- color: var(--n-button-icon-color-hover);
- `)]), c('&:active', `
+ `)]), cNotM('disabled', [cM('hover', hoverStyleProps, hoverStyleChildren), c('&:hover', hoverStyleProps, hoverStyleChildren), c('&:active', `
  background: var(--n-item-color-pressed);
  color: var(--n-item-text-color-pressed);
  border: var(--n-item-border-pressed);

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

@@ -1,13 +1,23 @@
-declare function pagesToShow(currentPage: number, pageCount: number, pageSlot?: number): number[];
+declare function createPageItemsInfo(currentPage: number, pageCount: number, pageSlot: number): {
+    hasFastBackward: boolean;
+    hasFastForward: boolean;
+    fastBackwardTo: number;
+    fastForwardTo: number;
+    items: PageItem[];
+};
 export declare type PageItem = {
     type: 'fast-backward' | 'fast-forward';
-    label?: undefined;
+    label: undefined;
     active: false;
+    options: Array<{
+        label: string;
+        value: number;
+    }>;
 } | {
     type: 'page';
     label: number;
     active: boolean;
+    mayBeFastForward: boolean;
+    mayBeFastBackward: boolean;
 };
-declare function mapPagesToPageItems(pages: number[], currentPage: number): PageItem[];
-declare function pageItems(currentPage: number, pageCount: number, pageSlot?: number): PageItem[];
-export { pagesToShow, mapPagesToPageItems, pageItems };
+export { createPageItemsInfo };

package/es/pagination/src/utils.js

@@ -1,8 +1,49 @@
-function pagesToShow(currentPage, pageCount, pageSlot = 9) {
-    if (pageCount === 1)
-        return [1];
-    if (pageCount === 2)
-        return [1, 2];
+function createPageItemsInfo(currentPage, pageCount, pageSlot) {
+    let hasFastBackward = false;
+    let hasFastForward = false;
+    let fastBackwardTo = 1;
+    let fastForwardTo = pageCount;
+    if (pageCount === 1) {
+        return {
+            hasFastBackward: false,
+            hasFastForward: false,
+            fastForwardTo,
+            fastBackwardTo,
+            items: [
+                {
+                    type: 'page',
+                    label: 1,
+                    active: currentPage === 1,
+                    mayBeFastBackward: false,
+                    mayBeFastForward: false
+                }
+            ]
+        };
+    }
+    if (pageCount === 2) {
+        return {
+            hasFastBackward: false,
+            hasFastForward: false,
+            fastForwardTo,
+            fastBackwardTo,
+            items: [
+                {
+                    type: 'page',
+                    label: 1,
+                    active: currentPage === 1,
+                    mayBeFastBackward: false,
+                    mayBeFastForward: false
+                },
+                {
+                    type: 'page',
+                    label: 2,
+                    active: currentPage === 2,
+                    mayBeFastBackward: true,
+                    mayBeFastForward: false
+                }
+            ]
+        };
+    }
     const firstPage = 1;
     const lastPage = pageCount;
     let middleStart = currentPage;
@@ -19,60 +60,86 @@ function pagesToShow(currentPage, pageCount, pageSlot = 9) {
     if (middleEnd < lastPage - 2)
         rightSplit = true;
     const items = [];
-    items.push(firstPage);
+    items.push({
+        type: 'page',
+        label: 1,
+        active: currentPage === 1,
+        mayBeFastBackward: false,
+        mayBeFastForward: false
+    });
     if (leftSplit) {
-        items.push(-2);
+        hasFastBackward = true;
+        fastBackwardTo = middleStart - 1;
+        items.push({
+            type: 'fast-backward',
+            active: false,
+            label: undefined,
+            options: createRange(firstPage + 1, middleStart - 1)
+        });
     }
     else if (lastPage >= firstPage + 1) {
-        items.push(firstPage + 1);
+        items.push({
+            type: 'page',
+            label: firstPage + 1,
+            mayBeFastBackward: true,
+            mayBeFastForward: false,
+            active: currentPage === firstPage + 1
+        });
     }
     for (let i = middleStart; i <= middleEnd; ++i) {
-        items.push(i);
+        items.push({
+            type: 'page',
+            label: i,
+            mayBeFastBackward: false,
+            mayBeFastForward: false,
+            active: currentPage === i
+        });
     }
     if (rightSplit) {
-        items.push(-1);
+        hasFastForward = true;
+        fastForwardTo = middleEnd + 1;
+        items.push({
+            type: 'fast-forward',
+            active: false,
+            label: undefined,
+            options: createRange(middleEnd + 1, lastPage - 1)
+        });
     }
     else if (middleEnd === lastPage - 2 &&
-        items[items.length - 1] !== lastPage - 1) {
-        items.push(lastPage - 1);
+        items[items.length - 1].label !== lastPage - 1) {
+        items.push({
+            type: 'page',
+            mayBeFastForward: true,
+            mayBeFastBackward: false,
+            label: lastPage - 1,
+            active: currentPage === lastPage - 1
+        });
     }
-    if (items[items.length - 1] !== lastPage)
-        items.push(lastPage);
-    return items;
-}
-function mapPagesToPageItems(pages, currentPage) {
-    return pages.map((page) => {
-        switch (page) {
-            case -2:
-                return {
-                    type: 'fast-backward',
-                    active: false
-                };
-            case -1:
-                return {
-                    type: 'fast-forward',
-                    active: false
-                };
-            default:
-                if (page === currentPage) {
-                    return {
-                        type: 'page',
-                        label: page,
-                        active: true
-                    };
-                }
-                else {
-                    return {
-                        type: 'page',
-                        label: page,
-                        active: false
-                    };
-                }
-        }
-    });
+    if (items[items.length - 1].label !== lastPage) {
+        items.push({
+            type: 'page',
+            mayBeFastForward: false,
+            mayBeFastBackward: false,
+            label: lastPage,
+            active: currentPage === lastPage
+        });
+    }
+    return {
+        hasFastBackward,
+        hasFastForward,
+        fastBackwardTo,
+        fastForwardTo,
+        items
+    };
 }
-function pageItems(currentPage, pageCount, pageSlot) {
-    const pages = pagesToShow(currentPage, pageCount, pageSlot);
-    return mapPagesToPageItems(pages, currentPage);
+function createRange(from, to) {
+    const range = [];
+    for (let i = from; i <= to; ++i) {
+        range.push({
+            label: `${i}`,
+            value: i
+        });
+    }
+    return range;
 }
-export { pagesToShow, mapPagesToPageItems, pageItems };
+export { createPageItemsInfo };

package/es/pagination/styles/dark.js

@@ -1,4 +1,5 @@
 import { changeColor } from 'seemly';
+import { popselectDark } from '../../popselect/styles';
 import { selectDark } from '../../select/styles';
 import { inputDark } from '../../input/styles';
 import { commonDark } from '../../_styles/common';
@@ -8,7 +9,8 @@ const paginationDark = {
     common: commonDark,
     peers: {
         Select: selectDark,
-        Input: inputDark
+        Input: inputDark,
+        Popselect: popselectDark
     },
     self(vars) {
         const { primaryColor, opacity3 } = vars;

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

@@ -330,6 +330,77 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
         paddingLarge: string;
         clearSize: string;
     }, any>;
+    Popselect: import("../../_mixins").Theme<"Popselect", {
+        menuBoxShadow: string;
+    }, {
+        Popover: import("../../_mixins").Theme<"Popover", {
+            fontSize: string;
+            borderRadius: string;
+            color: string;
+            dividerColor: string;
+            textColor: string;
+            boxShadow: string;
+            space: string;
+            spaceArrow: string;
+            arrowOffset: string;
+            arrowOffsetVertical: string;
+            arrowHeight: string;
+            padding: string;
+        }, any>;
+        InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+            optionFontSizeSmall: string;
+            optionFontSizeMedium: string;
+            optionFontSizeLarge: string;
+            optionFontSizeHuge: string;
+            optionHeightSmall: string;
+            optionHeightMedium: string;
+            optionHeightLarge: string;
+            optionHeightHuge: string;
+            borderRadius: string;
+            color: string;
+            groupHeaderTextColor: string;
+            actionDividerColor: string;
+            optionTextColor: string;
+            optionTextColorPressed: string;
+            optionTextColorDisabled: string;
+            optionTextColorActive: string;
+            optionOpacityDisabled: string;
+            optionCheckColor: string;
+            optionColorPending: string;
+            optionColorActive: string;
+            optionColorActivePending: string;
+            actionTextColor: string;
+            loadingColor: string;
+            height: string;
+            paddingSmall: string;
+            paddingMedium: string;
+            paddingLarge: string;
+            paddingHuge: string;
+            optionPaddingSmall: string;
+            optionPaddingMedium: string;
+            optionPaddingLarge: string;
+            optionPaddingHuge: string;
+            loadingSize: string;
+        }, {
+            Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                color: string;
+                colorHover: string;
+            }, any>;
+            Empty: import("../../_mixins").Theme<"Empty", {
+                fontSizeSmall: string;
+                fontSizeMedium: string;
+                fontSizeLarge: string;
+                fontSizeHuge: string;
+                textColor: string;
+                iconColor: string;
+                extraTextColor: string;
+                iconSizeSmall: string;
+                iconSizeMedium: string;
+                iconSizeLarge: string;
+                iconSizeHuge: string;
+            }, any>;
+        }>;
+    }>;
 }>;
 export default paginationLight;
 export declare type PaginationTheme = typeof paginationLight;

package/es/pagination/styles/light.js

@@ -1,3 +1,4 @@
+import { popselectLight } from '../../popselect/styles';
 import { selectLight } from '../../select/styles';
 import { inputLight } from '../../input/styles';
 import { commonLight } from '../../_styles/common';
@@ -16,7 +17,8 @@ const paginationLight = createTheme({
     common: commonLight,
     peers: {
         Select: selectLight,
-        Input: inputLight
+        Input: inputLight,
+        Popselect: popselectLight
     },
     self
 });