naive-ui 2.25.0 → 2.25.3

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,9 +3006,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly: boolean;
     disabled: boolean | undefined;
     step: string | number;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
-    bordered: boolean | undefined;
     loading: boolean;
+    bordered: boolean | undefined;
     clearable: boolean;
     defaultValue: number | null;
     keyboard: {

package/lib/input-number/src/InputNumber.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
+const evtd_1 = require("evtd");
 const icons_1 = require("../../_internal/icons");
 const input_1 = require("../../input");
 const _internal_1 = require("../../_internal");
@@ -15,6 +16,8 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
+const HOLDING_CHANGE_THRESHOLD = 800;
+const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { loading: {
         type: Boolean,
         default: undefined
@@ -41,20 +44,18 @@ const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
         default: true
     }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('input-number', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'InputNumber',
     props: inputNumberProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('input-number', '`on-change` is deprecated, please use `on-update:value` instead');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('InputNumber', '-input-number', input_number_cssr_1.default, styles_1.inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('InputNumber');
@@ -240,8 +241,10 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function doAdd() {
             const { value: addable } = addableRef;
-            if (!addable)
+            if (!addable) {
+                clearAddHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -255,8 +258,10 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function doMinus() {
             const { value: minusable } = minusableRef;
-            if (!minusable)
+            if (!minusable) {
+                clearMinusHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -299,8 +304,60 @@ exports.default = (0, vue_1.defineComponent)({
             }
             (_c = inputInstRef.value) === null || _c === void 0 ? void 0 : _c.activate();
         }
-        const handleAddClick = doAdd;
-        const handleMinusClick = doMinus;
+        let minusHoldStateIntervalId = null;
+        let addHoldStateIntervalId = null;
+        let firstMinusMousedownId = null;
+        function clearMinusHoldTimeout() {
+            if (firstMinusMousedownId) {
+                window.clearTimeout(firstMinusMousedownId);
+                firstMinusMousedownId = null;
+            }
+            if (minusHoldStateIntervalId) {
+                window.clearInterval(minusHoldStateIntervalId);
+                minusHoldStateIntervalId = null;
+            }
+        }
+        function clearAddHoldTimeout() {
+            if (firstAddMousedownId) {
+                window.clearTimeout(firstAddMousedownId);
+                firstAddMousedownId = null;
+            }
+            if (addHoldStateIntervalId) {
+                window.clearInterval(addHoldStateIntervalId);
+                addHoldStateIntervalId = null;
+            }
+        }
+        function handleMinusMousedown() {
+            firstMinusMousedownId = window.setTimeout(() => {
+                minusHoldStateIntervalId = window.setInterval(() => {
+                    doMinus();
+                }, HOLDING_CHANGE_INTERVAL);
+            }, HOLDING_CHANGE_THRESHOLD);
+            (0, evtd_1.on)('mouseup', document, () => {
+                window.setTimeout(clearMinusHoldTimeout, 0);
+            });
+        }
+        let firstAddMousedownId = null;
+        function handleAddMousedown() {
+            firstAddMousedownId = window.setTimeout(() => {
+                addHoldStateIntervalId = window.setInterval(() => {
+                    doAdd();
+                }, HOLDING_CHANGE_INTERVAL);
+            }, HOLDING_CHANGE_THRESHOLD);
+            (0, evtd_1.on)('mouseup', document, () => {
+                window.setTimeout(clearAddHoldTimeout, 0);
+            });
+        }
+        const handleAddClick = () => {
+            if (addHoldStateIntervalId)
+                return;
+            doAdd();
+        };
+        const handleMinusClick = () => {
+            if (minusHoldStateIntervalId)
+                return;
+            doMinus();
+        };
         function handleKeyDown(e) {
             var _a, _b;
             if (e.code === 'Enter' || e.code === 'NumpadEnter') {
@@ -354,6 +411,8 @@ exports.default = (0, vue_1.defineComponent)({
             handleMouseDown,
             handleAddClick,
             handleMinusClick,
+            handleAddMousedown,
+            handleMinusMousedown,
             handleKeyDown,
             handleUpdateDisplayedValue, 
             // theme
@@ -380,12 +439,12 @@ exports.default = (0, vue_1.defineComponent)({
                     return this.showButton
                         ? [
                             this.$slots.suffix && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
-                            (0, vue_1.h)(button_1.NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
-                                default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            (0, vue_1.h)(button_1.NxButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, onMousedown: this.handleMinusMousedown, ref: "minusButtonInstRef" }, {
+                                default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, "aria-disabled": true }, {
                                     default: () => (0, vue_1.h)(icons_1.RemoveIcon, null)
                                 }))
                             }),
-                            (0, vue_1.h)(button_1.NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
+                            (0, vue_1.h)(button_1.NxButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, onMousedown: this.handleAddMousedown, ref: "addButtonInstRef" }, {
                                 default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                     default: () => (0, vue_1.h)(icons_1.AddIcon, null)
                                 }))

package/lib/layout/src/Layout.d.ts

@@ -167,6 +167,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -319,7 +320,9 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         '--n-bezier': string;
         '--n-color': string;
         '--n-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<ExtractPropTypes<{
     embedded: BooleanConstructor;
     position: {
@@ -560,6 +563,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;
@@ -712,7 +716,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-color': string;
         '--n-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<ExtractPropTypes<{
     embedded: BooleanConstructor;
     position: {

package/lib/layout/src/Layout.js

@@ -39,7 +39,7 @@ function createLayoutComponent(isContent) {
         setup(props) {
             const scrollableElRef = (0, vue_1.ref)(null);
             const scrollbarInstRef = (0, vue_1.ref)(null);
-            const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+            const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
             const themeRef = (0, _mixins_1.useTheme)('Layout', '-layout', layout_cssr_1.default, styles_1.layoutLight, props, mergedClsPrefixRef);
             function scrollTo(options, y) {
                 if (props.nativeScrollbar) {
@@ -70,21 +70,28 @@ function createLayoutComponent(isContent) {
             const exposedMethods = {
                 scrollTo
             };
+            const cssVarsRef = (0, vue_1.computed)(() => {
+                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+                return {
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-color': props.embedded ? self.colorEmbedded : self.color,
+                    '--n-text-color': self.textColor
+                };
+            });
+            const themeClassHandle = inlineThemeDisabled
+                ? (0, _mixins_1.useThemeClass)('layout', undefined, cssVarsRef, props)
+                : undefined;
             return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                 scrollbarInstRef,
-                hasSiderStyle, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
-                    const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                    return {
-                        '--n-bezier': cubicBezierEaseInOut,
-                        '--n-color': props.embedded ? self.colorEmbedded : self.color,
-                        '--n-text-color': self.textColor
-                    };
-                }) }, exposedMethods);
+                hasSiderStyle, 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 }, exposedMethods);
         },
         render() {
+            var _a;
             const { mergedClsPrefix, hasSider } = this;
+            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
             const hasSiderStyle = hasSider ? this.hasSiderStyle : undefined;
             const layoutClass = [
+                this.themeClass,
                 isContent && `${mergedClsPrefix}-layout-content`,
                 `${mergedClsPrefix}-layout`,
                 `${mergedClsPrefix}-layout--${this.position}-positioned`

package/lib/layout/src/LayoutContent.d.ts

@@ -119,6 +119,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;
@@ -271,7 +272,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-color': string;
         '--n-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<{
     embedded: BooleanConstructor;
     position: {

package/lib/layout/src/LayoutFooter.d.ts

@@ -197,7 +197,9 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | 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<{
     inverted: BooleanConstructor;
     position: {