feat: add ModalDialog component

src/components/ModalDialog.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+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>
+  <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__message">
+        <slot name="message"></slot>
+      </div>
+
+      <div class="modal__buttons">
+        <slot name="buttons"></slot>
+      </div>
+    </form>
+  </dialog>
+</template>
+
+<style lang="scss">
+.modal {
+  background: var(--color-modal-background);
+
+  color: var(--color-text);
+
+  width: var(--modal-width);
+
+  margin: auto;
+  border: var(--modal-border);
+  border-radius: 1rem;
+  padding: 1rem;
+
+  animation: fade-in 1s;
+
+  &::backdrop {
+    backdrop-filter: blur(1rem);
+    animation: fade-in 1s;
+  }
+
+  &__content {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    text-align: center;
+
+    > * {
+      flex: 1 1 auto;
+    }
+  }
+
+  &__message {
+    flex: 1 1 100%;
+  }
+
+  &__buttons .link-button {
+    width: 100%;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}
+</style>