refactor: CFormCheckbox, CSwitch: delete trueValue and falseValue props

Author: woothu

src/components/Form/CFormCheckbox.vue

@@ -64,16 +64,7 @@ export default {
     //   default: undefined
     // },
     // custom: Boolean,
-    // inline: Boolean,
-    
-    // trueValue: {
-    //   type: [String, Number],
-    //   default: undefined
-    // },
-    // falseValue: {
-    //   type: [String, Number],
-    //   default: undefined
-    // },
+    // inline: Boolean
   // },
   type: 'checkbox',
   data () {
@@ -134,11 +125,7 @@ export default {
   },
   methods: {
     getCheckState () {
-      if (typeof this.checked === 'boolean') {
-        return this.checked
-      } else {
-        return this.checked === this.trueValue ? true : false
-      }
+      return this.checked
     },
 
     onChange (e) {
@@ -147,11 +134,7 @@ export default {
     },
 
     getValue (e) {
-      if (e.target.checked) {
-        return this.trueValue !== undefined ? this.trueValue : true
-      } else {
-        return this.falseValue !== undefined ? this.falseValue : false
-      }
+      return e.target.checked
     }
 
   },

src/components/Form/formProps.js

@@ -89,12 +89,5 @@ export const formRadioProps = Object.assign(
 // Html props: id, disabled, required
 export const formCheckboxProps = Object.assign(
   {}, formRadioProps, {
-  trueValue: {
-    type: [String, Number],
-    default: undefined
-  },
-  falseValue: {
-    type: [String, Number],
-    default: undefined
-  }
+  checked: Boolean
 })

src/components/Form/tests/CFormCheckbox.spec.js

@@ -13,9 +13,7 @@ const customWrapper = mount(Component, {
     label: 'label',
     id: 'some_id',
     wasValidated: true,
-    checked: 'yes',
-    trueValue: 'yes',
-    falseValue: 'no',
+    checked: true,
     value: 'value',
     validFeedback: 'input is valid',
     invalidFeedback: 'input is invalid',
@@ -40,10 +38,6 @@ describe(ComponentName, () => {
   it('renders correctly', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
-  it('changes state correctly', () => {
-    customWrapper.setProps({ checked: 'no' })
-    expect(customWrapper.vm.state).toBe(false)
-  })
   it('emmits correct values on check', () => {
     wrapper.find('input').setChecked()
     wrapper.find('input').setChecked(false)
@@ -52,14 +46,6 @@ describe(ComponentName, () => {
     })
     expect(emittedValues).toEqual([true, false])
   })
-  it('emmits correct values on check when trueValue and falseValue are set', () => {
-    customWrapper.find('input').setChecked()
-    customWrapper.find('input').setChecked(false)
-    const emittedValues = customWrapper.emitted()['update:checked'].map(event => {
-      return event[0]
-    })
-    expect(emittedValues).toEqual(['yes', 'no'])
-  })
   it('generates safe id when no id is passed', () => {
     expect(autoIdWrapper.vm.safeId.includes('_safe_id_')).toBe(true)
   })

src/components/Switch/CSwitch.vue

@@ -3,10 +3,10 @@
     <input
       v-bind="$attrs"
       :type="type"
-      :checked="isChecked"
+      :checked="state"
       :value="value"
       class="c-switch-input form-check-input"
-      @change="toggle"
+      @change="onChange"
     >
     <span
       :data-checked="labelOn"
@@ -36,16 +36,11 @@ export default {
       type: String,
       validator: value => ['','3d', 'pill'].includes(value)
     },
-    checked: {
-      type: [Boolean, String, Number],
-      default: false
-    },
+    checked: Boolean,
     value: {
       type: [String, Number, Boolean],
       default: undefined
     },
-    trueValue: [String, Number],
-    falseValue: [String, Number],
     labelOn: String,
     labelOff: String,
     type: {
@@ -56,14 +51,14 @@ export default {
   },
   data () {
     return {
-      isChecked: undefined
+      state: undefined
     }
   },
   watch: {
     checked: {
       immediate: true,
       handler () {
-        this.isChecked = this.getCheckState()
+        this.state = this.getCheckState()
       }
     }
   },
@@ -86,24 +81,16 @@ export default {
     getCheckState () {
       if (this.type === 'radio') {
         return this.checked === this.value
-      } else if (typeof this.checked === 'boolean') {
-        return this.checked
       } else {
-        return this.checked === this.trueValue ? true : false
+        return this.checked
       }
     },
-    toggle (event) {
-      this.isChecked = event.target.checked
+    onChange (event) {
+      this.state = event.target.checked
       this.$emit('update:checked', this.getValue(event.target.checked), event)
     },
     getValue (checked) {
-      if (this.type === 'radio') {
-        return this.value
-      } else if (checked) {
-        return this.trueValue !== undefined ? this.trueValue : true
-      } else {
-        return this.falseValue !== undefined ? this.falseValue : false
-      }
+      return this.type === 'radio' ? this.value : checked
     }
   }
 }

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

@@ -23,11 +23,9 @@ const customWrapper = mount(Component, {
     shape:'3d',
     name:'myName',
     id:'myId',
-    checked: 'yes',
+    checked: true,
     value: 'checked',
     required: true,
-    trueValue: 'yes',
-    falseValue: 'no',
     dataOn: 'dataOn',
     dataOff: 'dataOff'
   }
@@ -43,25 +41,10 @@ describe(ComponentName, () => {
   it('renders correctly', () => {
     expect(customWrapper.element).toMatchSnapshot()
   })
-  it('correctly changes state when checked prop changes', () => {
-    customWrapper.setProps({ checked: 'no' })
-    expect(customWrapper.vm.isChecked).toBe(false)
-
-    customWrapper.setProps({ checked: 'yes' })
-    expect(customWrapper.vm.isChecked).toBe(true)
-  })
   it('emits events correctly when checked', () => {
     const updateEvents = () => customWrapper.emitted()['update:checked']
     const lastEmittedUpdateValue = () => updateEvents().slice(-1)[0][0]
 
-    customWrapper.find('input').setChecked(false)
-    expect(lastEmittedUpdateValue()).toBe('no')
-
-    customWrapper.find('input').setChecked(true)
-    expect(lastEmittedUpdateValue()).toBe('yes')
-
-    customWrapper.setProps({ trueValue: undefined, falseValue: undefined})
-
     customWrapper.find('input').setChecked(false)
     expect(lastEmittedUpdateValue()).toBe(false)
 

src/components/index.d.ts

@@ -175,11 +175,6 @@ declare class formSharedProps extends Vue {
   description: string
 }
 
-export declare class CFormCheckbox extends CFormRadio {
-  trueValue: [string, number]
-  falseValue: [string, number]
-}
-
 export declare class CFormFile extends formSharedProps {
   label: string
   wasValidated: boolean
@@ -232,12 +227,14 @@ export declare class CFormRadio extends formSharedProps {
 
   checked: [boolean, string, number]
   value: [string, number, boolean]
-  trueValue: [string, number]
-  falseValue: [string, number]
   custom: boolean
   inline: boolean
 }
 
+export declare class CFormCheckbox extends CFormRadio {
+  checked: boolean
+}
+
 export declare class CFormSelect extends formSharedProps {
   appendHtml: string
   prependHtml: string
@@ -523,10 +520,8 @@ export declare class CSwitch extends Vue {
   outline: [boolean, string]
   size: string
   shape: string
-  checked: [boolean, string, number]
+  checked: boolean
   value: [string, number, boolean]
-  trueValue: [string, number]
-  falseValue: [string, number]
   labelOn: string
   labelOff: string
   type: string