42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { reactive } from 'vue';
|
|
|
|
export type ToastSeverity = 'success' | 'error' | 'info' | 'warn';
|
|
|
|
export interface ToastMessage {
|
|
id: number;
|
|
severity: ToastSeverity;
|
|
summary: string;
|
|
/** Milliseconds before the toast dismisses itself. */
|
|
life: number;
|
|
}
|
|
|
|
/**
|
|
* Module level so any component can raise a toast without a provider being
|
|
* injected above it, which is what PrimeVue's ToastService gave us. `ToastHost`
|
|
* renders whatever is in here.
|
|
*/
|
|
const messages = reactive<ToastMessage[]>([]);
|
|
|
|
let nextId = 0;
|
|
|
|
export function useToast() {
|
|
function add(message: { severity?: ToastSeverity; summary: string; life?: number }): void {
|
|
messages.push({
|
|
id: nextId++,
|
|
severity: message.severity ?? 'info',
|
|
summary: message.summary,
|
|
life: message.life ?? 5000,
|
|
});
|
|
}
|
|
|
|
function remove(id: number): void {
|
|
const index = messages.findIndex((message) => message.id === id);
|
|
|
|
if (index !== -1) {
|
|
messages.splice(index, 1);
|
|
}
|
|
}
|
|
|
|
return { messages, add, remove };
|
|
}
|