@wikimedia/codex/dist/types/components/toggle-switch/ToggleSwitch.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
/**
 * A switch that allows the user to toggle between on and off states.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Current value of the toggle switch or toggle switch 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>` element.
     *
     * Required for groups of ToggleSwitches. Can be omitted for single true/false switches.
     */
    inputValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
        default: boolean;
    };
    /**
     * Whether to align the switch to the end of the container.
     *
     * Useful for ToggleSwitch groups, where each switch should be aligned regardless of
     * label length.
     */
    alignSwitch: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * Note that this will also hide the description.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the disabled attribute should be added to the input.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, {
    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
    inputId: string;
    descriptionId: string;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    rootStyle: import("vue").ComputedRef<import("vue").StyleValue>;
    otherAttrs: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    computedDisabled: import("vue").ComputedRef<boolean>;
    wrappedModel: import("vue").WritableComputedRef<boolean | string[] | number[], boolean | string[] | number[]>;
    clickInput: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Current value of the toggle switch or toggle switch 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>` element.
     *
     * Required for groups of ToggleSwitches. Can be omitted for single true/false switches.
     */
    inputValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
        default: boolean;
    };
    /**
     * Whether to align the switch to the end of the container.
     *
     * Useful for ToggleSwitch groups, where each switch should be aligned regardless of
     * label length.
     */
    alignSwitch: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the label should be visually hidden.
     *
     * Note that this will also hide the description.
     */
    hideLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the disabled attribute should be added to the input.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
    modelValue: boolean | string[] | number[];
    disabled: boolean;
    inputValue: string | number | boolean;
    hideLabel: boolean;
    alignSwitch: boolean;
}, {}, {
    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.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<import("@wikimedia/codex-icons").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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;