mirror of
https://github.com/hay-kot/homebox.git
synced 2024-12-18 13:06:32 +00:00
62 lines
1.7 KiB
Vue
62 lines
1.7 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"
|
|
: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'">
|
|
<MdiCheckboxMarkedCircle class="h-5 w-5" />
|
|
</template>
|
|
<template v-if="notify.type == 'info'">
|
|
<MdiInformationSlabCircle class="h-5 w-5" />
|
|
</template>
|
|
|
|
<template v-if="notify.type == 'error'">
|
|
<MdiAlert class="h-5 w-5" />
|
|
</template>
|
|
{{ notify.message }}
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MdiCheckboxMarkedCircle from "~icons/mdi/checkbox-marked-circle";
|
|
import MdiInformationSlabCircle from "~icons/mdi/information-slab-circle";
|
|
import MdiAlert from "~icons/mdi/alert";
|
|
|
|
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>
|