fix(toast): make hovering on the gap between each toast to stop the timer

Author: lepture

.vitepress/custom/types.ts

@@ -1,4 +1,4 @@
-import type { DefaultTheme } from "vitepress"
+import type { DefaultTheme } from 'vitepress'
 
 export interface SidebarItem extends DefaultTheme.SidebarItem {
   icon?: string

src/components/select/SelectTrigger.vue

@@ -35,7 +35,7 @@ const resetClass = computed(() => {
   >
     <span class="ui-SelectTriggerInner">
       <SelectValue :placeholder="props.placeholder">
-        <template v-slot="{ selectedLabel, modelValue }">
+        <template #default="{ selectedLabel, modelValue }">
           <slot
             v-if="selectedLabel.length"
             :selected-label="selectedLabel"

src/components/toast/ToastItem.vue

@@ -99,6 +99,7 @@ onMounted(() => {
     class="ui-ToastItem"
     :duration="message.duration"
     :data-expanded="paused"
+    :data-visible="index < 3"
     :style="styleVars"
     @update:open="onOpenChange"
     @pause="onPause"
@@ -161,10 +162,23 @@ onMounted(() => {
   --toast-collapse-scale: calc(max(0, 1 - (var(--toast-index) * 0.06)));
 }
 
+.ui-ToastItem::after {
+  content: "";
+  position: absolute;
+  left: 0px;
+  height: calc(var(--toast-gap) + 1px);
+  bottom: 100%;
+  width: 100%;
+}
+
 .ui-ToastItem:where([data-swipe="move"]) {
   transition: none;
 }
 
+.ui-ToastItem:where([data-visible="false"]) {
+  display: none;
+}
+
 :where(.ui-ToastViewport[data-x-position="left"]) .ui-ToastItem {
   left: 0;
 }
@@ -216,6 +230,7 @@ onMounted(() => {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
 
+.ui-ToastItem:where([data-state="closed"]),
 .ui-ToastItem:where([data-swipe="closed"]) {
   animation: ui-fade-out 100ms ease-in;
 }

src/components/toast/ToastProvider.vue

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<ToastProviderProps>(), {
 })
 
 const forwarded = useForwardPropsWithout(props, ['position', 'size'])
-const manager = useToastManager()
+const { messages } = useToastManager()
 
 const yPosition = computed(() => {
   return props.position.split('-')[0] as 'top' | 'bottom'
@@ -45,11 +45,6 @@ const swipeDirection = computed(() => {
   }
   return xPosition.value
 })
-
-const messages = computed(() => {
-  // only show latest 3 messages
-  return manager.messages.value.slice(0, 3)
-})
 </script>
 
 <template>