naive-ui 2.32.0 → 2.32.2

package/es/pagination/src/Pagination.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { computed, defineComponent, h, nextTick, ref, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, Fragment, h, nextTick, ref, toRef, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { NPopselect } from '../../popselect';
 import { NSelect } from '../../select';
@@ -12,16 +12,13 @@ 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';
-export const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page: Number, defaultPage: {
+export const paginationProps = Object.assign(Object.assign({}, 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];
@@ -32,7 +29,10 @@ export const paginationProps = Object.assign(Object.assign({}, useTheme.props),
     }, 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 */
@@ -58,10 +58,17 @@ export default defineComponent({
         const themeRef = useTheme('Pagination', '-pagination', style, paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Pagination');
         const selfRef = ref(null);
-        const jumperRef = ref(null);
-        const jumperValueRef = ref('');
         const uncontrolledPageRef = ref(props.defaultPage);
-        const uncontrolledPageSizeRef = 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 = ref(getDefaultPageSize());
         const mergedPageRef = useMergedState(toRef(props, 'page'), uncontrolledPageRef);
         const mergedPageSizeRef = useMergedState(toRef(props, 'pageSize'), uncontrolledPageSizeRef);
         const mergedPageCountRef = computed(() => {
@@ -75,6 +82,11 @@ export default defineComponent({
                 return Math.max(pageCount, 1);
             return 1;
         });
+        const jumperValueRef = ref('');
+        watchEffect(() => {
+            void props.simple;
+            jumperValueRef.value = String(mergedPageRef.value);
+        });
         const fastForwardActiveRef = ref(false);
         const fastBackwardActiveRef = ref(false);
         const showFastForwardMenuRef = ref(false);
@@ -165,7 +177,7 @@ export default 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)
                 call(_onUpdatePage, page);
             if (onUpdatePage)
@@ -174,6 +186,9 @@ export default defineComponent({
             if (onChange)
                 call(onChange, page);
             uncontrolledPageRef.value = page;
+            if (simple) {
+                jumperValueRef.value = String(page);
+            }
         }
         function doUpdatePageSize(pageSize) {
             if (pageSize === mergedPageSizeRef.value)
@@ -220,17 +235,18 @@ export default 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;
@@ -316,7 +332,6 @@ export default defineComponent({
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
             selfRef,
-            jumperRef,
             mergedPage: mergedPageRef,
             pageItems: computed(() => {
                 return pageItemsInfo.value.items;
@@ -345,7 +360,7 @@ export default 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
@@ -353,7 +368,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, 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;
@@ -364,7 +379,8 @@ export default 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 ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({
                 page: mergedPage,
@@ -374,152 +390,179 @@ export default defineComponent({
                 endIndex: this.endIndex,
                 itemCount: this.mergedItemCount
             }))) : null,
-            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
-            })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                default: () => this.rtlEnabled ? h(ForwardIcon, null) : h(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 ? (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: 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 ? (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: this.fastBackwardActive || this.showFastBackwardMenu
-                            });
-                        }
-                        else {
-                            contentNode = fastBackwardNode;
-                        }
-                        onMouseenter = this.handleFastBackwardMouseenter;
-                        onMouseleave = this.handleFastBackwardMouseleave;
-                        break;
-                }
-                const itemNode = (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 (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)'
+            this.displayOrder.map((part) => {
+                switch (part) {
+                    case 'pages':
+                        return (h(Fragment, null,
+                            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
+                            })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => this.rtlEnabled ? h(ForwardIcon, null) : h(BackwardIcon, null)
+                            }))),
+                            simple ? (h(Fragment, null,
+                                h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
+                                    h(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 ? (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: 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 ? (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: 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 = (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 (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 }));
                                 }
-                            }
-                            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`,
+                                    !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
+                            })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => this.rtlEnabled ? h(BackwardIcon, null) : h(ForwardIcon, null)
+                            })))));
+                    case 'size-picker': {
+                        return !simple && showSizePicker ? (h(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 ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
+                            resolveSlot(this.$slots.goto, () => [locale.goto]),
+                            h(NInput, { value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onChange: handleQuickJumperChange }))) : null;
+                    default:
+                        return null;
                 }
             }),
-            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
-            })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                default: () => this.rtlEnabled ? h(BackwardIcon, null) : h(ForwardIcon, null)
-            }))),
-            showSizePicker ? (h(NSelect, { internalShowCheckmark: false, size: selectSize, placeholder: "", options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })) : null,
-            showQuickJumper ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
-                resolveSlot(this.$slots.goto, () => [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,
             renderSuffix ? (h("div", { class: `${mergedClsPrefix}-pagination-suffix` }, renderSuffix({
                 page: mergedPage,
                 pageSize: mergedPageSize,

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

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

package/es/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/es/popover/src/Popover.js

@@ -328,8 +328,8 @@ export default defineComponent({
             handleClickOutside,
             handleMouseMoveOutside,
             setBodyInstance,
-            positionManuallyRef: positionManuallyRef,
-            isMountedRef: isMountedRef,
+            positionManuallyRef,
+            isMountedRef,
             zIndexRef: toRef(props, 'zIndex'),
             extraClassRef: toRef(props, 'internalExtraClass'),
             internalRenderBodyRef: toRef(props, 'internalRenderBody')

package/es/popover/src/PopoverBody.js

@@ -1,6 +1,7 @@
 import { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide, watchEffect, Fragment } from 'vue';
 import { VFollower, VFocusTrap } from 'vueuc';
 import { clickoutside, mousemoveoutside } from 'vdirs';
+import { getPreciseEventTarget } from 'seemly';
 import { NxScrollbar } from '../../_internal/scrollbar';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
@@ -142,13 +143,13 @@ export default defineComponent({
         }
         function handleMouseMoveOutside(e) {
             if (props.trigger === 'hover' &&
-                !getTriggerElement().contains(e.target)) {
+                !getTriggerElement().contains(getPreciseEventTarget(e))) {
                 NPopover.handleMouseMoveOutside(e);
             }
         }
         function handleClickOutside(e) {
             if ((props.trigger === 'click' &&
-                !getTriggerElement().contains(e.target)) ||
+                !getTriggerElement().contains(getPreciseEventTarget(e))) ||
                 props.onClickoutside) {
                 NPopover.handleClickOutside(e);
             }

package/es/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/es/radio/styles/dark.js

@@ -8,7 +8,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({}, commonVariables), { 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 ${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 ${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 ${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 ${changeColor(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }
 };
 export default radioDark;

package/es/radio/styles/light.js

@@ -5,7 +5,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({}, commonVariables), { 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 ${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 ${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 ${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 ${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/es/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';