fix modal

src/components/MagicoModal2.vue

@@ -1,30 +1,10 @@
 <template>
-  <div
+  <div :id="id" class="modal">
-    :id="id"
+    <div class="modal-dialog" :class="class_other">
-    class="modal"
+      <div v-if="modal" class="modal-content">
-  >
+        <div v-if="title" class="modal-header">
-    <div
+          <h4 class="modal-title" v-html="title" />
-      class="modal-dialog"
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" />
-      :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 { Modal } from 'bootstrap'
-import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+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 id = 'modal' + Math.round(Math.random() * 100000)
-    const modal = ref(null);
+    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));
+      document.body.append(document.getElementById(id))
-      modal.value = new Modal(document.getElementById(id));
+      modal.value = new Modal(document.getElementById(id))
-      document.getElementById(id).addEventListener("hidden.bs.modal", function () {
+      document.getElementById(id).addEventListener('hidden.bs.modal', function () {
-        triggerModal(false);
+        triggerModal(false)
-      });
+      })
-      triggerModal(props.modelValue, 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>