fix(Toast): add missing slots

This commit is contained in:
Benjamin Canac
2024-04-12 15:26:58 +02:00
parent a31d4cffb5
commit cfb4cfdd7b

View File

@@ -26,6 +26,14 @@ export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount
} }
export interface ToastEmits extends ToastRootEmits {} export interface ToastEmits extends ToastRootEmits {}
export interface ToastSlots {
default(): any
leading(): any
title(): any
description(): any
close(): any
}
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
@@ -37,6 +45,7 @@ import { UIcon, UAvatar } from '#components'
const props = defineProps<ToastProps>() const props = defineProps<ToastProps>()
const emits = defineEmits<ToastEmits>() const emits = defineEmits<ToastEmits>()
defineSlots<ToastSlots>()
const toaster = inject<ToasterContext>('Toaster') const toaster = inject<ToasterContext>('Toaster')
@@ -74,17 +83,23 @@ defineExpose({
:class="ui.root({ class: props.class, multiline })" :class="ui.root({ class: props.class, multiline })"
:style="{ '--height': height }" :style="{ '--height': height }"
> >
<UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar()" /> <slot name="leading">
<UIcon v-else-if="icon" :name="icon" :class="ui.icon()" /> <UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar()" />
<UIcon v-else-if="icon" :name="icon" :class="ui.icon()" />
</slot>
<div :class="ui.wrapper()"> <div :class="ui.wrapper()">
<ToastTitle v-if="title" :class="ui.title()"> <ToastTitle v-if="title || $slots.title" :class="ui.title()">
{{ title }} <slot name="title">
{{ title }}
</slot>
</ToastTitle> </ToastTitle>
<template v-if="description"> <template v-if="description || $slots.description">
<ToastDescription v-if="isVNode(description)" :as="description" /> <ToastDescription v-if="description && isVNode(description)" :as="description" />
<ToastDescription v-else :class="ui.description()"> <ToastDescription v-else :class="ui.description()">
{{ description }} <slot name="description">
{{ description }}
</slot>
</ToastDescription> </ToastDescription>
</template> </template>
@@ -103,17 +118,19 @@ defineExpose({
</template> </template>
<ToastClose as-child> <ToastClose as-child>
<UButton <slot name="close" :class="ui.close()">
v-if="close !== null" <UButton
:icon="appConfig.ui.icons.close" v-if="close !== null"
size="sm" :icon="appConfig.ui.icons.close"
color="gray" size="sm"
variant="link" color="gray"
aria-label="Close" variant="link"
v-bind="close" aria-label="Close"
:class="ui.close()" v-bind="close"
@click.stop :class="ui.close()"
/> @click.stop
/>
</slot>
</ToastClose> </ToastClose>
</div> </div>