Lesson 13, pt 1 - Select Box Highlighting

src/components/BulkActionBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <input type="checkbox"
+           :checked="allEmailsSelected"
+           :class="[someEmailsSelected ? 'partial-check' : '']" />
+  </div>
+</template>
+
+<script>
+  import useEmailSelection from '@/composables/use-email-selection';
+  import { computed } from 'vue'
+  export default {
+    setup(props){
+      let emailSelection = useEmailSelection();
+      let numberSelected = computed(() => emailSelection.emails.size)
+      let numberEmails = props.emails.length
+      let allEmailsSelected = computed(() => numberSelected.value === numberEmails)
+      let someEmailsSelected = computed(() => {
+        return numberSelected.value > 0 && numberSelected.value < numberEmails
+      }) 
+      return {
+        allEmailsSelected,
+        someEmailsSelected
+      }
+    },
+    props: {
+      emails: {
+        type: Array,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/MailTable.vue

@@ -1,4 +1,5 @@
 <template>
+  <BulkActionBar :emails="unarchivedEmails" />
   <table class="mail-table">
     <tbody>
       <tr v-for="email in unarchivedEmails"
@@ -30,6 +31,7 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
   import { reactive } from 'vue';
   import useEmailSelection from '@/composables/use-email-selection'
 
@@ -46,7 +48,8 @@
     },
     components: {
       MailView,
-      ModalView
+      ModalView,
+      BulkActionBar
     },
     computed: {
       sortedEmails() {