naive-ui 2.25.4 → 2.25.7

package/lib/gradient-text/src/GradientText.js

@@ -17,7 +17,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: gradientTextProps,
     setup(props) {
         (0, _utils_1.useHoudini)();
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const compatibleTypeRef = (0, vue_1.computed)(() => {
             const { type } = props;
             if (type === 'danger')
@@ -44,29 +44,37 @@ exports.default = (0, vue_1.defineComponent)({
             return undefined;
         });
         const themeRef = (0, _mixins_1.useTheme)('GradientText', '-gradient-text', index_cssr_1.default, styles_1.gradientTextLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: type } = compatibleTypeRef;
+            const { common: { cubicBezierEaseInOut }, self: { rotate, [(0, _utils_1.createKey)('colorStart', type)]: colorStart, [(0, _utils_1.createKey)('colorEnd', type)]: colorEnd, fontWeight } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-rotate': rotate,
+                '--n-color-start': colorStart,
+                '--n-color-end': colorEnd,
+                '--n-font-weight': fontWeight
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('gradient-text', (0, vue_1.computed)(() => compatibleTypeRef.value[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compatibleType: compatibleTypeRef,
             styleFontSize: styleFontSizeRef,
             styleBgImage: styleBgImageRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { value: type } = compatibleTypeRef;
-                const { common: { cubicBezierEaseInOut }, self: { rotate, [(0, _utils_1.createKey)('colorStart', type)]: colorStart, [(0, _utils_1.createKey)('colorEnd', type)]: colorEnd, fontWeight } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-rotate': rotate,
-                    '--n-color-start': colorStart,
-                    '--n-color-end': colorEnd,
-                    '--n-font-weight': fontWeight
-                };
-            })
+            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 { mergedClsPrefix } = this;
+        const { mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("span", { class: [
                 `${mergedClsPrefix}-gradient-text`,
-                `${mergedClsPrefix}-gradient-text--${this.compatibleType}-type`
+                `${mergedClsPrefix}-gradient-text--${this.compatibleType}-type`,
+                this.themeClass
             ], style: [
                 {
                     fontSize: this.styleFontSize,

package/lib/icon/src/Icon.d.ts

@@ -39,11 +39,9 @@ export declare const NIcon: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-color': string;
         '--n-opacity': string;
-    } | {
-        '--n-bezier': string;
-        '--n-color'?: undefined;
-        '--n-opacity'?: undefined;
-    }>;
+    }> | 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<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];

package/lib/icon/src/Icon.js

@@ -15,8 +15,28 @@ exports.NIcon = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Icon', '-icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { depth } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            if (depth !== undefined) {
+                const { color, [`opacity${depth}Depth`]: opacity } = self;
+                return {
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-color': color,
+                    '--n-opacity': opacity
+                };
+            }
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': '',
+                '--n-opacity': ''
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('icon', (0, vue_1.computed)(() => `${props.depth || 'd'}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedStyle: (0, vue_1.computed)(() => {
@@ -26,39 +46,29 @@ exports.NIcon = (0, vue_1.defineComponent)({
                     color
                 };
             }),
-            cssVars: (0, vue_1.computed)(() => {
-                const { depth } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                if (depth !== undefined) {
-                    const { color, [`opacity${depth}Depth`]: opacity } = self;
-                    return {
-                        '--n-bezier': cubicBezierEaseInOut,
-                        '--n-color': color,
-                        '--n-opacity': opacity
-                    };
-                }
-                return {
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            })
+            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 { $parent, depth, mergedClsPrefix, component } = this;
+        const { $parent, depth, mergedClsPrefix, component, onRender, themeClass } = this;
         if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
             (0, _utils_1.warn)('icon', "don't wrap `n-icon` inside `n-icon`");
         }
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (0, vue_1.h)('i', (0, vue_1.mergeProps)(this.$attrs, {
             role: 'img',
             class: [
                 `${mergedClsPrefix}-icon`,
+                themeClass,
                 {
                     [`${mergedClsPrefix}-icon--depth`]: depth,
                     [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
                 }
             ],
-            style: Object.assign(this.cssVars, this.mergedStyle)
+            style: [this.cssVars, this.mergedStyle]
         }), component ? (0, vue_1.h)(component) : this.$slots);
     }
 });

package/lib/image/src/ImagePreview.d.ts

@@ -132,7 +132,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-toolbar-color': string;
         '--n-toolbar-border-radius': string;
         '--n-toolbar-box-shadow': 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<{
     onNext: PropType<() => void>;
     onPrev: PropType<() => void>;

package/lib/image/src/ImagePreview.js

@@ -257,6 +257,20 @@ exports.default = (0, vue_1.defineComponent)({
                 return node;
             }
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-toolbar-icon-color': toolbarIconColor,
+                '--n-toolbar-color': toolbarColor,
+                '--n-toolbar-border-radius': toolbarBorderRadius,
+                '--n-toolbar-box-shadow': toolbarBoxShadow
+            };
+        });
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('image-preview', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign({ previewRef,
             previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handleWheel(e) {
                 e.preventDefault();
@@ -275,16 +289,7 @@ exports.default = (0, vue_1.defineComponent)({
             rotateClockwise,
             handleSwitchPrev,
             handleSwitchNext,
-            withTooltip, cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { toolbarIconColor, toolbarBorderRadius, toolbarBoxShadow, toolbarColor } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-toolbar-icon-color': toolbarIconColor,
-                    '--n-toolbar-color': toolbarColor,
-                    '--n-toolbar-border-radius': toolbarBorderRadius,
-                    '--n-toolbar-box-shadow': toolbarBoxShadow
-                };
-            }) }, exposedMethods);
+            withTooltip, 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, _b;
@@ -292,8 +297,16 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             (0, vue_1.h)(vueuc_1.LazyTeleport, { show: this.show }, {
-                default: () => this.show || this.displayed
-                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-container`, style: this.cssVars, onWheel: this.handleWheel },
+                default: () => {
+                    var _a;
+                    if (!(this.show || this.displayed)) {
+                        return null;
+                    }
+                    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                    return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [
+                            `${clsPrefix}-image-preview-container`,
+                            this.themeClass
+                        ], style: this.cssVars, onWheel: this.handleWheel },
                         (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.appear }, {
                             default: () => this.show ? ((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: this.toggleShow })) : null
                         }),
@@ -324,8 +337,8 @@ exports.default = (0, vue_1.defineComponent)({
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
                             default: () => (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
                                 (0, vue_1.h)("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart })), [[vue_1.vShow, this.show]])
-                        })), [[vdirs_1.zindexable, { enabled: this.show }]])
-                    : null
+                        })), [[vdirs_1.zindexable, { enabled: this.show }]]);
+                }
             })));
     }
 });

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

@@ -547,6 +547,7 @@ declare const _default: import("vue").DefineComponent<{
     textareaElRef: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaMirrorElRef: import("vue").Ref<HTMLElement | null>;
     textareaScrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -557,6 +558,7 @@ declare const _default: import("vue").DefineComponent<{
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
     } | null>;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     uncontrolledValue: import("vue").Ref<string | [string, string] | null>;
     mergedValue: import("vue").ComputedRef<string | [string, string] | null>;
     passwordVisible: import("vue").Ref<boolean>;
@@ -579,6 +581,7 @@ declare const _default: import("vue").DefineComponent<{
         top: string;
     }>;
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
+    textAreaScrollContainerWidth: import("vue").Ref<number | undefined>;
     handleTextAreaScroll: (e: Event) => void;
     handleCompositionStart: () => void;
     handleCompositionEnd: (e: CompositionEvent) => void;
@@ -635,7 +638,7 @@ declare const _default: import("vue").DefineComponent<{
             opacity1: string;
             opacity2: string;
             opacity3: string;
-            opacity4: string; /** private */
+            opacity4: string;
             opacity5: string;
             dividerColor: string;
             borderColor: string;

package/lib/input/src/Input.js

@@ -17,6 +17,7 @@ const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 const WordCount_1 = __importDefault(require("./WordCount"));
 const input_cssr_1 = __importDefault(require("./styles/input.cssr"));
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -66,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = (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);
@@ -178,14 +179,20 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             ];
         });
+        const textAreaScrollContainerWidthRef = (0, vue_1.ref)(undefined);
         // textarea autosize
         const updateTextAreaStyle = () => {
+            var _a, _b;
             if (props.type === 'textarea') {
                 const { autosize } = props;
-                if (typeof autosize === 'boolean')
-                    return;
+                if (autosize) {
+                    textAreaScrollContainerWidthRef.value =
+                        (_b = (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.$el) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+                }
                 if (!textareaElRef.value)
                     return;
+                if (typeof autosize === 'boolean')
+                    return;
                 const { paddingTop: stylePaddingTop, paddingBottom: stylePaddingBottom, lineHeight: styleLineHeight } = window.getComputedStyle(textareaElRef.value);
                 const paddingTop = Number(stylePaddingTop.slice(0, -2));
                 const paddingBottom = Number(stylePaddingBottom.slice(0, -2));
@@ -633,6 +640,7 @@ exports.default = (0, vue_1.defineComponent)({
             deactivate,
             activate
         };
+        const rtlEnabledRef = (0, use_rtl_1.default)('Input', mergedRtlRef, mergedClsPrefixRef);
         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;
@@ -706,7 +714,7 @@ exports.default = (0, vue_1.defineComponent)({
             textareaMirrorElRef,
             textareaScrollbarInstRef, 
             // value
-            uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, mergedStatus: mergedStatusRef, 
+            rtlEnabled: rtlEnabledRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, mergedStatus: mergedStatusRef, textAreaScrollContainerWidth: textAreaScrollContainerWidthRef, 
             // methods
             handleTextAreaScroll,
             handleCompositionStart,
@@ -737,6 +745,7 @@ exports.default = (0, vue_1.defineComponent)({
                 themeClass,
                 mergedStatus && `${mergedClsPrefix}-input--${mergedStatus}-status`,
                 {
+                    [`${mergedClsPrefix}-input--rtl`]: this.rtlEnabled,
                     [`${mergedClsPrefix}-input--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-input--textarea`]: this.type === 'textarea',
                     [`${mergedClsPrefix}-input--resizable`]: this.resizable && !this.autosize,
@@ -753,11 +762,23 @@ exports.default = (0, vue_1.defineComponent)({
                 (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: () => {
+                        const { textAreaScrollContainerWidth } = this;
+                        const scrollContainerWidthStyle = {
+                            width: this.autosize &&
+                                textAreaScrollContainerWidth &&
+                                `${textAreaScrollContainerWidth}px`
+                        };
                         return ((0, vue_1.h)(vue_1.Fragment, null,
                             (0, vue_1.h)("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: `${mergedClsPrefix}-input__textarea-el`, autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
                                     ? -1
-                                    : undefined, style: this.textDecorationStyle[0], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
-                            this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder`, style: this.placeholderStyle, key: "placeholder" }, this.mergedPlaceholder[0])) : null,
+                                    : undefined, style: [
+                                    this.textDecorationStyle[0],
+                                    scrollContainerWidthStyle
+                                ], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
+                            this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder`, style: [
+                                    this.placeholderStyle,
+                                    scrollContainerWidthStyle
+                                ], key: "placeholder" }, this.mergedPlaceholder[0])) : null,
                             this.autosize ? ((0, vue_1.h)(vueuc_1.VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
                                 default: () => ((0, vue_1.h)("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
                             })) : null));

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

@@ -393,7 +393,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-font-size': string;
         '--n-line-height': string;
         '--n-height': 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<{
     readonly size: {
         readonly type: PropType<Size>;

package/lib/input/src/InputGroupLabel.js

@@ -19,32 +19,39 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'InputGroupLabel',
     props: inputGroupLabelProps,
     setup(props) {
-        const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Input', '-input-group-label', input_group_label_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-group-label-color': groupLabelColor,
+                '--n-group-label-border': groupLabelBorder,
+                '--n-border-radius': borderRadius,
+                '--n-group-label-text-color': groupLabelTextColor,
+                '--n-font-size': fontSize,
+                '--n-line-height': lineHeight,
+                '--n-height': height
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('input-group-label', (0, vue_1.computed)(() => props.size[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedBordered: mergedBorderedRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-group-label-color': groupLabelColor,
-                    '--n-group-label-border': groupLabelBorder,
-                    '--n-border-radius': borderRadius,
-                    '--n-group-label-text-color': groupLabelTextColor,
-                    '--n-font-size': fontSize,
-                    '--n-line-height': lineHeight,
-                    '--n-height': height
-                };
-            })
+            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;
+        var _a, _b, _c;
         const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-group-label`, style: this.cssVars }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
-            _b.call(_a),
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-input-group-label`, this.themeClass], style: this.cssVars }, (_c = (_b = this.$slots).default) === null || _c === void 0 ? void 0 :
+            _c.call(_b),
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-group-label__border` })) : null));
     }
 });

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

@@ -155,6 +155,7 @@ exports.default = (0, cssr_1.cB)('input', `
  resize: none;
  white-space: pre-wrap;
  `), (0, cssr_1.cE)('textarea-mirror', `
+ width: 100%;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;

package/lib/input/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('input', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `, [(0, cssr_1.cE)('prefix', {
+  marginRight: 0,
+  marginLeft: '4px'
+}), (0, cssr_1.cE)('suffix', {
+  marginRight: '4px',
+  marginLeft: 0
+}), (0, cssr_1.cM)('textarea', 'width: 100%;', [(0, cssr_1.cB)('input-word-count', `
+ left: var(--n-padding-right);
+ right: unset;
+ `)]), (0, cssr_1.cB)('input-word-count', `
+ margin-left: 0;
+ margin-right: 4px;
+ `)])]);

package/lib/input/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as inputDark } from './dark';
 export { default as inputLight } from './light';
+export { inputRtl } from './rtl';
 export type { InputTheme, InputThemeVars } from './light';

package/lib/input/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputLight = exports.inputDark = void 0;
+exports.inputRtl = exports.inputLight = exports.inputDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "inputDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "inputLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputRtl", { enumerable: true, get: function () { return rtl_1.inputRtl; } });

package/lib/input/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const inputRtl: RtlItem;

package/lib/input/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.inputRtl = {
+    name: 'Input',
+    style: rtl_cssr_1.default
+};

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

@@ -1712,6 +1712,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     inputInstRef: import("vue").Ref<{
         wrapperElRef: HTMLElement | null;
         textareaElRef: HTMLTextAreaElement | null;

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

@@ -16,6 +16,7 @@ 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 use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const HOLDING_CHANGE_THRESHOLD = 800;
 const HOLDING_CHANGE_INTERVAL = 100;
 const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { loading: {
@@ -56,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, mergedRtlRef } = (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');
         const formItem = (0, _mixins_1.useFormItem)(props);
@@ -403,7 +404,8 @@ exports.default = (0, vue_1.defineComponent)({
             focus: () => { var _a; return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus(); },
             blur: () => { var _a; return (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur(); }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { inputInstRef,
+        const rtlEnabledRef = (0, use_rtl_1.default)('InputNumber', mergedRtlRef, mergedClsPrefixRef);
+        return Object.assign(Object.assign({}, exposedMethods), { rtlEnabled: rtlEnabledRef, inputInstRef,
             minusButtonInstRef,
             addButtonInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, mergedPlaceholder: mergedPlaceholderRef, displayedValueInvalid: displayedValueInvalidRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, displayedValue: displayedValueRef, addable: addableRef, minusable: minusableRef, mergedStatus: mergedStatusRef, handleFocus,
             handleBlur,
@@ -431,7 +433,10 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-number` },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-input-number`,
+                this.rtlEnabled && `${mergedClsPrefix}-input-number--rtl`
+            ] },
             (0, vue_1.h)(input_1.NInput, { ref: "inputInstRef", status: this.mergedStatus, bordered: this.mergedBordered, loading: this.loading, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable, internalLoadingBeforeSuffix: true }, {
                 prefix: () => { var _a, _b; return (_b = (_a = this.$slots).prefix) === null || _b === void 0 ? void 0 : _b.call(_a); },
                 suffix: () => {

package/lib/input-number/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/input-number/src/styles/rtl.cssr.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr");
+
+exports.default = (0, cssr_1.cB)('input-number', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/input-number/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as inputNumberDark } from './dark';
 export { default as inputNumberLight } from './light';
+export { inputNumberRtl } from './rtl';
 export type { InputNumberTheme, InputNumberThemeVars } from './light';

package/lib/input-number/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputNumberLight = exports.inputNumberDark = void 0;
+exports.inputNumberRtl = exports.inputNumberLight = exports.inputNumberDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "inputNumberDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "inputNumberLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "inputNumberRtl", { enumerable: true, get: function () { return rtl_1.inputNumberRtl; } });

package/lib/input-number/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const inputNumberRtl: RtlItem;

package/lib/input-number/styles/rtl.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inputNumberRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+const rtl_1 = require("../../input/styles/rtl");
+const rtl_2 = require("../../button/styles/rtl");
+exports.inputNumberRtl = {
+    name: 'InputNumber',
+    style: rtl_cssr_1.default,
+    peers: [rtl_1.inputRtl, rtl_2.buttonRtl]
+};

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

@@ -162,6 +162,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -558,6 +559,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     scrollableElRef: import("vue").Ref<HTMLElement | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;