@wikimedia/codex/dist/types/components/checkbox/Checkbox.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { ValidationStatusType } from '../../types';
/**
 * A binary input that can appear by itself or in a multiselect group.
 *
 * Checkboxes can be selected, unselected or in an indeterminate state.
 *
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Value of the checkbox or checkbox group.
     *
     * Provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: PropType<boolean | (string | number)[]>;
        default: boolean;
    };
    /**
     * HTML "value" attribute to assign to the input.
     *
     * Required for input groups.
     */
    inputValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
        default: boolean;
    };
    /**
     * HTML "name" attribute to assign to the input.
     */
    name: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether the disabled attribute should be added to the input.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the indeterminate visual state should be displayed.
     *
     * This is unrelated to the value provided by `v-model`, and the indeterminate visual state
     * will override the checked or unchecked visual state.
     */
    indeterminate: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the component should display inline.
     *
     * By default, `display: block` is set and a margin exists between
     * sibling components, for a stacked layout.
     */
    inline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * When true, the label will remain accessible to assistive technology.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Validation status of the Checkbox.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
}>, {
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    computedDisabled: import("vue").ComputedRef<boolean>;
    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
    checkboxId: string;
    descriptionId: string;
    wrappedModel: import("vue").WritableComputedRef<boolean | (string | number)[], boolean | (string | number)[]>;
    customInputClasses: import("vue").ComputedRef<Record<string, boolean>>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Value of the checkbox or checkbox group.
     *
     * Provided by `v-model` binding in the parent component.
     */
    modelValue: {
        type: PropType<boolean | (string | number)[]>;
        default: boolean;
    };
    /**
     * HTML "value" attribute to assign to the input.
     *
     * Required for input groups.
     */
    inputValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
        default: boolean;
    };
    /**
     * HTML "name" attribute to assign to the input.
     */
    name: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Whether the disabled attribute should be added to the input.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the indeterminate visual state should be displayed.
     *
     * This is unrelated to the value provided by `v-model`, and the indeterminate visual state
     * will override the checked or unchecked visual state.
     */
    indeterminate: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the component should display inline.
     *
     * By default, `display: block` is set and a margin exists between
     * sibling components, for a stacked layout.
     */
    inline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * When true, the label will remain accessible to assistive technology.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Validation status of the Checkbox.
     */
    status: {
        type: PropType<ValidationStatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"default" | "warning" | "error" | "success">;
    };
}>> & Readonly<{
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    name: string;
    modelValue: boolean | (string | number)[];
    disabled: boolean;
    inline: boolean;
    inputValue: string | number | boolean;
    indeterminate: boolean;
    hideLabel: boolean;
    status: "default" | "warning" | "error" | "success";
}, {}, {
    CdxLabel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<import("@wikimedia/codex-icons").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<import("@wikimedia/codex-icons").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: import("@wikimedia/codex-icons").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<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;