From c1ed04f722121ca1bcd75f49e96deaba2f4bdbaf Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 11 Jul 2024 12:51:00 +0200
Subject: [PATCH] chore(Toast): simplify code now that `duration` is exposed

---
 src/runtime/components/Toast.vue   | 9 +++------
 src/runtime/components/Toaster.vue | 9 +--------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 79138404..c028640c 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -4,7 +4,7 @@ import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/toast'
-import type { AvatarProps, ButtonProps, ToasterContext } from '../types'
+import type { AvatarProps, ButtonProps } from '../types'
 
 const appConfig = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
 
@@ -56,7 +56,7 @@ export interface ToastSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, inject, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { ToastRoot, ToastTitle, ToastDescription, ToastAction, ToastClose, useForwardPropsEmits } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -68,13 +68,10 @@ const props = withDefaults(defineProps<ToastProps>(), {
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
 
-const toaster = inject<ToasterContext>('Toaster')
-
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'duration', 'open', 'type'), emits)
 
 const multiline = computed(() => !!props.title && !!props.description)
-const duration = computed(() => props.duration || toaster?.value.duration)
 
 const ui = computed(() => toast({
   color: props.color
@@ -101,7 +98,7 @@ defineExpose({
 <template>
   <ToastRoot
     ref="el"
-    v-slot="{ remaining }"
+    v-slot="{ remaining, duration }"
     v-bind="rootProps"
     :class="ui.root({ class: props.class, multiline })"
     :style="{ '--height': height }"
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index 82ad93df..3871907b 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import type { ComputedRef } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { ToastProviderProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
@@ -26,14 +25,10 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
   default(props?: {}): any
 }
-
-export type ToasterContext = ComputedRef<{
-  duration: number
-}>
 </script>
 
 <script setup lang="ts">
-import { ref, computed, provide } from 'vue'
+import { ref, computed } from 'vue'
 import { ToastProvider, ToastViewport, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { useToast } from '#imports'
@@ -90,8 +85,6 @@ const frontHeight = computed(() => refs.value[refs.value.length - 1]?.height ||
 function getOffset(index: number) {
   return refs.value.slice(index + 1).reduce((acc, { height }) => acc + height + 16, 0)
 }
-
-provide<ToasterContext>('Toaster', providerProps)
 </script>
 
 <template>