55 lines
1.2 KiB
TypeScript
55 lines
1.2 KiB
TypeScript
import { watch, defineComponent, ExtractPropTypes } from 'vue';
|
|
import { UnknownProp, createNamespace } from '../utils';
|
|
import { useChildren } from '@vant/use';
|
|
import { useLinkField } from '../composables/use-link-field';
|
|
import { CheckerParent } from '../checkbox/Checker';
|
|
|
|
const [name, bem] = createNamespace('radio-group');
|
|
|
|
export const RADIO_KEY = Symbol(name);
|
|
|
|
const props = {
|
|
disabled: Boolean,
|
|
iconSize: [Number, String],
|
|
direction: String,
|
|
modelValue: UnknownProp,
|
|
checkedColor: String,
|
|
};
|
|
|
|
export type RadioGroupProvide = CheckerParent & {
|
|
props: ExtractPropTypes<typeof props>;
|
|
updateValue: (value: unknown) => void;
|
|
};
|
|
|
|
export default defineComponent({
|
|
name,
|
|
|
|
props,
|
|
|
|
emits: ['change', 'update:modelValue'],
|
|
|
|
setup(props, { emit, slots }) {
|
|
const { linkChildren } = useChildren(RADIO_KEY);
|
|
|
|
const updateValue = (value: unknown) => emit('update:modelValue', value);
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(value) => emit('change', value)
|
|
);
|
|
|
|
linkChildren({
|
|
props,
|
|
updateValue,
|
|
});
|
|
|
|
useLinkField(() => props.modelValue);
|
|
|
|
return () => (
|
|
<div class={bem([props.direction])} role="radiogroup">
|
|
{slots.default?.()}
|
|
</div>
|
|
);
|
|
},
|
|
});
|