From 850b16e1138c5e64cf0a3a958da025c656f2ed8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ku=C4=87mierz?= <gkucmierz@gmail.com>
Date: Wed, 23 Nov 2022 08:31:58 +0100
Subject: [PATCH] add ModalWindow component

---
 src/components/HelpModal.vue   | 101 +++++++++++----------------------
 src/components/ModalWindow.vue |  68 ++++++++++++++++++++++
 2 files changed, 102 insertions(+), 67 deletions(-)
 create mode 100644 src/components/ModalWindow.vue

diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index e3f54fe..cabc4b3 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -1,93 +1,57 @@
 <script>
 import { defineComponent } from 'vue';
+import ModalWindow from './ModalWindow.vue';
 
 export default defineComponent({
   name: 'HelpModal',
   props: {
     visible: Boolean,
   },
+  components: {
+    ModalWindow,
+  },
 });
 </script>
 
 <style lang="scss" scoped>
-
-$padding: 12px;
-
-.help-modal {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
+ul {
+  list-style-type: none;
   padding: 0;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  li {
+    display: flex;
+    flex: 1 1 0px;
+    flex-wrap: nowrap;
 
-  visibility: hidden;
-  &.visible {
-    visibility: visible;
-  }
-
-  .window {
-    padding: $padding $padding * 4;
-    border-radius: $padding * 2;
-    // height: calc(100% - 100px);
-    // width: calc(100% - 100px);
-    line-height: 1.5;
-    font-family: monospace;
-    background-color: rgba(0, 0, 0, 0.6);
-    border: 1px solid rgba(32, 32, 32, 0.6);
-    overflow-y: auto;
-
-    ul {
-      list-style-type: none;
-      padding: 0;
-
-      li {
-        display: flex;
-        flex: 1 1 0px;
-        flex-wrap: nowrap;
-
-        * {
-          width: 50%;
-        }
-
-        b {
-          padding-right: 4px;
-          white-space: nowrap;
-          text-align: right;
-        }
-        span {
-          padding-left: 4px;
-          white-space: nowrap;
-          text-align: left;
-        }
-      }
+    * {
+      width: 50%;
     }
 
     b {
-      color: #8f8;
+      padding-right: 4px;
+      white-space: nowrap;
+      text-align: right;
+    }
+    span {
+      padding-left: 4px;
+      white-space: nowrap;
+      text-align: left;
     }
   }
 }
+
+b {
+  color: #8f8;
+}
 </style>
 
 <template>
-  <div
-    class="help-modal"
-    :class="{ visible: this.visible }"
-    @click="$emit('close')"
-  >
-    <div class="window" @click.stop>
-      <div class="header">
+  <div class="help-modal">
+    <ModalWindow :visible="visible" @close="$emit('close')">
+      <template #header>
         <h3>Keyboard Shortcuts</h3>
-      </div>
-      <div class="content">
+      </template>
+      <template #body>
         <!-- ⌘ ⇧ ⌥ ⌃ ⇪ -->
         <ul>
           <li>
@@ -111,7 +75,10 @@ $padding: 12px;
             <span>- close window</span>
           </li>
         </ul>
-      </div>
-    </div>
+      </template>
+      <!-- <template #footer>
+        <button @click="showModal = false">close</button>
+      </template> -->
+    </ModalWindow>
   </div>
 </template>
diff --git a/src/components/ModalWindow.vue b/src/components/ModalWindow.vue
new file mode 100644
index 0000000..59b4888
--- /dev/null
+++ b/src/components/ModalWindow.vue
@@ -0,0 +1,68 @@
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'ModalWindow',
+  props: {
+    visible: Boolean,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+
+$padding: 12px;
+
+.modal-window {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  padding: 0;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  visibility: hidden;
+  &.visible {
+    visibility: visible;
+  }
+
+  .window {
+    padding: $padding $padding * 4;
+    border-radius: $padding * 2;
+    // height: calc(100% - 100px);
+    // width: calc(100% - 100px);
+    line-height: 1.5;
+    font-family: monospace;
+    background-color: rgba(0, 0, 0, 0.6);
+    border: 1px solid rgba(32, 32, 32, 0.6);
+    overflow-y: auto;
+  }
+}
+</style>
+
+<template>
+  <div
+    class="modal-window"
+    :class="{ visible: this.visible }"
+    @click="$emit('close')"
+  >
+    <div class="window" @click.stop>
+      <div class="header">
+        <slot name="header" />
+      </div>
+      <div class="body">
+        <slot name="body" />
+      </div>
+      <div class="footer">
+        <slot name="footer" />
+      </div>
+    </div>
+  </div>
+</template>