docs(toast): update

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>

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>

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>

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>

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>

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>

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>

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>

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>