refactor: change CSwitch logic, added watcher in case of lacking model.

Author: woothu

src/components/Switch/CSwitch.vue

@@ -1,15 +1,15 @@
 <template>
   <label :class="classList">
-    <input
-      :id="id"
-      :name="name"
-      :type="type"
-      :checked="isChecked"
-      :disabled="disabled"
-      :required="required"
-      :value="value"
-      class="switch-input form-check-input"
-      @change="toggle"
+    <input v-bind="$attrs"
+          :id="id"
+          :name="name"
+          :type="type"
+          :checked="isChecked"
+          :disabled="disabled"
+          :required="required"
+          :value="value"
+          class="switch-input form-check-input"
+          @change="toggle"
     >
     <span
       :data-checked="dataOn"
@@ -23,14 +23,14 @@
 <script>
 export default {
   name:'CSwitch',
+  inheritAttrs: false,
   model: {
-    prop: 'passedValue',
+    prop: 'checked',
     event: 'change'
   },
-  data: function () {
+  data () {
     return {
-      isChecked: null,
-      passedValue: null
+      isChecked: ''
     }
   },
   props: {
@@ -45,68 +45,77 @@ export default {
     },
     size: {
       type: String,
-      validator: value => [ 'lg', 'sm' ].indexOf(value) !== -1
+      validator: value => ['','lg', 'sm' ].indexOf(value) !== -1
     },
     shape: {
       type: String,
-      validator: value => [ '3d', 'pill' ].indexOf(value) !== -1
+      validator: value => ['','3d', 'pill'].indexOf(value) !== -1
     },
     id: String,
     name: String,
-    checked:  Boolean,
+    checked: [Boolean, String, Number],
     disabled: Boolean,
     required: Boolean,
-    value: String,
-    trueValue: [String, Number, Array, Object],
-    falseValue: [String, Number, Array, Object],
+    value: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    trueValue: {
+      type: [String, Number, Boolean],
+      default: null
+    },
+    falseValue: {
+      type: [String, Number, Boolean],
+      default: null
+    },
     dataOn: String,
     dataOff: String,
     type: {
       type: String,
       default: 'checkbox'
     }
   },
+  created () {
+    this.isChecked = this.getCheckState()
+  },
+  watch: {
+    checked (val, oldVal) {
+      if(val !== oldVal)
+        this.isChecked = this.getCheckState()
+    }
+  },
   computed: {
     classList () {
       return [
         'switch',
-
         this.dataOn || this.dataOff ? 'switch-label' : '',
         this.size ? `switch-${this.size}` : '',
         this.shape ? `switch-${this.shape}` : '',
         `switch${this.outline ? '-outline' : ''}-${this.variant}${this.outline==='alt' ? '-alt' : ''}`,
         'form-check-label'
       ]
-    }
+    },
   },
   methods: {
+    getCheckState () {
+      if (this.type === 'radio')
+        return this.checked === this.value
+      else
+        return typeof this.checked === 'boolean' ? this.checked :
+                          this.checked === this.trueValue ? true : false
+    },
     toggle (event) {
-      this.setValues(event.target.checked)
-      this.$emit('change', this.passedValue, event);
+      this.isChecked = event.target.checked
+      this.$emit('change', this.getValue(event), event);
     },
-    setValues (checked) {
-      this.isChecked = checked
-      if(checked)
-        this.passedValue = this.trueValue !== undefined ? this.trueValue : checked
+    getValue (e) {
+      if(this.type === 'radio')
+        return this.value
+      else if(e.target.checked)
+        return this.trueValue !== null ? this.trueValue : true
       else
-        this.passedValue = this.falseValue !== undefined ? this.falseValue : checked
+        return this.falseValue !== null ? this.falseValue : false
     },
-    detectPassedCheck (modelValue) {
-      if(typeof modelValue === 'boolean')
-        this.isChecked = modelValue
-      else if (modelValue === this.falseValue)
-        this.isChecked = false
-      else if (modelValue === this.trueValue)
-        this.isChecked = true
-      else if (this.type === 'checkbox')
-        console.warn('Value passed to CSwitch component by v-model property is not of boolean type and does not equal trueValue or falseValue property.')
-    }
   },
-  created () {
-    if(this.$vnode.data.model)
-      this.detectPassedCheck(this.$vnode.data.model.value)
-    else
-      this.isChecked = this.checked
-  }
 }
 </script>

src/components/Switch/tests/__snapshots__/CSwitch.spec.js.snap

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CSwitch .vue renders correctly 1`] = `
-<label
-  class="switch switch-secondary form-check-label"
->
-  <input
-    class="switch-input form-check-input"
-    type="checkbox"
-    value=""
-  />
-   
-  <span
-    class="switch-slider"
-  />
-</label>
-`;
-
-exports[`CSwitch .vue renders correctly 2`] = `
-<label
-  class="switch switch-label switch-lg switch-3d switch-outline-info-alt form-check-label"
->
-  <input
-    class="switch-input form-check-input"
-    disabled="disabled"
-    id="myId"
-    name="myName"
-    required="required"
-    type="radio"
-    value="checked"
-  />
-   
-  <span
-    class="switch-slider"
-    data-checked="dataOn"
-    data-unchecked="dataOff"
-  />
-</label>
-`;
-
 exports[`CSwitch renders correctly 1`] = `
 <label
   class="switch switch-secondary form-check-label"