clicking the Select All box

src/components/BulkActionBar.vue

@@ -2,7 +2,8 @@
   <div>
     <input type="checkbox" 
            :checked="allAreSelected"
-           :class="[partialSelection ? 'partial-check' : '']">
+           :class="[partialSelection ? 'partial-check' : '']"
+           @click="bulkSelect">
   </div>
 </template>
 
@@ -23,10 +24,19 @@
       let partialSelection = computed(() => {
         return numberSelected.value > 0 && !allAreSelected.value;
       })
+      
+      let bulkSelect = function(){
+        if(allAreSelected.value) {
+          emailSelection.clear();
+        } else {
+          emailSelection.addMultiple(emails)
+        }
+      }
 
       return { 
         partialSelection, 
-        allAreSelected
+        allAreSelected,
+        bulkSelect
       }
     },
     props: {

src/composition/useEmailSelection.js

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