add FormCheckbox component

Author: isneezy

example/src/components/FormsPage.vue

@@ -64,9 +64,26 @@
                                 <form-group>
                                     <form-label>Inline Radios</form-label>
                                     <div class="custom-controls-stacked">
-                                        <form-radio checked name="example-radios" :value="1" label="Option 1" inline/>
-                                        <form-radio name="example-radios" :value="2" label="Option 2" inline/>
-                                        <form-radio name="example-radios" :value="3" label="Option 3" inline/>
+                                        <form-radio checked name="example-inline-radios" :value="1" label="Option 1" inline/>
+                                        <form-radio name="example-inline-radios" :value="2" label="Option 2" inline/>
+                                        <form-radio name="example-inline-radios" :value="3" label="Option 3" inline/>
+                                    </div>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Checkboxes</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-checkbox checked name="example-radios" value="option1" label="Option 1"/>
+                                        <form-checkbox name="example-checkboxes" value="option2" label="Option 2"/>
+                                        <form-checkbox name="example-checkboxes" value="option3" disabled label="Option Disabled"/>
+                                        <form-checkbox name="example-checkboxes" checked value="option4" disabled label="Option Disabled Checked"/>
+                                    </div>
+                                </form-group>
+                                <form-group>
+                                    <form-label>Inline Checkboxes</form-label>
+                                    <div class="custom-controls-stacked">
+                                        <form-checkbox checked name="example-inline-checkboxes" value="option1" label="Option 1" inline/>
+                                        <form-checkbox name="example-inline-checkboxes" value="option2" label="Option 2" inline/>
+                                        <form-checkbox name="example-inline-checkboxes" value="option3" label="Option 3" inline/>
                                     </div>
                                 </form-group>
                             </grid-col>
@@ -80,7 +97,8 @@
 
 <script>
   export default {
-    name: "forms-page"
+    name: "forms-page",
+    data: () => ({check: []})
   }
 </script>
 

src/components/Form/FormCheckbox.vue

@@ -0,0 +1,45 @@
+<template>
+    <label class="custom-control custom-checkbox" :class="{'custom-control-inline': inline}">
+        <input class="custom-control-input"
+               v-bind="{name, checked: isChecked, disabled, value: inputValue}"
+               @focus="onFocus"
+               @blur="onBlur"
+               @change="onChange"
+               type="checkbox">
+        <div class="custom-control-label">{{ label }}</div>
+    </label>
+</template>
+
+<script>
+  import radioCheckMixin from '../../mixins/radioCheck'
+  import {objectCompare} from '../../utils'
+
+  export default {
+    name: "form-checkbox",
+    props: {
+      model: {default: () => ([]), type: Array}
+    },
+    methods: {
+      onChange ({target: {checked}}) {
+        let value = this.model
+        if (checked) {
+          value.push(this.inputValue)
+        } else {
+          // remove current value from selection
+          value = value.filter(v => {
+            if (typeof this.inputValue === 'object') {
+              return !objectCompare(this.inputValue, v)
+            }
+            return v !== this.inputValue
+          })
+        }
+        this.$emit('input', value)
+      }
+    },
+    mixins: [radioCheckMixin]
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Form/FormLabel.vue

@@ -6,7 +6,7 @@
   export default {
     name: "form-label",
     props: {
-      labelFor: {default: '', type: String},
+      labelFor: {default: false, type: [Boolean, String]},
       label: {default: '', type: String},
       labelSmall: {default: '', type: String},
     }

src/components/Form/FormRadio.vue

@@ -1,40 +1,26 @@
 <template>
     <label class="custom-control custom-radio" :class="{'custom-control-inline': inline}">
-        <input class="custom-control-input" v-bind="{name, checked: isChecked, disabled, value: radioValue}" @change="onChange" type="radio">
+        <input class="custom-control-input"
+               v-bind="{name, checked: isChecked, disabled, inputValue}" @change="onChange"
+               @focus="onFocus"
+               @blur="onBlur"
+               type="radio">
         <div class="custom-control-label">{{ label }}</div>
     </label>
 </template>
 
 <script>
+  import checkboxMixin from '../../mixins/radioCheck'
   import FormInput from './FormInput'
 
   export default {
     name: "form-radio",
-    props: {
-      inline: {default: false, type: Boolean},
-      value: {type: [Boolean, String, Number]},
-      label: {type: String},
-      checked: {default: false, type: Boolean},
-      disabled: {default: false, type: Boolean},
-      name: {default: '', type: String}
-    },
-
-    computed: {
-      radioValue () {
-        return this.$attrs.value
-      },
-
-      isChecked () {
-        return this.checked || this.radioValue === this.value
-      }
-    },
-
     methods: {
       onChange () {
-        this.$emit('input', this.radioValue)
+        this.$emit('input', this.value)
       }
     },
-
+    mixins: [checkboxMixin],
     components: {FormInput}
   }
 </script>

src/components/Form/index.js

@@ -1,3 +1,4 @@
+import FormCheckbox from './FormCheckbox'
 import FormGroup from './FormGroup'
 import FormInput from './FormInput'
 import FormInvalidFeedback from './FormInvalidFeedback'
@@ -7,6 +8,7 @@ import FormStaticText from './FormStaticText'
 import FormTextarea from './FormTextarea'
 
 export {
+  FormCheckbox,
   FormGroup,
   FormInput,
   FormInvalidFeedback,

src/mixins/radioCheck.js

@@ -0,0 +1,46 @@
+import {objectCompare} from '../utils'
+
+export default {
+  props: {
+    inline: {default: false, type: Boolean},
+    value: {},
+    label: {type: String},
+    checked: {default: false, type: Boolean},
+    disabled: {default: false, type: Boolean},
+    name: {default: '', type: String},
+    model: {type: [Array, String, Number]}
+  },
+
+  model: {
+    prop: 'model',
+    event: 'input'
+  },
+
+  computed: {
+    inputValue () {
+      return this.value || this.label
+    },
+
+    isChecked () {
+      let checked = this.inputValue === this.model
+      if(Array.isArray(this.model)) {
+        checked = !!this.model.find(v => {
+          if(typeof this.inputValue === 'object') {
+            return objectCompare(this.inputValue, v)
+          }
+          return v === this.inputValue
+        })
+      }
+      return this.checked || checked
+    },
+  },
+
+  methods: {
+    onFocus () {
+      this.$emit('focus')
+    },
+    onBlur () {
+      this.$emit('blur')
+    }
+  }
+}

src/utils/index.js

@@ -0,0 +1,10 @@
+/**
+ * Compares if two objects are the same
+ * todo improve comparing object and add to a specific mixin
+ * @param object1
+ * @param object2
+ * @returns {boolean}
+ */
+export function objectCompare (object1, object2) {
+  return JSON.stringify(object1) === JSON.stringify(object2)
+}