From 6863254d89281d5d32c69d607088665302b00c5d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 27 Sep 2024 15:37:26 +0200
Subject: [PATCH] docs(toast): update

---
 docs/app/app.config.ts                        |   5 +
 docs/app/app.vue                              |   3 +-
 .../examples/toast/ToastActionsExample.vue    |  27 +++
 .../examples/toast/ToastAvatarExample.vue     |  21 ++
 .../examples/toast/ToastCloseExample.vue      |  20 ++
 .../examples/toast/ToastCloseIconExample.vue  |  19 ++
 .../examples/toast/ToastColorExample.vue      |  22 ++
 .../toast/ToastDescriptionExample.vue         |  16 ++
 .../content/examples/toast/ToastExample.vue   |  18 ++
 .../examples/toast/ToastIconExample.vue       |  19 ++
 .../examples/toast/ToastTitleExample.vue      |  15 ++
 .../toaster/ToasterDurationExample.vue        |  26 +++
 .../examples/toaster/ToasterExpandExample.vue |  27 +++
 .../toaster/ToasterPositionExample.vue        |  30 +++
 docs/content/3.components/toast.md            | 188 +++++++++++++++++-
 15 files changed, 451 insertions(+), 5 deletions(-)
 create mode 100644 docs/app/components/content/examples/toast/ToastActionsExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastAvatarExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastCloseExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastCloseIconExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastColorExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastDescriptionExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastIconExample.vue
 create mode 100644 docs/app/components/content/examples/toast/ToastTitleExample.vue
 create mode 100644 docs/app/components/content/examples/toaster/ToasterDurationExample.vue
 create mode 100644 docs/app/components/content/examples/toaster/ToasterExpandExample.vue
 create mode 100644 docs/app/components/content/examples/toaster/ToasterPositionExample.vue

diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index 5e5c497b..334a5535 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -1,4 +1,9 @@
 export default defineAppConfig({
+  toaster: {
+    position: 'bottom-right' as const,
+    expand: true,
+    duration: 5000
+  },
   ui: {
     colors: {
       primary: 'green',
diff --git a/docs/app/app.vue b/docs/app/app.vue
index a0d3d4d7..44b88abc 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -4,6 +4,7 @@ import { withoutTrailingSlash } from 'ufo'
 // import type { ContentSearchFile } from '@nuxt/ui-pro'
 
 const route = useRoute()
+const appConfig = useAppConfig()
 // const colorMode = useColorMode()
 const runtimeConfig = useRuntimeConfig()
 const { integrity, api } = runtimeConfig.public.content
@@ -74,7 +75,7 @@ provide('navigation', navigation)
 </script>
 
 <template>
-  <UApp>
+  <UApp :toaster="appConfig.toaster">
     <NuxtLoadingIndicator color="#FFF" />
 
     <template v-if="!route.path.startsWith('/examples')">
diff --git a/docs/app/components/content/examples/toast/ToastActionsExample.vue b/docs/app/components/content/examples/toast/ToastActionsExample.vue
new file mode 100644
index 00000000..8e3e839f
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastActionsExample.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const toast = useToast()
+
+const props = defineProps<{
+  description: string
+}>()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: props.description,
+    actions: [{
+      icon: 'i-heroicons-arrow-path-20-solid',
+      label: 'Retry',
+      color: 'gray',
+      variant: 'outline',
+      onClick: (e) => {
+        e?.stopPropagation()
+      }
+    }]
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastAvatarExample.vue b/docs/app/components/content/examples/toast/ToastAvatarExample.vue
new file mode 100644
index 00000000..da4bbd60
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastAvatarExample.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AvatarProps } from '@nuxt/ui'
+
+const props = defineProps<{
+  avatar: AvatarProps
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'User invited',
+    description: 'benjamincanac was invited to the team.',
+    avatar: props.avatar
+  })
+}
+</script>
+
+<template>
+  <UButton label="Invite user" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastCloseExample.vue b/docs/app/components/content/examples/toast/ToastCloseExample.vue
new file mode 100644
index 00000000..c0fefbce
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastCloseExample.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: 'There was a problem with your request.',
+    icon: 'i-heroicons-wifi',
+    close: {
+      color: 'primary',
+      variant: 'outline',
+      class: 'rounded-full'
+    }
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastCloseIconExample.vue b/docs/app/components/content/examples/toast/ToastCloseIconExample.vue
new file mode 100644
index 00000000..30094655
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastCloseIconExample.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  closeIcon: string
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: 'There was a problem with your request.',
+    closeIcon: props.closeIcon
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastColorExample.vue b/docs/app/components/content/examples/toast/ToastColorExample.vue
new file mode 100644
index 00000000..a96bf047
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastColorExample.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ToastProps } from '@nuxt/ui'
+
+const props = defineProps<{
+  color: ToastProps['color']
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: 'There was a problem with your request.',
+    icon: 'i-heroicons-wifi',
+    color: props.color
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastDescriptionExample.vue b/docs/app/components/content/examples/toast/ToastDescriptionExample.vue
new file mode 100644
index 00000000..dc85b60b
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastDescriptionExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  description: string
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add(props)
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastExample.vue b/docs/app/components/content/examples/toast/ToastExample.vue
new file mode 100644
index 00000000..30b4402e
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastExample.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const toast = useToast()
+
+function addToCalendar() {
+  const eventDate = new Date(Date.now() + Math.random() * 31536000000)
+  const formattedDate = eventDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+
+  toast.add({
+    title: 'Event added to calendar',
+    description: `This event is scheduled for ${formattedDate}.`,
+    icon: 'i-heroicons-calendar-days'
+  })
+}
+</script>
+
+<template>
+  <UButton label="Add to calendar" color="gray" variant="outline" icon="i-heroicons-plus" @click="addToCalendar" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastIconExample.vue b/docs/app/components/content/examples/toast/ToastIconExample.vue
new file mode 100644
index 00000000..ee5eb432
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastIconExample.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  icon: string
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add({
+    title: 'Uh oh! Something went wrong.',
+    description: 'There was a problem with your request.',
+    icon: props.icon
+  })
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toast/ToastTitleExample.vue b/docs/app/components/content/examples/toast/ToastTitleExample.vue
new file mode 100644
index 00000000..230f90f5
--- /dev/null
+++ b/docs/app/components/content/examples/toast/ToastTitleExample.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+}>()
+
+const toast = useToast()
+
+function showToast() {
+  toast.add(props)
+}
+</script>
+
+<template>
+  <UButton label="Show toast" color="gray" variant="outline" @click="showToast" />
+</template>
diff --git a/docs/app/components/content/examples/toaster/ToasterDurationExample.vue b/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
new file mode 100644
index 00000000..dc2fe917
--- /dev/null
+++ b/docs/app/components/content/examples/toaster/ToasterDurationExample.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <UFormField
+      label="toaster.duration"
+      size="sm"
+      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      :ui="{
+        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
+        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        container: 'mt-0'
+      }"
+    >
+      <UInput
+        v-model="appConfig.toaster.duration"
+        color="gray"
+        variant="soft"
+        class="rounded rounded-l-none min-w-12"
+        :search-input="false"
+      />
+    </UFormField>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/toaster/ToasterExpandExample.vue b/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
new file mode 100644
index 00000000..814755c1
--- /dev/null
+++ b/docs/app/components/content/examples/toaster/ToasterExpandExample.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <UFormField
+      label="toaster.expand"
+      size="sm"
+      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      :ui="{
+        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
+        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        container: 'mt-0'
+      }"
+    >
+      <USelectMenu
+        v-model="appConfig.toaster.expand"
+        :items="[true, false]"
+        color="gray"
+        variant="soft"
+        class="rounded rounded-l-none min-w-12"
+        :search-input="false"
+      />
+    </UFormField>
+  </div>
+</template>
diff --git a/docs/app/components/content/examples/toaster/ToasterPositionExample.vue b/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
new file mode 100644
index 00000000..ec8827cf
--- /dev/null
+++ b/docs/app/components/content/examples/toaster/ToasterPositionExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import theme from '#build/ui/toaster'
+
+const positions = Object.keys(theme.variants.position)
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <UFormField
+      label="toaster.position"
+      size="sm"
+      class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+      :ui="{
+        wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
+        label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+        container: 'mt-0'
+      }"
+    >
+      <USelectMenu
+        v-model="appConfig.toaster.position"
+        :items="positions"
+        color="gray"
+        variant="soft"
+        class="rounded rounded-l-none min-w-12"
+        :search-input="false"
+      />
+    </UFormField>
+  </div>
+</template>
diff --git a/docs/content/3.components/toast.md b/docs/content/3.components/toast.md
index 5f0311b7..eb8e1928 100644
--- a/docs/content/3.components/toast.md
+++ b/docs/content/3.components/toast.md
@@ -7,9 +7,6 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Toast.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -26,22 +23,205 @@ You can check the `App` component `toaster` prop to see how to configure the Toa
 
 ### Title
 
+Pass a `title` field to the `toast.add` method to display a title.
+
+::component-example
+---
+options:
+  - name: 'title'
+    label: 'title'
+    default: 'Uh oh! Something went wrong.'
+name: 'toast-title-example'
+---
+::
+
 ### Description
 
+Pass a `description` field to the `toast.add` method to display a description.
+
+::component-example
+---
+options:
+  - name: 'title'
+    label: 'title'
+    default: 'Uh oh! Something went wrong.'
+  - name: 'description'
+    label: 'description'
+    default: 'There was a problem with your request.'
+name: 'toast-description-example'
+---
+::
+
 ### Icon
 
+Pass an `icon` field to the `toast.add` method to display an [Icon](/components/icon).
+
+::component-example
+---
+options:
+  - name: 'icon'
+    label: 'icon'
+    default: 'i-heroicons-wifi'
+name: 'toast-icon-example'
+---
+::
+
 ### Avatar
 
+Pass an `avatar` field to the `toast.add` method to display an [Avatar](/components/avatar).
+
+::component-example
+---
+options:
+  - name: 'avatar.src'
+    alias: 'avatar'
+    label: 'avatar.src'
+    default:
+      src: 'https://github.com/benjamincanac.png'
+name: 'toast-avatar-example'
+---
+::
+
 ### Color
 
-### Variant
+Pass a `color` field to the `toast.add` method to change the color of the Toast.
+
+::component-example
+---
+options:
+  - name: 'color'
+    label: 'color'
+    default: 'gray'
+    items:
+      - primary
+      - green
+      - red
+      - orange
+      - amber
+      - yellow
+      - lime
+      - emerald
+      - teal
+      - cyan
+      - sky
+      - blue
+      - indigo
+      - violet
+      - purple
+      - fuchsia
+      - pink
+      - rose
+      - gray
+name: 'toast-color-example'
+---
+::
 
 ### Close
 
+Pass a `close` field to customize or hide the close button (with `false` value).
+
+::component-example
+---
+name: 'toast-close-example'
+---
+::
+
+### Close Icon
+
+Pass a `closeIcon` field to customize the close button [Icon](/components/icon). Default to `i-heroicons-x-mark-20-solid`.
+
+::component-example
+---
+options:
+  - name: 'closeIcon'
+    label: 'closeIcon'
+    default: 'i-heroicons-arrow-right'
+name: 'toast-close-icon-example'
+---
+::
+
+::tip{to="/getting-started/icons#theme"}
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
 ### Actions
 
+Pass an `actions` field to add some [Button](/components/button) actions to the Alert.
+
+::component-example
+---
+options:
+  - name: 'description'
+    label: 'description'
+    default: 'There was a problem with your request.'
+name: 'toast-actions-example'
+---
+::
+
+::note
+Actions renders differently when the description is not set. You can try to remove it.
+::
+
 ## Examples
 
+### Change global position
+
+Change the `toaster.position` prop on the [App](/components/app#props) component to change the position of the toasts.
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-position-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `position` prop of the `Toaster` component globally.
+::
+
+### Change global duration
+
+Change the `toaster.duration` prop on the [App](/components/app#props) component to change the duration of the toasts.
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-duration-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `duration` prop of the `Toaster` component globally.
+::
+
+### Stacked toasts
+
+Set the `toaster.expand` prop to `false` on the [App](/components/app#props) component to display stacked toasts.
+
+::tip
+You can hover over the toasts to expand them. This will also pause the timer of the toasts.
+::
+
+::component-example
+---
+prettier: true
+name: 'toast-example'
+---
+
+#options
+:toaster-expand-example
+::
+
+::note{to="https://github.com/nuxt/ui/blob/v3/docs/app/app.vue#L77"}
+In this example, we use the `AppConfig` to configure the `expand` prop of the `Toaster` component globally.
+::
+
 ## API
 
 ### Props