74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div
|
|
:id="id"
|
|
ref="modal"
|
|
class="modal fade text-dark"
|
|
data-bs-backdrop="true"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
aria-hidden="true"
|
|
:data-testid="dataTestid"
|
|
>
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
{{ title }}
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script>
|
|
import Modal from "bootstrap/js/dist/modal";
|
|
|
|
export default {
|
|
name: "GenericModal",
|
|
props: {
|
|
id: String,
|
|
title: String,
|
|
dataTestid: String,
|
|
},
|
|
emits: ["visibilityChanged"],
|
|
watch: {
|
|
isModalVisible(visible) {
|
|
this.$emit("changed", visible);
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$refs.modal.addEventListener("show.bs.modal", this.modalVisible);
|
|
this.$refs.modal.addEventListener("hide.bs.modal", this.modalInvisible);
|
|
},
|
|
unmounted() {
|
|
this.$refs.modal?.removeEventListener("show.bs.modal", this.modalVisible);
|
|
this.$refs.modal?.removeEventListener("hide.bs.modal", this.modalInvisible);
|
|
},
|
|
methods: {
|
|
modalVisible() {
|
|
this.isModalVisible = true;
|
|
},
|
|
modalInvisible() {
|
|
this.isModalVisible = false;
|
|
},
|
|
open() {
|
|
Modal.getOrCreateInstance(this.$refs.modal).show();
|
|
},
|
|
close() {
|
|
Modal.getOrCreateInstance(this.$refs.modal).hide();
|
|
},
|
|
},
|
|
};
|
|
</script>
|