naive-ui 2.25.2 → 2.25.5

package/lib/element/src/Element.js

@@ -13,25 +13,32 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['El'],
     props: elementProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Element', '-element', undefined, styles_1.elementLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common } = themeRef.value;
+            return Object.keys(common).reduce((prevValue, key) => {
+                prevValue[`--${(0, lodash_1.kebabCase)(key)}`] = common[key];
+                return prevValue;
+            }, {});
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('element', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { common } = themeRef.value;
-                return Object.keys(common).reduce((prevValue, key) => {
-                    prevValue[`--${(0, lodash_1.kebabCase)(key)}`] = common[key];
-                    return prevValue;
-                }, {});
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         var _a;
-        const { tag, mergedClsPrefix, cssVars, $slots } = this;
+        const { tag, mergedClsPrefix, cssVars, themeClass, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (0, vue_1.h)(tag, {
             role: 'none',
-            class: `${mergedClsPrefix}-element`,
+            class: [`${mergedClsPrefix}-element`, themeClass],
             style: cssVars
         }, (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots));
     }

package/lib/empty/src/Empty.d.ts

@@ -121,7 +121,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color': string;
         '--n-icon-color': string;
         '--n-extra-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     description: StringConstructor;
     showDescription: {

package/lib/empty/src/Empty.js

@@ -25,7 +25,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Empty',
     props: emptyProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Empty', '-empty', index_cssr_1.default, styles_1.emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Empty');
         const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
@@ -38,29 +38,41 @@ exports.default = (0, vue_1.defineComponent)({
             return ((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Empty) === null || _b === void 0 ? void 0 : _b.renderIcon) ||
                 (() => (0, vue_1.h)(icons_1.EmptyIcon, null));
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
+            return {
+                '--n-icon-size': iconSize,
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-icon-color': iconColor,
+                '--n-extra-text-color': extraTextColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('empty', (0, vue_1.computed)(() => {
+                let hash = '';
+                const { size } = props;
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedRenderIcon: mergedRenderIconRef,
             localizedDescription: (0, vue_1.computed)(() => {
                 return mergedDescriptionRef.value || localeRef.value.description;
             }),
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { [(0, _utils_1.createKey)('iconSize', size)]: iconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
-                return {
-                    '--n-icon-size': iconSize,
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-icon-color': iconColor,
-                    '--n-extra-text-color': extraTextColor
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { $slots, mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-empty`, this.themeClass], style: this.cssVars },
             this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__icon` }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })))) : null,
             this.showDescription ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__description` }, $slots.default ? $slots.default() : this.localizedDescription)) : null,
             $slots.extra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-empty__extra` }, $slots.extra())) : null));

package/lib/form/src/FormItem.js

@@ -167,8 +167,7 @@ exports.default = (0, vue_1.defineComponent)({
                     options.first = props.first;
             }
             const { value: rules } = mergedRulesRef;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const value = NForm ? (0, lodash_1.get)(NForm.props.model, path, null) : undefined;
+            const value = NForm ? (0, lodash_1.get)(NForm.props.model, path || '') : undefined;
             const activeRules = (!trigger
                 ? rules
                 : rules.filter((rule) => {

package/lib/grid/src/Grid.js

@@ -40,10 +40,10 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: gridProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedBreakpointsRef } = (0, _mixins_1.useConfig)(props);
         const numRegex = /^\d+$/;
         const widthRef = (0, vue_1.ref)(undefined);
-        const breakpointsRef = (0, vooks_1.useBreakpoints)((NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value) || config_1.defaultBreakpoints);
+        const breakpointsRef = (0, vooks_1.useBreakpoints)((mergedBreakpointsRef === null || mergedBreakpointsRef === void 0 ? void 0 : mergedBreakpointsRef.value) || config_1.defaultBreakpoints);
         const isResponsiveRef = (0, vooks_1.useMemo)(() => {
             if (props.itemResponsive)
                 return true;

package/lib/icon-wrapper/src/IconWrapper.js

@@ -21,8 +21,7 @@ exports.NIconWrapper = (0, vue_1.defineComponent)({
     props: iconWrapperProps,
     setup(props, { slots }) {
         const themeRef = (0, _mixins_1.useTheme)('IconWrapper', '-icon-wrapper', index_cssr_1.default, styles_1.iconWrapperLight, props);
-        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
-        const { disableInlineTheme } = NConfigProvider || {};
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self: { color, iconColor } } = themeRef.value;
             return {
@@ -31,16 +30,15 @@ exports.NIconWrapper = (0, vue_1.defineComponent)({
                 '--n-icon-color': iconColor
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('icon-wrapper', undefined, cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
+            : undefined;
         return () => {
-            var _a, _b;
             const size = (0, _utils_1.formatLength)(props.size);
-            (_a = themeClassHandle.onRender) === null || _a === void 0 ? void 0 : _a.call(themeClassHandle);
+            themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             return ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefixRef.value}-icon-wrapper`,
-                    (_b = themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass) === null || _b === void 0 ? void 0 : _b.value
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value
                 ], style: [
                     cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
                     {

package/lib/input/src/Input.d.ts

@@ -552,6 +552,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -633,8 +634,8 @@ declare const _default: import("vue").DefineComponent<{
             iconColorDisabled: string;
             opacity1: string;
             opacity2: string;
-            opacity3: string; /** private */
-            opacity4: string;
+            opacity3: string;
+            opacity4: string; /** private */
             opacity5: string;
             dividerColor: string;
             borderColor: string;
@@ -814,7 +815,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color-pressed': string;
         '--n-icon-color-disabled': string;
         '--n-suffix-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     isCompositing: import("vue").Ref<boolean>;
     blur: () => void;
     focus: () => void;

package/lib/input/src/Input.js

@@ -66,7 +66,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Input', '-input', input_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
         // dom refs
         const wrapperElRef = (0, vue_1.ref)(null);
@@ -633,6 +633,69 @@ exports.default = (0, vue_1.defineComponent)({
             deactivate,
             activate
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { common: { cubicBezierEaseInOut }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
+            const { left: paddingLeft, right: paddingRight } = (0, seemly_1.getPadding)(padding);
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-count-text-color': countTextColor,
+                '--n-color': color,
+                '--n-font-size': fontSize,
+                '--n-border-radius': borderRadius,
+                '--n-height': height,
+                '--n-padding-left': paddingLeft,
+                '--n-padding-right': paddingRight,
+                '--n-text-color': textColor,
+                '--n-caret-color': caretColor,
+                '--n-text-decoration-color': textDecorationColor,
+                '--n-border': border,
+                '--n-border-disabled': borderDisabled,
+                '--n-border-hover': borderHover,
+                '--n-border-focus': borderFocus,
+                '--n-placeholder-color': placeholderColor,
+                '--n-placeholder-color-disabled': placeholderColorDisabled,
+                '--n-icon-size': iconSize,
+                '--n-line-height-textarea': lineHeightTextarea,
+                '--n-color-disabled': colorDisabled,
+                '--n-color-focus': colorFocus,
+                '--n-text-color-disabled': textColorDisabled,
+                '--n-box-shadow-focus': boxShadowFocus,
+                '--n-loading-color': loadingColor,
+                // form warning
+                '--n-caret-color-warning': caretColorWarning,
+                '--n-color-focus-warning': colorFocusWarning,
+                '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                '--n-border-warning': borderWarning,
+                '--n-border-focus-warning': borderFocusWarning,
+                '--n-border-hover-warning': borderHoverWarning,
+                '--n-loading-color-warning': loadingColorWarning,
+                // form error
+                '--n-caret-color-error': caretColorError,
+                '--n-color-focus-error': colorFocusError,
+                '--n-box-shadow-focus-error': boxShadowFocusError,
+                '--n-border-error': borderError,
+                '--n-border-focus-error': borderFocusError,
+                '--n-border-hover-error': borderHoverError,
+                '--n-loading-color-error': loadingColorError,
+                // clear-button
+                '--n-clear-color': clearColor,
+                '--n-clear-size': clearSize,
+                '--n-clear-color-hover': clearColorHover,
+                '--n-clear-color-pressed': clearColorPressed,
+                '--n-icon-color': iconColor,
+                '--n-icon-color-hover': iconColorHover,
+                '--n-icon-color-pressed': iconColorPressed,
+                '--n-icon-color-disabled': iconColorDisabled,
+                '--n-suffix-text-color': suffixTextColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('input', (0, vue_1.computed)(() => {
+                const { value: size } = mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedProps), { 
             // DOM ref
             wrapperElRef,
@@ -664,69 +727,14 @@ exports.default = (0, vue_1.defineComponent)({
             handleWrapperKeyDown,
             handleTextAreaMirrorResize, getTextareaScrollContainer: () => {
                 return textareaElRef.value;
-            }, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
-                const { value: size } = mergedSizeRef;
-                const { common: { cubicBezierEaseInOut }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
-                const { left: paddingLeft, right: paddingRight } = (0, seemly_1.getPadding)(padding);
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-count-text-color': countTextColor,
-                    '--n-color': color,
-                    '--n-font-size': fontSize,
-                    '--n-border-radius': borderRadius,
-                    '--n-height': height,
-                    '--n-padding-left': paddingLeft,
-                    '--n-padding-right': paddingRight,
-                    '--n-text-color': textColor,
-                    '--n-caret-color': caretColor,
-                    '--n-text-decoration-color': textDecorationColor,
-                    '--n-border': border,
-                    '--n-border-disabled': borderDisabled,
-                    '--n-border-hover': borderHover,
-                    '--n-border-focus': borderFocus,
-                    '--n-placeholder-color': placeholderColor,
-                    '--n-placeholder-color-disabled': placeholderColorDisabled,
-                    '--n-icon-size': iconSize,
-                    '--n-line-height-textarea': lineHeightTextarea,
-                    '--n-color-disabled': colorDisabled,
-                    '--n-color-focus': colorFocus,
-                    '--n-text-color-disabled': textColorDisabled,
-                    '--n-box-shadow-focus': boxShadowFocus,
-                    '--n-loading-color': loadingColor,
-                    // form warning
-                    '--n-caret-color-warning': caretColorWarning,
-                    '--n-color-focus-warning': colorFocusWarning,
-                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--n-border-warning': borderWarning,
-                    '--n-border-focus-warning': borderFocusWarning,
-                    '--n-border-hover-warning': borderHoverWarning,
-                    '--n-loading-color-warning': loadingColorWarning,
-                    // form error
-                    '--n-caret-color-error': caretColorError,
-                    '--n-color-focus-error': colorFocusError,
-                    '--n-box-shadow-focus-error': boxShadowFocusError,
-                    '--n-border-error': borderError,
-                    '--n-border-focus-error': borderFocusError,
-                    '--n-border-hover-error': borderHoverError,
-                    '--n-loading-color-error': loadingColorError,
-                    // clear-button
-                    '--n-clear-color': clearColor,
-                    '--n-clear-size': clearSize,
-                    '--n-clear-color-hover': clearColorHover,
-                    '--n-clear-color-pressed': clearColorPressed,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-hover': iconColorHover,
-                    '--n-icon-color-pressed': iconColorPressed,
-                    '--n-icon-color-disabled': iconColorDisabled,
-                    '--n-suffix-text-color': suffixTextColor
-                };
-            }) });
+            }, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a, _b, _c;
-        const { mergedClsPrefix, mergedStatus, $slots } = this;
+        const { mergedClsPrefix, mergedStatus, themeClass, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
+                themeClass,
                 mergedStatus && `${mergedClsPrefix}-input--${mergedStatus}-status`,
                 {
                     [`${mergedClsPrefix}-input--disabled`]: this.mergedDisabled,
@@ -742,9 +750,7 @@ exports.default = (0, vue_1.defineComponent)({
                 ? 0
                 : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeyDown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                (0, _utils_1.resolveWrappedSlot)($slots.prefix, (children) => [
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, children)
-                ]),
+                (0, _utils_1.resolveWrappedSlot)($slots.prefix, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 this.type === 'textarea' ? ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
                     default: () => {
                         return ((0, vue_1.h)(vue_1.Fragment, null,
@@ -768,22 +774,26 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
                 !this.pair &&
-                    ($slots.suffix ||
-                        this.clearable ||
-                        this.showCount ||
-                        this.mergedShowPasswordOn ||
-                        this.loading !== undefined) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })) : null,
-                    !this.internalLoadingBeforeSuffix ? (_a = $slots.suffix) === null || _a === void 0 ? void 0 : _a.call($slots) : null,
-                    this.loading !== undefined ? ((0, vue_1.h)(_internal_1.NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
-                    this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
-                    this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, {
-                        default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); }
-                    })) : null,
-                    this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
-                        default: () => this.passwordVisible ? (0, vue_1.h)(icons_1.EyeIcon, null) : (0, vue_1.h)(icons_1.EyeOffIcon, null)
-                    })) : null
-                ])) : null),
+                    (0, _utils_1.resolveWrappedSlot)($slots.suffix, (children) => {
+                        return children ||
+                            this.clearable ||
+                            this.showCount ||
+                            this.mergedShowPasswordOn ||
+                            this.loading !== undefined ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
+                            (0, _utils_1.resolveWrappedSlot)($slots.clear, (children) => {
+                                return ((this.clearable || children) && ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => children })));
+                            }),
+                            !this.internalLoadingBeforeSuffix ? children : null,
+                            this.loading !== undefined ? ((0, vue_1.h)(_internal_1.NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
+                            this.internalLoadingBeforeSuffix ? children : null,
+                            this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, {
+                                default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); }
+                            })) : null,
+                            this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
+                                default: () => this.passwordVisible ? (0, vue_1.h)(icons_1.EyeIcon, null) : (0, vue_1.h)(icons_1.EyeOffIcon, null)
+                            })) : null
+                        ])) : null;
+                    })),
             this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, (0, _utils_1.resolveSlot)($slots.separator, () => [this.separator]))) : null,
             this.pair ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
@@ -792,10 +802,12 @@ exports.default = (0, vue_1.defineComponent)({
                             : undefined, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: (e) => this.handleInput(e, 1), onChange: (e) => this.handleChange(e, 1) }),
                     this.showPlaceholder2 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[1]))) : null),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable && ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })),
-                    (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots)
-                ]))) : null,
+                (0, _utils_1.resolveWrappedSlot)($slots.suffix, (children) => {
+                    return ((this.clearable || children) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
+                        this.clearable && ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })),
+                        children
+                    ])));
+                }))) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
             this.showCount && this.type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); } })) : null));

package/lib/input/src/styles/input.cssr.js

@@ -193,10 +193,10 @@ exports.default = (0, cssr_1.cB)('input', `
  color: var(--n-icon-color-hover);
  `), (0, cssr_1.c)('&:active', `
  color: var(--n-icon-color-pressed);
- `)]), (0, cssr_1.cM)('focus', 'background-color: var(--n-color-focus);', [(0, cssr_1.cE)('state-border', `
+ `)]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', 'border: var(--n-border-hover);')]), (0, cssr_1.cM)('focus', 'background-color: var(--n-color-focus);', [(0, cssr_1.cE)('state-border', `
  border: var(--n-border-focus);
  box-shadow: var(--n-box-shadow-focus);
- `)]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', 'border: var(--n-border-hover);')])]), (0, cssr_1.cE)('border, state-border', `
+ `)])]), (0, cssr_1.cE)('border, state-border', `
  box-sizing: border-box;
  position: absolute;
  left: 0;

package/lib/input-number/src/InputNumber.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const inputNumberProps: {
     loading: {
@@ -50,11 +50,7 @@ declare const inputNumberProps: {
     onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue>>;
     theme: PropType<import("../../_mixins").Theme<"InputNumber", {
         iconColorDisabled: string;
     }, {
@@ -910,11 +906,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue>>;
     theme: PropType<import("../../_mixins").Theme<"InputNumber", {
         iconColorDisabled: string;
     }, {
@@ -1755,6 +1747,8 @@ declare const _default: import("vue").DefineComponent<{
     handleMouseDown: (e: MouseEvent) => void;
     handleAddClick: () => void;
     handleMinusClick: () => void;
+    handleAddMousedown: () => void;
+    handleMinusMousedown: () => void;
     handleKeyDown: (e: KeyboardEvent) => void;
     handleUpdateDisplayedValue: (value: string) => void;
     mergedTheme: import("vue").ComputedRef<{
@@ -2203,11 +2197,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue>>;
     theme: PropType<import("../../_mixins").Theme<"InputNumber", {
         iconColorDisabled: string;
     }, {
@@ -3016,7 +3006,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly: boolean;
     disabled: boolean | undefined;
     step: string | number;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     loading: boolean;
     bordered: boolean | undefined;
     clearable: boolean;