forked from mirrors/homebox
75c633dcb5
* dummy commit * cleanup workflows * setup and run eslint * add linter to CI * use eslint for formatting * reorder rules * drop editor config
58 lines
1.6 KiB
Vue
58 lines
1.6 KiB
Vue
<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>
|