naive-ui 2.25.2 → 2.25.5

package/es/input/src/Input.js

@@ -5,7 +5,7 @@ import { VResizeObserver } from 'vueuc';
 import { off, on } from 'evtd';
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
 import { NBaseClear, NBaseIcon, NBaseSuffix, NScrollbar } from '../../_internal';
-import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins';
+import { useTheme, useLocale, useFormItem, useConfig, useThemeClass } from '../../_mixins';
 import { call, createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { inputLight } from '../styles';
 import { inputInjectionKey } from './interface';
@@ -61,7 +61,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef } = useConfig(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Input', '-input', style, inputLight, props, mergedClsPrefixRef);
         // dom refs
         const wrapperElRef = ref(null);
@@ -628,6 +628,69 @@ export default defineComponent({
             deactivate,
             activate
         };
+        const cssVarsRef = 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, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
+            const { left: paddingLeft, right: paddingRight } = 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
+            ? useThemeClass('input', computed(() => {
+                const { value: size } = mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedProps), { 
             // DOM ref
             wrapperElRef,
@@ -659,69 +722,14 @@ export default defineComponent({
             handleWrapperKeyDown,
             handleTextAreaMirrorResize, getTextareaScrollContainer: () => {
                 return textareaElRef.value;
-            }, mergedTheme: themeRef, cssVars: 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, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
-                const { left: paddingLeft, right: paddingRight } = 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 (h("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
+                themeClass,
                 mergedStatus && `${mergedClsPrefix}-input--${mergedStatus}-status`,
                 {
                     [`${mergedClsPrefix}-input--disabled`]: this.mergedDisabled,
@@ -737,9 +745,7 @@ export default 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 },
             h("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                resolveWrappedSlot($slots.prefix, (children) => [
-                    h("div", { class: `${mergedClsPrefix}-input__prefix` }, children)
-                ]),
+                resolveWrappedSlot($slots.prefix, (children) => children && (h("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 this.type === 'textarea' ? (h(NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
                     default: () => {
                         return (h(Fragment, null,
@@ -763,22 +769,26 @@ export default defineComponent({
                         h("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? (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) ? (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? (h(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 ? (h(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' ? (h(WordCount, 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' ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
-                        default: () => this.passwordVisible ? h(EyeIcon, null) : h(EyeOffIcon, null)
-                    })) : null
-                ])) : null),
+                    resolveWrappedSlot($slots.suffix, (children) => {
+                        return children ||
+                            this.clearable ||
+                            this.showCount ||
+                            this.mergedShowPasswordOn ||
+                            this.loading !== undefined ? (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
+                            resolveWrappedSlot($slots.clear, (children) => {
+                                return ((this.clearable || children) && (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => children })));
+                            }),
+                            !this.internalLoadingBeforeSuffix ? children : null,
+                            this.loading !== undefined ? (h(NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
+                            this.internalLoadingBeforeSuffix ? children : null,
+                            this.showCount && this.type !== 'textarea' ? (h(WordCount, 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' ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
+                                default: () => this.passwordVisible ? h(EyeIcon, null) : h(EyeOffIcon, null)
+                            })) : null
+                        ])) : null;
+                    })),
             this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, resolveSlot($slots.separator, () => [this.separator]))) : null,
             this.pair ? (h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 h("div", { class: `${mergedClsPrefix}-input__input` },
@@ -787,10 +797,12 @@ export default 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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[1]))) : null),
-                h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable && (h(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,
+                resolveWrappedSlot($slots.suffix, (children) => {
+                    return ((this.clearable || children) && (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
+                        this.clearable && (h(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 ? (h("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
             this.showCount && this.type === 'textarea' ? (h(WordCount, null, { default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); } })) : null));

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

@@ -186,10 +186,10 @@ cM('pair', [cE('input-el, placeholder', 'text-align: center;'), cE('separator',
  color: var(--n-icon-color-hover);
  `), c('&:active', `
  color: var(--n-icon-color-pressed);
- `)]), cM('focus', 'background-color: var(--n-color-focus);', [cE('state-border', `
+ `)]), c('&:hover', [cE('state-border', 'border: var(--n-border-hover);')]), cM('focus', 'background-color: var(--n-color-focus);', [cE('state-border', `
  border: var(--n-border-focus);
  box-shadow: var(--n-box-shadow-focus);
- `)]), c('&:hover', [cE('state-border', 'border: var(--n-border-hover);')])]), cE('border, state-border', `
+ `)])]), cE('border, state-border', `
  box-sizing: border-box;
  position: absolute;
  left: 0;

package/es/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;

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

@@ -1,15 +1,18 @@
-import { h, defineComponent, ref, toRef, watch, computed } from 'vue';
+import { h, defineComponent, ref, toRef, watch, computed, watchEffect } from 'vue';
 import { rgba } from 'seemly';
 import { useMemo, useMergedState } from 'vooks';
+import { on } from 'evtd';
 import { RemoveIcon, AddIcon } from '../../_internal/icons';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
-import { NButton } from '../../button';
+import { NxButton } from '../../button';
 import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
-import { warn, call } from '../../_utils';
+import { warnOnce, call } from '../../_utils';
 import { inputNumberLight } from '../styles';
 import { parse, validator, format, parseNumber, isWipValue } from './utils';
 import style from './styles/input-number.cssr';
+const HOLDING_CHANGE_THRESHOLD = 800;
+const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), { loading: {
         type: Boolean,
         default: undefined
@@ -36,20 +39,18 @@ const inputNumberProps = Object.assign(Object.assign({}, useTheme.props), { load
         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') {
-                warn('input-number', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 export default defineComponent({
     name: 'InputNumber',
     props: inputNumberProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onChange !== undefined) {
+                    warnOnce('input-number', '`on-change` is deprecated, please use `on-update:value` instead');
+                }
+            });
+        }
         const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
         const themeRef = useTheme('InputNumber', '-input-number', style, inputNumberLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('InputNumber');
@@ -235,8 +236,10 @@ export default defineComponent({
         }
         function doAdd() {
             const { value: addable } = addableRef;
-            if (!addable)
+            if (!addable) {
+                clearAddHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -250,8 +253,10 @@ export default defineComponent({
         }
         function doMinus() {
             const { value: minusable } = minusableRef;
-            if (!minusable)
+            if (!minusable) {
+                clearMinusHoldTimeout();
                 return;
+            }
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null) {
                 if (!props.validator) {
@@ -294,8 +299,60 @@ export default 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);
+            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);
+            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') {
@@ -349,6 +406,8 @@ export default defineComponent({
             handleMouseDown,
             handleAddClick,
             handleMinusClick,
+            handleAddMousedown,
+            handleMinusMousedown,
             handleKeyDown,
             handleUpdateDisplayedValue, 
             // theme
@@ -375,12 +434,12 @@ export default defineComponent({
                     return this.showButton
                         ? [
                             this.$slots.suffix && (h("span", { class: `${mergedClsPrefix}-input-number-suffix` }, { default: this.$slots.suffix })),
-                            h(NButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, ref: "minusButtonInstRef" }, {
-                                default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            h(NxButton, { text: true, disabled: !this.minusable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleMinusClick, onMousedown: this.handleMinusMousedown, ref: "minusButtonInstRef" }, {
+                                default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix, "aria-disabled": true }, {
                                     default: () => h(RemoveIcon, null)
                                 }))
                             }),
-                            h(NButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, ref: "addButtonInstRef" }, {
+                            h(NxButton, { text: true, disabled: !this.addable || this.mergedDisabled || this.readonly, focusable: false, builtinThemeOverrides: this.buttonThemeOverrides, onClick: this.handleAddClick, onMousedown: this.handleAddMousedown, ref: "addButtonInstRef" }, {
                                 default: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                     default: () => h(AddIcon, null)
                                 }))

package/es/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/es/layout/src/Layout.js

@@ -1,6 +1,6 @@
 import { h, defineComponent, computed, ref, provide } from 'vue';
 import { NScrollbar } from '../../_internal';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { layoutLight } from '../styles';
 import style from './styles/layout.cssr';
 import { positionProp } from './interface';
@@ -33,7 +33,7 @@ export function createLayoutComponent(isContent) {
         setup(props) {
             const scrollableElRef = ref(null);
             const scrollbarInstRef = ref(null);
-            const { mergedClsPrefixRef } = useConfig(props);
+            const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
             const themeRef = useTheme('Layout', '-layout', style, layoutLight, props, mergedClsPrefixRef);
             function scrollTo(options, y) {
                 if (props.nativeScrollbar) {
@@ -64,21 +64,28 @@ export function createLayoutComponent(isContent) {
             const exposedMethods = {
                 scrollTo
             };
+            const cssVarsRef = 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
+                ? useThemeClass('layout', undefined, cssVarsRef, props)
+                : undefined;
             return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                 scrollbarInstRef,
-                hasSiderStyle, mergedTheme: themeRef, cssVars: 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/es/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/es/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: {