File size: 1,423 Bytes
4bcd925 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | import { reactive } from 'vue'
export interface Toast {
id: string
type: 'success' | 'error' | 'warning' | 'info'
title?: string
message: string
duration?: number
}
export const toastState = reactive<{ toasts: Toast[] }>({
toasts: [],
})
let toastId = 0
export const showToast = (options: Omit<Toast, 'id'>) => {
const id = `toast-${++toastId}`
const duration = options.duration ?? 3000
const toast: Toast = {
id,
type: options.type,
title: options.title,
message: options.message,
duration,
}
toastState.toasts.push(toast)
if (duration > 0) {
setTimeout(() => {
removeToast(id)
}, duration)
}
return id
}
export const removeToast = (id: string) => {
const index = toastState.toasts.findIndex((t) => t.id === id)
if (index > -1) {
toastState.toasts.splice(index, 1)
}
}
export const useToast = () => {
return {
success: (message: string, title?: string, duration?: number) =>
showToast({ type: 'success', message, title, duration }),
error: (message: string, title?: string, duration?: number) =>
showToast({ type: 'error', message, title, duration }),
warning: (message: string, title?: string, duration?: number) =>
showToast({ type: 'warning', message, title, duration }),
info: (message: string, title?: string, duration?: number) =>
showToast({ type: 'info', message, title, duration }),
}
}
|