Select All checkbox reflects state of email selection

Author: Jeffrey Biles

src/components/BulkActionBar.vue

@@ -1,18 +1,40 @@
 <template>
   <div>
-    {{emailSelection.emails.size}}
+    <input type="checkbox" 
+           :checked="allAreSelected"
+           :class="[partialSelection ? 'partial-check' : '']">
   </div>
 </template>
 
 <script>
   import { useEmailSelection } from '../composition/useEmailSelection';
+  import { computed } from 'vue';
 
   export default {
-    setup(){
+    setup({emails}){
       let { emailSelection } = useEmailSelection();
-      
-      return { emailSelection }
-    }    
+
+      let numberSelected = computed(() => {
+        return emailSelection.emails.size;
+      }) 
+      let allAreSelected = computed(() => {
+        return emails.length == numberSelected.value;
+      })
+      let partialSelection = computed(() => {
+        return numberSelected.value > 0 && !allAreSelected.value;
+      })
+
+      return { 
+        partialSelection, 
+        allAreSelected
+      }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
+    }
   }
 </script>
 

src/components/MailTable.vue

@@ -1,6 +1,6 @@
 <template>
   <table class="mail-table">
-    <BulkActionBar />
+    <BulkActionBar :emails="unarchivedEmails" />
 
     <tbody>
       <tr v-for="email in unarchivedEmails"