@wikimedia/codex/dist/types/components/text-area/TextArea.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { ValidationStatusType } from '../../types';
/**
 * Multi-line text input that allows manual resizing.
 *
 * This form element is useful when you want to create a sizeable amount of free-form text,
 * for example comments, reviews, feedback, or short essay responses.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Current value of the textarea.
     *
     * Provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: StringConstructor;
        default: string;
    };
    /**
     * `status` attribute of the textarea.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Whether the textarea is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Describes whether the textarea grows vertically to show all text.
     *
     * When autosize is true, the textarea automatically grows in height (vertically).
     * The height of the textarea expands while the user types in the textarea.
     * The content inside the textarea is visible and there's no scroll.
     */
    autosize: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * An icon at the start of the textarea element. Similar to a `::before` pseudo-element.
     */
    startIcon: {
        type: PropType<Icon | undefined>;
        default: undefined;
    };
    /**
     * An icon at the end of the textarea element. Similar to an `::after` pseudo-element.
     */
    endIcon: {
        type: PropType<Icon | undefined>;
        default: undefined;
    };
}>, {
    textarea: import("vue").Ref<HTMLTextAreaElement | undefined, HTMLTextAreaElement | undefined>;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
    wrappedModel: import("vue").WritableComputedRef<string, string>;
    computedDisabled: import("vue").ComputedRef<boolean>;
    computedInputId: import("vue").ComputedRef<string | undefined>;
    descriptionId: import("vue").ComputedRef<string | undefined> | undefined;
    textareaClasses: import("vue").ComputedRef<{
        'cdx-text-area__textarea--has-value': boolean;
        'cdx-text-area__textarea--is-autosize': boolean;
    }>;
    otherAttrsMinusId: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    onInput: (event: Event) => void;
    onChange: (event: Event) => void;
    onFocus: (event: FocusEvent) => void;
    onBlur: (event: FocusEvent) => void;
    onInvalid: (event: Event, doPreventDefault: boolean) => void;
    shouldPreventDefault: import("vue").Ref<boolean, boolean>;
}, {}, {}, {
    /**
     * Focus the component's textarea element.
     *
     * @public
     */
    focus(): void;
    /**
     * Blur the component's textarea element.
     *
     * @public
     */
    blur(): void;
    /**
     * Check the validity of the textarea element according to its constraint attributes. Emits
     * an 'invalid' event if the textarea is invalid. See:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/checkValidity
     *
     * @public
     * @return {boolean} Whether the textarea is valid
     */
    checkValidity(): boolean;
    /**
     * Check the validity of the textarea element and report it as a pop up on the UI. See:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/reportValidity
     *
     * @public
     * @return {boolean} Whether the textarea is valid
     */
    reportValidity(): boolean;
    /**
     * Set custom validity and message for the textarea element. See:
     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity
     *
     * @public
     * @param {string} message The custom validation message to set
     */
    setCustomValidity(message: string): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "focus" | "blur" | "change" | "invalid")[], "input" | "update:modelValue" | "focus" | "blur" | "change" | "invalid", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Current value of the textarea.
     *
     * Provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: StringConstructor;
        default: string;
    };
    /**
     * `status` attribute of the textarea.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Whether the textarea is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Describes whether the textarea grows vertically to show all text.
     *
     * When autosize is true, the textarea automatically grows in height (vertically).
     * The height of the textarea expands while the user types in the textarea.
     * The content inside the textarea is visible and there's no scroll.
     */
    autosize: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * An icon at the start of the textarea element. Similar to a `::before` pseudo-element.
     */
    startIcon: {
        type: PropType<Icon | undefined>;
        default: undefined;
    };
    /**
     * An icon at the end of the textarea element. Similar to an `::after` pseudo-element.
     */
    endIcon: {
        type: PropType<Icon | undefined>;
        default: undefined;
    };
}>> & Readonly<{
    onFocus?: ((...args: any[]) => any) | undefined;
    onBlur?: ((...args: any[]) => any) | undefined;
    onChange?: ((...args: any[]) => any) | undefined;
    onInput?: ((...args: any[]) => any) | undefined;
    onInvalid?: ((...args: any[]) => any) | undefined;
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    modelValue: string;
    disabled: boolean;
    status: "default" | "warning" | "error" | "success";
    startIcon: Icon | undefined;
    endIcon: Icon | undefined;
    autosize: boolean;
}, {}, {
    CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-icon--flipped': boolean;
        }>;
        iconSvg: import("vue").ComputedRef<string>;
        iconPath: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;