@wikimedia/codex/dist/types/components/label/Label.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
/**
 * Describes the information requested by a given form field.
 */
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.
     */
    icon: {
        type: PropType<Icon | null>;
        default: null;
    };
    /**
     * 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.
     */
    visuallyHidden: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this component should output a `<legend>` element.
     *
     * Always set this to true when this component is used inside a `<fieldset>` element. Do not
     * set it to true otherwise.
     */
    isLegend: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The ID of the input/control this label is for.
     *
     * Will be added as the `for` attribute of the `<label>`. Not needed for `<legend>`.
     */
    inputId: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The ID of the description element.
     *
     * This ID can be used for the `aria-describedby` attribute of the input.
     */
    descriptionId: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Whether this label is for a disabled field or input.
     */
    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 before the label text.
     *
     * Do not use this if including a start icon within the input component.
     */
    icon: {
        type: PropType<Icon | null>;
        default: null;
    };
    /**
     * 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.
     */
    visuallyHidden: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this component should output a `<legend>` element.
     *
     * Always set this to true when this component is used inside a `<fieldset>` element. Do not
     * set it to true otherwise.
     */
    isLegend: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The ID of the input/control this label is for.
     *
     * Will be added as the `for` attribute of the `<label>`. Not needed for `<legend>`.
     */
    inputId: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The ID of the description element.
     *
     * This ID can be used for the `aria-describedby` attribute of the input.
     */
    descriptionId: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Whether this label is for a disabled field or input.
     */
    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.js").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types.js").IconSize>;
            default: string;
            validator: import("../../types.js").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.js").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types.js").IconSize>;
            default: string;
            validator: import("../../types.js").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types.js").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;