add share modal; move ESC key logic to modal window

src/App.vue

@@ -1,39 +1,42 @@
 <script>
 import { defineComponent } from 'vue';
 import HelpModal from './components/HelpModal.vue';
+import ShareModal from './components/ShareModal.vue';
 
 export default defineComponent({
   components: {
     HelpModal,
+    ShareModal,
   },
   data() {
     window.addEventListener('keydown', e => {
       if (!e) e = event;
       const COMMA_CODE = 188;
       const QUESTION_MARK_CODE = 191;
+      const S_KEY_CODE = 83;
 
       const cmdCtrl = e.ctrlKey || e.metaKey;
 
       // console.log(e.keyCode);
-      if (cmdCtrl && e.keyCode === 83) {
+      if (cmdCtrl && e.keyCode === S_KEY_CODE) {
-        console.log('share');
+        this.showShare = !this.showShare;
         e.preventDefault();
+        e.stopPropagation();
       }
       if (cmdCtrl && e.keyCode === COMMA_CODE) {
         this.$router.push({ name: 'settings' });
         e.preventDefault();
+        e.stopPropagation();
       }
       if (cmdCtrl && e.shiftKey && e.keyCode === QUESTION_MARK_CODE) {
         this.showHelp = !this.showHelp;
         e.preventDefault();
-      }
+        e.stopPropagation();
-      if (e.keyCode === 27) {
-        this.showHelp = false;
-        e.preventDefault();
       }
     });
     return {
       showHelp: false,
+      showShare: false,
     };
   },
 });
@@ -44,5 +47,6 @@ export default defineComponent({
 
 <template>
   <HelpModal :visible="showHelp" @close="showHelp = false" />
+  <ShareModal :visible="showShare" @close="showShare = false" />
   <RouterView />
 </template>

src/components/ModalWindow.vue

@@ -6,6 +6,19 @@ export default defineComponent({
   props: {
     visible: Boolean,
   },
+  data() {
+    window.addEventListener('keydown', e => {
+      if (!e) e = event;
+      if (!this.visible) return;
+      const ESC_KEY = 27;
+      if (e.keyCode === ESC_KEY) {
+        this.$emit('close');
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    });
+    return {};
+  },
 });
 </script>
 

src/components/ShareModal.vue

@@ -0,0 +1,62 @@
+<script>
+import { defineComponent } from 'vue';
+import ModalWindow from './ModalWindow.vue';
+
+export default defineComponent({
+  name: 'ShareModal',
+  props: {
+    visible: Boolean,
+  },
+  components: {
+    ModalWindow,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+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;
+    }
+  }
+}
+
+b {
+  color: #8f8;
+}
+</style>
+
+<template>
+  <div class="share-modal">
+    <ModalWindow :visible="visible" @close="$emit('close')">
+      <template #header>
+        <h3>Share Code</h3>
+      </template>
+      <template #body>
+        <pre>Code goes here...</pre>
+      </template>
+      <!-- <template #footer>
+        <button @click="showModal = false">close</button>
+      </template> -->
+    </ModalWindow>
+  </div>
+</template>