From cab244c0b08feda2541511cf682608cbb58d2dea Mon Sep 17 00:00:00 2001
From: Jeffrey Biles <bilesjeffrey@gmail.comgit config -l>
Date: Thu, 18 Jun 2020 12:36:07 -0700
Subject: [PATCH] Video 6 - Modal

---
 src/components/MailTable.vue |  8 ++++++--
 src/components/ModalView.vue | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ModalView.vue

diff --git a/src/components/MailTable.vue b/src/components/MailTable.vue
index a50e180..b05d466 100644
--- a/src/components/MailTable.vue
+++ b/src/components/MailTable.vue
@@ -17,13 +17,16 @@
       </tr>
     </tbody>
   </table>
-  <MailView v-if="openedEmail" :email="openedEmail" />
+  <ModalView v-if="openedEmail" @closeModal="openedEmail = null">
+    <MailView :email="openedEmail" />
+  </ModalView>
 </template>
 
 <script>
   import { format } from 'date-fns';
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
+  import ModalView from '@/components/ModalView.vue';
 
   export default {
     async setup(){
@@ -35,7 +38,8 @@
       }
     },
     components: {
-      MailView
+      MailView,
+      ModalView
     },
     computed: {
       sortedEmails() {
diff --git a/src/components/ModalView.vue b/src/components/ModalView.vue
new file mode 100644
index 0000000..857a33a
--- /dev/null
+++ b/src/components/ModalView.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="modal">
+    <div class="overlay" @click="emit('closeModal')"></div>
+    <div class="modal-card">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    setup(props, {emit}) {
+      return {
+        emit
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file