naive-ui 2.25.4 → 2.25.7

package/es/form/src/FormItem.js

@@ -12,7 +12,7 @@ import Schema from 'async-validator';
 import { get } from 'lodash-es';
 import { createId } from 'seemly';
 import { formItemInjectionKey } from '../../_mixins/use-form-item';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { warn, createKey, useInjectionInstanceCollection, keysOf } from '../../_utils';
 import { formLight } from '../styles';
 import { formItemMisc, formItemSize, formItemRule } from './utils';
@@ -70,7 +70,7 @@ export default defineComponent({
     props: formItemProps,
     setup(props) {
         useInjectionInstanceCollection(formItemInstsInjectionKey, 'formItems', toRef(props, 'path'));
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const NForm = inject(formInjectionKey, null);
         const formItemSizeRefs = formItemSize(props);
         const formItemMiscRefs = formItemMisc(props);
@@ -232,45 +232,52 @@ export default defineComponent({
                 NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)));
             }
         });
-        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: computed(() => {
-                var _a;
-                const { value: size } = mergedSizeRef;
-                const { value: labelPlacement } = labelPlacementRef;
-                const direction = labelPlacement === 'top' ? 'vertical' : 'horizontal';
-                const { common: { cubicBezierEaseInOut }, self: { labelTextColor, asteriskColor, lineHeight, feedbackTextColor, feedbackTextColorWarning, feedbackTextColorError, feedbackPadding, [createKey('labelHeight', size)]: labelHeight, [createKey('blankHeight', size)]: blankHeight, [createKey('feedbackFontSize', size)]: feedbackFontSize, [createKey('feedbackHeight', size)]: feedbackHeight, [createKey('labelPadding', direction)]: labelPadding, [createKey('labelTextAlign', direction)]: labelTextAlign, [createKey(createKey('labelFontSize', labelPlacement), size)]: labelFontSize } } = themeRef.value;
-                let mergedLabelTextAlign = (_a = labelTextAlignRef.value) !== null && _a !== void 0 ? _a : labelTextAlign;
-                if (labelPlacement === 'top') {
-                    mergedLabelTextAlign =
-                        mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
-                }
-                const cssVars = {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-line-height': lineHeight,
-                    '--n-blank-height': blankHeight,
-                    '--n-label-font-size': labelFontSize,
-                    '--n-label-text-align': mergedLabelTextAlign,
-                    '--n-label-height': labelHeight,
-                    '--n-label-padding': labelPadding,
-                    '--n-asterisk-color': asteriskColor,
-                    '--n-label-text-color': labelTextColor,
-                    '--n-feedback-padding': feedbackPadding,
-                    '--n-feedback-font-size': feedbackFontSize,
-                    '--n-feedback-height': feedbackHeight,
-                    '--n-feedback-text-color': feedbackTextColor,
-                    '--n-feedback-text-color-warning': feedbackTextColorWarning,
-                    '--n-feedback-text-color-error': feedbackTextColorError
-                };
-                return cssVars;
-            }) });
+        const cssVarsRef = computed(() => {
+            var _a;
+            const { value: size } = mergedSizeRef;
+            const { value: labelPlacement } = labelPlacementRef;
+            const direction = labelPlacement === 'top' ? 'vertical' : 'horizontal';
+            const { common: { cubicBezierEaseInOut }, self: { labelTextColor, asteriskColor, lineHeight, feedbackTextColor, feedbackTextColorWarning, feedbackTextColorError, feedbackPadding, [createKey('labelHeight', size)]: labelHeight, [createKey('blankHeight', size)]: blankHeight, [createKey('feedbackFontSize', size)]: feedbackFontSize, [createKey('feedbackHeight', size)]: feedbackHeight, [createKey('labelPadding', direction)]: labelPadding, [createKey('labelTextAlign', direction)]: labelTextAlign, [createKey(createKey('labelFontSize', labelPlacement), size)]: labelFontSize } } = themeRef.value;
+            let mergedLabelTextAlign = (_a = labelTextAlignRef.value) !== null && _a !== void 0 ? _a : labelTextAlign;
+            if (labelPlacement === 'top') {
+                mergedLabelTextAlign =
+                    mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
+            }
+            const cssVars = {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-line-height': lineHeight,
+                '--n-blank-height': blankHeight,
+                '--n-label-font-size': labelFontSize,
+                '--n-label-text-align': mergedLabelTextAlign,
+                '--n-label-height': labelHeight,
+                '--n-label-padding': labelPadding,
+                '--n-asterisk-color': asteriskColor,
+                '--n-label-text-color': labelTextColor,
+                '--n-feedback-padding': feedbackPadding,
+                '--n-feedback-font-size': feedbackFontSize,
+                '--n-feedback-height': feedbackHeight,
+                '--n-feedback-text-color': feedbackTextColor,
+                '--n-feedback-text-color-warning': feedbackTextColorWarning,
+                '--n-feedback-text-color-error': feedbackTextColorError
+            };
+            return cssVars;
+        });
+        const themeClassHandle = useThemeClass('form-item', computed(() => {
+            var _a;
+            return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
+        }), cssVarsRef, props);
+        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { 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 { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement } = this;
+        const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
         const renderedShowRequireMark = mergedShowRequireMark !== undefined
             ? mergedShowRequireMark
             : this.mergedRequired;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-form-item`,
+                this.themeClass,
                 `${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
                 `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
                 !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`

package/es/form/src/FormItemRow.js

@@ -30,7 +30,7 @@ export default defineComponent({
         return h(NRow, keep(this.$props, rowPropKeys), {
             default: () => {
                 const colProps = keep(this.$props, formItemColPropKeys);
-                return h(NFormItemCol, Object.assign(Object.assign({ ref: 'formItemColRef' }, colProps), { span: 24 }), this.$slots);
+                return h(NFormItemCol, Object.assign(Object.assign({ ref: 'formItemColInstRef' }, colProps), { span: 24 }), this.$slots);
             }
         });
     }

package/es/gradient-text/src/GradientText.d.ts

@@ -120,7 +120,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-start': string;
         '--n-color-end': string;
         '--n-font-weight': 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: PropType<string | number>;
     readonly fontSize: PropType<string | number>;

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

@@ -1,5 +1,5 @@
 import { defineComponent, computed, h } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey, formatLength, useHoudini } from '../../_utils';
 import { gradientTextLight } from '../styles';
 import style from './styles/index.cssr';
@@ -12,7 +12,7 @@ export default defineComponent({
     props: gradientTextProps,
     setup(props) {
         useHoudini();
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const compatibleTypeRef = computed(() => {
             const { type } = props;
             if (type === 'danger')
@@ -39,29 +39,37 @@ export default defineComponent({
             return undefined;
         });
         const themeRef = useTheme('GradientText', '-gradient-text', style, gradientTextLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { value: type } = compatibleTypeRef;
+            const { common: { cubicBezierEaseInOut }, self: { rotate, [createKey('colorStart', type)]: colorStart, [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
+            ? useThemeClass('gradient-text', computed(() => compatibleTypeRef.value[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compatibleType: compatibleTypeRef,
             styleFontSize: styleFontSizeRef,
             styleBgImage: styleBgImageRef,
-            cssVars: computed(() => {
-                const { value: type } = compatibleTypeRef;
-                const { common: { cubicBezierEaseInOut }, self: { rotate, [createKey('colorStart', type)]: colorStart, [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 (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/es/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/es/icon/src/Icon.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, mergeProps } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useThemeClass, useConfig, useTheme } from '../../_mixins';
 import { formatLength, warn } from '../../_utils';
 import { iconLight } from '../styles';
 import style from './styles/index.cssr';
@@ -9,8 +9,28 @@ export const NIcon = defineComponent({
     inheritAttrs: false,
     props: Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Icon', '-icon', style, iconLight, props, mergedClsPrefixRef);
+        const cssVarsRef = 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
+            ? useThemeClass('icon', computed(() => `${props.depth || 'd'}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedStyle: computed(() => {
@@ -20,39 +40,29 @@ export const NIcon = defineComponent({
                     color
                 };
             }),
-            cssVars: 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__) {
             warn('icon', "don't wrap `n-icon` inside `n-icon`");
         }
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return h('i', 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 ? h(component) : this.$slots);
     }
 });

package/es/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/es/image/src/ImagePreview.js

@@ -5,7 +5,7 @@ import { LazyTeleport } from 'vueuc';
 import { on, off } from 'evtd';
 import { beforeNextFrameOnce } from 'seemly';
 import { RotateClockwiseIcon, RotateCounterclockwiseIcon, ZoomInIcon, ZoomOutIcon } from '../../_internal/icons';
-import { useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseIcon } from '../../_internal';
 import { NTooltip } from '../../tooltip';
 import { imageLight } from '../styles';
@@ -252,6 +252,20 @@ export default defineComponent({
                 return node;
             }
         }
+        const cssVarsRef = 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 } = useConfig();
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('image-preview', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign({ previewRef,
             previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: useIsMounted(), displayed: displayedRef, handleWheel(e) {
                 e.preventDefault();
@@ -270,16 +284,7 @@ export default defineComponent({
             rotateClockwise,
             handleSwitchPrev,
             handleSwitchNext,
-            withTooltip, cssVars: 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;
@@ -287,8 +292,16 @@ export default defineComponent({
         return (h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             h(LazyTeleport, { show: this.show }, {
-                default: () => this.show || this.displayed
-                    ? withDirectives(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 withDirectives(h("div", { class: [
+                            `${clsPrefix}-image-preview-container`,
+                            this.themeClass
+                        ], style: this.cssVars, onWheel: this.handleWheel },
                         h(Transition, { name: "fade-in-transition", appear: this.appear }, {
                             default: () => this.show ? (h("div", { class: `${clsPrefix}-image-preview-overlay`, onClick: this.toggleShow })) : null
                         }),
@@ -319,8 +332,8 @@ export default defineComponent({
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
                             default: () => withDirectives(h("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
                                 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 })), [[vShow, this.show]])
-                        })), [[zindexable, { enabled: this.show }]])
-                    : null
+                        })), [[zindexable, { enabled: this.show }]]);
+                }
             })));
     }
 });

package/es/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/es/input/src/Input.js

@@ -12,6 +12,7 @@ import { inputInjectionKey } from './interface';
 import { isEmptyValue } from './utils';
 import WordCount from './WordCount';
 import style from './styles/input.cssr';
+import useRtl from '../../_mixins/use-rtl';
 const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -61,7 +62,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = useConfig(props);
+        const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Input', '-input', style, inputLight, props, mergedClsPrefixRef);
         // dom refs
         const wrapperElRef = ref(null);
@@ -173,14 +174,20 @@ export default defineComponent({
                 }
             ];
         });
+        const textAreaScrollContainerWidthRef = 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));
@@ -628,6 +635,7 @@ export default defineComponent({
             deactivate,
             activate
         };
+        const rtlEnabledRef = useRtl('Input', mergedRtlRef, mergedClsPrefixRef);
         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;
@@ -701,7 +709,7 @@ export default 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,
@@ -732,6 +740,7 @@ export default 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,
@@ -748,11 +757,23 @@ export default defineComponent({
                 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: () => {
+                        const { textAreaScrollContainerWidth } = this;
+                        const scrollContainerWidthStyle = {
+                            width: this.autosize &&
+                                textAreaScrollContainerWidth &&
+                                `${textAreaScrollContainerWidth}px`
+                        };
                         return (h(Fragment, null,
                             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 ? (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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder`, style: [
+                                    this.placeholderStyle,
+                                    scrollContainerWidthStyle
+                                ], key: "placeholder" }, this.mergedPlaceholder[0])) : null,
                             this.autosize ? (h(VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
                                 default: () => (h("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
                             })) : null));

package/es/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/es/input/src/InputGroupLabel.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { inputLight } from '../styles';
 import style from './styles/input-group-label.cssr';
@@ -14,32 +14,39 @@ export default defineComponent({
     name: 'InputGroupLabel',
     props: inputGroupLabelProps,
     setup(props) {
-        const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Input', '-input-group-label', style, inputLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [createKey('fontSize', size)]: fontSize, [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
+            ? useThemeClass('input-group-label', computed(() => props.size[0]), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedBordered: mergedBorderedRef,
-            cssVars: computed(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [createKey('fontSize', size)]: fontSize, [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 (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 (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 ? (h("div", { class: `${mergedClsPrefix}-input-group-label__border` })) : null));
     }
 });

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

@@ -148,6 +148,7 @@ cE('textarea', `
  resize: none;
  white-space: pre-wrap;
  `), cE('textarea-mirror', `
+ width: 100%;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;

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

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

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

@@ -0,0 +1,16 @@
+import { cB, cE, cM } from '../../../_utils/cssr';
+export default cB('input', [cM('rtl', `
+ direction: rtl;
+ `, [cE('prefix', {
+  marginRight: 0,
+  marginLeft: '4px'
+}), cE('suffix', {
+  marginRight: '4px',
+  marginLeft: 0
+}), cM('textarea', 'width: 100%;', [cB('input-word-count', `
+ left: var(--n-padding-right);
+ right: unset;
+ `)]), cB('input-word-count', `
+ margin-left: 0;
+ margin-right: 4px;
+ `)])]);

package/es/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/es/input/styles/index.js

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