98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div
|
|
ref="toastMessage"
|
|
:class="{
|
|
'position-fixed bottom-0 end-0 me-4 mb-5 p-3': true,
|
|
'toast fade hide': true,
|
|
'text-bg-body': type === ToastType.default,
|
|
'text-bg-success': type === ToastType.success,
|
|
'text-bg-danger': type === ToastType.error,
|
|
'text-bg-info': type === ToastType.info,
|
|
'text-bg-warning': type === ToastType.warning,
|
|
}"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div class="d-flex">
|
|
<div v-if="title" class="toast-header">
|
|
<strong class="me-auto">{{ title }}</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer" />
|
|
</div>
|
|
<div class="toast-body">
|
|
<span>{{ message }}</span>
|
|
</div>
|
|
<button
|
|
v-if="!title"
|
|
type="button"
|
|
:class="{
|
|
'btn-close me-2 m-auto': true,
|
|
'btn-close-white': [
|
|
ToastType.success,
|
|
ToastType.error
|
|
].find((toastType) => toastType === type)
|
|
}"
|
|
data-bs-dismiss="toast"
|
|
aria-label="Fermer"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Toast } from "bootstrap";
|
|
import { defineComponent } from "vue";
|
|
import { ToastType } from "~/classes/Toast";
|
|
import type { $Bus } from "~/plugins/emitter";
|
|
|
|
export default defineComponent({
|
|
name: "ToastContainer",
|
|
data(): {
|
|
ToastType: typeof ToastType;
|
|
type: ToastTypeEnum;
|
|
class: string;
|
|
title: string|null;
|
|
message: string;
|
|
} {
|
|
return {
|
|
ToastType,
|
|
type: ToastType.default,
|
|
class: "text-bg-body",
|
|
title: null,
|
|
message: "",
|
|
};
|
|
},
|
|
mounted() {
|
|
const $bus = useNuxtApp().$bus as $Bus;
|
|
$bus.$on("toast", (payload: {message:string, type:ToastTypeEnum, title: string|null}) => {
|
|
const {message, type, title} = payload;
|
|
const myToastEl = this.$refs.toastMessage as HTMLElement;
|
|
this.title = title;
|
|
this.type = type;
|
|
this.message = message;
|
|
Toast.getOrCreateInstance(myToastEl).show();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "bootstrap/scss/functions";
|
|
@import "bootstrap/scss/variables";
|
|
@import "bootstrap/scss/variables-dark";
|
|
@import "bootstrap/scss/maps";
|
|
@import "bootstrap/scss/mixins";
|
|
|
|
.toast {
|
|
@include font-size(1rem);
|
|
|
|
@include media-breakpoint-up(md) {
|
|
@include font-size(2rem);
|
|
}
|
|
@include media-breakpoint-up(xxl) {
|
|
@include font-size(3rem);
|
|
}
|
|
}
|
|
</style>
|