@wikimedia/codex
Version:
Codex Design System for Wikimedia
386 lines (385 loc) • 16.9 kB
TypeScript
import { PropType, type ComponentPublicInstance } from 'vue';
import { TeleportTarget } from '../../types';
/**
* Container component for managing stacked Toast notifications.
* Toasts appear one-by-one and are not stacked on top of each other or side-by-side.
*
* This component reads from the global toastStore and renders toasts accordingly.
* Use the useToast composable to add/remove toasts programmatically.
*/
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Teleport target for the ToastContainer.
*
* If `target` is provided, the container will teleport there. Otherwise, if
* an ancestor provides a `CdxTeleportTarget` (e.g. via
* `provide( 'CdxTeleportTarget', '#foo-bar' )`), that target is used.
* If neither is set, the container is teleported to the end of `<body>`.
*/
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
}>, {
toastStore: {
toasts: {
icon?: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
} | {
rtl: string | {
path: string;
};
ltr: string | {
path: string;
};
} | {
langCodeMap: Record<string, import("@wikimedia/codex-icons").SimpleIcon | import("@wikimedia/codex-icons").IconFlipForRtl>;
default: string | {
path: string;
} | {
ltr: string | {
path: string;
};
shouldFlip: true;
shouldFlipExceptions?: string[] | undefined;
};
} | null | undefined;
type?: import("../../types").StatusType | undefined;
id: string;
autoDismiss?: boolean | number | undefined;
message?: string | undefined;
actionButton?: {
label: string;
onClick: () => void;
} | undefined;
preventUserDismiss?: boolean | undefined;
onUserDismissed?: (() => void) | undefined;
onAutoDismissed?: (() => void) | undefined;
}[];
};
computedTarget: import("vue").ComputedRef<string | HTMLElement>;
isInitialized: import("vue").Ref<boolean, boolean>;
setToastContentRef: (toastId: string, el: Element | ComponentPublicInstance | null) => void;
handleUserDismissed: (id: string) => void;
handleAutoDismissed: (id: string) => void;
handleActionButtonClick: (id: string) => void;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Teleport target for the ToastContainer.
*
* If `target` is provided, the container will teleport there. Otherwise, if
* an ancestor provides a `CdxTeleportTarget` (e.g. via
* `provide( 'CdxTeleportTarget', '#foo-bar' )`), that target is used.
* If neither is set, the container is teleported to the end of `<body>`.
*/
target: {
type: PropType<TeleportTarget>;
default: undefined;
};
}>> & Readonly<{}>, {
target: TeleportTarget;
}, {}, {
CdxToastDisplay: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
type: {
type: PropType<import("../../types").StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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<import("../../types").StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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: import("@wikimedia/codex-icons").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<import("../../types").StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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<import("@wikimedia/codex-icons").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<import("../../types").StatusType>;
default: string;
validator: import("../../types").StringTypeValidator<"progressive" | "subtle" | "notice" | "warning" | "error" | "success">;
};
inline: {
type: BooleanConstructor;
default: boolean;
};
icon: {
type: PropType<import("@wikimedia/codex-icons").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: import("@wikimedia/codex-icons").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<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>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;