feat: multiple actions support and api improvements (#2)

hoppscotch · May 30, 2024 · 79bb083 · 79bb083
1 parent e792977
commit 79bb083
Show file tree

Hide file tree

Showing 8 changed files with 2,004 additions and 1,517 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,6 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
+    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
     CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
     CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
     Expand: typeof import('./src/components/Expand.vue')['default']
@@ -15,6 +17,8 @@ declare module 'vue' {
     HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
     Hero: typeof import('./src/components/Hero.vue')['default']
     Installation: typeof import('./src/components/Installation.vue')['default']
+    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
+    New: typeof import('./src/components/examples/New.vue')['default']
     Others: typeof import('./src/components/Others.vue')['default']
     Position: typeof import('./src/components/Position.vue')['default']
     Styling: typeof import('./src/components/Styling.vue')['default']

diff --git a/packages/Toast.vue b/packages/Toast.vue
@@ -109,37 +109,51 @@
           </div>
         </template>
       </div>
-      <template v-if="toast.cancel">
-        <button
-          :class="cn(classes?.cancelButton, toast.classes?.cancelButton)"
-          data-button
-          data-cancel
-          @click="
-            () => {
-              deleteToast()
-              if (toast.cancel?.onClick) {
-                toast.cancel.onClick()
-              }
-            }
-          "
-        >
-          {{ 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()
-            }
-          "
-        >
-          {{ toast.action.label }}
-        </button>
+
+      <template v-if="toast.cancel || toast.action">
+        <div data-buttons="">
+          <template v-if="toast.cancel">
+            <button
+              :class="cn(classes?.cancelButton, toast.classes?.cancelButton)"
+              data-button
+              data-cancel
+              @click="
+                () => {
+                  deleteToast()
+                  if (toast.cancel?.onClick) {
+                    toast.cancel.onClick()
+                  }
+                }
+              "
+            >
+              {{ toast.cancel.label }}
+            </button>
+          </template>
+
+          <template v-if="toast.action">
+            <template
+              v-for="(action, index) in Array.isArray(toast.action)
+                ? toast.action
+                : [toast.action]"
+              :key="index"
+            >
+              <button
+                :class="cn(classes?.actionButton, action?.classes)"
+                data-button
+                @click="
+                  (event) => {
+                    action.onClick(event, {
+                      dismiss: deleteToast
+                    })
+                    if (event.defaultPrevented) return
+                  }
+                "
+              >
+                {{ action.label }}
+              </button>
+            </template>
+          </template>
+        </div>
       </template>
     </template>
   </li>
@@ -265,18 +279,24 @@ 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)
+let timeoutId: ReturnType<typeof setTimeout>
+
+const deleteToast = (delay = 0) => {
+  timeoutId = setTimeout(() => {
+    // 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)
 
-  setTimeout(() => {
-    emit('removeToast', props.toast)
-  }, TIME_BEFORE_UNMOUNT)
+  return timeoutId
 }
 
 const handleCloseToast = () => {
@@ -422,5 +442,6 @@ onUnmounted(() => {
     )
     emit('update:heights', newHeights)
   }
+  clearTimeout(timeoutId)
 })
 </script>
diff --git a/packages/styles.css b/packages/styles.css
@@ -106,6 +106,13 @@ html[dir='rtl'],
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.2);
 }
 
+[data-sonner-toast] [data-buttons] {
+  display: flex;
+  gap: 8px;
+  margin-left: var(--toast-button-margin-start);
+  margin-right: var(--toast-button-margin-end);
+}
+
 [data-sonner-toast][data-y-position='top'] {
   top: 0;
   --y: translateY(-100%);

diff --git 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: {
+      dismiss: (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