Added toast from shadcn
This commit is contained in:
30
components/ui/toast/Toaster.vue
Normal file
30
components/ui/toast/Toaster.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { isVNode } from "vue"
|
||||
import { useToast } from "./use-toast"
|
||||
import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "."
|
||||
|
||||
const { toasts } = useToast()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ToastProvider>
|
||||
<Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
|
||||
<div class="grid gap-1">
|
||||
<ToastTitle v-if="toast.title">
|
||||
{{ toast.title }}
|
||||
</ToastTitle>
|
||||
<template v-if="toast.description">
|
||||
<ToastDescription v-if="isVNode(toast.description)">
|
||||
<component :is="toast.description" />
|
||||
</ToastDescription>
|
||||
<ToastDescription v-else>
|
||||
{{ toast.description }}
|
||||
</ToastDescription>
|
||||
</template>
|
||||
<ToastClose />
|
||||
</div>
|
||||
<component :is="toast.action" />
|
||||
</Toast>
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
</template>
|
||||
Reference in New Issue
Block a user