Merge pull request #132 from oxwazz/main

fix: custom component not trigger on dismiss function

Author: xiaoluoboding

app/components/HeadlessToast.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
+import { toast } from '@/packages'
+
 defineProps<{ msg?: string }>()
 </script>
 
 <template>
   <div class="headless">
     <p class="headlessTitle">Event Created {{ msg }}</p>
     <p class="headlessDescription">Today at 4:00pm - "Louvre Museum"</p>
+    <button class="headlessCloseAll" @click="toast.dismiss()">
+      Close all
+    </button>
     <button class="headlessClose" @click="$emit('closeToast')">
       <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
         <path
@@ -28,7 +33,7 @@ defineProps<{ msg?: string }>()
 }
 
 .headlessDescription {
-  margin: 0;
+  margin: 0 0 8px;
   color: var(--gray10);
   font-size: 14px;
   line-height: 1;
@@ -42,6 +47,22 @@ defineProps<{ msg?: string }>()
   line-height: 1;
 }
 
+.headlessCloseAll {
+  font-size: 14px;
+  color: var(--gray10);
+  font-weight: 500;
+  line-height: 1;
+  border: 1px solid var(--gray10);
+  border-radius: 4px;
+  padding: 6px 8px;
+  transition: color 200ms, border 200ms;
+}
+
+.headlessCloseAll:hover {
+  color: var(--gray12);
+  border: 1px solid var(--gray12);
+}
+
 .headlessClose {
   position: absolute;
   cursor: pointer;

src/packages/state.ts

@@ -299,7 +299,27 @@ class Observer {
   // We can't provide the toast we just created as a prop as we didn't create it yet, so we can create a default toast object, I just don't know how to use function in argument when calling()?
   custom = (component: Component, data?: ExternalToast) => {
     const id = data?.id || toastsCounter++
-    this.publish({ component, id, ...data })
+    const alreadyExists = this.toasts.find((toast) => {
+      return toast.id === id
+    })
+    const dismissible = data?.dismissible === undefined ? true : data.dismissible
+
+    if (this.dismissedToasts.has(id)) {
+      this.dismissedToasts.delete(id)
+    }
+
+    if (alreadyExists) {
+      this.toasts = this.toasts.map((toast) => {
+        if (toast.id === id) {
+          this.publish({ ...toast, component, dismissible, id, ...data })
+          return { ...toast, component, dismissible, id, ...data, }
+        }
+
+        return toast
+      })
+    } else {
+      this.addToast({ component, dismissible, id, ...data })
+    }
     return id
   }