BulkActionBar

src/components/BulkActionBar.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bulk-action-bar">  
+    <button @click="emailSelection.markRead()">
+      Mark Read
+    </button>
+    <button @click="emailSelection.markUnread()">
+      Mark Unread
+    </button>
+  </div>
+</template>
+
+<script>
+  import useEmailSelection from '../composition/useEmailSelection';
+
+  export default {
+    setup(){
+      let {emailSelection} = useEmailSelection();
+      return { emailSelection }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/InboxScreen.vue

@@ -1,28 +1,25 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <p>Number selected: {{emailSelection.emails.size}}</p>
+  <BulkActionBar />
-  <button @click="emailSelection.markRead()">Mark Selected Read</button>
-  <button @click="emailSelection.markUnread()">Mark Selected Unread</button>
 
   <MailTable :emails="emails" />
 </template>
 
 <script>
   import MailTable from '@/components/MailTable.vue';
-  import useEmailSelection from '../composition/useEmailSelection';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
 
   export default {
     async setup(props, {attrs, slots}){
       let response = await fetch('/api/emails');
       let {emails} = await response.json();
 
-      let {emailSelection} = useEmailSelection();
+      return {emails}
-
-      return {emails, emailSelection}
     },
     components: {
-      MailTable
+      MailTable,
+      BulkActionBar
     }
   }
 </script>