feat: multiple action support

packages/Toast.vue

@@ -126,20 +126,29 @@
           {{ toast.cancel.label }}
         </button>
       </template>
+
       <template v-if="toast.action">
-        <button
-          :class="cn(classes?.actionButton, toast.classes?.actionButton)"
-          data-button
-          @click="
-            (event) => {
-              toast.action?.onClick(event)
-              if (event.defaultPrevented) return
-              deleteToast()
-            }
-          "
+        <template
+          v-for="(action, index) in Array.isArray(toast.action)
+            ? toast.action
+            : [toast.action]"
+          :key="index"
         >
-          {{ toast.action.label }}
-        </button>
+          <button
+            :class="cn(classes?.actionButton, action?.classes)"
+            data-button
+            @click="
+              (event) => {
+                action.onClick(event, {
+                  deleteToast
+                })
+                if (event.defaultPrevented) return
+              }
+            "
+          >
+            {{ action.label }}
+          </button>
+        </template>
       </template>
     </template>
   </li>
@@ -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 = () => {

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<T extends Component = Component> = {
   id: number | string
   title?: string | Component
@@ -62,10 +73,7 @@ export type ToastT<T extends Component = Component> = {
   duration?: number
   delete?: boolean
   important?: boolean
-  action?: {
-    label: string | Component
-    onClick: (event: MouseEvent) => void
-  }
+  action?: ToastAction | ToastAction[]
   cancel?: {
     label: string | Component
     onClick?: () => void

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