22 lines
772 B
Vue
22 lines
772 B
Vue
<template>
|
|
<div class="fixed bottom-5 right-5 z-[100] flex flex-col items-end space-y-2 pointer-events-none">
|
|
<TransitionGroup
|
|
enter-active-class="transform ease-out duration-300 transition"
|
|
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave-active-class="transition ease-in duration-100"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<ToastItem v-for="toast in toasts" :key="toast.id" :toast="toast" />
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useToast } from '@/composables/useToast';
|
|
import ToastItem from './ToastItem.vue';
|
|
|
|
const { toasts } = useToast();
|
|
</script>
|