fix(admin-preset-bootstrap4): fix modal not initializing on mount

myparcelnl · Nov 14, 2023 · 1e32bf2 · 1e32bf2
1 parent 243d0cc
commit 1e32bf2
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/apps/admin-preset-bootstrap4/src/components/Bootstrap4Modal.vue b/apps/admin-preset-bootstrap4/src/components/Bootstrap4Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :id="`pdk-modal-${modalKey}`"
+    :id="id"
     class="fade modal"
     role="dialog"
     tabindex="-1">
@@ -25,7 +25,7 @@
         <div
           v-if="context"
           class="modal-body">
-          <NotificationContainer category="modal" />
+          <NotificationContainer :category="NotificationCategory.Modal" />
 
           <slot :context="context" />
         </div>
@@ -44,12 +44,13 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, type PropType} from 'vue';
+import {computed, onMounted, type PropType} from 'vue';
 import {
   ActionButton,
   type ActionDefinition,
   AdminIcon,
   type AdminModalKey,
+  NotificationCategory,
   NotificationContainer,
   useLanguage,
   useModalStore,
@@ -79,4 +80,10 @@ const modalStore = useModalStore();
 const context = computed(() => {
   return props.modalKey && props.modalKey === modalStore.opened ? modalStore.context : null;
 });
+
+const id = `pdk-modal-${props.modalKey}`;
+
+onMounted(() => {
+  jQuery(`#${id}`).modal();
+});
 </script>