diff --git a/packages/Toast.vue b/packages/Toast.vue index b718940..c366fd4 100644 --- a/packages/Toast.vue +++ b/packages/Toast.vue @@ -126,20 +126,29 @@ {{ toast.cancel.label }} + @@ -265,18 +274,20 @@ onMounted(() => { emit('update:heights', newHeightArr as HeightT[]) }) -const deleteToast = () => { - // Save the offset for the exit swipe animation - removed.value = true - offsetBeforeRemove.value = offset.value - const newHeights = props.heights.filter( - (height) => height.toastId !== props.toast.id - ) - emit('update:heights', newHeights) - +const deleteToast = (delay = 0) => { setTimeout(() => { - emit('removeToast', props.toast) - }, TIME_BEFORE_UNMOUNT) + // Save the offset for the exit swipe animation + removed.value = true + offsetBeforeRemove.value = offset.value + const newHeights = props.heights.filter( + (height) => height.toastId !== props.toast.id + ) + emit('update:heights', newHeights) + + setTimeout(() => { + emit('removeToast', props.toast) + }, TIME_BEFORE_UNMOUNT) + }, delay) } const handleCloseToast = () => { diff --git a/packages/types.ts b/packages/types.ts index 0bb2da6..88cef75 100644 --- a/packages/types.ts +++ b/packages/types.ts @@ -48,6 +48,17 @@ export interface ToastIcons { loading?: Component } +export type ToastAction = { + label: string | Component + onClick: ( + event: MouseEvent, + toast: { + deleteToast: (delay?: number) => void + } + ) => void + classes?: string +} + export type ToastT = { id: number | string title?: string | Component @@ -62,10 +73,7 @@ export type ToastT = { duration?: number delete?: boolean important?: boolean - action?: { - label: string | Component - onClick: (event: MouseEvent) => void - } + action?: ToastAction | ToastAction[] cancel?: { label: string | Component onClick?: () => void diff --git a/src/components/Types.vue b/src/components/Types.vue index f80985b..3026b96 100644 --- a/src/components/Types.vue +++ b/src/components/Types.vue @@ -115,6 +115,35 @@ const allTypes = [ duration: 10000000 }) }, + { + name: 'Multi Action', + snippet: `toast('Event has been created', { + action: [ + { + label: 'Undo', + onClick: () => console.log('Undo') + }, + { + label: 'Redo', + onClick: () => console.log('Redo') + } + ], +})`, + action: () => + toast.message('Event has been created', { + action: [ + { + label: 'Cancel', + onClick: (e, toast) => toast.deleteToast(200) + }, + { + label: 'Confirm', + onClick: () => console.log('Confirm') + } + ], + duration: 10000000 + }) + }, { name: 'Promise', snippet: `const promise = () => new Promise((resolve) => setTimeout(resolve, 2000));