diff --git a/src/checkbox-group/index.tsx b/src/checkbox-group/index.tsx index 730d64b74..2f66ca504 100644 --- a/src/checkbox-group/index.tsx +++ b/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, + direction: String as PropType, iconSize: [Number, String], checkedColor: String, modelValue: { diff --git a/src/checkbox/Checker.tsx b/src/checkbox/Checker.tsx index b8551fb03..1bc97cd5e 100644 --- a/src/checkbox/Checker.tsx +++ b/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; }; }; diff --git a/src/radio-group/index.js b/src/radio-group/index.tsx similarity index 68% rename from src/radio-group/index.js rename to src/radio-group/index.tsx index 4c81a163c..99c9124f4 100644 --- a/src/radio-group/index.js +++ b/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 () => ( diff --git a/src/radio/index.js b/src/radio/index.tsx similarity index 74% rename from src/radio/index.js rename to src/radio/index.tsx index 90d84bb51..5b1175d6f 100644 --- a/src/radio/index.js +++ b/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(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 () => (