From 7c1823293274bfefab0c5218c0ca16d3839cbc08 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 4 Sep 2024 11:36:05 +0200
Subject: [PATCH] docs(toast): update

---
 docs/content/3.components/modal.md     |  2 +-
 docs/content/3.components/slideover.md |  2 +-
 docs/content/3.components/toast.md     | 57 ++++++++++++++++++++++++--
 docs/content/3.components/tooltip.md   |  6 ++-
 src/runtime/components/Toast.vue       |  4 +-
 5 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index cfc4b003..8ddd5a26 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -281,7 +281,7 @@ This allows you to move the trigger outside of the Modal or remove it entirely.
 You can use the `useModal` composable to open a Modal programatically.
 
 ::important
-Make sure to wrap your app with the [`App`](/components/app) component that instantiates the `ModalProvider` component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`ModalProvider`](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/ModalProvider.vue) component.
 ::
 
 First, create a modal component that will be opened programatically:
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index d8674923..8fa72563 100644
--- a/docs/content/3.components/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -280,7 +280,7 @@ This allows you to move the trigger outside of the Slideover or remove it entire
 You can use the `useSlideover` composable to open a Slideover programatically.
 
 ::important
-Make sure to wrap your app with the [`App`](/components/app) component that instantiates the `SlideoverProvider` component.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [`SlideoverProvider`](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/SlideoverProvider.vue) component.
 ::
 
 First, create a slideover component that will be opened programatically:
diff --git a/docs/content/3.components/toast.md b/docs/content/3.components/toast.md
index 7496e416..2db422e9 100644
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -14,21 +14,72 @@ navigation:
 
 ## Usage
 
+Use the [useToast](/composables/use-toast) composable to display a toast in your application.
+
+::important
+Make sure to wrap your app with the [App](/components/app) component which uses our [Toaster](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/components/Toaster.vue) component which uses the [ToastProvider](https://www.radix-vue.com/components/toast.html#provider) component from Radix Vue.
+::
+
+::tip{to="/components/app#props"}
+You can check the `App` component `toaster` prop to see how to configure the Toaster globally.
+::
+
+### Title
+
+### Description
+
+### Icon
+
+### Avatar
+
+### Color
+
+### Variant
+
+### Close
+
+### Actions
+
 ## Examples
 
 ## API
 
 ### Props
 
-:component-props
+::component-props
+---
+ignore:
+  - as
+  - open
+  - defaultOpen
+  - to
+  - target
+  - active
+  - activeClass
+  - inactiveClass
+  - exactActiveClass
+  - ariaCurrentValue
+  - href
+  - rel
+  - noRel
+  - prefetch
+  - noPrefetch
+  - prefetchedClass
+  - replace
+  - exact
+  - exactQuery
+  - exactHash
+  - external
+---
+::
 
-### Slots
+<!-- ### Slots
 
 :component-slots
 
 ### Emits
 
-:component-emits
+:component-emits -->
 
 ## Theme
 
diff --git a/docs/content/3.components/tooltip.md b/docs/content/3.components/tooltip.md
index 764b6067..0b44e34b 100644
--- a/docs/content/3.components/tooltip.md
+++ b/docs/content/3.components/tooltip.md
@@ -14,7 +14,11 @@ links:
 Use a [Button](/components/button) or any other component in the default slot of the Tooltip.
 
 ::important
-Make sure to wrap your app with the [`App`](/components/app) component to make the Tooltip work properly.
+Make sure to wrap your app with the [`App`](/components/app) component which uses the [TooltipProvider](https://www.radix-vue.com/components/tooltip.html#provider) component from Radix Vue.
+::
+
+::tip{to="/components/app#props"}
+You can check the `App` component `tooltip` prop to see how to configure the Tooltip globally.
 ::
 
 ### Text
diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index 606c58e5..2b21caf8 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -15,7 +15,7 @@ type ToastVariants = VariantProps<typeof toast>
 export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
   /**
    * The element or component this component should render as.
-   * @defaultValue 'div'
+   * @defaultValue 'li'
    */
   as?: any
   title?: string
@@ -70,7 +70,7 @@ const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
 
 const appConfig = useAppConfig()
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'duration', 'open', 'type'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
 
 const multiline = computed(() => !!props.title && !!props.description)