types(Radio): use tsx (#8129)

src/checkbox-group/index.tsx

@@ -3,19 +3,18 @@ import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useExpose } from '../composables/use-expose';
 import { useLinkField } from '../composables/use-link-field';
+import { CheckerParent, CheckerDirection } from '../checkbox/Checker';
 
 const [createComponent, bem] = createNamespace('checkbox-group');
 
 export const CHECKBOX_GROUP_KEY = 'vanCheckboxGroup';
 
-export type CheckboxGroupDirection = 'horizontal' | 'vertical';
-
 export type CheckboxGroupToggleAllOptions = {
   checked?: boolean;
   skipDisabled?: boolean;
 };
 
-export type CheckboxGroupProvide = {
+export type CheckboxGroupProvide = CheckerParent & {
   props: {
     max: number | string;
     modelValue: any[];
@@ -27,7 +26,7 @@ export default createComponent({
   props: {
     max: [Number, String],
     disabled: Boolean,
-    direction: String as PropType<CheckboxGroupDirection>,
+    direction: String as PropType<CheckerDirection>,
     iconSize: [Number, String],
     checkedColor: String,
     modelValue: {

src/checkbox/Checker.tsx

@@ -3,13 +3,13 @@ import { addUnit } from '../utils';
 import Icon from '../icon';
 
 export type CheckerShape = 'square' | 'round';
+export type CheckerDirection = 'horizontal' | 'vertical';
 export type CheckerLabelPosition = 'left' | 'right';
-
-type CheckerParent = {
+export type CheckerParent = {
   props: {
     disabled?: boolean;
     iconSize?: number | string;
-    direction?: 'horizontal' | 'vertical';
+    direction?: CheckerDirection;
     checkedColor?: string;
   };
 };

src/radio-group/index.tsx

@@ -2,17 +2,25 @@ import { watch } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 import { useLinkField } from '../composables/use-link-field';
+import { CheckerParent } from '../checkbox/Checker';
 
 const [createComponent, bem] = createNamespace('radio-group');
 
 export const RADIO_KEY = 'vanRadio';
 
+export type RadioGroupProvide = CheckerParent & {
+  props: {
+    modelValue: any;
+  };
+  updateModelValue: (value: unknown) => void;
+};
+
 export default createComponent({
   props: {
     disabled: Boolean,
     iconSize: [Number, String],
     direction: String,
-    modelValue: null,
+    modelValue: null as any,
     checkedColor: String,
   },
 
@@ -21,6 +29,10 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(RADIO_KEY);
 
+    const updateModelValue = (value: unknown) => {
+      emit('update:modelValue', value);
+    };
+
     watch(
       () => props.modelValue,
       (value) => {
@@ -28,7 +40,11 @@ export default createComponent({
       }
     );
 
-    linkChildren({ emit, props });
+    linkChildren({
+      props,
+      updateModelValue,
+    });
+
     useLinkField(() => props.modelValue);
 
     return () => (

src/radio/index.tsx

@@ -1,7 +1,7 @@
 import { pick, createNamespace } from '../utils';
 import { useParent } from '@vant/use';
 import Checker, { checkerProps } from '../checkbox/Checker';
-import { RADIO_KEY } from '../radio-group';
+import { RADIO_KEY, RadioGroupProvide } from '../radio-group';
 
 const [createComponent, bem] = createNamespace('radio');
 
@@ -11,7 +11,7 @@ export default createComponent({
   emits: ['update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { parent } = useParent(RADIO_KEY);
+    const { parent } = useParent<RadioGroupProvide>(RADIO_KEY);
 
     const checked = () => {
       const value = parent ? parent.props.modelValue : props.modelValue;
@@ -19,8 +19,11 @@ export default createComponent({
     };
 
     const toggle = () => {
-      const emitter = parent ? parent.emit : emit;
-      emitter('update:modelValue', props.name);
+      if (parent) {
+        parent.updateModelValue(props.name);
+      } else {
+        emit('update:modelValue', props.name);
+      }
     };
 
     return () => (