fix(nvue3): checkbox-group

packages/uni-components/src/components/checkbox-group.ts

+import { ComputedRef, ExtractPropTypes } from 'vue'
 import { PolySymbol } from '@dcloudio/uni-core'
 
 export const uniCheckGroupKey = PolySymbol(__DEV__ ? 'uniCheckGroup' : 'ucg')
+
+export type UniCheckGroupFieldCtx = ComputedRef<{
+  checkboxChecked: boolean
+  value: string
+}>
+
+export interface UniCheckGroupCtx {
+  addField: (field: UniCheckGroupFieldCtx) => void
+  removeField: (field: UniCheckGroupFieldCtx) => void
+  checkboxChange: ($event: Event) => void
+}
+
+export const checkboxGroupProps = {
+  name: {
+    type: String,
+    default: '',
+  },
+}
+
+export type CheckBoxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>

packages/uni-components/src/nvue/checkbox-group/index.tsx

-import {
-  defineComponent,
-  inject,
-  provide,
-  ComputedRef,
-  ref,
-  ExtractPropTypes,
-} from 'vue'
-import { uniCheckGroupKey } from '../../components/checkbox-group'
-import { UniFormCtx, uniFormKey } from '../../components/form'
+import { defineComponent, inject, provide, ref } from 'vue'
 import {
   CustomEventTrigger,
   useCustomEvent,
   EmitEvent,
-} from '../../helpers/useEvent'
-
-type UniCheckGroupFieldCtx = ComputedRef<{
-  checkboxChecked: boolean
-  value: string
-}>
-
-const props = {
-  name: {
-    type: String,
-    default: '',
-  },
-}
-
-type CheckBoxGroupProps = ExtractPropTypes<typeof props>
-
-export interface UniCheckGroupCtx {
-  addField: (field: UniCheckGroupFieldCtx) => void
-  removeField: (field: UniCheckGroupFieldCtx) => void
-  checkboxChange: ($event: Event) => void
-}
+} from '../../helpers/useNVueEvent'
+import {
+  uniCheckGroupKey,
+  UniCheckGroupCtx,
+  UniCheckGroupFieldCtx,
+  CheckBoxGroupProps,
+  checkboxGroupProps,
+} from '../../components/checkbox-group'
+import { UniFormCtx, uniFormKey } from '../../components/form'
 
 export default defineComponent({
   name: 'CheckboxGroup',
-  props,
+  props: checkboxGroupProps,
   emits: ['change'],
   setup(props, { slots, emit }) {
     const rootRef = ref<HTMLElement | null>(null)
@@ -76,7 +55,7 @@ function useProvideCheckGroup(
       fields.splice(fields.indexOf(field), 1)
     },
     checkboxChange($event) {
-      trigger('change', $event, {
+      trigger('change', {
         value: getFieldsValue(),
       })
     },

packages/uni-components/src/nvue/checkbox/index.tsx

@@ -2,14 +2,20 @@ import {
   defineComponent,
   inject,
   onBeforeUnmount,
+  Ref,
   ref,
   computed,
   watch,
 } from 'vue'
-import { uniLabelKey, UniLabelCtx } from '../label'
 import { useListeners } from '../../helpers/useListeners'
 import { NVueComponentStyles, createNVueTextVNode } from '../utils'
 import { checkboxProps } from '../../components/checkbox'
+import {
+  uniCheckGroupKey,
+  UniCheckGroupCtx,
+} from '../../components/checkbox-group'
+import { UniFormCtx, uniFormKey } from '../../components/form'
+import { uniLabelKey, UniLabelCtx } from '../label'
 
 const checkboxStyles: NVueComponentStyles = [
   {
@@ -69,7 +75,16 @@ export default defineComponent({
     const rootRef = ref<HTMLElement | null>(null)
     const checkboxChecked = ref(props.checked)
     const checkboxValue = ref(props.value)
-    const onClick = (e: Event, isLabelClick?: boolean) => {
+
+    const checkboxColor = computed(() =>
+      props.disabled ? '#adadad' : props.color
+    )
+
+    const reset = () => {
+      checkboxChecked.value = false
+    }
+
+    const _onClick = ($event: Event, isLabelClick?: boolean) => {
       if (props.disabled) {
         return
       }
@@ -77,12 +92,23 @@ export default defineComponent({
         rootRef.value!.click()
       }
       checkboxChecked.value = !checkboxChecked.value
+      uniCheckGroup && uniCheckGroup.checkboxChange($event)
     }
 
-    const checkboxColor = computed(() =>
-      props.disabled ? '#adadad' : props.color
+    const { uniCheckGroup, uniLabel } = useCheckboxInject(
+      checkboxChecked,
+      checkboxValue,
+      reset
     )
 
+    if (uniLabel) {
+      uniLabel.addHandler(_onClick)
+      onBeforeUnmount(() => {
+        uniLabel.removeHandler(_onClick)
+      })
+    }
+    useListeners(props, { 'label-click': _onClick })
+
     watch(
       [() => props.checked, () => props.value],
       ([newChecked, newModelValue]) => {
@@ -91,18 +117,6 @@ export default defineComponent({
       }
     )
 
-    const uniLabel = inject<UniLabelCtx>(
-      uniLabelKey,
-      false as unknown as UniLabelCtx
-    )
-    if (uniLabel) {
-      uniLabel.addHandler(onClick)
-      onBeforeUnmount(() => {
-        uniLabel.removeHandler(onClick)
-      })
-    }
-    useListeners(props, { 'label-click': onClick })
-
     const wrapSlots = () => {
       if (!slots.default) return []
       const vnodes = slots.default()
@@ -121,7 +135,7 @@ export default defineComponent({
         <div
           ref={rootRef}
           {...{ dataUncType: 'uni-checkbox' }}
-          onClick={onClick}
+          onClick={_onClick}
           class="uni-checkbox"
         >
           <div
@@ -144,3 +158,44 @@ export default defineComponent({
     }
   },
 })
+
+function useCheckboxInject(
+  checkboxChecked: Ref<string | boolean>,
+  checkboxValue: Ref<string>,
+  reset: () => void
+) {
+  const field = computed(() => ({
+    checkboxChecked: Boolean(checkboxChecked.value),
+    value: checkboxValue.value,
+  }))
+  const formField = { reset }
+
+  const uniCheckGroup = inject<UniCheckGroupCtx>(
+    uniCheckGroupKey,
+    false as unknown as UniCheckGroupCtx
+  )
+  if (!!uniCheckGroup) {
+    uniCheckGroup.addField(field)
+  }
+
+  const uniForm = inject<UniFormCtx>(uniFormKey, false as unknown as UniFormCtx)
+  if (!!uniForm) {
+    uniForm.addField(formField)
+  }
+
+  const uniLabel = inject<UniLabelCtx>(
+    uniLabelKey,
+    false as unknown as UniLabelCtx
+  )
+
+  onBeforeUnmount(() => {
+    uniCheckGroup && uniCheckGroup.removeField(field)
+    uniForm && uniForm.removeField(formField)
+  })
+
+  return {
+    uniCheckGroup,
+    uniForm,
+    uniLabel,
+  }
+}