@uzum-tech/ui 1.3.1 → 1.4.0

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

@@ -14,6 +14,9 @@ import { inputInjectionKey } from './interface';
 import { isEmptyInputValue, useCursor } from './utils';
 import WordCount from './WordCount';
 import style, { safariStyle } from './styles/input.cssr';
+import { debounce } from '../../_utils/debounce';
+import { useCopyableText } from './use-clipboard';
+const DEFAULT_DEBOUNCE_MS = 500;
 export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -32,7 +35,10 @@ export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bor
     }, 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: {
@@ -44,7 +50,7 @@ export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bor
     }, 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,
@@ -58,7 +64,8 @@ export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bor
 export default defineComponent({
     name: 'Input',
     props: inputProps,
-    setup(props) {
+    setup(props, { emit }) {
+        var _a;
         if (process.env.NODE_ENV !== 'production') {
             watchEffect(() => {
                 if (props.showPasswordToggle) {
@@ -220,6 +227,8 @@ export default defineComponent({
             const { maxlength } = props;
             return maxlength === undefined ? undefined : Number(maxlength);
         });
+        // autocomplete
+        const inputProps = computed(() => (Object.assign({ autocomplete: props.autocomplete ? undefined : 'new-password' }, props.inputProps)));
         onMounted(() => {
             // sync mirror if is not pair
             const { value } = mergedValueRef;
@@ -228,6 +237,9 @@ export default defineComponent({
             }
         });
         // other methods
+        const emitDebouncedInput = 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 = getCurrentInstance().proxy;
         function doUpdateValue(value) {
@@ -241,6 +253,7 @@ export default defineComponent({
                 call(onInput, value);
             uncontrolledValueRef.value = value;
             nTriggerFormInput();
+            emitDebouncedInput(value);
         }
         function doChange(value) {
             const { onChange } = props;
@@ -318,7 +331,11 @@ export default 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;
@@ -687,6 +704,23 @@ export default defineComponent({
             mergedClsPrefixRef,
             countGraphemesRef: toRef(props, 'countGraphemes')
         });
+        const { renderCopyButton } = 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,
@@ -777,8 +811,9 @@ export default 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,
@@ -801,7 +836,7 @@ export default 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();
@@ -827,7 +862,7 @@ export default defineComponent({
                 resolveWrappedSlot($slots.prefix, (children) => children && (h("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 type === 'textarea' ? (h(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 &&
@@ -841,8 +876,8 @@ export default 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);
@@ -850,7 +885,7 @@ export default defineComponent({
                             this.showPlaceholder1 ? (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 ? (h(VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
                                 default: () => (h("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
                             })) : null));
@@ -864,9 +899,9 @@ export default 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);
@@ -876,13 +911,14 @@ export default defineComponent({
                             this.handleChange(e, 0);
                         } })),
                     this.showPlaceholder1 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
-                        h("span", null, this.mergedPlaceholder[0]))) : null,
+                        h("span", null, (_e = this.mergedPlaceholder) === null || _e === void 0 ? void 0 : _e[0]))) : null,
                     this.autosize ? (h("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
                 !this.pair &&
                     resolveWrappedSlot($slots.suffix, (children) => {
                         return children ||
                             this.clearable ||
                             this.showCount ||
+                            this.copyable ||
                             this.mergedShowPasswordOn ||
                             this.loading !== undefined ? (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                             resolveWrappedSlot($slots['clear-icon-placeholder'], (children) => {
@@ -900,6 +936,7 @@ export default defineComponent({
                             this.showCount && this.type !== 'textarea' ? (h(WordCount, 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' ? (h("div", { class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, this.passwordVisible
                                 ? resolveSlot($slots['password-visible-icon'], () => [
                                     h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(EyeIcon, null) })
@@ -912,9 +949,9 @@ export default defineComponent({
             this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, resolveSlot($slots.separator, () => [this.separator]))) : null,
             this.pair ? (h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 h("div", { class: `${mergedClsPrefix}-input__input` },
-                    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)
+                    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);
@@ -922,7 +959,7 @@ export default defineComponent({
                             this.handleChange(e, 1);
                         } }),
                     this.showPlaceholder2 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
-                        h("span", null, this.mergedPlaceholder[1]))) : null),
+                        h("span", null, (_h = this.mergedPlaceholder) === null || _h === void 0 ? void 0 : _h[1]))) : null),
                 resolveWrappedSlot($slots.suffix, (children) => {
                     return ((this.clearable || children) && (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
                         this.clearable && (h(UBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, {

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

@@ -623,7 +623,7 @@ declare const _default: import("vue").DefineComponent<{
         selectionColor: string;
     }, any>>>;
 }>>, {
-    readonly size: InputSize;
     readonly bordered: boolean | undefined;
+    readonly size: InputSize;
 }, {}>;
 export default _default;