Bulk Select checkbox

src/components/BulkActionBar.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="bulk-action-bar">  
+    <span v-if="!allSelected && emailSelection.emails.size > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+    <input type="checkbox" :checked="allSelected" @click="bulkSelect">
+    
     <button @click="emailSelection.markRead()">
       Mark Read
     </button>
@@ -11,13 +14,29 @@
 
 <script>
   import useEmailSelection from '../composition/useEmailSelection';
+  import { computed } from 'vue';
 
   export default {
-    setup(){
+    setup({emails}){
       let {emailSelection} = useEmailSelection();
-      return { emailSelection }
+      let allSelected = computed(() => {
+        return emails.length == emailSelection.emails.size;
+      })
+      let bulkSelect = function(){
+        if(allSelected.value) {
+          emailSelection.clear();
+        } else {
+          emailSelection.addMultiple(emails)
+        }
+      }
+      return { emailSelection, allSelected, bulkSelect }
+    },
+    props: {
+      emails: {
+        type: Array,
+        default: []
+      }
     }
-
   }
 </script>
 

src/components/InboxScreen.vue

@@ -1,7 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <BulkActionBar />
+  <BulkActionBar :emails="emails" />
 
   <MailTable :emails="emails" />
 </template>

src/composition/useEmailSelection.js

@@ -12,6 +12,14 @@ export const useEmailSelection = function(){
         this.emails.add(id);
       }
     },
+    clear(){
+      this.emails.clear();
+    },
+    addMultiple(emails) {
+      emails.forEach(email => {
+        this.emails.add(email)
+      })
+    },
     forSelected(fn){
       this.emails.forEach(email => {
         fn(email)