/**
*
* Toast is used to display messages in an overlay.
*
* [Live Demo](https://www.WangsVue.org/toast/)
*
* @module toast
*
*/
import { TransitionProps, VNode } from 'vue';
import { ComponentHooks } from '../basecomponent';
import { WangsIcons } from '../icon';
import { PassThroughOptions } from '../passthrough';
import {
ClassComponent,
GlobalComponentConstructor,
PassThrough,
} from '../ts-helpers.d';
export declare type ToastPassThroughOptionType =
| ToastPassThroughAttributes
| ((
options: ToastPassThroughMethodOptions,
) => ToastPassThroughAttributes | string)
| string
| null
| undefined;
export declare type ToastPassThroughTransitionType =
| TransitionProps
| ((options: ToastPassThroughMethodOptions) => TransitionProps)
| undefined;
export type ToastSeverity = 'success' | 'error' | 'info';
export interface ToastLocaleConfig {
/**
* The messages to display for different types of toast.
* @example
* successMessage: 'Success, {message}'
* errorMessage: 'Error, {message}'
* networkErrorMessage: ' Please check your connection and try again.'
*/
successMessage?: string;
errorMessage?: string;
networkErrorMessage?: string;
}
export interface ToastMessageOptions {
/**
* The main message to display in the toast. Will be formatted based on template message.
*/
message: string;
/**
* Indicates whether the message is customized and does not follow the default message template.
* If true, custom formatting will be applied.
*/
customMessage?: boolean;
/**
* The severity level of the toast message.
* Can be 'success', 'error', or 'info'.
*/
severity?: ToastSeverity;
/**
* The icon to display in the toast.
*/
icon?: WangsIcons;
/**
* The custom CSS class to apply to the icon.
*/
iconClass?: any;
/**
* The error object from a catch statement, used to provide additional details for error toasts.
* Accepts any type of error object.
*/
error?: unknown;
/**
* The duration for which the toast will be displayed, in milliseconds.
* Set to 0 to show the message infinitely.
*
* @default 3000 - 3 seconds
*/
life?: number;
/**
* The name of the message group to which this toast belongs.
*/
group?: string;
/**
* Unique identifier of the toast message.
*/
messageId?: string;
}
/**
* Custom passthrough(pt) option method.
*/
export interface ToastPassThroughMethodOptions {
/**
* Defines instance.
*/
instance: any;
/**
* Defines valid properties.
*/
props: ToastProps;
/**
* Defines current inline state.
*/
state: ToastState;
/**
* Defines valid attributes.
*/
attrs: any;
/**
* Defines parent options.
*/
parent: any;
/**
* Defines passthrough(pt) options in global config.
*/
global: object | undefined;
}
/**
* Custom passthrough(pt) options.
* @see {@link ToastProps.pt}
*/
export interface ToastPassThroughOptions {
/**
* Used to pass attributes to the root's DOM element.
*/
root?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the message's DOM element.
*/
message?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the container's DOM element.
*/
container?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the content's DOM element.
*/
content?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the icon's DOM element.
*/
icon?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the text's DOM element.
*/
text?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the summary's DOM element.
*/
summary?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the detail's DOM element.
*/
detail?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the button container's DOM element.
*/
buttonContainer?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the button's DOM element.
*/
closeButton?: ToastPassThroughOptionType;
/**
* Used to pass attributes to the button icon's DOM element.
*/
closeIcon?: ToastPassThroughOptionType;
/**
* Used to manage all lifecycle hooks.
* @see {@link BaseComponent.ComponentHooks}
*/
hooks?: ComponentHooks;
/**
* Used to control Vue Transition API.
*/
transition?: ToastPassThroughTransitionType;
}
/**
* Custom passthrough attributes for each DOM elements
*/
export interface ToastPassThroughAttributes {
[key: string]: any;
}
/**
* Defines breakpoints type in Toast component.
*/
export interface ToastBreakpointsType {
/**
* Breakpoint for responsive mode.
*
* Example:
*
*
*
*/
[key: string]: any;
}
/**
* Defines current inline state in Toast component.
*/
export interface ToastState {
/**
* Current messages.
*/
messages: any[];
}
/**
* Defines valid properties in Toast component.
*/
export interface ToastProps {
/**
* Unique identifier of a message group.
*/
group?: string | undefined;
/**
* Position of the toast in viewport.
* @defaultValue bottom-right
*/
position?:
| 'top-left'
| 'top-center'
| 'top-right'
| 'bottom-left'
| 'bottom-center'
| 'bottom-right'
| 'center'
| undefined;
/**
* Whether to automatically manage layering.
* @defaultValue true
*/
autoZIndex?: boolean | undefined;
/**
* Base zIndex value to use in layering.
* @defaultValue 0
*/
baseZIndex?: number | undefined;
/**
* Object literal to define styles per screen size.
* @see ToastBreakpointsType
*/
breakpoints?: ToastBreakpointsType;
icon?: WangsIcons;
/**
* Used to pass attributes to DOM elements inside the component.
* @type {ToastPassThroughOptions}
*/
pt?: PassThrough;
/**
* Used to configure passthrough(pt) options of the component.
* @type {PassThroughOptions}
*/
ptOptions?: PassThroughOptions;
/**
* When enabled, it removes component related styles in the core.
* @defaultValue false
*/
unstyled?: boolean;
}
/**
* Defines valid slot in Toast component.
*/
export interface ToastSlots {
/**
* Custom message template.
* @param {Object} scope - message slot's params.
*/
message(scope: {
/**
* Message of the component
*/
message: any;
}): VNode[];
/**
* Custom icon template.
* @param {Object} scope - icon slot's params.
*/
icon(scope: {
/**
* Style class of the icon
*/
class: any;
}): VNode[];
/**
* Custom close icon template.
* @param {Object} scope - close icon slot's params.
*/
closeicon(scope: {
/**
* Style class of the close icon
*/
class: any;
}): VNode[];
/**
* Custom container slot.
* @param {Object} scope - container slot's params.
*/
container(scope: {
/**
* Message of the component
*/
message: any;
/**
* Close sidebar function.
*/
closeCallback: () => void;
}): VNode[];
}
/**
* Defines valid emits in Toast component.
*/
export type ToastEmits = {
/**
* Callback to invoke when the toast is closed.
* @param {ToastMessageOptions} message - Toast message.
*/
close: [message: ToastMessageOptions];
/**
* Callback to invoke when the toast's timeout is over.
* @param {ToastMessageOptions} message - Toast message.
*/
lifeEnd: [message: ToastMessageOptions];
};
/**
* **WangsVue - Toast**
*
* _Toast is used to display messages in an overlay._
*
* --- ---
* 
*
* @group Component
*
*/
declare class Toast extends ClassComponent<
ToastProps,
ToastSlots,
ToastEmits
> {}
declare module '@vue/runtime-core' {
interface GlobalComponents {
Toast: GlobalComponentConstructor;
}
}
export default Toast;