From 294e25b30d8e21e9eb4dceffb2177758691c675d Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Wed, 16 May 2018 23:19:30 -0400
Subject: [PATCH] Fixed event propogation to work with arrays.

---
 src/components/ButtonCheckbox.vue | 44 ++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/ButtonCheckbox.vue b/src/components/ButtonCheckbox.vue
index 942c627..5d36241 100644
--- a/src/components/ButtonCheckbox.vue
+++ b/src/components/ButtonCheckbox.vue
@@ -1,7 +1,7 @@
 <template>
   <button class="button is-rounded"
-    :class="checked ? checked_class : unchecked_class"
-    v-on:click="click"
+    :class="shouldBeChecked ? checked_class : unchecked_class"
+    v-on:click="updateInput"
     >
       <slot></slot>
   </button>
@@ -10,22 +10,52 @@
 <script>
 export default {
   name: 'button-checkbox',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
   props: {
     checked_class: {
       default: 'is-info'
     },
     unchecked_class: {
       default: ''
+    },
+    checked: {
+      default: false
+    },
+    value: String,
+    trueValue: {
+      default: true
+    },
+    falseValue: {
+      default: false
     }
   },
-  data () {
-    return {
-      checked: true
+  computed: {
+    shouldBeChecked () {
+      if (this.checked instanceof Array) {
+        return this.checked.includes(this.value)
+      }
+
+      return this.checked === this.trueValue
     }
   },
   methods: {
-    click () {
-      this.checked = !this.checked
+    updateInput () {
+      if (this.checked instanceof Array) {
+        let newValue = [...this.checked]
+
+        if (!this.shouldBeChecked) {
+          newValue.push(this.value)
+        } else {
+          newValue.splice(newValue.indexOf(this.value), 1)
+        }
+
+        this.$emit('change', newValue)
+      } else {
+        this.$emit('change', this.shouldBeChecked ? this.falseValue : this.trueValue)
+      }
     }
   }
 }