feat: migrate to native dialog element for modal component

src/components/RefModal.vue

@@ -1,100 +1,101 @@
 <script setup lang="ts">
-import { inject } from "vue";
+import { ref, inject } from "vue";
 import { modalResultKey } from "@/keys";
-import Button from "@/components/RefButton.vue";
 
 const modalResult = inject(modalResultKey, Function);
+
+interface Props {
+  id: string;
+}
+
+defineProps<Props>();
+
+const modal = ref<HTMLDialogElement>();
+
+const showModal = () => {
+  modal.value?.showModal();
+  document.body.inert = true;
+  document.body.classList.add("scroll-lock");
+};
+
+const close = () => {
+  modal.value?.close();
+  document.body.inert = false;
+  document.body.classList.remove("scroll-lock");
+};
+
+defineExpose({ showModal, close });
 </script>
 
 <template>
-  <div class="modal">
-    <div class="modal__background"></div>
-    <div class="modal__message">
-      <div>
-        <h2><slot name="heading"></slot></h2>
-        <p><slot name="message"></slot></p>
+  <dialog :id="id" class="modal" ref="modal">
+    <form method="dialog" class="modal__content">
+      <h2 class="modal__heading">
+        <slot name="heading"></slot>
+      </h2>
 
-        <div class="modal__buttons">
-          <Button
-            class="modal__button positive"
-            @click.prevent="modalResult(true)"
-          >
-            <slot name="yes"></slot>
-          </Button>
-          <Button
-            class="modal__button negative"
-            @click.prevent="modalResult(false)"
-          >
-            <slot name="no"></slot>
-          </Button>
-        </div>
+      <div class="modal__message">
+        <slot name="message"></slot>
       </div>
-    </div>
-  </div>
+
+      <div class="modal__buttons">
+        <slot name="buttons"></slot>
+      </div>
+    </form>
+  </dialog>
 </template>
 
 <style lang="scss">
 .modal {
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: center;
-
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
 
-  text-align: center;
+  background: var(--modal-background);
+  color: var(--color-text);
 
-  padding: 2rem;
+  width: var(--modal-width);
 
-  backdrop-filter: blur(1rem);
-  background-color: rgba(0, 0, 0, 0.5);
+  margin: auto;
+  border: 0.25rem solid var(--color-modal-border);
+  border-radius: 1rem;
+  padding: 1rem;
 
   overflow: auto;
-  z-index: 9001;
 
-  &__background {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+  animation: fade-in 1s;
+
+  &::backdrop {
+    backdrop-filter: blur(1rem);
+    background-color: rgba(0, 0, 0, 0.5);
+    animation: fade-in 1s;
   }
 
-  &__message {
-    flex: 0 1 30rem;
-
+  &__content {
     display: flex;
-    flex-flow: row wrap;
+    flex-flow: column nowrap;
     justify-content: center;
-    align-content: center;
-
-    background: var(--modal-background);
-
-    margin: auto;
-    border: 0.25rem solid var(--color-modal-border);
-    border-radius: 1rem;
-    padding: 1rem;
-
-    z-index: 9002;
+    text-align: center;
+    gap: 1.5rem;
 
     > * {
-      flex: 0 1 100%;
+      flex: 1 1 auto;
     }
   }
 
-  &__buttons {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-around;
-    align-items: center;
+  &__heading {
+    margin: 1.875rem 0 0 0;
   }
 
-  &__button {
-    flex: 0 1 100%;
-    margin: 0.75em 0;
+  &__message {
+    flex: 1 1 100%;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
 }
 </style>