125 lines
2.1 KiB
Vue
125 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { color } from "@/services/popupDisplayer.ts";
|
|
import type { PropType } from "vue";
|
|
|
|
defineProps({
|
|
errorMessage: {
|
|
type: Object as PropType<string>,
|
|
required: true,
|
|
},
|
|
errorColor: {
|
|
type: Object as PropType<color>,
|
|
default: color.Red,
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="['red', 'yellow', 'blue', 'green'][errorColor]"
|
|
class="error-modal"
|
|
>
|
|
<p>
|
|
{{
|
|
["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
|
|
}}
|
|
</p>
|
|
<p>{{ errorMessage }}</p>
|
|
<div
|
|
class="loading"
|
|
:class="
|
|
['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
|
|
errorColor
|
|
]
|
|
"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.error-modal {
|
|
margin-bottom: 1em;
|
|
padding: 1em;
|
|
border-radius: 1em;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
animation: disappear 5s linear forwards;
|
|
}
|
|
|
|
.red {
|
|
background-color: #ee6055;
|
|
color: white;
|
|
}
|
|
|
|
.red-loader {
|
|
background-color: #fa8383;
|
|
}
|
|
|
|
.yellow {
|
|
background-color: #ff9d23;
|
|
color: white;
|
|
}
|
|
|
|
.yellow-loader {
|
|
background-color: #ffbf81;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #809bce;
|
|
color: white;
|
|
}
|
|
|
|
.blue-loader {
|
|
background-color: #95b8d1;
|
|
}
|
|
|
|
.green {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
|
|
.green-loader {
|
|
background-color: darkgreen;
|
|
}
|
|
|
|
.loading {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
padding: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 1em;
|
|
width: 0;
|
|
animation: loading 4s linear forwards;
|
|
}
|
|
|
|
/* Animation for the loading bar */
|
|
@keyframes loading {
|
|
0% {
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes disappear {
|
|
0% {
|
|
height: 100px;
|
|
padding: 1em;
|
|
margin: 1em;
|
|
}
|
|
80% {
|
|
height: 100px;
|
|
padding: 1em;
|
|
margin: 1em;
|
|
}
|
|
100% {
|
|
height: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|