Use Bootstrap Modals

components/utils/ModalDialog.vue

@@ -1,112 +1,49 @@
 <template>
-  <dialog
-    ref="dialog"
-    class="modal-window text-light"
-    :class="{ show: show }"
-    @cancel="onCancel"
-  >
-    <div v-if="show" class="modal-content">
-      <div class="modal-header">
-        <slot name="header" />
-        <button
-          type="button"
-          class="btn-close btn-sm"
-          aria-label="Close"
-          @click="$emit('close')"
-        ></button>
-      </div>
-      <div class="modal-body">
-        <slot />
+  <div class="modal fade" :class="{ show: show }" @click="$emit('close')">
+    <div class="modal-dialog modal-xl">
+      <div v-if="show" class="modal-content">
+        <div class="modal-header">
+          <slot name="header" />
+          <button
+            type="button"
+            class="btn-close btn-sm"
+            aria-label="Close"
+            @click="$emit('close')"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <slot />
+        </div>
       </div>
     </div>
-  </dialog>
+  </div>
+  <div v-show="show" class="modal-backdrop fade show"></div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-
-const emit = defineEmits<{
+defineEmits<{
   (e: 'close'): void;
 }>();
 
-const props = defineProps<{
+defineProps<{
   show: boolean;
 }>();
-
-const dialog = ref<HTMLDialogElement>();
-
-watch(
-  () => props.show,
-  (newValue) => {
-    if (newValue) {
-      dialog.value?.showModal();
-    } else {
-      dialog.value?.close();
-    }
-  },
-);
-
-const onCancel = (event: Event) => {
-  event.preventDefault();
-  emit('close');
-};
 </script>
 
 <style scoped lang="scss">
-@import '~/assets/css/bootstrap/_config.scss';
-
-dialog.modal-window {
-  --bs-modal-zindex: #{$zindex-modal};
-  --bs-modal-width: #{$modal-md};
-  --bs-modal-padding: #{$modal-inner-padding};
-  --bs-modal-margin: #{$modal-dialog-margin};
-  --bs-modal-color: #{$modal-content-color};
-  --bs-modal-bg: #{$modal-content-bg};
-  --bs-modal-border-color: #{$modal-content-border-color};
-  --bs-modal-border-width: #{$modal-content-border-width};
-  --bs-modal-border-radius: #{$modal-content-border-radius};
-  --bs-modal-box-shadow: #{$modal-content-box-shadow-xs};
-  --bs-modal-inner-border-radius: #{$modal-content-inner-border-radius};
-  --bs-modal-header-padding-x: #{$modal-header-padding-x};
-  --bs-modal-header-padding-y: #{$modal-header-padding-y};
-  --bs-modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
-  --bs-modal-header-border-color: #{$modal-header-border-color};
-  --bs-modal-header-border-width: #{$modal-header-border-width};
-  --bs-modal-title-line-height: #{$modal-title-line-height};
-  --bs-modal-footer-gap: #{$modal-footer-margin-between};
-  --bs-modal-footer-bg: #{$modal-footer-bg};
-  --bs-modal-footer-border-color: #{$modal-footer-border-color};
-  --bs-modal-footer-border-width: #{$modal-footer-border-width};
-
-  --bs-backdrop-zindex: #{$zindex-modal-backdrop};
-  --bs-backdrop-bg: #{$modal-backdrop-bg};
-  --bs-backdrop-opacity: #{$modal-backdrop-opacity};
-
-  padding: 0;
-  border: 0;
-  background: none;
-
-  //min-width: var(--bs-modal-width);
-  //min-height: $modal-sm;
-  width: 80%;
-  height: 80%;
-
-  display: none;
-  overflow: hidden;
-
-  overscroll-behavior: contain;
-
+div.modal {
   &.show {
-    position: fixed;
     display: flex;
     align-items: stretch;
     justify-content: stretch;
   }
 
-  &::backdrop {
-    background: var(--bs-backdrop-bg);
-    opacity: var(--bs-backdrop-opacity);
-    overscroll-behavior: contain;
+  .modal-dialog {
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+
+    flex: 1 1 100%;
   }
 
   .modal-body {
@@ -116,16 +53,42 @@ dialog.modal-window {
   }
 }
 
-@media screen and (max-width: 768px) {
-  dialog.modal-window {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-
-    .modal-content {
-      border-radius: 0;
-    }
-  }
-}
+// @import '~/assets/css/bootstrap/_config.scss';
+//
+//div.modal {
+//  .modal-dialog {
+//    padding: 0;
+//    border: 0;
+//    background: none;
+//
+//    width: 80%;
+//    height: 80%;
+//  }
+//
+//  &.show .modal-dialog {
+//    position: fixed;
+//    display: flex;
+//    align-items: stretch;
+//    justify-content: stretch;
+//  }
+//
+//  .modal-body {
+//    display: flex;
+//    overflow: auto;
+//    flex-direction: column;
+//  }
+//}
+//
+//@media screen and (max-width: 768px) {
+//  dialog.modal-window {
+//    width: 100%;
+//    height: 100%;
+//    max-width: 100%;
+//    max-height: 100%;
+//
+//    .modal-content {
+//      border-radius: 0;
+//    }
+//  }
+//}
 </style>

pages/index.vue

@@ -47,7 +47,6 @@ html {
 
 .project {
   font-family: sans-serif;
-  padding: 0 1em;
 
   .rows {
     // Prevents collapsing margins