fix(comp: checkbox): onChange returned an error oldValue (#792)

fix #790

packages/components/checkbox/__tests__/checkbox.spec.ts

@@ -13,7 +13,8 @@ describe('Checkbox', () => {
 
   test('v-model:checked work', async () => {
     const onUpdateChecked = jest.fn()
-    const wrapper = CheckboxMount({ props: { checked: true, 'onUpdate:checked': onUpdateChecked } })
+    const onChange = jest.fn()
+    const wrapper = CheckboxMount({ props: { checked: true, 'onUpdate:checked': onUpdateChecked, onChange } })
 
     expect(wrapper.classes()).toContain('ix-checkbox-checked')
 
@@ -24,6 +25,7 @@ describe('Checkbox', () => {
     await wrapper.find('input').setValue(true)
 
     expect(onUpdateChecked).toBeCalledWith(true)
+    expect(onChange).toBeCalledWith(true, false)
   })
 
   test('label work', async () => {
@@ -50,11 +52,13 @@ describe('Checkbox', () => {
   })
 
   test('trueValue and falseValue work', async () => {
+    const onChange = jest.fn()
     const wrapper = CheckboxMount({
       props: {
         checked: 'yes',
         trueValue: 'yes',
         falseValue: 'no',
+        onChange,
       },
     })
 
@@ -63,6 +67,14 @@ describe('Checkbox', () => {
     await wrapper.setProps({ checked: 'no' })
 
     expect(wrapper.classes()).not.toContain('ix-checkbox-checked')
+
+    await wrapper.find('input').setValue(true)
+
+    expect(onChange).toBeCalledWith('yes', 'no')
+
+    await wrapper.find('input').setValue(false)
+
+    expect(onChange).toBeCalledWith('no', 'yes')
   })
 
   test('buttoned work', async () => {

packages/components/checkbox/__tests__/checkboxGroup.spec.ts

@@ -21,7 +21,8 @@ describe('CheckboxGroup', () => {
 
   test('v-model:value work', async () => {
     const onUpdateValue = jest.fn()
-    const wrapper = CheckboxGroupMount({ props: { value: ['option1'], 'onUpdate:value': onUpdateValue } })
+    const onChange = jest.fn()
+    const wrapper = CheckboxGroupMount({ props: { value: ['option1'], 'onUpdate:value': onUpdateValue, onChange } })
 
     expect(wrapper.findAll('.ix-checkbox-checked').length).toBe(1)
 
@@ -32,17 +33,7 @@ describe('CheckboxGroup', () => {
     await wrapper.findAll('input')[0].setValue(true)
 
     expect(onUpdateValue).toBeCalledWith(['option1'])
-  })
-
-  test('onChange work', async () => {
-    const mockFn = jest.fn()
-    const wrapper = CheckboxGroupMount({ props: { onChange: mockFn } })
-
-    expect(mockFn).toBeCalledTimes(0)
-
-    await wrapper.findAll('input')[0].setValue(true)
-
-    expect(mockFn).toBeCalledTimes(1)
+    expect(onChange).toBeCalledWith(['option1'], [])
   })
 
   test('disabled work', async () => {

packages/components/checkbox/src/Checkbox.tsx

@@ -118,6 +118,7 @@ const useCheckbox = (props: CheckboxProps, checkboxGroup: CheckboxGroupContext |
       const checked = (evt.target as HTMLInputElement).checked
       const { trueValue, falseValue, value } = props
       const checkValue = checked ? trueValue : falseValue
+      const oldCheckValue = !checked ? trueValue : falseValue
 
       const oldValue = accessor.valueRef.value ?? []
       const newValue = [...oldValue]
@@ -129,7 +130,7 @@ const useCheckbox = (props: CheckboxProps, checkboxGroup: CheckboxGroupContext |
       }
 
       accessor.setValue(newValue)
-      callEmit(props.onChange, checkValue, !checkValue)
+      callEmit(props.onChange, checkValue, oldCheckValue)
       callEmit(groupProps.onChange, newValue, oldValue)
     }
   } else {
@@ -148,8 +149,9 @@ const useCheckbox = (props: CheckboxProps, checkboxGroup: CheckboxGroupContext |
       const checked = (evt.target as HTMLInputElement).checked
       const { trueValue, falseValue } = props
       const newChecked = checked ? trueValue : falseValue
+      const oldChecked = !checked ? trueValue : falseValue
       accessor.setValue(newChecked)
-      callEmit(props.onChange, newChecked, !newChecked)
+      callEmit(props.onChange, newChecked, oldChecked)
     }
   }