From 849596e870619c77066a4b52ccda2ea016ce939f Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 30 Oct 2023 22:36:00 +0330
Subject: [PATCH] feat: add `VNode` type to toast description

---
 .../lib/registry/default/example/InputForm.vue |  7 ++++++-
 .../lib/registry/default/ui/toast/Toast.vue    | 18 ++++++++++++------
 .../default/ui/toast/ToastDescription.vue      |  2 +-
 .../lib/registry/default/ui/toast/Toaster.vue  | 12 +++++++++---
 .../src/lib/registry/default/ui/toast/index.ts |  1 +
 .../lib/registry/default/ui/toast/use-toast.ts |  9 +++++++--
 .../registry/new-york/example/InputForm.vue    |  7 ++++++-
 .../lib/registry/new-york/ui/toast/Toast.vue   | 18 ++++++++++++------
 .../new-york/ui/toast/ToastDescription.vue     |  2 +-
 .../lib/registry/new-york/ui/toast/Toaster.vue | 12 +++++++++---
 .../lib/registry/new-york/ui/toast/index.ts    |  1 +
 .../registry/new-york/ui/toast/use-toast.ts    |  9 +++++++--
 12 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/InputForm.vue b/apps/www/src/lib/registry/default/example/InputForm.vue
index 65e138bf..f2ec0cc1 100644
--- a/apps/www/src/lib/registry/default/example/InputForm.vue
+++ b/apps/www/src/lib/registry/default/example/InputForm.vue
@@ -3,6 +3,7 @@ import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 
+import { h } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -13,6 +14,7 @@ import {
   FormMessage,
 } from '@/lib/registry/default/ui/form'
 import { Input } from '@/lib/registry/default/ui/input'
+import { toast } from '@/lib/registry/default/ui/toast/use-toast'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
@@ -23,7 +25,10 @@ const { handleSubmit } = useForm({
 })
 
 const onSubmit = handleSubmit((values) => {
-  console.log('Form submitted!', values)
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
 })
 </script>
 
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toast.vue b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
index 46e3bd2b..6d13dc83 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
@@ -1,18 +1,24 @@
-<script setup lang="ts">
-import { ToastRoot, type ToastRootEmits, type ToastRootProps, useEmitAsProps } from 'radix-vue'
-
-import { toastVariants } from '.'
-import { cn } from '@/lib/utils'
+<script lang="ts">
+import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
+import type { VariantProps } from 'class-variance-authority'
 
 interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
 
 export interface ToastProps extends ToastRootProps {
   class?: string
   variant?: ToastVariantProps['variant']
+  'onUpdate:open'?: ((value: boolean) => void) | undefined
 };
+</script>
+
+<script setup lang="ts">
+import { ToastRoot, useEmitAsProps } from 'radix-vue'
+
+import { toastVariants } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
-const emits = defineEmits<ToastRootEmits>()
+const emits = defineEmits<Omit<ToastRootEmits, 'update:open'>>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
index 98630e3d..5f71b1a8 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastDescriptionProps & { class?: string }>()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toaster.vue b/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
index d5db5dcd..f86ce40b 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isVNode } from 'vue'
 import { useToast } from './use-toast'
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
 
@@ -12,9 +13,14 @@ const { toasts } = useToast()
         <ToastTitle v-if="toast.title">
           {{ toast.title }}
         </ToastTitle>
-        <ToastDescription v-if="toast.description">
-          {{ toast.description }}
-        </ToastDescription>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
         <ToastClose />
       </div>
       <component :is="toast.action" />
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index 17f038c7..c88ff449 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -6,6 +6,7 @@ export { default as ToastClose } from './ToastClose.vue'
 export { default as ToastTitle } from './ToastTitle.vue'
 export { default as ToastDescription } from './ToastDescription.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
+export { useToast } from './use-toast'
 
 import { cva } from 'class-variance-authority'
 
diff --git a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
index f21f6ebb..06e1df7d 100644
--- a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
@@ -1,14 +1,19 @@
 import { computed, ref } from 'vue'
-import type { Component } from 'vue'
+import type { Component, VNode } from 'vue'
 import type { ToastProps } from './Toast.vue'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
 type ToasterToast = ToastProps & {
   id: string
   title?: string
-  description?: string
+  description?: StringOrVNode
   action?: Component
 }
 
diff --git a/apps/www/src/lib/registry/new-york/example/InputForm.vue b/apps/www/src/lib/registry/new-york/example/InputForm.vue
index 316f4fb2..60037681 100644
--- a/apps/www/src/lib/registry/new-york/example/InputForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputForm.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { h } from 'vue'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
@@ -13,6 +14,7 @@ import {
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
 import { Input } from '@/lib/registry/new-york/ui/input'
+import { toast } from '@/lib/registry/new-york/ui/toast/use-toast'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
@@ -23,7 +25,10 @@ const { isFieldDirty, handleSubmit } = useForm({
 })
 
 const onSubmit = handleSubmit((values) => {
-  console.log('Form submitted!', values)
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
+  })
 })
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
index 46e3bd2b..6d13dc83 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toast.vue
@@ -1,18 +1,24 @@
-<script setup lang="ts">
-import { ToastRoot, type ToastRootEmits, type ToastRootProps, useEmitAsProps } from 'radix-vue'
-
-import { toastVariants } from '.'
-import { cn } from '@/lib/utils'
+<script lang="ts">
+import type { ToastRootEmits, ToastRootProps } from 'radix-vue'
+import type { VariantProps } from 'class-variance-authority'
 
 interface ToastVariantProps extends VariantProps<typeof toastVariants> {}
 
 export interface ToastProps extends ToastRootProps {
   class?: string
   variant?: ToastVariantProps['variant']
+  'onUpdate:open'?: ((value: boolean) => void) | undefined
 };
+</script>
+
+<script setup lang="ts">
+import { ToastRoot, useEmitAsProps } from 'radix-vue'
+
+import { toastVariants } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastProps>()
-const emits = defineEmits<ToastRootEmits>()
+const emits = defineEmits<Omit<ToastRootEmits, 'update:open'>>()
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
index 98630e3d..5f71b1a8 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/ToastDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
-import { cn } from '@/lib/utils.ts'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<ToastDescriptionProps & { class?: string }>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
index d5db5dcd..f86ce40b 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isVNode } from 'vue'
 import { useToast } from './use-toast'
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
 
@@ -12,9 +13,14 @@ const { toasts } = useToast()
         <ToastTitle v-if="toast.title">
           {{ toast.title }}
         </ToastTitle>
-        <ToastDescription v-if="toast.description">
-          {{ toast.description }}
-        </ToastDescription>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
         <ToastClose />
       </div>
       <component :is="toast.action" />
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/index.ts b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
index 17f038c7..c88ff449 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/index.ts
@@ -6,6 +6,7 @@ export { default as ToastClose } from './ToastClose.vue'
 export { default as ToastTitle } from './ToastTitle.vue'
 export { default as ToastDescription } from './ToastDescription.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
+export { useToast } from './use-toast'
 
 import { cva } from 'class-variance-authority'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
index f21f6ebb..06e1df7d 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
@@ -1,14 +1,19 @@
 import { computed, ref } from 'vue'
-import type { Component } from 'vue'
+import type { Component, VNode } from 'vue'
 import type { ToastProps } from './Toast.vue'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
 type ToasterToast = ToastProps & {
   id: string
   title?: string
-  description?: string
+  description?: StringOrVNode
   action?: Component
 }