@wikimedia/codex/dist/types/components/toast/ToastDisplay.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { StatusType, TeleportTarget } from '../../types';
/**
 * Internal component that renders a single toast (teleport, transition, message, swipe).
 * Used by CdxToast when rendered inside ToastContainer.
 */
declare const _default: 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>;
export default _default;