From 7da03fc6359cff1a020c9b036f16ef8834cafb07 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Mon, 27 Mar 2023 23:46:17 +0200
Subject: [PATCH] feat: add ModalDialog component

---
 src/components/ModalDialog.vue | 93 ++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/components/ModalDialog.vue

diff --git a/src/components/ModalDialog.vue b/src/components/ModalDialog.vue
new file mode 100644
index 0000000..125f3ca
--- /dev/null
+++ b/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>