naive-ui 2.24.1 → 2.24.5

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

@@ -113,6 +113,7 @@ declare const _default: import("vue").DefineComponent<{
     show: import("vue").Ref<boolean>;
     appear: Readonly<import("vue").Ref<boolean>>;
     displayed: import("vue").Ref<boolean>;
+    handleWheel(e: WheelEvent): void;
     handlePreviewMousedown: (e: MouseEvent) => void;
     handlePreviewDblclick: () => void;
     syncTransformOrigin: () => void;
@@ -132,21 +133,19 @@ declare const _default: import("vue").DefineComponent<{
         '--n-toolbar-border-radius': string;
         '--n-toolbar-box-shadow': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    onNext?: unknown;
-    onPrev?: unknown;
-    clsPrefix?: unknown;
-    showToolbar?: unknown;
-    showToolbarTooltip?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    clsPrefix: string;
-    showToolbar: boolean;
-    showToolbarTooltip: boolean;
-} & {
-    theme?: import("../../_mixins").Theme<"Image", {
+}, 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>;
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+    showToolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showToolbarTooltip: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -174,8 +173,8 @@ declare const _default: import("vue").DefineComponent<{
                 padding: string;
             }, any>;
         }>;
-    }> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    }>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -203,8 +202,8 @@ declare const _default: import("vue").DefineComponent<{
                 padding: string;
             }, any>;
         }>;
-    }>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
+    }>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Image", {
         toolbarIconColor: string;
         toolbarColor: string;
         toolbarBoxShadow: string;
@@ -232,10 +231,8 @@ declare const _default: import("vue").DefineComponent<{
                 padding: string;
             }, any>;
         }>;
-    }>> | undefined;
-    onNext?: (() => void) | undefined;
-    onPrev?: (() => void) | undefined;
-}>, {
+    }>>>;
+}>>, {
     showToolbar: boolean;
     showToolbarTooltip: boolean;
 }>;

package/lib/image/src/ImagePreview.js

@@ -12,11 +12,11 @@ const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
+const tooltip_1 = require("../../tooltip");
 const styles_1 = require("../styles");
 const icons_2 = require("./icons");
 const interface_1 = require("./interface");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const tooltip_1 = require("../../tooltip");
 exports.default = (0, vue_1.defineComponent)({
     name: 'ImagePreview',
     props: Object.assign(Object.assign({}, interface_1.imagePreviewSharedProps), { onNext: Function, onPrev: Function, clsPrefix: {
@@ -258,7 +258,10 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         return Object.assign({ previewRef,
-            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handlePreviewMousedown,
+            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handleWheel(e) {
+                e.preventDefault();
+            },
+            handlePreviewMousedown,
             handlePreviewDblclick,
             syncTransformOrigin, handleAfterLeave: () => {
                 rotate = 0;
@@ -284,12 +287,13 @@ exports.default = (0, vue_1.defineComponent)({
             }) }, exposedMethods);
     },
     render() {
+        var _a, _b;
         const { clsPrefix } = this;
-        return ((0, vue_1.h)(vue_1.Fragment, null,
-            (0, vue_1.renderSlot)(this.$slots, 'default'),
+        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 },
+                    ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-container`, 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
                         }),

package/lib/index.d.ts

@@ -5,7 +5,7 @@ export * from './locales';
 export * from './components';
 export * from './composables';
 export * from './styles';
-export { darkTheme, createTheme } from './themes';
+export { darkTheme, lightTheme, createTheme } from './themes';
 export { c, cE, cM, cB, cNotM } from './_utils/cssr';
 export { default as version } from './version';
 export { NThemeEditor } from './theme-editor';

package/lib/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NThemeEditor = exports.version = exports.cNotM = exports.cB = exports.cM = exports.cE = exports.c = exports.createTheme = exports.darkTheme = exports.create = exports.useOsTheme = exports.default = void 0;
+exports.NThemeEditor = exports.version = exports.cNotM = exports.cB = exports.cM = exports.cE = exports.c = exports.createTheme = exports.lightTheme = exports.darkTheme = exports.create = exports.useOsTheme = exports.default = void 0;
 var preset_1 = require("./preset");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(preset_1).default; } });
 var vooks_1 = require("vooks");
@@ -28,6 +28,7 @@ __exportStar(require("./styles"), exports);
 // composed global theme, createTheme from component themes util
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return themes_1.darkTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return themes_1.lightTheme; } });
 Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return themes_1.createTheme; } });
 var cssr_1 = require("./_utils/cssr");
 Object.defineProperty(exports, "c", { enumerable: true, get: function () { return cssr_1.c; } });

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

@@ -1,7 +1,7 @@
 import { PropType, InputHTMLAttributes, TextareaHTMLAttributes } from 'vue';
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { MaybeArray } from '../../_utils';
-import { OnUpdateValue, Size } from './interface';
+import type { OnUpdateValue, Size } from './interface';
 declare const inputProps: {
     bordered: {
         type: PropType<boolean | undefined>;
@@ -543,6 +543,16 @@ declare const _default: import("vue").DefineComponent<{
     inputEl2Ref: import("vue").Ref<HTMLInputElement | null>;
     textareaElRef: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaMirrorElRef: import("vue").Ref<HTMLElement | null>;
+    textareaScrollbarInstRef: import("vue").Ref<{
+        containerRef: HTMLElement | null;
+        contentRef: HTMLElement | null;
+        containerScrollTop: number;
+        syncUnifiedContainer: () => void;
+        scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        sync: () => void;
+        handleMouseEnterWrapper: () => void;
+        handleMouseLeaveWrapper: () => void;
+    } | null>;
     uncontrolledValue: import("vue").Ref<string | [string, string] | null>;
     mergedValue: import("vue").ComputedRef<string | [string, string] | null>;
     passwordVisible: import("vue").Ref<boolean>;
@@ -561,6 +571,10 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     mergedShowPasswordOn: import("vue").ComputedRef<"click" | "mousedown" | undefined>;
+    placeholderStyle: import("vue").Ref<{
+        top: string;
+    }>;
+    handleTextAreaScroll: (e: Event) => void;
     handleCompositionStart: () => void;
     handleCompositionEnd: (e: CompositionEvent) => void;
     handleInput: (e: InputEvent | CompositionEvent | Event, index?: 0 | 1, event?: string) => void;
@@ -578,6 +592,7 @@ declare const _default: import("vue").DefineComponent<{
     handlePasswordToggleMousedown: (e: MouseEvent) => void;
     handleWrapperKeyDown: (e: KeyboardEvent) => void;
     handleTextAreaMirrorResize: () => void;
+    getTextareaScrollContainer: () => HTMLTextAreaElement | null;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -802,97 +817,93 @@ declare const _default: import("vue").DefineComponent<{
     select: () => void;
     activate: () => void;
     deactivate: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    bordered?: unknown;
-    type?: unknown;
-    placeholder?: unknown;
-    defaultValue?: unknown;
-    value?: unknown;
-    disabled?: unknown;
-    size?: unknown;
-    rows?: unknown;
-    round?: unknown;
-    minlength?: unknown;
-    maxlength?: unknown;
-    clearable?: unknown;
-    autosize?: unknown;
-    pair?: unknown;
-    separator?: unknown;
-    readonly?: unknown;
-    passivelyActivated?: unknown;
-    showPasswordOn?: unknown;
-    stateful?: unknown;
-    autofocus?: unknown;
-    inputProps?: unknown;
-    resizable?: unknown;
-    showCount?: unknown;
-    loading?: unknown;
-    onMousedown?: unknown;
-    onKeydown?: unknown;
-    onKeyup?: unknown;
-    onInput?: unknown;
-    onFocus?: unknown;
-    onBlur?: unknown;
-    onClick?: unknown;
-    onChange?: unknown;
-    onClear?: unknown;
-    'onUpdate:value'?: unknown;
-    onUpdateValue?: unknown;
-    textDecoration?: unknown;
-    attrSize?: unknown;
-    onInputBlur?: unknown;
-    onInputFocus?: unknown;
-    onDeactivate?: unknown;
-    onActivate?: unknown;
-    onWrapperFocus?: unknown;
-    onWrapperBlur?: unknown;
-    internalDeactivateOnEnter?: unknown;
-    internalForceFocus?: unknown;
-    internalLoadingBeforeSuffix?: unknown;
-    showPasswordToggle?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    type: "textarea" | "text" | "password";
-    readonly: string | boolean;
-    round: boolean;
-    autofocus: boolean;
-    autosize: boolean | {
-        minRows?: number | undefined;
-        maxRows?: number | 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<{
+    bordered: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
     };
-    clearable: boolean;
-    defaultValue: string | [string, string] | null;
-    resizable: boolean;
-    pair: boolean;
-    rows: string | number;
-    passivelyActivated: boolean;
-    stateful: boolean;
-    showCount: boolean;
-    attrSize: number;
-    internalDeactivateOnEnter: boolean;
-    internalForceFocus: boolean;
-    internalLoadingBeforeSuffix: boolean;
-    showPasswordToggle: boolean;
-} & {
-    value?: string | [string, string] | null | undefined;
-    size?: Size | undefined;
-    separator?: string | undefined;
-    disabled?: boolean | undefined;
-    textDecoration?: string | [string, string] | undefined;
-    onFocus?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onBlur?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onChange?: OnUpdateValue | undefined;
-    onInput?: OnUpdateValue | undefined;
-    onKeydown?: ((e: KeyboardEvent) => void) | undefined;
-    onKeyup?: ((e: KeyboardEvent) => void) | undefined;
-    onClick?: MaybeArray<(e: MouseEvent) => void> | undefined;
-    onMousedown?: ((e: MouseEvent) => void) | undefined;
-    placeholder?: string | [string, string] | undefined;
-    maxlength?: string | number | undefined;
-    minlength?: string | number | undefined;
-    theme?: import("../../_mixins").Theme<"Input", {
+    type: {
+        type: PropType<"textarea" | "text" | "password">;
+        default: string;
+    };
+    placeholder: PropType<string | [string, string]>;
+    defaultValue: {
+        type: PropType<string | [string, string] | null>;
+        default: null;
+    };
+    value: PropType<string | [string, string] | null>;
+    disabled: {
+        type: PropType<boolean | undefined>;
+        default: undefined;
+    };
+    size: PropType<Size>;
+    rows: {
+        type: PropType<string | number>;
+        default: number;
+    };
+    round: BooleanConstructor;
+    minlength: PropType<string | number>;
+    maxlength: PropType<string | number>;
+    clearable: BooleanConstructor;
+    autosize: {
+        type: PropType<boolean | {
+            minRows?: number | undefined;
+            maxRows?: number | undefined;
+        }>;
+        default: boolean;
+    };
+    pair: BooleanConstructor;
+    separator: StringConstructor;
+    readonly: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    passivelyActivated: BooleanConstructor;
+    showPasswordOn: PropType<"click" | "mousedown">;
+    stateful: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocus: BooleanConstructor;
+    inputProps: PropType<InputHTMLAttributes | TextareaHTMLAttributes>;
+    resizable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showCount: BooleanConstructor;
+    loading: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    onMousedown: PropType<(e: MouseEvent) => void>;
+    onKeydown: PropType<(e: KeyboardEvent) => void>;
+    onKeyup: PropType<(e: KeyboardEvent) => void>;
+    onInput: PropType<OnUpdateValue>;
+    onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    onChange: PropType<OnUpdateValue>;
+    onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
+    onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
+    /** private */
+    textDecoration: PropType<string | [string, string]>;
+    attrSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    onInputBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    onInputFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    onDeactivate: PropType<MaybeArray<() => void>>;
+    onActivate: PropType<MaybeArray<() => void>>;
+    onWrapperFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    onWrapperBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    internalDeactivateOnEnter: BooleanConstructor;
+    internalForceFocus: BooleanConstructor;
+    internalLoadingBeforeSuffix: BooleanConstructor;
+    /** deprecated */
+    showPasswordToggle: BooleanConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -951,8 +962,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -1011,8 +1022,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -1071,21 +1082,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any>> | undefined;
-    loading?: boolean | undefined;
-    bordered?: boolean | undefined;
-    onClear?: MaybeArray<(e: MouseEvent) => void> | undefined;
-    inputProps?: InputHTMLAttributes | TextareaHTMLAttributes | undefined;
-    "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
-    onUpdateValue?: MaybeArray<OnUpdateValue> | undefined;
-    showPasswordOn?: "click" | "mousedown" | undefined;
-    onInputBlur?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onInputFocus?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onDeactivate?: MaybeArray<() => void> | undefined;
-    onActivate?: MaybeArray<() => void> | undefined;
-    onWrapperFocus?: MaybeArray<(e: FocusEvent) => void> | undefined;
-    onWrapperBlur?: MaybeArray<(e: FocusEvent) => void> | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     type: "textarea" | "text" | "password";
     readonly: string | boolean;
     round: boolean;

package/lib/input/src/Input.js

@@ -7,8 +7,9 @@ const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
-const _internal_1 = require("../../_internal");
+const evtd_1 = require("evtd");
 const icons_1 = require("../../_internal/icons");
+const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
@@ -16,7 +17,6 @@ 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 evtd_1 = require("evtd");
 const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -75,6 +75,7 @@ exports.default = (0, vue_1.defineComponent)({
         const inputMirrorElRef = (0, vue_1.ref)(null);
         const inputElRef = (0, vue_1.ref)(null);
         const inputEl2Ref = (0, vue_1.ref)(null);
+        const textareaScrollbarInstRef = (0, vue_1.ref)(null);
         // local
         const { localeRef } = (0, _mixins_1.useLocale)('Input');
         // value
@@ -308,6 +309,12 @@ exports.default = (0, vue_1.defineComponent)({
         function handleInput(e, index = 0, event = 'input') {
             const targetValue = e.target.value;
             syncMirror(targetValue);
+            if (props.type === 'textarea') {
+                const { value: textareaScrollbarInst } = textareaScrollbarInstRef;
+                if (textareaScrollbarInst) {
+                    textareaScrollbarInst.syncUnifiedContainer();
+                }
+            }
             syncSource = targetValue;
             if (isComposingRef.value)
                 return;
@@ -431,10 +438,18 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleMouseEnter() {
+            var _a;
             hoverRef.value = true;
+            if (props.type === 'textarea') {
+                (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.handleMouseEnterWrapper();
+            }
         }
         function handleMouseLeave() {
+            var _a;
             hoverRef.value = false;
+            if (props.type === 'textarea') {
+                (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.handleMouseLeaveWrapper();
+            }
         }
         function handlePasswordToggleClick() {
             if (mergedDisabledRef.value)
@@ -566,18 +581,41 @@ exports.default = (0, vue_1.defineComponent)({
         function handleTextAreaMirrorResize() {
             updateTextAreaStyle();
         }
-        let stopWatchMergedValue = null;
+        const placeholderStyleRef = (0, vue_1.ref)({
+            top: '0'
+        });
+        function handleTextAreaScroll(e) {
+            var _a;
+            const { scrollTop } = e.target;
+            placeholderStyleRef.value.top = `${-scrollTop}px`;
+            (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.syncUnifiedContainer();
+        }
+        let stopWatchMergedValue1 = null;
         (0, vue_1.watchEffect)(() => {
             const { autosize, type } = props;
             if (autosize && type === 'textarea') {
-                stopWatchMergedValue = (0, vue_1.watch)(mergedValueRef, (value) => {
+                stopWatchMergedValue1 = (0, vue_1.watch)(mergedValueRef, (value) => {
                     if (!Array.isArray(value) && value !== syncSource) {
                         syncMirror(value);
                     }
                 });
             }
             else {
-                stopWatchMergedValue === null || stopWatchMergedValue === void 0 ? void 0 : stopWatchMergedValue();
+                stopWatchMergedValue1 === null || stopWatchMergedValue1 === void 0 ? void 0 : stopWatchMergedValue1();
+            }
+        });
+        let stopWatchMergedValue2 = null;
+        (0, vue_1.watchEffect)(() => {
+            if (props.type === 'textarea') {
+                stopWatchMergedValue2 = (0, vue_1.watch)(mergedValueRef, (value) => {
+                    var _a;
+                    if (!Array.isArray(value) && value !== syncSource) {
+                        (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.syncUnifiedContainer();
+                    }
+                });
+            }
+            else {
+                stopWatchMergedValue2 === null || stopWatchMergedValue2 === void 0 ? void 0 : stopWatchMergedValue2();
             }
         });
         (0, vue_1.provide)(interface_1.inputInjectionKey, {
@@ -603,10 +641,12 @@ exports.default = (0, vue_1.defineComponent)({
             inputMirrorElRef,
             inputEl2Ref,
             textareaElRef,
-            textareaMirrorElRef, 
+            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, 
+            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, 
             // methods
+            handleTextAreaScroll,
             handleCompositionStart,
             handleCompositionEnd,
             handleInput,
@@ -623,7 +663,9 @@ exports.default = (0, vue_1.defineComponent)({
             handlePasswordToggleClick,
             handlePasswordToggleMousedown,
             handleWrapperKeyDown,
-            handleTextAreaMirrorResize, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
+            handleTextAreaMirrorResize, getTextareaScrollContainer: () => {
+                return textareaElRef.value;
+            }, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
                 const { left: paddingLeft, right: paddingRight } = (0, seemly_1.getPadding)(padding);
@@ -682,7 +724,8 @@ exports.default = (0, vue_1.defineComponent)({
             }) });
     },
     render() {
-        const { mergedClsPrefix } = this;
+        var _a, _b, _c, _d;
+        const { mergedClsPrefix, $slots } = this;
         return ((0, vue_1.h)("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
                 {
@@ -699,15 +742,19 @@ exports.default = (0, vue_1.defineComponent)({
                 ? 0
                 : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeyDown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                this.$slots.affix || this.$slots.prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, (0, vue_1.renderSlot)(this.$slots, 'affix', undefined, () => {
-                    return [(0, vue_1.renderSlot)(this.$slots, 'prefix')];
-                }))) : null,
-                this.type === 'textarea' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__textarea` },
-                    (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 })),
-                    this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder`, 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)) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
+                $slots.affix || $slots.prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, (_a = ($slots.affix || $slots.prefix)) === null || _a === void 0 ? void 0 : _a())) : null,
+                this.type === 'textarea' ? ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
+                    default: () => {
+                        return ((0, vue_1.h)(vue_1.Fragment, null,
+                            (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,
+                            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));
+                    }
+                })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
                     (0, vue_1.h)("input", Object.assign({ type: this.type === 'password' &&
                             this.mergedShowPasswordOn &&
                             this.passwordVisible
@@ -719,27 +766,21 @@ exports.default = (0, vue_1.defineComponent)({
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
                 !this.pair &&
-                    (this.$slots.suffix ||
+                    ($slots.suffix ||
                         this.clearable ||
                         this.showCount ||
                         this.mergedShowPasswordOn ||
                         this.loading !== undefined) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || this.$slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => (0, vue_1.renderSlot)(this.$slots, 'clear') })) : null,
-                    !this.internalLoadingBeforeSuffix
-                        ? (0, vue_1.renderSlot)(this.$slots, 'suffix')
-                        : null,
+                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
+                    !this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
                     this.loading !== undefined ? ((0, vue_1.h)(_internal_1.NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
-                    this.internalLoadingBeforeSuffix
-                        ? (0, vue_1.renderSlot)(this.$slots, 'suffix')
-                        : null,
-                    this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: this.$slots.count })) : null,
+                    this.internalLoadingBeforeSuffix ? (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots) : null,
+                    this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: $slots.count })) : null,
                     this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
                         default: () => this.passwordVisible ? (0, vue_1.h)(icons_1.EyeIcon, null) : (0, vue_1.h)(icons_1.EyeOffIcon, null)
                     })) : null
                 ])) : null),
-            this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, (0, vue_1.renderSlot)(this.$slots, 'separator', undefined, () => [
-                this.separator
-            ]))) : null,
+            this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, $slots.separator ? $slots.separator() : this.separator)) : null,
             this.pair ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
                     (0, vue_1.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
@@ -748,11 +789,11 @@ exports.default = (0, vue_1.defineComponent)({
                     this.showPlaceholder2 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[1]))) : null),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || this.$slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => (0, vue_1.renderSlot)(this.$slots, 'clear') })) : null,
-                    (0, vue_1.renderSlot)(this.$slots, 'suffix')
+                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
+                    (_d = $slots.suffix) === null || _d === void 0 ? void 0 : _d.call($slots)
                 ]))) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
-            this.showCount && this.type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: this.$slots.count })) : null));
+            this.showCount && this.type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: $slots.count })) : null));
     }
 });