@wikimedia/codex
Version:
Codex Design System for Wikimedia
472 lines (471 loc) • 19.1 kB
TypeScript
import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { StatusType, TeleportTarget } from '../../types';
/**
* A Toast is a short and temporary pop-up notification, meant to be noticed without interrupting
* the user experience.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Status type of Toast.
*
* @values 'notice', 'warning', 'error', 'success'
*/
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
/**
* Custom toast icon. Only allowed for notice toasts.
*/
icon: {
type: PropType<Icon>;
default: null;
};
/**
* Label text for the optional action button.
*/
actionButtonLabel: {
type: StringConstructor;
default: string;
};
/**
* Whether to prevent the user from dismissing the toast. When false (default), an
* icon-only dismiss button is shown on desktop/tablet and toasts can be dismissed
* by swiping on mobile.
*/
preventUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable automatic dismissal of toast after a period of time.
*
* This prop can be set to `true` to use the default display time of 4000 milliseconds. To
* customize the display time, set this prop to a number of milliseconds.
*
* Set to `false` to disable automatic dismissal.
*/
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
/**
* Whether to disable the use of teleport and render the toast in its
* original location in the document.
* This is ignored if the toast is rendered inside ToastContainer.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
/**
* Teleport target used when this toast renders itself in standalone mode.
* Ignored when the toast is rendered inside ToastContainer, or when
* `renderInPlace` is true.
*/
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
/**
* When true, this toast does not use the shared store or ToastContainer:
* it renders and teleports (or renders in place) itself. Use when you
* cannot or do not want to mount a single `<cdx-toast-container />`.
* Default is false (toast is added to the store and shown by the container).
*/
standalone: {
type: BooleanConstructor;
default: boolean;
};
}>, {
stackContentRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("action-button-click" | "user-dismissed" | "auto-dismissed")[], "action-button-click" | "user-dismissed" | "auto-dismissed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Status type of Toast.
*
* @values 'notice', 'warning', 'error', 'success'
*/
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
/**
* Custom toast icon. Only allowed for notice toasts.
*/
icon: {
type: PropType<Icon>;
default: null;
};
/**
* Label text for the optional action button.
*/
actionButtonLabel: {
type: StringConstructor;
default: string;
};
/**
* Whether to prevent the user from dismissing the toast. When false (default), an
* icon-only dismiss button is shown on desktop/tablet and toasts can be dismissed
* by swiping on mobile.
*/
preventUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
/**
* Enable automatic dismissal of toast after a period of time.
*
* This prop can be set to `true` to use the default display time of 4000 milliseconds. To
* customize the display time, set this prop to a number of milliseconds.
*
* Set to `false` to disable automatic dismissal.
*/
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
/**
* Whether to disable the use of teleport and render the toast in its
* original location in the document.
* This is ignored if the toast is rendered inside ToastContainer.
*/
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
/**
* Teleport target used when this toast renders itself in standalone mode.
* Ignored when the toast is rendered inside ToastContainer, or when
* `renderInPlace` is true.
*/
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
/**
* When true, this toast does not use the shared store or ToastContainer:
* it renders and teleports (or renders in place) itself. Use when you
* cannot or do not want to mount a single `<cdx-toast-container />`.
* Default is false (toast is added to the store and shown by the container).
*/
standalone: {
type: BooleanConstructor;
default: boolean;
};
}>> & Readonly<{
"onAction-button-click"?: ((...args: any[]) => any) | undefined;
"onUser-dismissed"?: ((...args: any[]) => any) | undefined;
"onAuto-dismissed"?: ((...args: any[]) => any) | undefined;
}>, {
icon: Icon;
type: "progressive" | "subtle" | "notice" | "warning" | "error" | "success";
actionButtonLabel: string;
target: TeleportTarget;
renderInPlace: boolean;
autoDismiss: number | boolean;
preventUserDismiss: boolean;
standalone: boolean;
}, {}, {
CdxToastDisplay: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
icon: {
type: PropType<Icon>;
default: null;
};
actionButtonLabel: {
type: StringConstructor;
default: string;
};
preventUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
}>, {
dismissed: import("vue").Ref<boolean, boolean>;
toastElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
leaveActiveClass: import("vue").Ref<string, string>;
onDismiss: (eventName: "user-dismissed" | "auto-dismissed") => void;
onActionButtonClick: () => void;
onAfterLeave: () => void;
onMouseEnter: () => void;
onMouseLeave: () => void;
computedTarget: import("vue").ComputedRef<string | HTMLElement>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("action-button-click" | "user-dismissed" | "auto-dismissed")[], "action-button-click" | "user-dismissed" | "auto-dismissed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
icon: {
type: PropType<Icon>;
default: null;
};
actionButtonLabel: {
type: StringConstructor;
default: string;
};
preventUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
renderInPlace: {
type: BooleanConstructor;
default: boolean;
};
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
}>> & Readonly<{
"onAction-button-click"?: ((...args: any[]) => any) | undefined;
"onUser-dismissed"?: ((...args: any[]) => any) | undefined;
"onAuto-dismissed"?: ((...args: any[]) => any) | undefined;
}>, {
icon: Icon;
type: "progressive" | "subtle" | "notice" | "warning" | "error" | "success";
actionButtonLabel: string;
target: TeleportTarget;
renderInPlace: boolean;
autoDismiss: number | boolean;
preventUserDismiss: boolean;
}, {}, {
CdxMessage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<Icon>;
default: null;
};
fadeIn: {
type: BooleanConstructor;
default: boolean;
};
allowUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
dismissButtonLabel: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
actionButtonLabel: {
type: StringConstructor;
default: string;
};
}>, {
dismissed: import("vue").Ref<boolean, boolean>;
userDismissable: import("vue").ComputedRef<boolean>;
translatedDismissButtonLabel: import("vue").ComputedRef<string>;
rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
leaveActiveClass: import("vue").Ref<string, string>;
computedIcon: import("vue").ComputedRef<Icon>;
onDismiss: (eventName: "user-dismissed" | "auto-dismissed") => void;
onActionButtonClick: () => void;
cdxIconClose: string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("action-button-click" | "user-dismissed" | "auto-dismissed")[], "action-button-click" | "user-dismissed" | "auto-dismissed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
type: {
type: PropType<StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<Icon>;
default: null;
};
fadeIn: {
type: BooleanConstructor;
default: boolean;
};
allowUserDismiss: {
type: BooleanConstructor;
default: boolean;
};
dismissButtonLabel: {
type: StringConstructor;
default: string;
validator: (value: string, props: {
[x: string]: unknown;
}) => boolean;
};
autoDismiss: {
type: (BooleanConstructor | NumberConstructor)[];
default: boolean;
validator: (value: unknown) => boolean;
};
actionButtonLabel: {
type: StringConstructor;
default: string;
};
}>> & Readonly<{
"onAction-button-click"?: ((...args: any[]) => any) | undefined;
"onUser-dismissed"?: ((...args: any[]) => any) | undefined;
"onAuto-dismissed"?: ((...args: any[]) => any) | undefined;
}>, {
icon: Icon;
type: "progressive" | "subtle" | "notice" | "warning" | "error" | "success";
actionButtonLabel: string;
inline: boolean;
fadeIn: boolean;
allowUserDismiss: boolean;
dismissButtonLabel: string;
autoDismiss: number | boolean;
}, {}, {
CdxButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: PropType<import("../../types").ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>, {
button: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
rootClasses: import("vue").ComputedRef<{
[x: string]: boolean;
'cdx-button--framed': boolean;
'cdx-button--icon-only': boolean;
'cdx-button--is-active': boolean;
}>;
onClick: (event: Event) => void;
onKeyDown: () => void;
onKeyUp: () => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
action: {
type: PropType<import("../../types").ButtonAction>;
default: string;
validator: import("../../types").StringTypeValidator<"default" | "progressive" | "destructive">;
};
weight: {
type: PropType<import("../../types").ButtonWeight>;
default: string;
validator: import("../../types").StringTypeValidator<"normal" | "primary" | "quiet">;
};
size: {
type: PropType<import("../../types").ButtonSize>;
default: string;
validator: import("../../types").StringTypeValidator<"medium" | "large" | "small">;
};
}>> & Readonly<{
onClick?: ((...args: any[]) => any) | undefined;
}>, {
size: "medium" | "large" | "small";
action: "default" | "progressive" | "destructive";
weight: "normal" | "primary" | "quiet";
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
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").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<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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;