naive-ui 2.25.3 → 2.25.6

package/lib/dynamic-input/src/DynamicInput.js

@@ -59,7 +59,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedComponentPropsRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const NFormItem = (0, vue_1.inject)(use_form_item_1.formItemInjectionKey, null);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
@@ -201,6 +201,15 @@ exports.default = (0, vue_1.defineComponent)({
             valuePlaceholderRef: (0, vue_1.toRef)(props, 'valuePlaceholder'),
             placeholderRef: (0, vue_1.toRef)(props, 'placeholder')
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { actionMargin } } = themeRef.value;
+            return {
+                '--action-margin': actionMargin
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('dynamic-input', undefined, cssVarsRef, props)
+            : undefined;
         return {
             locale: (0, _mixins_1.useLocale)('DynamicInput').localeRef,
             buttonSize: buttonSizeRef,
@@ -217,17 +226,15 @@ exports.default = (0, vue_1.defineComponent)({
             move,
             createItem,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { actionMargin } } = themeRef.value;
-                return {
-                    '--action-margin': actionMargin
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-dynamic-input`, this.themeClass], style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
             default: () => (0, _utils_1.resolveSlot)($slots['create-button-default'], () => [
                 locale.create
             ]),

package/lib/form/src/FormItem.d.ts

@@ -266,7 +266,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-feedback-text-color': string;
         '--n-feedback-text-color-warning': string;
         '--n-feedback-text-color-error': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string>;
+    onRender: () => void;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
     path?: string | undefined;

package/lib/form/src/FormItem.js

@@ -76,7 +76,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.formItemProps,
     setup(props) {
         (0, _utils_1.useInjectionInstanceCollection)(context_1.formItemInstsInjectionKey, 'formItems', (0, vue_1.toRef)(props, 'path'));
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
         const formItemSizeRefs = (0, utils_1.formItemSize)(props);
         const formItemMiscRefs = (0, utils_1.formItemMisc)(props);
@@ -238,45 +238,52 @@ exports.default = (0, vue_1.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: (0, vue_1.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, [(0, _utils_1.createKey)('labelHeight', size)]: labelHeight, [(0, _utils_1.createKey)('blankHeight', size)]: blankHeight, [(0, _utils_1.createKey)('feedbackFontSize', size)]: feedbackFontSize, [(0, _utils_1.createKey)('feedbackHeight', size)]: feedbackHeight, [(0, _utils_1.createKey)('labelPadding', direction)]: labelPadding, [(0, _utils_1.createKey)('labelTextAlign', direction)]: labelTextAlign, [(0, _utils_1.createKey)((0, _utils_1.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 = (0, vue_1.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, [(0, _utils_1.createKey)('labelHeight', size)]: labelHeight, [(0, _utils_1.createKey)('blankHeight', size)]: blankHeight, [(0, _utils_1.createKey)('feedbackFontSize', size)]: feedbackFontSize, [(0, _utils_1.createKey)('feedbackHeight', size)]: feedbackHeight, [(0, _utils_1.createKey)('labelPadding', direction)]: labelPadding, [(0, _utils_1.createKey)('labelTextAlign', direction)]: labelTextAlign, [(0, _utils_1.createKey)((0, _utils_1.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 = (0, _mixins_1.useThemeClass)('form-item', (0, vue_1.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 ((0, vue_1.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/lib/form/src/FormItemRow.js

@@ -51,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
         return (0, vue_1.h)(Row_1.default, (0, _utils_1.keep)(this.$props, Row_1.rowPropKeys), {
             default: () => {
                 const colProps = (0, _utils_1.keep)(this.$props, FormItemCol_1.formItemColPropKeys);
-                return (0, vue_1.h)(FormItemCol_1.default, Object.assign(Object.assign({ ref: 'formItemColRef' }, colProps), { span: 24 }), this.$slots);
+                return (0, vue_1.h)(FormItemCol_1.default, Object.assign(Object.assign({ ref: 'formItemColInstRef' }, colProps), { span: 24 }), this.$slots);
             }
         });
     }

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