Baobhan Sith
60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { useUiNotificationsStore } from '../stores/uiNotifications.store';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const notificationsStore = useUiNotificationsStore();
|
|
const { notifications } = storeToRefs(notificationsStore);
|
|
|
|
const getIconClass = (type: string) => {
|
|
switch (type) {
|
|
case 'success': return 'fas fa-check-circle';
|
|
case 'error': return 'fas fa-times-circle';
|
|
case 'info': return 'fas fa-info-circle';
|
|
case 'warning': return 'fas fa-exclamation-triangle';
|
|
default: return '';
|
|
}
|
|
};
|
|
|
|
const getContainerClass = (type: string) => {
|
|
return `notification-item notification-${type}`;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fixed top-4 right-4 z-[1100] flex flex-col items-end">
|
|
<transition-group
|
|
tag="div"
|
|
enter-active-class="transition duration-500 ease-out"
|
|
enter-from-class="transform translate-x-[30px] opacity-0"
|
|
enter-to-class="transform translate-x-0 opacity-95"
|
|
leave-active-class="transition duration-500 ease-in"
|
|
leave-from-class="transform translate-x-0 opacity-95"
|
|
leave-to-class="transform translate-x-[30px] opacity-0"
|
|
>
|
|
<div
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
:class="[
|
|
'flex items-center p-3 mb-2 rounded shadow-md min-w-[250px] max-w-[400px] opacity-95 text-white',
|
|
{
|
|
'bg-green-600': notification.type === 'success',
|
|
'bg-red-600': notification.type === 'error',
|
|
'bg-blue-600': notification.type === 'info',
|
|
'bg-yellow-500 text-gray-800': notification.type === 'warning', // Warning text color adjusted
|
|
}
|
|
]"
|
|
>
|
|
<i :class="['mr-3 text-lg', getIconClass(notification.type)]"></i>
|
|
<span class="flex-grow break-words text-sm">{{ notification.message }}</span>
|
|
<button
|
|
class="ml-4 p-1 bg-transparent border-none text-current opacity-70 hover:opacity-100 cursor-pointer text-lg leading-none"
|
|
@click="notificationsStore.removeNotification(notification.id)"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|