feat(Toast): handle vnodes in title and description

Resolves #3226
This commit is contained in:
Benjamin Canac
2025-02-05 15:32:20 +01:00
parent d94b304d0c
commit abd2be1aa6
2 changed files with 18 additions and 4 deletions

View File

@@ -7,6 +7,7 @@ import theme from '#build/ui/toast'
import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import { tv } from '../utils/tv'
import type { AvatarProps, ButtonProps } from '../types'
import type { StringOrVNode } from '../types/utils'
const appConfigToast = _appConfig as AppConfig & { ui: { toast: Partial<typeof theme> } }
@@ -20,8 +21,8 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
* @defaultValue 'li'
*/
as?: any
title?: string
description?: string
title?: StringOrVNode
description?: StringOrVNode
icon?: string
avatar?: AvatarProps
color?: ToastVariants['color']
@@ -124,12 +125,20 @@ defineExpose({
<div :class="ui.wrapper({ class: props.ui?.wrapper })">
<ToastTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
<slot name="title">
{{ title }}
<component :is="title()" v-if="typeof title === 'function'" />
<component :is="title" v-else-if="typeof title === 'object'" />
<template v-else>
{{ title }}
</template>
</slot>
</ToastTitle>
<ToastDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
<slot name="description">
{{ description }}
<component :is="description()" v-if="typeof description === 'function'" />
<component :is="description" v-else-if="typeof description === 'object'" />
<template v-else>
{{ description }}
</template>
</slot>
</ToastDescription>

View File

@@ -33,3 +33,8 @@ export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string
export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
'update:modelValue': [payload: SelectModelValue<T, V, M, DV>]
}
export type StringOrVNode =
| string
| VNode
| (() => VNode)