@wikimedia/wvui/types/src/components/checkbox/Checkbox.vue.d.ts

Wikimedia Vue UI (WVUI) – Wikimedia Foundation's Vue.js shared user-interface components for Wikipedia, MediaWiki, and beyond.

import Vue from 'vue';
declare const _default: import("vue").ComponentOptions<Vue, import("@vue/composition-api").ShallowUnwrapRef<{
    rootClasses: import("@vue/composition-api").ComputedRef<Record<string, boolean>>;
    input: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
    label: import("@vue/composition-api").Ref<HTMLLabelElement | undefined>;
    wrappedModel: import("@vue/composition-api").WritableComputedRef<import("../../composables/useModelWrapper").ModelValue>;
    focusInput: () => void;
    clickLabel: () => void;
}> & import("@vue/composition-api").Data, {}, {}, {
    /**
     * Value provided by v-model in a parent component.
     *
     * Rather than directly binding a value prop to this component, use
     * v-model on this component in the parent component.
     */
    modelValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor | ArrayConstructor)[];
        default: boolean;
    };
    /**
     * HTML "value" attribute to assign to the input.
     *
     * A unique inputValue is required when using the same v-model for
     * multiple inputs. If this is a standalone checkbox, the inputValue
     * prop can be ommitted and will default to false.
     */
    inputValue: {
        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
        default: boolean;
    };
    /**
     * Whether the disabled attribute should be added to the input.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the indeterminate visual state should be displayed.
     *
     * The indeterminate state indicates that a checkbox is neither on nor
     * off. Within this component, this state is purely visual. The parent
     * component must house the logic to set a checkbox to the indeterminate
     * state via this prop (e.g. in the case of a set of nested checkboxes
     * where some boxes are checked and some are not, making the parent
     * checkbox neither fully on nor fully off).
     *
     * This prop is independent of the value provided by v-model. If
     * indeterminate is set to true, the indeterminate visual state will
     * display, but the value will not be affected. Nor will the value
     * affect the visual state: indeterminate overrides the checked and
     * unchecked visual states. If indeterminate changes to false, the
     * visual state will reflect the current v-model value.
     */
    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;
    };
}, {
    modelValue: import("../../composables/useModelWrapper").ModelValue;
    inputValue: string | number | boolean;
    disabled: boolean;
    indeterminate: boolean;
    inline: boolean;
} & {}> & import("vue").VueConstructor<Vue> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
    modelValue: import("../../composables/useModelWrapper").ModelValue;
    inputValue: string | number | boolean;
    disabled: boolean;
    indeterminate: boolean;
    inline: boolean;
} & {}, import("@vue/composition-api").ShallowUnwrapRef<{
    rootClasses: import("@vue/composition-api").ComputedRef<Record<string, boolean>>;
    input: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
    label: import("@vue/composition-api").Ref<HTMLLabelElement | undefined>;
    wrappedModel: import("@vue/composition-api").WritableComputedRef<import("../../composables/useModelWrapper").ModelValue>;
    focusInput: () => void;
    clickLabel: () => void;
}>, import("@vue/composition-api").Data, {}, {}, {
    modelValue: import("../../composables/useModelWrapper").ModelValue;
    inputValue: string | number | boolean;
    disabled: boolean;
    indeterminate: boolean;
    inline: boolean;
} & {}, {
    modelValue: import("../../composables/useModelWrapper").ModelValue;
    inputValue: string | number | boolean;
    disabled: boolean;
    indeterminate: boolean;
    inline: boolean;
}, true>);
/**
 * A binary input that can exist by itself or in a group. When in a group, any
 * number of checkboxes can be checked at a time.
 *
 * Typical use will involve using v-for to loop through an array of items and
 * output a Checkbox component for each one. Each Checkbox will have the same
 * v-model prop, but different inputValue props and label content.
 *
 * For a single checkbox, the v-model value will be a boolean true when the box
 * is checked and false when unchecked.
 *
 * For multiple checkboxes, the v-model value will be an array of the
 * inputValues of any current checked boxes (or an empty array if no boxes are
 * checked).
 *
 * @fires {Event} input
 */
export default _default;