fix modal

src/components/MagicoModal2.vue

@@ -1,30 +1,10 @@
 <template>
-  <div
-    :id="id"
-    class="modal"
-  >
-    <div
-      class="modal-dialog"
-      :class="class_other"
-    >
-      <div
-        v-if="modal"
-        class="modal-content"
-      >
-        <div
-          v-if="title"
-          class="modal-header"
-        >
-          <h4
-            class="modal-title"
-            v-html="title"
-          />
-          <button
-            type="button"
-            class="btn-close"
-            data-bs-dismiss="modal"
-            aria-label="Close"
-          />
+  <div :id="id" class="modal">
+    <div class="modal-dialog" :class="class_other">
+      <div v-if="modal" class="modal-content">
+        <div v-if="title" class="modal-header">
+          <h4 class="modal-title" v-html="title" />
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
         </div>
         <slot />
       </div>
@@ -33,50 +13,53 @@
 </template>
 
 <script>
-import { Modal } from "bootstrap";
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+import { Modal } from 'bootstrap'
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
 
 export default {
-  props: ["modelValue", "title", "class_other"],
+  props: ['modelValue', 'title', 'class_other'],
   setup(props, { emit }) {
-    const id = "modal" + Math.round(Math.random() * 100000);
-    const modal = ref(null);
+    const id = 'modal' + Math.round(Math.random() * 100000)
+    const modal = ref(null)
 
     const triggerModal = (value, emitEvent = true) => {
       if (value == true) {
-        modal.value.show();
+        modal.value.show()
       } else {
-        modal.value.hide();
+        modal.value.hide()
         if (emitEvent) {
-          emit("hide");
+          emit('hide')
         }
       }
-      emit("update:modelValue", value);
-    };
+      emit('update:modelValue', value)
+    }
 
     onMounted(() => {
-      document.body.append(document.getElementById(id));
-      modal.value = new Modal(document.getElementById(id));
-      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
-        triggerModal(false);
-      });
-      triggerModal(props.modelValue, false);
-    });
+      document.body.append(document.getElementById(id))
+      modal.value = new Modal(document.getElementById(id))
+      document.getElementById(id).addEventListener('hidden.bs.modal', function () {
+        triggerModal(false)
+      })
+      triggerModal(props.modelValue, false)
+    })
 
     onBeforeUnmount(() => {
-      document.getElementById(id).remove();
-    });
+      modal.value.hide()
+      setTimeout(function () {
+        document.getElementById(id).remove()
+      }, 500)
+    })
 
     watch(
       () => props.modelValue,
       () => {
-        triggerModal(props.modelValue);
+        triggerModal(props.modelValue)
       }
-    );
+    )
 
-    return { id, modal };
-  },
-};
+    return { id, modal }
+  }
+}
 </script>
 
 <style>