fix: fixed the position bug

Author: xiaoluoboding

app/components/Position.vue

@@ -40,9 +40,9 @@
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
-import { toast } from '@/packages'
+import { toast, useVueSonner } from '@/packages'
 import type { Position } from '@/packages/types'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
@@ -71,11 +71,12 @@ const renderedCode = computed(() => {
 const showCheckIcon = ref(false)
 
 const handleChangePosition = (activePosition: Position) => {
-  const toastsAmount = document.querySelectorAll('[data-sonner-toast]').length
+  toast.dismiss()
   emit('update:position', activePosition)
 
-  // No need to show a toast when there is already one
-  if (toastsAmount > 0 && props.position !== activePosition) return
+  // const toastsAmount = document.querySelectorAll('[data-sonner-toast]').length
+  // // No need to show a toast when there is already one
+  // if (toastsAmount > 0 && props.position !== activePosition) return
 
   toast('Event has been created', {
     description: 'Monday, January 3rd at 6:00pm'

src/packages/Sonner.vue

@@ -6,16 +6,18 @@
     role="status"
     tabindex="0"
     data-sonner-toast="true"
-    :class="cn(
-      props.class,
-      toastClass,
-      classes?.toast,
-      toast.classes?.toast,
-      // @ts-ignore
-      classes?.[toastType],
-      // @ts-ignore
-      toast?.classes?.[toastType]
-    )"
+    :class="
+      cn(
+        props.class,
+        toastClass,
+        classes?.toast,
+        toast.classes?.toast,
+        // @ts-ignore
+        classes?.[toastType],
+        // @ts-ignore
+        toast?.classes?.[toastType]
+      )
+    "
     :data-rich-colors="toast.richColors ?? defaultRichColors"
     :data-styled="!Boolean(toast.component || toast?.unstyled || unstyled)"
     :data-mounted="mounted"
@@ -90,7 +92,10 @@
         </div>
       </template>
 
-      <div data-content="" :class="cn(classes?.content, toast?.classes?.content)">
+      <div
+        data-content=""
+        :class="cn(classes?.content, toast?.classes?.content)"
+      >
         <div data-title="" :class="cn(classes?.title, toast.classes?.title)">
           <template v-if="isStringOfTitle">
             <component :is="toast.title" v-bind="toast.componentProps" />
@@ -168,7 +173,14 @@
 <script lang="ts" setup>
 import './styles.css'
 
-import { computed, onBeforeUnmount, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue'
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+  watchEffect
+} from 'vue'
 import { type HeightT, type ToastProps, type ToastT, isAction } from './types'
 import { useIsDocumentHidden } from './hooks'
 
@@ -193,7 +205,9 @@ const swipeOut = ref(false)
 const swiped = ref(false)
 const offsetBeforeRemove = ref(0)
 const initialHeight = ref(0)
-const remainingTime = ref(props.toast.duration || props.duration || TOAST_LIFETIME)
+const remainingTime = ref(
+  props.toast.duration || props.duration || TOAST_LIFETIME
+)
 const dragStartTime = ref<Date | null>(null)
 const toastRef = ref<HTMLLIElement | null>(null)
 const isFront = computed(() => props.index === 0)
@@ -256,7 +270,7 @@ onMounted(() => {
   initialHeight.value = newHeight
 
   let newHeightArr
-  
+
   const alreadyExists = props.heights.find(
     (height) => height.toastId === props.toast.id
   )
@@ -316,7 +330,7 @@ function onPointerDown(event: PointerEvent) {
 }
 
 function onPointerUp() {
-  if (swipeOut.value || !dismissible) return;
+  if (swipeOut.value || !dismissible) return
   pointerStartRef.value = null
 
   const swipeAmount = Number(
@@ -348,17 +362,18 @@ function onPointerMove(event: PointerEvent) {
   const yPosition = event.clientY - pointerStartRef.value.y
 
   // @ts-expect-error
-  const isHighlighted = window.getSelection()?.toString().length > 0;
+  const isHighlighted = window.getSelection()?.toString().length > 0
 
-  const swipeAmount = y.value === 'top' ? Math.min(0, yPosition) : Math.max(0, yPosition);
+  const swipeAmount =
+    y.value === 'top' ? Math.min(0, yPosition) : Math.max(0, yPosition)
 
   if (Math.abs(swipeAmount) > 0) {
-    swiped.value = true;
+    swiped.value = true
   }
 
-  if (isHighlighted) return;
+  if (isHighlighted) return
 
-  toastRef.value?.style.setProperty('--swipe-amount', `${swipeAmount}px`);
+  toastRef.value?.style.setProperty('--swipe-amount', `${swipeAmount}px`)
 }
 
 watchEffect((onInvalidate) => {
@@ -411,10 +426,13 @@ watchEffect((onInvalidate) => {
 
 watch(
   () => props.toast.delete,
-  (value) => {
-    if (value) {
+  () => {
+    if (props.toast.delete) {
       deleteToast()
     }
+  },
+  {
+    deep: true
   }
 )
 

src/packages/Toast.vue

@@ -1,6 +1,12 @@
 <template>
   <!-- Remove item from normal navigation flow, only available via hotkey -->
-  <section :aria-label="`${containerAriaLabel} ${hotkeyLabel}`" :tabIndex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false">
+  <section
+    :aria-label="`${containerAriaLabel} ${hotkeyLabel}`"
+    :tabIndex="-1"
+    aria-live="polite"
+    aria-relevant="additions text"
+    aria-atomic="false"
+  >
     <template v-for="(pos, index) in possiblePositions" :key="pos">
       <ol
         ref="listRef"
@@ -40,10 +46,7 @@
         @pointerup="() => (interacting = false)"
       >
         <template
-          v-for="(toast, idx) in toasts.filter(
-            (toast) =>
-              (!toast.position && index === 0) || toast.position === pos
-          )"
+          v-for="(toast, idx) in filteredToasts(pos, index)"
           :key="toast.id"
         >
           <Toast
@@ -142,7 +145,15 @@ function _cn(...classes: (string | undefined)[]) {
 </script>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, useAttrs, watch, watchEffect } from 'vue'
+import {
+  computed,
+  nextTick,
+  ref,
+  toRaw,
+  useAttrs,
+  watch,
+  watchEffect
+} from 'vue'
 import type {
   HeightT,
   Position,
@@ -200,6 +211,12 @@ function getDocumentDirection(): ToasterProps['dir'] {
 
 const attrs = useAttrs()
 const toasts = ref<ToastT[]>([])
+const filteredToasts = computed(() => {
+  return (pos: string, index: number) =>
+    toasts.value.filter(
+      (toast) => (!toast.position && index === 0) || toast.position === pos
+    )
+})
 const possiblePositions = computed(() => {
   const posList = toasts.value
     .filter((toast) => toast.position)
@@ -303,9 +320,7 @@ watchEffect((onInvalidate) => {
     })
   })
 
-  onInvalidate(() => {
-    unsubscribe()
-  })
+  onInvalidate(unsubscribe)
 })
 
 watch(
@@ -332,7 +347,7 @@ watch(
 
     if (typeof window === 'undefined') return
 
-    const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const darkMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 
     try {
       // Chrome & Firefox
@@ -343,7 +358,7 @@ watch(
           actualTheme.value = 'light'
         }
       })
-    } catch(error) {
+    } catch (error) {
       darkMediaQuery.addListener(({ matches }) => {
         try {
           if (matches) {
@@ -352,18 +367,18 @@ watch(
             actualTheme.value = 'light'
           }
         } catch (e) {
-          console.error(e);
+          console.error(e)
         }
-      });
+      })
     }
   }
 )
 
 watchEffect(() => {
   if (listRef.value && lastFocusedElementRef.value) {
-      lastFocusedElementRef.value.focus({ preventScroll: true })
-      lastFocusedElementRef.value = null
-      isFocusWithinRef.value = false
+    lastFocusedElementRef.value.focus({ preventScroll: true })
+    lastFocusedElementRef.value = null
+    isFocusWithinRef.value = false
   }
 })
 

src/packages/Toaster.vue

@@ -10,7 +10,7 @@ import type {
 
 let toastsCounter = 0
 
-type titleT = (() => string | Component) | string | Component;
+type titleT = (() => string | Component) | string | Component
 
 class Observer {
   subscribers: Array<(toast: ExternalToast | ToastToDismiss) => void>