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));