chore(Alert/Toast): remove description as VNode

This commit is contained in:
Benjamin Canac
2024-06-28 11:45:55 +02:00
parent 369e0b1952
commit f85eb8ed40
2 changed files with 4 additions and 8 deletions

View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { isVNode, type VNode } from 'vue'
import { tv, type VariantProps } from 'tailwind-variants' import { tv, type VariantProps } from 'tailwind-variants'
import type { PrimitiveProps } from 'radix-vue' import type { PrimitiveProps } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
@@ -15,7 +14,7 @@ type AlertVariants = VariantProps<typeof alert>
export interface AlertProps extends Omit<PrimitiveProps, 'asChild'> { export interface AlertProps extends Omit<PrimitiveProps, 'asChild'> {
title?: string title?: string
description?: string | VNode | (() => VNode) description?: string
icon?: string icon?: string
avatar?: AvatarProps avatar?: AvatarProps
color?: AlertVariants['color'] color?: AlertVariants['color']
@@ -88,8 +87,7 @@ const ui = computed(() => tv({ extend: alert, slots: props.ui })({
</slot> </slot>
</div> </div>
<template v-if="description || !!slots.description"> <template v-if="description || !!slots.description">
<component :is="description" v-if="description && isVNode(description)" /> <div :class="ui.description()">
<div v-else :class="ui.description()">
<slot name="description"> <slot name="description">
{{ description }} {{ description }}
</slot> </slot>

View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { isVNode, type VNode } from 'vue'
import { tv, type VariantProps } from 'tailwind-variants' import { tv, type VariantProps } from 'tailwind-variants'
import type { ToastRootProps, ToastRootEmits } from 'radix-vue' import type { ToastRootProps, ToastRootEmits } from 'radix-vue'
import type { AppConfig } from '@nuxt/schema' import type { AppConfig } from '@nuxt/schema'
@@ -15,7 +14,7 @@ type ToastVariants = VariantProps<typeof toast>
export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount'> { export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount'> {
title?: string title?: string
description?: string | VNode | (() => VNode) description?: string
icon?: string icon?: string
avatar?: AvatarProps avatar?: AvatarProps
color?: ToastVariants['color'] color?: ToastVariants['color']
@@ -109,8 +108,7 @@ defineExpose({
</slot> </slot>
</ToastTitle> </ToastTitle>
<template v-if="description || !!slots.description"> <template v-if="description || !!slots.description">
<ToastDescription v-if="description && isVNode(description)" :as="description" /> <ToastDescription :class="ui.description()">
<ToastDescription v-else :class="ui.description()">
<slot name="description"> <slot name="description">
{{ description }} {{ description }}
</slot> </slot>