@wikimedia/codex
Version:
Codex Design System for Wikimedia
108 lines (107 loc) • 3.46 kB
TypeScript
import { PropType } from 'vue';
import { ButtonSize } from '../../types';
/**
* A button that can be toggled on and off.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Whether the ToggleButton should be set to "on" (true) or "off" (false).
*
* Provided by `v-model` binding in the parent component.
*/
modelValue: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the disabled attribute should be added to the ToggleButton, which prevents
* it from being clicked.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the ToggleButton should be "quiet", which renders more minimally.
*/
quiet: {
type: BooleanConstructor;
default: boolean;
};
/**
* Button size.
*
* Medium: Default for most cases.
* Large: Use rarely, mainly for icon-only buttons on touchscreens.
* Small: Use in tight spaces or inline with text.
* Avoid on touchscreens - prefer medium for better accessibility.
*
* @values 'small', 'medium', 'large'
*/
size: {
type: PropType<ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>, {
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-toggle-button--quiet': boolean;
'cdx-toggle-button--framed': boolean;
'cdx-toggle-button--toggled-on': boolean;
'cdx-toggle-button--toggled-off': boolean;
'cdx-toggle-button--icon-only': boolean;
'cdx-toggle-button--is-active': boolean;
}>;
onClick: () => void;
onKeyDown: () => void;
onKeyUp: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Whether the ToggleButton should be set to "on" (true) or "off" (false).
*
* Provided by `v-model` binding in the parent component.
*/
modelValue: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the disabled attribute should be added to the ToggleButton, which prevents
* it from being clicked.
*/
disabled: {
type: BooleanConstructor;
default: boolean;
};
/**
* Whether the ToggleButton should be "quiet", which renders more minimally.
*/
quiet: {
type: BooleanConstructor;
default: boolean;
};
/**
* Button size.
*
* Medium: Default for most cases.
* Large: Use rarely, mainly for icon-only buttons on touchscreens.
* Small: Use in tight spaces or inline with text.
* Avoid on touchscreens - prefer medium for better accessibility.
*
* @values 'small', 'medium', 'large'
*/
size: {
type: PropType<ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>> & Readonly<{
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
}>, {
quiet: boolean;
size: "medium" | "large" | "small";
modelValue: boolean;
disabled: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;