@uzum-tech/ui 1.3.0 → 1.4.0

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

@@ -1,4 +1,4 @@
-import { type PropType, type InputHTMLAttributes, type TextareaHTMLAttributes, type VNodeChild } from 'vue';
+import { h, type PropType, type InputHTMLAttributes, type TextareaHTMLAttributes, type VNodeChild } from 'vue';
 import type { FormValidationStatus } from '../../form/src/interface';
 import { type ExtractPublicPropTypes, type MaybeArray } from '../../_utils';
 import type { OnUpdateValue, InputSize } from './interface';
@@ -8,49 +8,56 @@ export declare const inputProps: {
         default: undefined;
     };
     type: {
-        type: PropType<"textarea" | "text" | "password">;
+        type: PropType<"text" | "textarea" | "password">;
         default: string;
     };
     placeholder: PropType<string | [string, string]>;
     defaultValue: {
-        type: PropType<string | [string, string] | null>;
+        type: PropType<null | string | [string, string]>;
         default: null;
     };
-    value: PropType<string | [string, string] | null>;
+    value: PropType<null | string | [string, string]>;
     disabled: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
     size: PropType<InputSize>;
     rows: {
-        type: PropType<string | number>;
+        type: PropType<number | string>;
         default: number;
     };
     round: BooleanConstructor;
-    minlength: PropType<string | number>;
-    maxlength: PropType<string | number>;
+    minlength: PropType<number | string>;
+    maxlength: PropType<number | string>;
     clearable: BooleanConstructor;
     autosize: {
         type: PropType<boolean | {
-            minRows?: number | undefined;
-            maxRows?: number | undefined;
+            minRows?: number;
+            maxRows?: number;
         }>;
         default: boolean;
     };
     pair: BooleanConstructor;
     separator: StringConstructor;
+    autocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    copyable: BooleanConstructor;
+    uppercase: BooleanConstructor;
+    debounceMs: NumberConstructor;
     readonly: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     passivelyActivated: BooleanConstructor;
-    showPasswordOn: PropType<"click" | "mousedown">;
+    showPasswordOn: PropType<"mousedown" | "click">;
     stateful: {
         type: BooleanConstructor;
         default: boolean;
     };
     autofocus: BooleanConstructor;
-    inputProps: PropType<InputHTMLAttributes | TextareaHTMLAttributes>;
+    inputProps: PropType<TextareaHTMLAttributes | InputHTMLAttributes>;
     resizable: {
         type: BooleanConstructor;
         default: boolean;
@@ -61,6 +68,7 @@ export declare const inputProps: {
         default: undefined;
     };
     loadingSkeleton: BooleanConstructor;
+    formatter: PropType<(value: string) => string>;
     allowInput: PropType<(value: string) => boolean>;
     renderCount: PropType<(props: {
         value: string;
@@ -69,11 +77,13 @@ export declare const inputProps: {
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
     onInput: PropType<OnUpdateValue>;
+    onDebouncedInput: 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>>;
+    copyButtonCallback: PropType<(value: string) => void>;
     countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
@@ -298,49 +308,56 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     type: {
-        type: PropType<"textarea" | "text" | "password">;
+        type: PropType<"text" | "textarea" | "password">;
         default: string;
     };
     placeholder: PropType<string | [string, string]>;
     defaultValue: {
-        type: PropType<string | [string, string] | null>;
+        type: PropType<null | string | [string, string]>;
         default: null;
     };
-    value: PropType<string | [string, string] | null>;
+    value: PropType<null | string | [string, string]>;
     disabled: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
     size: PropType<InputSize>;
     rows: {
-        type: PropType<string | number>;
+        type: PropType<number | string>;
         default: number;
     };
     round: BooleanConstructor;
-    minlength: PropType<string | number>;
-    maxlength: PropType<string | number>;
+    minlength: PropType<number | string>;
+    maxlength: PropType<number | string>;
     clearable: BooleanConstructor;
     autosize: {
         type: PropType<boolean | {
-            minRows?: number | undefined;
-            maxRows?: number | undefined;
+            minRows?: number;
+            maxRows?: number;
         }>;
         default: boolean;
     };
     pair: BooleanConstructor;
     separator: StringConstructor;
+    autocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    copyable: BooleanConstructor;
+    uppercase: BooleanConstructor;
+    debounceMs: NumberConstructor;
     readonly: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     passivelyActivated: BooleanConstructor;
-    showPasswordOn: PropType<"click" | "mousedown">;
+    showPasswordOn: PropType<"mousedown" | "click">;
     stateful: {
         type: BooleanConstructor;
         default: boolean;
     };
     autofocus: BooleanConstructor;
-    inputProps: PropType<InputHTMLAttributes | TextareaHTMLAttributes>;
+    inputProps: PropType<TextareaHTMLAttributes | InputHTMLAttributes>;
     resizable: {
         type: BooleanConstructor;
         default: boolean;
@@ -351,6 +368,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     loadingSkeleton: BooleanConstructor;
+    formatter: PropType<(value: string) => string>;
     allowInput: PropType<(value: string) => boolean>;
     renderCount: PropType<(props: {
         value: string;
@@ -359,11 +377,13 @@ declare const _default: import("vue").DefineComponent<{
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
     onInput: PropType<OnUpdateValue>;
+    onDebouncedInput: 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>>;
+    copyButtonCallback: PropType<(value: string) => void>;
     countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
@@ -603,14 +623,14 @@ declare const _default: import("vue").DefineComponent<{
     uncontrolledValue: import("vue").Ref<string | [string, string] | null>;
     mergedValue: import("vue").ComputedRef<string | [string, string] | null>;
     passwordVisible: import("vue").Ref<boolean>;
-    mergedPlaceholder: import("vue").ComputedRef<[string] | [string, string]>;
+    mergedPlaceholder: import("vue").ComputedRef<[string, string] | [string]>;
     showPlaceholder1: import("vue").ComputedRef<string | false>;
     showPlaceholder2: import("vue").ComputedRef<boolean | "" | undefined>;
     mergedFocus: import("vue").ComputedRef<boolean>;
     isComposing: import("vue").Ref<boolean>;
     activated: import("vue").Ref<boolean>;
     showClearButton: import("vue").ComputedRef<boolean>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large" | "tiny" | "huge">;
+    mergedSize: import("vue").ComputedRef<"small" | "tiny" | "medium" | "large" | "huge">;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     textDecorationStyle: import("vue").ComputedRef<string[] | {
         textDecoration: string;
@@ -623,6 +643,8 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
     textAreaScrollContainerWidth: import("vue").Ref<number | undefined>;
+    inputProps: import("vue").ComputedRef<InputHTMLAttributes | TextareaHTMLAttributes>;
+    renderCopyButton: (cb?: (value: string | [string, string] | null) => void) => ReturnType<typeof h>;
     handleTextAreaScroll: (e: Event) => void;
     handleCompositionStart: () => void;
     handleCompositionEnd: (e: CompositionEvent) => void;
@@ -643,118 +665,7 @@ declare const _default: import("vue").DefineComponent<{
     handleTextAreaMirrorResize: () => void;
     getTextareaScrollContainer: () => HTMLTextAreaElement | null;
     mergedTheme: import("vue").ComputedRef<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: string;
-            brandPrimary50: string;
-            brandPrimary100: string;
-            brandPrimary200: string;
-            brandPrimary300: string;
-            brandPrimary400: string;
-            brandPrimary500: string;
-            brandPrimary550: string;
-            brandPrimary600: string;
-            brandSecondary500: string;
-            brandSecondary300: string;
-            brandSecondary600: string;
-            brandTertiary500: string;
-            brandTertiary300: string;
-            brandTertiary600: string;
-            brandQuaternary500: string;
-            brandQuaternary300: string;
-            brandQuaternary600: string;
-            brandQuinary500: string;
-            brandQuinary300: string;
-            brandQuinary600: string;
-            brandQuinary100: string;
-            surfacePrimary: string;
-            surfaceSecondary: string;
-            containerPrimary: string;
-            containerSecondary: string;
-            textPrimary: string;
-            textSecondary: string;
-            textTertiary: string;
-            textQuaternary: string;
-            textBrand: string;
-            elementsPrimary: string;
-            elementsSecondary: string;
-            elementsTertiary: string;
-            elementsQuaternary: string;
-            elementsQuinary: string;
-            elementsDarkQuinary: string;
-            elementsSenary: string;
-            elementsOnContainer: string;
-            transparencyPrimary: string;
-            transparencySecondary: string;
-            transparencyTertiary: string;
-            transparencyQuinary: string;
-            transparencyModal: string;
-            staticBlack: string;
-            staticDarkGrey: string;
-            staticWhite: string;
-            staticRed: string;
-            staticOrange: string;
-            staticGreen: string;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: string;
-            borderRadiusTiny: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            fontDisplayLarge: string;
-            fontDisplaySmall: string;
-            fontHeadingLarge: string;
-            fontHeadingMedium: string;
-            fontHeadingSmall: string;
-            fontTitleLarge: string;
-            fontTitleMedium: string;
-            fontTitleSmall: string;
-            fontBodyLarge: string;
-            fontBodyMedium: string;
-            fontBodySmall: string;
-            lineHeightDisplayLarge: string;
-            lineHeightDisplaySmall: string;
-            lineHeightHeadingLarge: string;
-            lineHeightHeadingMedium: string;
-            lineHeightHeadingSmall: string;
-            lineHeightTitleLarge: string;
-            lineHeightTitleMedium: string;
-            lineHeightTitleSmall: string;
-            lineHeightBodyLarge: string;
-            lineHeightBodyMedium: string;
-            lineHeightBodySmall: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            fontWeightBold: string;
-            iconSmall: string;
-            iconMedium: string;
-            iconLarge: string;
-            iconHuge: string;
-            closeSmall: string;
-            closeMedium: string;
-            closeLarge: string;
-            closeHuge: string;
-            closeBorderRadius: string;
-            name: "common";
-        };
+        common: import("../..").ThemeCommonVars;
         self: {
             paddingTiny: string;
             paddingSmall: string;
@@ -892,49 +803,56 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     type: {
-        type: PropType<"textarea" | "text" | "password">;
+        type: PropType<"text" | "textarea" | "password">;
         default: string;
     };
     placeholder: PropType<string | [string, string]>;
     defaultValue: {
-        type: PropType<string | [string, string] | null>;
+        type: PropType<null | string | [string, string]>;
         default: null;
     };
-    value: PropType<string | [string, string] | null>;
+    value: PropType<null | string | [string, string]>;
     disabled: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
     size: PropType<InputSize>;
     rows: {
-        type: PropType<string | number>;
+        type: PropType<number | string>;
         default: number;
     };
     round: BooleanConstructor;
-    minlength: PropType<string | number>;
-    maxlength: PropType<string | number>;
+    minlength: PropType<number | string>;
+    maxlength: PropType<number | string>;
     clearable: BooleanConstructor;
     autosize: {
         type: PropType<boolean | {
-            minRows?: number | undefined;
-            maxRows?: number | undefined;
+            minRows?: number;
+            maxRows?: number;
         }>;
         default: boolean;
     };
     pair: BooleanConstructor;
     separator: StringConstructor;
+    autocomplete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    copyable: BooleanConstructor;
+    uppercase: BooleanConstructor;
+    debounceMs: NumberConstructor;
     readonly: {
-        type: (BooleanConstructor | StringConstructor)[];
+        type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
     passivelyActivated: BooleanConstructor;
-    showPasswordOn: PropType<"click" | "mousedown">;
+    showPasswordOn: PropType<"mousedown" | "click">;
     stateful: {
         type: BooleanConstructor;
         default: boolean;
     };
     autofocus: BooleanConstructor;
-    inputProps: PropType<InputHTMLAttributes | TextareaHTMLAttributes>;
+    inputProps: PropType<TextareaHTMLAttributes | InputHTMLAttributes>;
     resizable: {
         type: BooleanConstructor;
         default: boolean;
@@ -945,6 +863,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     loadingSkeleton: BooleanConstructor;
+    formatter: PropType<(value: string) => string>;
     allowInput: PropType<(value: string) => boolean>;
     renderCount: PropType<(props: {
         value: string;
@@ -953,11 +872,13 @@ declare const _default: import("vue").DefineComponent<{
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
     onInput: PropType<OnUpdateValue>;
+    onDebouncedInput: 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>>;
+    copyButtonCallback: PropType<(value: string) => void>;
     countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
@@ -1176,22 +1097,25 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     type: "textarea" | "text" | "password";
-    readonly: string | boolean;
-    round: boolean;
     disabled: boolean | undefined;
-    autofocus: boolean;
-    autosize: boolean | {
-        minRows?: number | undefined;
-        maxRows?: number | undefined;
-    };
     loading: boolean;
     bordered: boolean | undefined;
+    round: boolean;
+    autofocus: boolean;
+    uppercase: boolean;
     clearable: boolean;
     loadingSkeleton: boolean;
+    autosize: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
     resizable: boolean;
     pair: boolean;
+    autocomplete: boolean;
     defaultValue: string | [string, string] | null;
     rows: string | number;
+    copyable: boolean;
+    readonly: string | boolean;
     passivelyActivated: boolean;
     stateful: boolean;
     showCount: boolean;

package/lib/input/src/Input.js

@@ -43,6 +43,9 @@ const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 const WordCount_1 = __importDefault(require("./WordCount"));
 const input_cssr_1 = __importStar(require("./styles/input.cssr"));
+const debounce_1 = require("../../_utils/debounce");
+const use_clipboard_1 = require("./use-clipboard");
+const DEFAULT_DEBOUNCE_MS = 500;
 exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -61,7 +64,10 @@ exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, round: Boolean, minlength: [String, Number], maxlength: [String, Number], clearable: Boolean, autosize: {
         type: [Boolean, Object],
         default: false
-    }, pair: Boolean, separator: String, readonly: {
+    }, pair: Boolean, separator: String, autocomplete: {
+        type: Boolean,
+        default: true
+    }, copyable: Boolean, uppercase: Boolean, debounceMs: Number, readonly: {
         type: [String, Boolean],
         default: false
     }, passivelyActivated: Boolean, showPasswordOn: String, stateful: {
@@ -73,7 +79,7 @@ exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, loadingSkeleton: Boolean, allowInput: Function, renderCount: Function, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], countGraphemes: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, loadingSkeleton: Boolean, formatter: Function, allowInput: Function, renderCount: Function, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onDebouncedInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], copyButtonCallback: Function, countGraphemes: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -87,7 +93,8 @@ exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
 exports.default = (0, vue_1.defineComponent)({
     name: 'Input',
     props: exports.inputProps,
-    setup(props) {
+    setup(props, { emit }) {
+        var _a;
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
                 if (props.showPasswordToggle) {
@@ -249,6 +256,8 @@ exports.default = (0, vue_1.defineComponent)({
             const { maxlength } = props;
             return maxlength === undefined ? undefined : Number(maxlength);
         });
+        // autocomplete
+        const inputProps = (0, vue_1.computed)(() => (Object.assign({ autocomplete: props.autocomplete ? undefined : 'new-password' }, props.inputProps)));
         (0, vue_1.onMounted)(() => {
             // sync mirror if is not pair
             const { value } = mergedValueRef;
@@ -257,6 +266,9 @@ exports.default = (0, vue_1.defineComponent)({
             }
         });
         // other methods
+        const emitDebouncedInput = (0, debounce_1.debounce)((value) => {
+            emit('debouncedInput', value);
+        }, (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEFAULT_DEBOUNCE_MS);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const vm = (0, vue_1.getCurrentInstance)().proxy;
         function doUpdateValue(value) {
@@ -270,6 +282,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onInput, value);
             uncontrolledValueRef.value = value;
             nTriggerFormInput();
+            emitDebouncedInput(value);
         }
         function doChange(value) {
             const { onChange } = props;
@@ -347,7 +360,11 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function handleInput(e, index = 0, event = 'input') {
-            const targetValue = e.target.value;
+            let targetValue = e.target.value;
+            if (props.uppercase)
+                targetValue = targetValue.toUpperCase();
+            if (props.formatter)
+                targetValue = props.formatter(targetValue);
             syncMirror(targetValue);
             if (e instanceof InputEvent && !e.isComposing) {
                 isComposingRef.value = false;
@@ -716,6 +733,23 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefixRef,
             countGraphemesRef: (0, vue_1.toRef)(props, 'countGraphemes')
         });
+        const { renderCopyButton } = (0, use_clipboard_1.useCopyableText)({
+            mergedClsPrefixRef,
+            mergedValueRef
+        }, props.copyButtonCallback
+            ? (value) => {
+                var _a, _b, _c;
+                if (typeof value === 'string') {
+                    (_a = props.copyButtonCallback) === null || _a === void 0 ? void 0 : _a.call(props, value);
+                }
+                else if (Array.isArray(value)) {
+                    (_b = props.copyButtonCallback) === null || _b === void 0 ? void 0 : _b.call(props, value[0]);
+                }
+                else {
+                    (_c = props.copyButtonCallback) === null || _c === void 0 ? void 0 : _c.call(props, '');
+                }
+            }
+            : undefined);
         const exposedProps = {
             wrapperElRef,
             inputElRef,
@@ -806,8 +840,9 @@ exports.default = (0, vue_1.defineComponent)({
             textareaMirrorElRef,
             textareaScrollbarInstRef, 
             // value
-            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, 
+            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, inputProps,
             // methods
+            renderCopyButton,
             handleTextAreaScroll,
             handleCompositionStart,
             handleCompositionEnd,
@@ -830,7 +865,7 @@ exports.default = (0, vue_1.defineComponent)({
             }, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const { mergedClsPrefix, mergedStatus, themeClass, type, countGraphemes, onRender } = this;
         const $slots = this.$slots;
         onRender === null || onRender === void 0 ? void 0 : onRender();
@@ -856,7 +891,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.resolveWrappedSlot)($slots.prefix, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 type === 'textarea' ? ((0, vue_1.h)(_internal_1.UScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true, internalHoistYRail: true }, {
                     default: () => {
-                        var _a, _b;
+                        var _a, _b, _c, _d;
                         const { textAreaScrollContainerWidth } = this;
                         const scrollContainerWidthStyle = {
                             width: this.autosize &&
@@ -870,8 +905,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 ], autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
                                     ? -1
                                     : undefined, style: [
-                                    this.textDecorationStyle[0],
-                                    (_b = this.inputProps) === null || _b === void 0 ? void 0 : _b.style,
+                                    (_b = this.textDecorationStyle) === null || _b === void 0 ? void 0 : _b[0],
+                                    (_c = this.inputProps) === null || _c === void 0 ? void 0 : _c.style,
                                     scrollContainerWidthStyle
                                 ], onBlur: this.handleInputBlur, onFocus: (e) => {
                                     this.handleInputFocus(e, 2);
@@ -879,7 +914,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder`, style: [
                                     this.placeholderStyle,
                                     scrollContainerWidthStyle
-                                ], key: "placeholder" }, this.mergedPlaceholder[0])) : null,
+                                ], key: "placeholder" }, (_d = this.mergedPlaceholder) === null || _d === void 0 ? void 0 : _d[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));
@@ -893,9 +928,9 @@ exports.default = (0, vue_1.defineComponent)({
                             `${mergedClsPrefix}-input__input-el`,
                             (_a = this.inputProps) === null || _a === void 0 ? void 0 : _a.class
                         ], style: [
-                            this.textDecorationStyle[0],
-                            (_b = this.inputProps) === null || _b === void 0 ? void 0 : _b.style
-                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
+                            (_b = this.textDecorationStyle) === null || _b === void 0 ? void 0 : _b[0],
+                            (_c = this.inputProps) === null || _c === void 0 ? void 0 : _c.style
+                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: (_d = this.mergedPlaceholder) === null || _d === void 0 ? void 0 : _d[0], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[0]
                             : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: (e) => {
                             this.handleInputFocus(e, 0);
@@ -905,13 +940,14 @@ exports.default = (0, vue_1.defineComponent)({
                             this.handleChange(e, 0);
                         } })),
                     this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
-                        (0, vue_1.h)("span", null, this.mergedPlaceholder[0]))) : null,
+                        (0, vue_1.h)("span", null, (_e = this.mergedPlaceholder) === null || _e === void 0 ? void 0 : _e[0]))) : null,
                     this.autosize ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
                 !this.pair &&
                     (0, _utils_1.resolveWrappedSlot)($slots.suffix, (children) => {
                         return children ||
                             this.clearable ||
                             this.showCount ||
+                            this.copyable ||
                             this.mergedShowPasswordOn ||
                             this.loading !== undefined ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                             (0, _utils_1.resolveWrappedSlot)($slots['clear-icon-placeholder'], (children) => {
@@ -929,6 +965,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, {
                                 default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); }
                             })) : null,
+                            this.copyable && this.renderCopyButton(),
                             this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, this.passwordVisible
                                 ? (0, _utils_1.resolveSlot)($slots['password-visible-icon'], () => [
                                     (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.EyeIcon, null) })
@@ -941,9 +978,9 @@ exports.default = (0, vue_1.defineComponent)({
             this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, (0, _utils_1.resolveSlot)($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: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
+                    (0, vue_1.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: (_f = this.mergedPlaceholder) === null || _f === void 0 ? void 0 : _f[1], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[1]
-                            : undefined, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: (e) => {
+                            : undefined, readonly: this.readonly, style: (_g = this.textDecorationStyle) === null || _g === void 0 ? void 0 : _g[1], onBlur: this.handleInputBlur, onFocus: (e) => {
                             this.handleInputFocus(e, 1);
                         }, onInput: (e) => {
                             this.handleInput(e, 1);
@@ -951,7 +988,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.handleChange(e, 1);
                         } }),
                     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)("span", null, (_h = this.mergedPlaceholder) === null || _h === void 0 ? void 0 : _h[1]))) : null),
                 (0, _utils_1.resolveWrappedSlot)($slots.suffix, (children) => {
                     return ((this.clearable || children) && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                         this.clearable && ((0, vue_1.h)(_internal_1.UBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, {