arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(toast): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-27 15:37:26 +02:00
parent d2e075bb4a
commit 6863254d89
15 changed files with 451 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/app/app.config.ts
View File

@@ -1,4 +1,9 @@
export default defineAppConfig({
toaster: {
position: 'bottom-right' as const,
expand: true,
duration: 5000
},
ui: {
colors: {
primary: 'green',

3
docs/app/app.vue
View File

@@ -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')">

27
docs/app/components/content/examples/toast/ToastActionsExample.vue Normal file
View File

@@ -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>

21
docs/app/components/content/examples/toast/ToastAvatarExample.vue Normal file
View File

@@ -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>

20
docs/app/components/content/examples/toast/ToastCloseExample.vue Normal file
View File

@@ -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>

19
docs/app/components/content/examples/toast/ToastCloseIconExample.vue Normal file
View File

@@ -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>

22
docs/app/components/content/examples/toast/ToastColorExample.vue Normal file
View File

@@ -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>

16
docs/app/components/content/examples/toast/ToastDescriptionExample.vue Normal file
View File

@@ -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>

18
docs/app/components/content/examples/toast/ToastExample.vue Normal file
View File

@@ -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>

19
docs/app/components/content/examples/toast/ToastIconExample.vue Normal file
View File

@@ -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>

15
docs/app/components/content/examples/toast/ToastTitleExample.vue Normal file
View File

@@ -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>

26
docs/app/components/content/examples/toaster/ToasterDurationExample.vue Normal file
View File

@@ -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>

27
docs/app/components/content/examples/toaster/ToasterExpandExample.vue Normal file
View File

@@ -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>

30
docs/app/components/content/examples/toaster/ToasterPositionExample.vue Normal file
View File

@@ -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>

188
docs/content/3.components/toast.md
View File

@@ -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