@wikimedia/codex/dist/types/components/message/Message.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { StatusType } from '../../types';
/**
 * A message that provides system feedback to the user.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * Status type of Message.
     *
     * @values 'notice', 'warning', 'error', 'success'
     */
    type: {
        type: PropType<StatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"notice" | "warning" | "error" | "success">;
    };
    /**
     * Whether this message follows the inline design (no padding, background color, or border).
     */
    inline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Custom message icon. Only allowed for notice messages.
     */
    icon: {
        type: PropType<Icon>;
        default: null;
    };
    /**
     * Whether the message should fade in. Should be used for messages that are dynamically
     * displayed, not present on page load.
     */
    fadeIn: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Allow the message to be dismissed by the user. Adds an icon-only dismiss button.
     */
    allowUserDismiss: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Visually-hidden label text for the dismiss button for user-dismissable messages.
     *
     * Omit this prop to use the default value, "Close".
     */
    dismissButtonLabel: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Enable automatic dismissal of message 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.
     *
     * Error messages cannot be automatically dismissed. If the `type` prop is set to `error`,
     * this prop will be ignored.
     *
     * TODO: consider adding a stricter validator to set limits on this. If the time is too
     * short, the message may not be readable. If the time is too long, the message probably
     * shouldn't be auto-dismissed.
     */
    autoDismiss: {
        type: (BooleanConstructor | NumberConstructor)[];
        default: boolean;
        validator: (value: unknown) => boolean;
    };
}>, {
    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;
    cdxIconClose: string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("user-dismissed" | "auto-dismissed")[], "user-dismissed" | "auto-dismissed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Status type of Message.
     *
     * @values 'notice', 'warning', 'error', 'success'
     */
    type: {
        type: PropType<StatusType>;
        default: string;
        validator: import("../../types").StringTypeValidator<"notice" | "warning" | "error" | "success">;
    };
    /**
     * Whether this message follows the inline design (no padding, background color, or border).
     */
    inline: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Custom message icon. Only allowed for notice messages.
     */
    icon: {
        type: PropType<Icon>;
        default: null;
    };
    /**
     * Whether the message should fade in. Should be used for messages that are dynamically
     * displayed, not present on page load.
     */
    fadeIn: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Allow the message to be dismissed by the user. Adds an icon-only dismiss button.
     */
    allowUserDismiss: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Visually-hidden label text for the dismiss button for user-dismissable messages.
     *
     * Omit this prop to use the default value, "Close".
     */
    dismissButtonLabel: {
        type: StringConstructor;
        default: string;
        validator: (value: string, props: {
            [x: string]: unknown;
        }) => boolean;
    };
    /**
     * Enable automatic dismissal of message 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.
     *
     * Error messages cannot be automatically dismissed. If the `type` prop is set to `error`,
     * this prop will be ignored.
     *
     * TODO: consider adding a stricter validator to set limits on this. If the time is too
     * short, the message may not be readable. If the time is too long, the message probably
     * shouldn't be auto-dismissed.
     */
    autoDismiss: {
        type: (BooleanConstructor | NumberConstructor)[];
        default: boolean;
        validator: (value: unknown) => boolean;
    };
}>> & Readonly<{
    "onUser-dismissed"?: ((...args: any[]) => any) | undefined;
    "onAuto-dismissed"?: ((...args: any[]) => any) | undefined;
}>, {
    icon: Icon;
    type: "notice" | "warning" | "error" | "success";
    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>;
export default _default;