1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-28 17:56:29 +00:00
homebox/frontend/components/App/Toast.vue
Hayden c19fe94c08
feat: QR Codes ()
* code gen updates

* qrcode support

* remove opacity on toast

* update item view to use tab-like pages

* adjust view for cards

* fix old API calls for ioutils

* move embed

* extract QR code

* add docs for QR codes

* add QR code
2023-01-18 20:44:06 -09:00

58 lines
1.5 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'">
<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>