@wikimedia/codex/dist/types/components/field/Field.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { ValidationStatusType, ValidationMessages } from '../../types';
/**
 * Form field with a label, an input or control, and an optional validation message.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Icon before the label text.
     *
     * Do not use this if including a start icon within the input component.
     */
    labelIcon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Whether the field is optional.
     *
     * This will add a flag next to the label indicating that the field is optional.
     */
    optional: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Text to indicate that the field is optional.
     *
     * Omit this prop to use the default value, "(optional)".
     */
    optionalFlag: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * Note that this will also hide the description.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this field contains a group of inputs.
     *
     * When true, this outputs a `<fieldset>` element with a semantic `<legend>`. When false,
     * it outputs a `<div>` with a semantic `<label>`.
     */
    isFieldset: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the entire field is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` attribute of the input. This also determines which validation message is shown.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Message text keyed on validation status type.
     *
     * @default {}
     */
    messages: {
        type: PropType<ValidationMessages>;
        default: () => {};
    };
}>, {
    rootClasses: import("vue").ComputedRef<{
        'cdx-field--disabled': boolean;
        'cdx-field--is-fieldset': boolean;
    }>;
    computedDisabled: import("vue").ComputedRef<boolean>;
    labelId: string;
    descriptionId: string;
    inputId: string;
    validationMessage: import("vue").ComputedRef<string | undefined>;
    validationMessageType: import("vue").ComputedRef<"notice" | "warning" | "error" | "success">;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Icon before the label text.
     *
     * Do not use this if including a start icon within the input component.
     */
    labelIcon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Whether the field is optional.
     *
     * This will add a flag next to the label indicating that the field is optional.
     */
    optional: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Text to indicate that the field is optional.
     *
     * Omit this prop to use the default value, "(optional)".
     */
    optionalFlag: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * Note that this will also hide the description.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this field contains a group of inputs.
     *
     * When true, this outputs a `<fieldset>` element with a semantic `<legend>`. When false,
     * it outputs a `<div>` with a semantic `<label>`.
     */
    isFieldset: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the entire field is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * `status` attribute of the input. This also determines which validation message is shown.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
    /**
     * Message text keyed on validation status type.
     *
     * @default {}
     */
    messages: {
        type: PropType<ValidationMessages>;
        default: () => {};
    };
}>> & Readonly<{}>, {
    disabled: boolean;
    optional: boolean;
    optionalFlag: string;
    hideLabel: boolean;
    status: "default" | "warning" | "error" | "success";
    labelIcon: Icon;
    isFieldset: boolean;
    messages: ValidationMessages;
}, {}, {
    CdxLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon | null>;
            default: null;
        };
        optional: {
            type: BooleanConstructor;
            default: boolean;
        };
        optionalFlag: {
            type: StringConstructor;
            default: string;
            validator: (value: string, props: {
                [x: string]: unknown;
            }) => boolean;
        };
        visuallyHidden: {
            type: BooleanConstructor;
            default: boolean;
        };
        isLegend: {
            type: BooleanConstructor;
            default: boolean;
        };
        inputId: {
            type: StringConstructor;
            default: string;
        };
        descriptionId: {
            type: StringConstructor;
            default: string;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>, {
        rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
        rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
        otherAttrs: import("vue").ComputedRef<{
            [x: string]: unknown;
        }>;
        translatedOptionalFlag: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon | null>;
            default: null;
        };
        optional: {
            type: BooleanConstructor;
            default: boolean;
        };
        optionalFlag: {
            type: StringConstructor;
            default: string;
            validator: (value: string, props: {
                [x: string]: unknown;
            }) => boolean;
        };
        visuallyHidden: {
            type: BooleanConstructor;
            default: boolean;
        };
        isLegend: {
            type: BooleanConstructor;
            default: boolean;
        };
        inputId: {
            type: StringConstructor;
            default: string;
        };
        descriptionId: {
            type: StringConstructor;
            default: string;
        };
        disabled: {
            type: BooleanConstructor;
            default: boolean;
        };
    }>> & Readonly<{}>, {
        icon: Icon | null;
        disabled: boolean;
        optional: boolean;
        optionalFlag: string;
        visuallyHidden: boolean;
        isLegend: boolean;
        inputId: string;
        descriptionId: string;
    }, {}, {
        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>;
    CdxMessage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        type: {
            type: PropType<import("../../types").StatusType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"notice" | "warning" | "error" | "success">;
        };
        inline: {
            type: BooleanConstructor;
            default: boolean;
        };
        icon: {
            type: PropType<Icon>;
            default: null;
        };
        fadeIn: {
            type: BooleanConstructor;
            default: boolean;
        };
        allowUserDismiss: {
            type: BooleanConstructor;
            default: boolean;
        };
        dismissButtonLabel: {
            type: StringConstructor;
            default: string;
            validator: (value: string, props: {
                [x: string]: unknown;
            }) => boolean;
        };
        autoDismiss: {
            type: (BooleanConstructor | NumberConstructor)[];
            default: boolean;
            validator: (value: unknown) => boolean;
        };
    }>, {
        dismissed: import("vue").Ref<boolean, boolean>;
        userDismissable: import("vue").ComputedRef<boolean>;
        translatedDismissButtonLabel: import("vue").ComputedRef<string>;
        rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
        leaveActiveClass: import("vue").Ref<string, string>;
        computedIcon: import("vue").ComputedRef<Icon>;
        onDismiss: (eventName: "user-dismissed" | "auto-dismissed") => void;
        cdxIconClose: string;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("user-dismissed" | "auto-dismissed")[], "user-dismissed" | "auto-dismissed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        type: {
            type: PropType<import("../../types").StatusType>;
            default: string;
            validator: import("../../types").StringTypeValidator<"notice" | "warning" | "error" | "success">;
        };
        inline: {
            type: BooleanConstructor;
            default: boolean;
        };
        icon: {
            type: PropType<Icon>;
            default: null;
        };
        fadeIn: {
            type: BooleanConstructor;
            default: boolean;
        };
        allowUserDismiss: {
            type: BooleanConstructor;
            default: boolean;
        };
        dismissButtonLabel: {
            type: StringConstructor;
            default: string;
            validator: (value: string, props: {
                [x: string]: unknown;
            }) => boolean;
        };
        autoDismiss: {
            type: (BooleanConstructor | NumberConstructor)[];
            default: boolean;
            validator: (value: unknown) => boolean;
        };
    }>> & Readonly<{
        "onUser-dismissed"?: ((...args: any[]) => any) | undefined;
        "onAuto-dismissed"?: ((...args: any[]) => any) | undefined;
    }>, {
        icon: Icon;
        type: "notice" | "warning" | "error" | "success";
        inline: boolean;
        fadeIn: boolean;
        allowUserDismiss: boolean;
        dismissButtonLabel: string;
        autoDismiss: number | boolean;
    }, {}, {
        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>;
        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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;