Merge branch 'main' into pr/135

Author: xiaoluoboding

CHANGELOG.md

@@ -1,3 +1,7 @@
+## [2.0.2](https://github.com/xiaoluoboding/vue-sonner/compare/v2.0.1...v2.0.2) (2025-07-17)
+
+
+
 ## [2.0.1](https://github.com/xiaoluoboding/vue-sonner/compare/v2.0.0...v2.0.1) (2025-06-23)
 
 

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;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-sonner",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "packageManager": "[email protected]",
   "author": "xiaoluoboding <[email protected]>",
   "license": "MIT",

src/packages/Toaster.vue

@@ -232,7 +232,7 @@ function removeToast(toastToRemove: ToastT) {
 
   // First remove toast
   toasts.value = toasts.value.filter(({ id }) => id !== toastToRemove.id)
-  
+
   // Delay cleaning heights to give animation time to complete
   setTimeout(() => {
     // Ensure toast has been actually removed before cleaning heights
@@ -332,7 +332,7 @@ watchEffect((onInvalidate) => {
   /**
    * Helper function to update the actualTheme value
    * based on current media query match.
-   * 
+   *
    * @param {boolean} matches - true if dark mode is preferred
    */
   const updateTheme = (matches: boolean) => {
@@ -734,7 +734,7 @@ html[dir='rtl'],
 
 [data-sonner-toast][data-expanded='false'][data-front='false'] {
   --scale: var(--toasts-before) * 0.05 + 1;
-  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+  --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--toasts-before) * 0.05 + 1));
   height: var(--front-toast-height);
 }
 
@@ -887,11 +887,11 @@ html[dir='rtl'],
   }
 
   [data-sonner-toaster][data-y-position='bottom'] {
-    bottom: var(--mobile-offset-bottom);
+    bottom: calc(var(--mobile-offset-bottom) + max(env(safe-area-inset-bottom), 0px));
   }
 
   [data-sonner-toaster][data-y-position='top'] {
-    top: var(--mobile-offset-top);
+    top: calc(var(--mobile-offset-top) + max(env(safe-area-inset-top), 0px));
   }
 
   [data-sonner-toaster][data-x-position='center'] {

src/packages/state.ts

@@ -299,7 +299,28 @@ 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
   }