Abstract away Modal

src/components/MailTable.vue

@@ -20,13 +20,16 @@
     </tbody>
   </table>
 
-  <MailViewModal :email="openedEmail" :closeModal="() => {openedEmail = null;}"/>
+  <ModalView :isOpened="!!openedEmail" :closeModal="() => {openedEmail = null;}">
+    <MailView :email="openedEmail" />
+  </ModalView>
 </template>
 
 <script>
   import { format } from 'date-fns'
   import useEmailSelection from '../composition/useEmailSelection';
-  import MailViewModal from '@/components/MailViewModal.vue';
+  import MailView from '@/components/MailView.vue';
+  import ModalView from '@/components/ModalView.vue';
   import { ref } from 'vue';
 
   export default {
@@ -48,7 +51,8 @@
       }
     },
     components: {
-      MailViewModal
+      MailView,
+      ModalView
     }
   }
 </script>

src/components/MailView.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    From: {{email.from}}<br>
+    Subject: <strong>{{email.subject}}</strong>
+    <p>{{email.body}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      email: {
+        type: Object
+      },
+    }
+  }
+</script>
+
+<style scoped>
+</style>

src/components/ModalView.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="modal" v-if="email">
+  <div class="modal" v-if="isOpened">
     <div class="overlay" @click="closeModal()"></div>
     <div class="modal-card">
-      From: {{email.from}}<br>
+      <slot :closeModal="closeModal" />
-      Subject: <strong>{{email.subject}}</strong>
-      <p>{{email.body}}</p>
     </div>
   </div>
 </template>
@@ -12,8 +10,9 @@
 <script>
   export default {
     props: {
-      email: {
+      isOpened: {
-        type: Object
+        type: Boolean,
+        required: true
       },
       closeModal: {
         type: Function,