<template> <div class="force-above fixed top-2 right-2 w-[300px]"> <TransitionGroup name="notify" tag="div"> <div v-for="(notify, index) in notifications.slice(0, 4)" :key="notify.id" class="my-2 w-[300px] rounded-md p-3 text-sm text-white opacity-75" :class="{ 'bg-primary': notify.type === 'info', 'bg-red-600': notify.type === 'error', 'bg-green-600': notify.type === 'success', }" @click="dropNotification(index)" > <div class="flex gap-1"> <template v-if="notify.type == 'success'"> <Icon name="heroicons-check" class="h-5 w-5" /> </template> <template v-if="notify.type == 'info'"> <Icon name="heroicons-information-circle" class="h-5 w-5" /> </template> <template v-if="notify.type == 'error'"> <Icon name="heroicons-bell-alert" class="h-5 w-5" /> </template> {{ notify.message }} </div> </div> </TransitionGroup> </div> </template> <script setup lang="ts"> import { useNotifications } from '@/composables/use-notifier'; const { notifications, dropNotification } = useNotifications(); </script> <style scoped> .force-above { z-index: 9999; } .notify-move, .notify-enter-active, .notify-leave-active { transition: all 0.5s ease; } .notify-enter-from, .notify-leave-to { opacity: 0; transform: translateY(-30px); } .notify-leave-active { position: absolute; transform: translateY(30px); } </style>