@wikimedia/codex/dist/types/components/search-input/SearchInput.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { ValidationStatusType } from '../../types';
/**
 * An input for text search.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Value of the search input, provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: (StringConstructor | NumberConstructor)[];
        default: string;
    };
    /**
     * Whether to display the search button.
     */
    useButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to hide the start icon.
     */
    hideIcon: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `clearable` property of the TextInput component
     */
    clearable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Search button text.
     *
     * Omit this prop to use the default value, "Search".
     */
    buttonLabel: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Whether the search input is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` property of the TextInput component
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
}>, {
    wrappedModel: import("vue").WritableComputedRef<string | number, string | number>;
    computedDisabled: import("vue").ComputedRef<boolean>;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
    otherAttrs: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    handleSubmit: () => void;
    searchIcon: string;
    translatedSearchButtonLabel: import("vue").ComputedRef<string>;
    useButtonOrLabel: import("vue").ComputedRef<boolean>;
}, {}, {}, {
    /**
     * Focus the component's input element.
     *
     * @public
     */
    focus(): void;
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "update:modelValue" | "focus" | "blur" | "change" | "submit-click")[], "input" | "update:modelValue" | "focus" | "blur" | "change" | "submit-click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Value of the search input, provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: (StringConstructor | NumberConstructor)[];
        default: string;
    };
    /**
     * Whether to display the search button.
     */
    useButton: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to hide the start icon.
     */
    hideIcon: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `clearable` property of the TextInput component
     */
    clearable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Search button text.
     *
     * Omit this prop to use the default value, "Search".
     */
    buttonLabel: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Whether the search input is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` property of the TextInput component
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
}>> & Readonly<{
    onFocus?: ((...args: any[]) => any) | undefined;
    onBlur?: ((...args: any[]) => any) | undefined;
    onChange?: ((...args: any[]) => any) | undefined;
    onInput?: ((...args: any[]) => any) | undefined;
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
    "onSubmit-click"?: ((...args: any[]) => any) | undefined;
}>, {
    modelValue: string | number;
    disabled: boolean;
    status: "default" | "warning" | "error" | "success";
    clearable: boolean;
    useButton: boolean;
    hideIcon: boolean;
    buttonLabel: string;
}, {}, {
    CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        action: {
            type: PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>, {
        button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-button--framed': boolean;
            'cdx-button--icon-only': boolean;
            'cdx-button--is-active': boolean;
        }>;
        onClick: (event: Event) => void;
        onKeyDown: () => void;
        onKeyUp: () => void;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        action: {
            type: PropType<import("../../types").ButtonAction>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
        };
        weight: {
            type: PropType<import("../../types").ButtonWeight>;
            default: string;
            validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
        };
        size: {
            type: PropType<import("../../types").ButtonSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
        };
    }>> & Readonly<{
        onClick?: ((...args: any[]) => any) | undefined;
    }>, {
        size: "medium" | "large" | "small";
        action: "default" | "progressive" | "destructive";
        weight: "normal" | "primary" | "quiet";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    CdxTextInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        modelValue: {
            type: (StringConstructor | NumberConstructor)[];
            default: string;
        };
        inputType: {
            type: PropType<import("../../types").TextInputType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time">;
        };
        status: {
            type: PropType<ValidationStatusType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        startIcon: {
            type: PropType<import("@wikimedia/codex-icons").Icon | undefined>;
            default: undefined;
        };
        endIcon: {
            type: PropType<import("@wikimedia/codex-icons").Icon | undefined>;
            default: undefined;
        };
        clearable: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        computedInputId: import("vue").ComputedRef<string | undefined>;
        descriptionId: import("vue").ComputedRef<string | undefined> | undefined;
        wrappedModel: import("vue").WritableComputedRef<string | number, string | number>;
        isClearable: import("vue").ComputedRef<boolean>;
        rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
        rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
        otherAttrsMinusId: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        inputClasses: import("vue").ComputedRef<{
            'cdx-text-input__input--has-value': boolean;
        }>;
        computedDisabled: import("vue").ComputedRef<boolean>;
        onClear: (event: MouseEvent) => void;
        onInput: (event: Event) => void;
        onChange: (event: Event) => void;
        onKeydown: (event: KeyboardEvent) => void;
        onFocus: (event: FocusEvent) => void;
        onBlur: (event: FocusEvent) => void;
        onInvalid: (event: Event, doPreventDefault: boolean) => void;
        shouldPreventDefault: import("vue").Ref<boolean, boolean>;
        cdxIconClear: string;
    }, {}, {}, {
        focus(): void;
        blur(): void;
        checkValidity(): boolean;
        reportValidity(): boolean;
        setCustomValidity(message: string): void;
    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "clear" | "update:modelValue" | "focus" | "blur" | "keydown" | "change" | "invalid")[], "input" | "clear" | "update:modelValue" | "focus" | "blur" | "keydown" | "change" | "invalid", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        modelValue: {
            type: (StringConstructor | NumberConstructor)[];
            default: string;
        };
        inputType: {
            type: PropType<import("../../types").TextInputType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time">;
        };
        status: {
            type: PropType<ValidationStatusType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
        startIcon: {
            type: PropType<import("@wikimedia/codex-icons").Icon | undefined>;
            default: undefined;
        };
        endIcon: {
            type: PropType<import("@wikimedia/codex-icons").Icon | undefined>;
            default: undefined;
        };
        clearable: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & 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;
        onKeydown?: ((...args: any[]) => any) | undefined;
        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
        onClear?: ((...args: any[]) => any) | undefined;
    }>, {
        modelValue: string | number;
        disabled: boolean;
        status: "default" | "warning" | "error" | "success";
        inputType: "number" | "text" | "search" | "email" | "month" | "password" | "tel" | "url" | "week" | "date" | "datetime-local" | "time";
        startIcon: import("@wikimedia/codex-icons").Icon | undefined;
        endIcon: import("@wikimedia/codex-icons").Icon | undefined;
        clearable: boolean;
    }, {}, {
        CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            icon: {
                type: PropType<import("@wikimedia/codex-icons").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<import("@wikimedia/codex-icons").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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;