52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { usePage } from "@inertiajs/vue3";
|
|
import { computed } from "vue";
|
|
import { SharedProps } from "@/Types/types";
|
|
|
|
const page = usePage<SharedProps>().props;
|
|
|
|
const errors = computed(() => Object.values(page.errors ?? {}));
|
|
const success = computed(() => page.flash?.success);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="status-notifications">
|
|
<TransitionGroup name="toast">
|
|
<v-alert
|
|
v-for="(error, i) in errors"
|
|
:key="`error-${i}`"
|
|
type="error"
|
|
variant="flat"
|
|
rounded="0"
|
|
closable
|
|
class="mb-2"
|
|
>
|
|
{{ error }}
|
|
</v-alert>
|
|
|
|
<v-alert
|
|
v-if="success"
|
|
key="success"
|
|
type="success"
|
|
variant="flat"
|
|
rounded="0"
|
|
closable
|
|
class="mb-2"
|
|
>
|
|
{{ success }}
|
|
</v-alert>
|
|
</TransitionGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.status-notifications {
|
|
position: fixed;
|
|
bottom: 1.5rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 9999;
|
|
width: 360px;
|
|
}
|
|
</style>
|