mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 16:38:20 +01:00
70 lines
3.7 KiB
Vue
70 lines
3.7 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div aria-live="assertive"
|
|
class="pointer-events-none fixed inset-0 flex items-end px-4 pt-6 pb-24 sm:pb-6 sm:items-start sm:p-6 z-50">
|
|
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
|
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
|
<TransitionGroup enter-active-class="transform ease-out duration-300 transition"
|
|
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
|
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave-active-class="transition transform ease-in duration-100"
|
|
leave-from-class="translate-y-0 opacity-100 sm:translate-x-0"
|
|
leave-to-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2">
|
|
<div v-for="notification in notifications" :key="notification.id"
|
|
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-dark-500 shadow-lg ring-1 ring-white/10">
|
|
<div class="p-4">
|
|
<div class="flex items-start">
|
|
<div class="shrink-0 h-6 w-6">
|
|
<iconify-icon v-if="notification.type === 'success'" icon="tabler:check"
|
|
height="none" class="h-6 w-6 text-green-400" aria-hidden="true" />
|
|
<iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
|
|
height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
|
|
<iconify-icon v-else-if="notification.type === 'progress'" icon="tabler:loader"
|
|
height="none" class="h-6 w-6 text-pink-500 animate-spin" aria-hidden="true" />
|
|
</div>
|
|
<div class="ml-3 w-0 flex-1 pt-0.5">
|
|
<p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
|
|
<p class="mt-1 text-sm text-gray-400" v-if="notification.message">{{
|
|
notification.message }}</p>
|
|
</div>
|
|
<div class="ml-4 flex flex-shrink-0">
|
|
<button type="button" title="Close this notification"
|
|
@click="notifications.splice(notifications.indexOf(notification), 1); notification.onDismiss?.()"
|
|
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
|
|
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const notifications = ref<
|
|
(NotificationEvent & {
|
|
id: string;
|
|
})[]
|
|
>([]);
|
|
|
|
useListen("notification:new", (n) => {
|
|
const newNotification = {
|
|
...n,
|
|
id: Math.random().toString(36).substring(7),
|
|
};
|
|
|
|
notifications.value.push(newNotification);
|
|
|
|
!newNotification.persistent &&
|
|
setTimeout(() => {
|
|
notifications.value.splice(
|
|
notifications.value.indexOf(newNotification),
|
|
1,
|
|
);
|
|
newNotification.onDismiss?.();
|
|
}, 5000);
|
|
});
|
|
</script> |