feat(checkbox-group): on-update:value prop adds trigger checkbox's …

…value to params, closes #3277
tusen-ai · Jul 17, 2022 · 58c23f6 · 58c23f6
1 parent a369e11
commit 58c23f6
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 43 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -2,8 +2,14 @@
 
 ## NEXT_VERSION
 
+### Fixes
+
 - Fix `n-date-picker` will cancel selecting in range mode if click at disabled confirm button, closes [#3254](https://github.com/TuSimple/naive-ui/issues/3254).
 
+### Feats
+
+- `n-checkbox-group`'s `on-update:value` prop adds trigger checkbox's value to params, closes [#3277](https://github.com/TuSimple/naive-ui/issues/3277).
+
 ## 2.31.0
 
 ### Breaking Changes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,6 +6,10 @@
 
 - 修复 `n-date-picker` 在范围模式下点击禁用的确认按钮会取消选择中的状态，关闭 [#3254](https://github.com/TuSimple/naive-ui/issues/3254)
 
+### Feats
+
+- `n-checkbox-group` 的 `on-update:value` 属性增加触发变更的 checkbox 的值到参数中，关闭 [#3277](https://github.com/TuSimple/naive-ui/issues/3277)
+
 ## 2.31.0
 
 ### Breaking Changes

diff --git a/src/checkbox/demos/enUS/index.demo-entry.md b/src/checkbox/demos/enUS/index.demo-entry.md
@@ -34,14 +34,14 @@ focus.vue
 
 ### CheckboxGroup Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| disabled | `boolean` | `false` | Whether the checkbox group is disabled. |
-| default-value | `Array<string \| number>` | `null` | Checkbox group's default selected value. |
-| max | `number` | `undefined` | The maximum number of checkboxes that can be checked. |
-| min | `number` | `undefined` | The minimum number of checkboxes that can be checked. |
-| value | `Array<string \| number> \| null` | `undefined` | Manually set values of a checkbox group. |
-| on-update:value | `(value: string \| number)` | `undefined` | Callback when the checkbox group's value changes. |
+| Name | Type | Default | Description | Version |
+| --- | --- | --- | --- | --- |
+| disabled | `boolean` | `false` | Whether the checkbox group is disabled. |  |
+| default-value | `Array<string \| number>` | `null` | Checkbox group's default selected value. |  |
+| max | `number` | `undefined` | The maximum number of checkboxes that can be checked. |  |
+| min | `number` | `undefined` | The minimum number of checkboxes that can be checked. |  |
+| value | `Array<string \| number> \| null` | `undefined` | Manually set values of a checkbox group. |  |
+| on-update:value | `(value: string \| number, meta: { checkedValue: string \| number \| undefined, uncheckedValue: string \| number \| unefined }) => void` | `undefined` | Callback when the checkbox group's value changes. If you check a checkbox, `meta.uncheckedValue` would be `undefined`. If you uncheck a checkbo, `meta.checkedValue` would be `undefined`. | `meta` NEXT_VERSION |
 
 ### Checkbox Slots
 

diff --git a/src/checkbox/demos/zhCN/index.demo-entry.md b/src/checkbox/demos/zhCN/index.demo-entry.md
@@ -35,14 +35,14 @@ rtl-debug.vue
 
 ### CheckboxGroup Props
 
-| 名称 | 类型 | 默认值 | 说明 |
-| --- | --- | --- | --- |
-| disabled | `boolean` | `false` | 选项组是否禁用 |
-| default-value | `Array<string \| number>` | `null` | 选项组非受控模式下的默认值 |
-| max | `number` | `undefined` | 可被勾选的 checkbox 的最大数量 |
-| min | `number` | `undefined` | 可被勾选的 checkbox 的最小数量 |
-| value | `Array<string \| number> \| null` | `undefined` | 选项组受控模式下的值 |
-| on-update:value | `(value: string \| number)` | `undefined` | 选项组的值改变时的回调 |
+| 名称 | 类型 | 默认值 | 说明 | 版本 |
+| --- | --- | --- | --- | --- |
+| disabled | `boolean` | `false` | 选项组是否禁用 |  |
+| default-value | `Array<string \| number>` | `null` | 选项组非受控模式下的默认值 |  |
+| max | `number` | `undefined` | 可被勾选的 checkbox 的最大数量 |  |
+| min | `number` | `undefined` | 可被勾选的 checkbox 的最小数量 |  |
+| value | `Array<string \| number> \| null` | `undefined` | 选项组受控模式下的值 |  |
+| on-update:value | `(value: string \| number, meta: { checkedValue: string \| number \| undefined, uncheckedValue: string \| number \| unefined }) => void` | `undefined` | 选项组的值改变时的回调，在选中的情况下 `meta.uncheckedValue` 为 `undefined`，在取消选择的情况下 `meta.checkedValue` 为 `undefined` | `meta` NEXT_VERSION |
 
 ### Checkbox Slots
 

diff --git a/src/checkbox/src/CheckboxGroup.tsx b/src/checkbox/src/CheckboxGroup.tsx
@@ -7,11 +7,12 @@ import {
   toRef,
   ref,
   Ref,
-  ComputedRef
+  ComputedRef,
+  watchEffect
 } from 'vue'
 import { useMergedState } from 'vooks'
 import { useConfig, useFormItem } from '../../_mixins'
-import { warn, call, MaybeArray, createInjectionKey } from '../../_utils'
+import { call, MaybeArray, createInjectionKey, warnOnce } from '../../_utils'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
 export interface CheckboxGroupInjection {
@@ -41,27 +42,36 @@ export const checkboxGroupProps = {
     default: undefined
   },
   'onUpdate:value': [Function, Array] as PropType<
-  MaybeArray<(value: Array<string | number>) => void>
+  MaybeArray<
+  (
+    value: Array<string | number>,
+    meta: {
+      checkedValue: string | number | undefined
+      uncheckedValue: string | number | undefined
+    }
+  ) => void
+  >
   >,
   onUpdateValue: [Function, Array] as PropType<
-  MaybeArray<(value: Array<string | number>) => void>
+  MaybeArray<
+  (
+    value: Array<string | number>,
+    meta:
+    | {
+      checkedValue: string | number
+      uncheckedValue: undefined
+    }
+    | {
+      checkedValue: undefined
+      uncheckedValue: string | number
+    }
+  ) => void
+  >
   >,
   // deprecated
-  onChange: {
-    type: [Function, Array] as PropType<
-    MaybeArray<(value: Array<string | number>) => void> | undefined
-    >,
-    validator: () => {
-      if (__DEV__) {
-        warn(
-          'checkbox-group',
-          '`on-change` is deprecated, please use `on-update:value` instead.'
-        )
-      }
-      return true
-    },
-    default: undefined
-  }
+  onChange: [Function, Array] as PropType<
+  MaybeArray<(value: Array<string | number>) => void> | undefined
+  >
 } as const
 
 export type CheckboxGroupProps = ExtractPublicPropTypes<
@@ -72,6 +82,16 @@ export default defineComponent({
   name: 'CheckboxGroup',
   props: checkboxGroupProps,
   setup (props) {
+    if (__DEV__) {
+      watchEffect(() => {
+        if (props.onChange !== undefined) {
+          warnOnce(
+            'checkbox-group',
+            '`on-change` is deprecated, please use `on-update:value` instead.'
+          )
+        }
+      })
+    }
     const { mergedClsPrefixRef } = useConfig(props)
     const formItem = useFormItem(props)
     const { mergedSizeRef, mergedDisabledRef } = formItem
@@ -108,8 +128,18 @@ export default defineComponent({
         if (checked) {
           if (!~index) {
             groupValue.push(checkboxValue)
-            if (onUpdateValue) call(onUpdateValue, groupValue)
-            if (_onUpdateValue) call(_onUpdateValue, groupValue)
+            if (onUpdateValue) {
+              call(onUpdateValue, groupValue, {
+                checkedValue: checkboxValue,
+                uncheckedValue: undefined
+              })
+            }
+            if (_onUpdateValue) {
+              call(_onUpdateValue, groupValue, {
+                checkedValue: checkboxValue,
+                uncheckedValue: undefined
+              })
+            }
             nTriggerFormInput()
             nTriggerFormChange()
             uncontrolledValueRef.value = groupValue
@@ -119,8 +149,18 @@ export default defineComponent({
         } else {
           if (~index) {
             groupValue.splice(index, 1)
-            if (onUpdateValue) call(onUpdateValue, groupValue)
-            if (_onUpdateValue) call(_onUpdateValue, groupValue)
+            if (onUpdateValue) {
+              call(onUpdateValue, groupValue, {
+                checkedValue: undefined,
+                uncheckedValue: checkboxValue
+              })
+            }
+            if (_onUpdateValue) {
+              call(_onUpdateValue, groupValue, {
+                checkedValue: undefined,
+                uncheckedValue: checkboxValue
+              })
+            }
             if (onChange) call(onChange, groupValue) // deprecated
             uncontrolledValueRef.value = groupValue
             nTriggerFormInput()
@@ -129,15 +169,35 @@ export default defineComponent({
         }
       } else {
         if (checked) {
-          if (onUpdateValue) call(onUpdateValue, [checkboxValue])
-          if (_onUpdateValue) call(_onUpdateValue, [checkboxValue])
+          if (onUpdateValue) {
+            call(onUpdateValue, [checkboxValue], {
+              checkedValue: checkboxValue,
+              uncheckedValue: undefined
+            })
+          }
+          if (_onUpdateValue) {
+            call(_onUpdateValue, [checkboxValue], {
+              checkedValue: checkboxValue,
+              uncheckedValue: undefined
+            })
+          }
           if (onChange) call(onChange, [checkboxValue]) // deprecated
           uncontrolledValueRef.value = [checkboxValue]
           nTriggerFormInput()
           nTriggerFormChange()
         } else {
-          if (onUpdateValue) call(onUpdateValue, [])
-          if (_onUpdateValue) call(_onUpdateValue, [])
+          if (onUpdateValue) {
+            call(onUpdateValue, [], {
+              checkedValue: undefined,
+              uncheckedValue: checkboxValue
+            })
+          }
+          if (_onUpdateValue) {
+            call(_onUpdateValue, [], {
+              checkedValue: undefined,
+              uncheckedValue: checkboxValue
+            })
+          }
           if (onChange) call(onChange, []) // deprecated
           uncontrolledValueRef.value = []
           nTriggerFormInput()