naive-ui 2.32.0 → 2.32.2

package/lib/pagination/src/Pagination.js

@@ -18,16 +18,13 @@ const utils_1 = require("./utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const _utils_1 = require("../../_utils");
 const use_rtl_1 = require("../../_mixins/use-rtl");
-exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { page: Number, defaultPage: {
+exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { simple: Boolean, page: Number, defaultPage: {
         type: Number,
         default: 1
     }, itemCount: Number, pageCount: Number, defaultPageCount: {
         type: Number,
         default: 1
-    }, showSizePicker: Boolean, pageSize: Number, defaultPageSize: {
-        type: Number,
-        default: 10
-    }, pageSizes: {
+    }, showSizePicker: Boolean, pageSize: Number, defaultPageSize: Number, pageSizes: {
         type: Array,
         default() {
             return [10];
@@ -38,7 +35,10 @@ exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, disabled: Boolean, pageSlot: {
         type: Number,
         default: 9
-    }, prev: Function, next: Function, prefix: Function, suffix: Function, label: 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, displayOrder: {
+        type: Array,
+        default: ['pages', 'size-picker', 'quick-jumper']
+    }, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
     /** @deprecated */
     onPageSizeChange: [Function, Array], 
     /** @deprecated */
@@ -64,10 +64,17 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Pagination', '-pagination', index_cssr_1.default, styles_1.paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
         const selfRef = (0, vue_1.ref)(null);
-        const jumperRef = (0, vue_1.ref)(null);
-        const jumperValueRef = (0, vue_1.ref)('');
         const uncontrolledPageRef = (0, vue_1.ref)(props.defaultPage);
-        const uncontrolledPageSizeRef = (0, vue_1.ref)(props.defaultPageSize);
+        const getDefaultPageSize = () => {
+            const { defaultPageSize } = props;
+            if (defaultPageSize !== undefined)
+                return defaultPageSize;
+            const pageSizeOption = props.pageSizes[0];
+            if (typeof pageSizeOption === 'number')
+                return pageSizeOption;
+            return pageSizeOption.value || 10;
+        };
+        const uncontrolledPageSizeRef = (0, vue_1.ref)(getDefaultPageSize());
         const mergedPageRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'page'), uncontrolledPageRef);
         const mergedPageSizeRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'pageSize'), uncontrolledPageSizeRef);
         const mergedPageCountRef = (0, vue_1.computed)(() => {
@@ -81,6 +88,11 @@ exports.default = (0, vue_1.defineComponent)({
                 return Math.max(pageCount, 1);
             return 1;
         });
+        const jumperValueRef = (0, vue_1.ref)('');
+        (0, vue_1.watchEffect)(() => {
+            void props.simple;
+            jumperValueRef.value = String(mergedPageRef.value);
+        });
         const fastForwardActiveRef = (0, vue_1.ref)(false);
         const fastBackwardActiveRef = (0, vue_1.ref)(false);
         const showFastForwardMenuRef = (0, vue_1.ref)(false);
@@ -171,7 +183,7 @@ exports.default = (0, vue_1.defineComponent)({
         function doUpdatePage(page) {
             if (page === mergedPageRef.value)
                 return;
-            const { 'onUpdate:page': _onUpdatePage, onUpdatePage, onChange } = props;
+            const { 'onUpdate:page': _onUpdatePage, onUpdatePage, onChange, simple } = props;
             if (_onUpdatePage)
                 (0, _utils_1.call)(_onUpdatePage, page);
             if (onUpdatePage)
@@ -180,6 +192,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (onChange)
                 (0, _utils_1.call)(onChange, page);
             uncontrolledPageRef.value = page;
+            if (simple) {
+                jumperValueRef.value = String(page);
+            }
         }
         function doUpdatePageSize(pageSize) {
             if (pageSize === mergedPageSizeRef.value)
@@ -226,17 +241,18 @@ exports.default = (0, vue_1.defineComponent)({
         function handleSizePickerChange(value) {
             doUpdatePageSize(value);
         }
-        function handleQuickJumperKeyUp(e) {
-            var _a;
-            if (e.key === 'Enter') {
-                const page = parseInt(jumperValueRef.value);
-                if (!Number.isNaN(page)) {
-                    doUpdatePage(Math.max(1, Math.min(page, mergedPageCountRef.value)));
-                    jumperValueRef.value = '';
-                    (_a = jumperRef.value) === null || _a === void 0 ? void 0 : _a.blur();
-                }
+        function doQuickJump() {
+            const page = parseInt(jumperValueRef.value);
+            if (Number.isNaN(page))
+                return;
+            doUpdatePage(Math.max(1, Math.min(page, mergedPageCountRef.value)));
+            if (!props.simple) {
+                jumperValueRef.value = '';
             }
         }
+        function handleQuickJumperChange() {
+            doQuickJump();
+        }
         function handlePageItemClick(pageItem) {
             if (props.disabled)
                 return;
@@ -322,7 +338,6 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
             selfRef,
-            jumperRef,
             mergedPage: mergedPageRef,
             pageItems: (0, vue_1.computed)(() => {
                 return pageItemsInfo.value.items;
@@ -351,7 +366,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleForwardClick: forward,
             handlePageItemClick,
             handleSizePickerChange,
-            handleQuickJumperKeyUp,
+            handleQuickJumperChange,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -359,7 +374,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         // it's ok to expand all prop here since no slots' deps
-        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;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, simple, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handleForwardClick, handleQuickJumperChange, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const renderPrefix = $slots.prefix || prefix;
         const renderSuffix = $slots.suffix || suffix;
@@ -370,7 +385,8 @@ exports.default = (0, vue_1.defineComponent)({
                 `${mergedClsPrefix}-pagination`,
                 this.themeClass,
                 this.rtlEnabled && `${mergedClsPrefix}-pagination--rtl`,
-                disabled && `${mergedClsPrefix}-pagination--disabled`
+                disabled && `${mergedClsPrefix}-pagination--disabled`,
+                simple && `${mergedClsPrefix}-pagination--simple`
             ], style: cssVars },
             renderPrefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({
                 page: mergedPage,
@@ -380,152 +396,179 @@ exports.default = (0, vue_1.defineComponent)({
                 endIndex: this.endIndex,
                 itemCount: this.mergedItemCount
             }))) : null,
-            (0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefix}-pagination-item`,
-                    !renderPrev && `${mergedClsPrefix}-pagination-item--button`,
-                    (mergedPage <= 1 || mergedPage > mergedPageCount || disabled) &&
-                        `${mergedClsPrefix}-pagination-item--disabled`
-                ], onClick: handleBackwardClick }, renderPrev ? (renderPrev({
-                page: mergedPage,
-                pageSize: mergedPageSize,
-                pageCount: mergedPageCount,
-                startIndex: this.startIndex,
-                endIndex: this.endIndex,
-                itemCount: this.mergedItemCount
-            })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.ForwardIcon, null) : (0, vue_1.h)(icons_1.BackwardIcon, null)
-            }))),
-            pageItems.map((pageItem, index) => {
-                let contentNode;
-                let onMouseenter;
-                let onMouseleave;
-                const { type } = pageItem;
-                switch (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 = this.fastForwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                            default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastBackwardIcon, null)) : ((0, vue_1.h)(icons_1.FastForwardIcon, null))
-                        })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
-                        if (renderLabel) {
-                            contentNode = renderLabel({
-                                type: 'fast-forward',
-                                node: fastForwardNode,
-                                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 = this.fastBackwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                            default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastForwardIcon, null)) : ((0, vue_1.h)(icons_1.FastBackwardIcon, null))
-                        })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
-                        if (renderLabel) {
-                            contentNode = renderLabel({
-                                type: 'fast-backward',
-                                node: fastBackwardNode,
-                                active: this.fastBackwardActive || this.showFastBackwardMenu
-                            });
-                        }
-                        else {
-                            contentNode = fastBackwardNode;
-                        }
-                        onMouseenter = this.handleFastBackwardMouseenter;
-                        onMouseleave = this.handleFastBackwardMouseleave;
-                        break;
-                }
-                const itemNode = ((0, vue_1.h)("div", { key: index, class: [
-                        `${mergedClsPrefix}-pagination-item`,
-                        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 ((0, vue_1.h)(popselect_1.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)'
+            this.displayOrder.map((part) => {
+                switch (part) {
+                    case 'pages':
+                        return ((0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)("div", { class: [
+                                    `${mergedClsPrefix}-pagination-item`,
+                                    !renderPrev &&
+                                        `${mergedClsPrefix}-pagination-item--button`,
+                                    (mergedPage <= 1 ||
+                                        mergedPage > mergedPageCount ||
+                                        disabled) &&
+                                        `${mergedClsPrefix}-pagination-item--disabled`
+                                ], onClick: handleBackwardClick }, renderPrev ? (renderPrev({
+                                page: mergedPage,
+                                pageSize: mergedPageSize,
+                                pageCount: mergedPageCount,
+                                startIndex: this.startIndex,
+                                endIndex: this.endIndex,
+                                itemCount: this.mergedItemCount
+                            })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.ForwardIcon, null) : (0, vue_1.h)(icons_1.BackwardIcon, null)
+                            }))),
+                            simple ? ((0, vue_1.h)(vue_1.Fragment, null,
+                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
+                                    (0, vue_1.h)(input_1.NInput, { value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onChange: handleQuickJumperChange })),
+                                "\u00A0/ ",
+                                mergedPageCount)) : (pageItems.map((pageItem, index) => {
+                                let contentNode;
+                                let onMouseenter;
+                                let onMouseleave;
+                                const { type } = pageItem;
+                                switch (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 = this.fastForwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                            default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastBackwardIcon, null)) : ((0, vue_1.h)(icons_1.FastForwardIcon, null))
+                                        })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
+                                        if (renderLabel) {
+                                            contentNode = renderLabel({
+                                                type: 'fast-forward',
+                                                node: fastForwardNode,
+                                                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 = this.fastBackwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                            default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastForwardIcon, null)) : ((0, vue_1.h)(icons_1.FastBackwardIcon, null))
+                                        })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
+                                        if (renderLabel) {
+                                            contentNode = renderLabel({
+                                                type: 'fast-backward',
+                                                node: fastBackwardNode,
+                                                active: this.fastBackwardActive ||
+                                                    this.showFastBackwardMenu
+                                            });
+                                        }
+                                        else {
+                                            contentNode = fastBackwardNode;
+                                        }
+                                        onMouseenter = this.handleFastBackwardMouseenter;
+                                        onMouseleave = this.handleFastBackwardMouseleave;
+                                        break;
                                 }
-                            }
-                        }, 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;
+                                const itemNode = ((0, vue_1.h)("div", { key: index, class: [
+                                        `${mergedClsPrefix}-pagination-item`,
+                                        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 {
-                                    this.showFastForwardMenu = value;
+                                    const key = pageItem.type === 'page'
+                                        ? pageItem.mayBeFastBackward
+                                            ? 'fast-backward'
+                                            : 'fast-forward'
+                                        : pageItem.type;
+                                    return ((0, vue_1.h)(popselect_1.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 }));
                                 }
-                            }
-                            else {
-                                this.showFastBackwardMenu = false;
-                                this.showFastForwardMenu = false;
-                            }
-                        }, options: pageItem.type !== 'page' ? pageItem.options : [], onUpdateValue: this.handleMenuSelect, scrollable: true, internalShowCheckmark: false }, { default: () => itemNode }));
+                            })),
+                            (0, vue_1.h)("div", { class: [
+                                    `${mergedClsPrefix}-pagination-item`,
+                                    !renderNext &&
+                                        `${mergedClsPrefix}-pagination-item--button`,
+                                    {
+                                        [`${mergedClsPrefix}-pagination-item--disabled`]: mergedPage < 1 ||
+                                            mergedPage >= mergedPageCount ||
+                                            disabled
+                                    }
+                                ], onClick: handleForwardClick }, renderNext ? (renderNext({
+                                page: mergedPage,
+                                pageSize: mergedPageSize,
+                                pageCount: mergedPageCount,
+                                itemCount: this.mergedItemCount,
+                                startIndex: this.startIndex,
+                                endIndex: this.endIndex
+                            })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.BackwardIcon, null) : (0, vue_1.h)(icons_1.ForwardIcon, null)
+                            })))));
+                    case 'size-picker': {
+                        return !simple && showSizePicker ? ((0, vue_1.h)(select_1.NSelect, { internalShowCheckmark: false, size: selectSize, placeholder: "", options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })) : null;
+                    }
+                    case 'quick-jumper':
+                        return !simple && showQuickJumper ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
+                            (0, _utils_1.resolveSlot)(this.$slots.goto, () => [locale.goto]),
+                            (0, vue_1.h)(input_1.NInput, { value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onChange: handleQuickJumperChange }))) : null;
+                    default:
+                        return null;
                 }
             }),
-            (0, vue_1.h)("div", { class: [
-                    `${mergedClsPrefix}-pagination-item`,
-                    !renderNext && `${mergedClsPrefix}-pagination-item--button`,
-                    {
-                        [`${mergedClsPrefix}-pagination-item--disabled`]: mergedPage < 1 || mergedPage >= mergedPageCount || disabled
-                    }
-                ], onClick: handleForwardClick }, renderNext ? (renderNext({
-                page: mergedPage,
-                pageSize: mergedPageSize,
-                pageCount: mergedPageCount,
-                itemCount: this.mergedItemCount,
-                startIndex: this.startIndex,
-                endIndex: this.endIndex
-            })) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.BackwardIcon, null) : (0, vue_1.h)(icons_1.ForwardIcon, null)
-            }))),
-            showSizePicker ? ((0, vue_1.h)(select_1.NSelect, { internalShowCheckmark: false, size: selectSize, placeholder: "", options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })) : null,
-            showQuickJumper ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
-                (0, _utils_1.resolveSlot)(this.$slots.goto, () => [locale.goto]),
-                (0, vue_1.h)(input_1.NInput, { ref: "jumperRef", value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleQuickJumperKeyUp }))) : null,
             renderSuffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-suffix` }, renderSuffix({
                 page: mergedPage,
                 pageSize: mergedPageSize,

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

@@ -132,4 +132,10 @@ exports.default = (0, cssr_1.cB)('pagination', `
  cursor: not-allowed;
  `, [(0, cssr_1.cB)('pagination-quick-jumper', `
  color: var(--n-jumper-text-color-disabled);
- `)])]);
+ `)]), (0, cssr_1.cM)('simple', `
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ `, [(0, cssr_1.cB)('pagination-quick-jumper', [(0, cssr_1.cB)('input', `
+ margin: 0;
+ `)])])]);

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

@@ -271,6 +271,7 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
         }>;
     }>;
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/lib/popover/src/Popover.js

@@ -354,8 +354,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleClickOutside,
             handleMouseMoveOutside,
             setBodyInstance,
-            positionManuallyRef: positionManuallyRef,
-            isMountedRef: isMountedRef,
+            positionManuallyRef,
+            isMountedRef,
             zIndexRef: (0, vue_1.toRef)(props, 'zIndex'),
             extraClassRef: (0, vue_1.toRef)(props, 'internalExtraClass'),
             internalRenderBodyRef: (0, vue_1.toRef)(props, 'internalRenderBody')

package/lib/popover/src/PopoverBody.js

@@ -7,6 +7,7 @@ exports.renderArrow = exports.popoverBodyProps = void 0;
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vdirs_1 = require("vdirs");
+const seemly_1 = require("seemly");
 const scrollbar_1 = require("../../_internal/scrollbar");
 const interface_1 = require("../../drawer/src/interface");
 const interface_2 = require("../../modal/src/interface");
@@ -149,13 +150,13 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleMouseMoveOutside(e) {
             if (props.trigger === 'hover' &&
-                !getTriggerElement().contains(e.target)) {
+                !getTriggerElement().contains((0, seemly_1.getPreciseEventTarget)(e))) {
                 NPopover.handleMouseMoveOutside(e);
             }
         }
         function handleClickOutside(e) {
             if ((props.trigger === 'click' &&
-                !getTriggerElement().contains(e.target)) ||
+                !getTriggerElement().contains((0, seemly_1.getPreciseEventTarget)(e))) ||
                 props.onClickoutside) {
                 NPopover.handleClickOutside(e);
             }

package/lib/popselect/src/Popselect.d.ts

@@ -26,7 +26,7 @@ export declare const popselectProps: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
-    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    nodeProps: PropType<import("../..").SelectNodeProps>;
     virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
@@ -345,7 +345,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
-    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    nodeProps: PropType<import("../..").SelectNodeProps>;
     virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
@@ -875,7 +875,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
-    nodeProps: PropType<import("../../_internal/select-menu/src/interface").NodeProps>;
+    nodeProps: PropType<import("../..").SelectNodeProps>;
     virtualScroll: BooleanConstructor;
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {

package/lib/radio/styles/dark.js

@@ -13,7 +13,7 @@ const radioDark = {
         const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
         return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
-            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }
 };
 exports.default = radioDark;

package/lib/radio/styles/light.js

@@ -10,7 +10,7 @@ const self = (vars) => {
     const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };
 const radioLight = {
     name: 'Radio',

package/lib/select/index.d.ts

@@ -1,5 +1,5 @@
 export { default as NSelect, selectProps } from './src/Select';
 export type { SelectProps } from './src/Select';
 export type { SelectGroupOption, SelectOption, SelectInst, SelectFilter } from './src/interface';
-export type { RenderLabelImpl as SelectRenderLabel, RenderOptionImpl as SelectRenderOption } from '../_internal/select-menu/src/interface';
+export type { RenderLabelImpl as SelectRenderLabel, RenderOptionImpl as SelectRenderOption, NodeProps as SelectNodeProps } from '../_internal/select-menu/src/interface';
 export type { RenderTag as SelectRenderTag } from '../_internal/selection/src/interface';

package/lib/select/src/Select.d.ts

@@ -1,7 +1,7 @@
 import { PropType, InputHTMLAttributes, HTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
-import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
+import { RenderLabel, RenderOption, NodeProps } from '../../_internal/select-menu/src/interface';
 import { RenderTag } from '../../_internal/selection/src/interface';
 import type { FormValidationStatus } from '../../form/src/interface';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
@@ -89,6 +89,7 @@ export declare const selectProps: {
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -576,6 +577,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;
@@ -1399,6 +1401,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderTag: PropType<RenderTag>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly nodeProps: PropType<NodeProps>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void> | undefined>;
     readonly onClear: PropType<MaybeArray<() => void> | undefined>;