2021-10-01 07:06:18 +00:00
|
|
|
import { provide, nextTick, defineComponent, ref, watch } from 'vue';
|
2021-10-01 06:53:37 +00:00
|
|
|
import type { PropType, ExtractPropTypes } from 'vue';
|
2020-08-31 08:53:19 +00:00
|
|
|
import classNames from '../_util/classNames';
|
2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import Radio from './Radio';
|
2021-10-01 06:53:37 +00:00
|
|
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
2020-10-20 08:58:08 +00:00
|
|
|
import { tuple } from '../_util/type';
|
2022-03-26 14:52:54 +00:00
|
|
|
import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
|
2021-09-25 08:51:32 +00:00
|
|
|
import { useInjectFormItemContext } from '../form/FormItemContext';
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2021-10-01 06:53:37 +00:00
|
|
|
const RadioGroupSizeTypes = tuple('large', 'default', 'small');
|
|
|
|
|
|
|
|
export type RadioGroupSize = typeof RadioGroupSizeTypes[number];
|
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
export type RadioGroupOption = RadioGroupOptionType;
|
2021-10-01 06:53:37 +00:00
|
|
|
|
|
|
|
export type RadioGroupChildOption = {
|
2021-12-28 08:47:52 +00:00
|
|
|
label?: any;
|
2021-10-01 07:10:20 +00:00
|
|
|
value: any;
|
2021-10-01 06:53:37 +00:00
|
|
|
disabled?: boolean;
|
|
|
|
};
|
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
export const radioGroupProps = () => ({
|
|
|
|
prefixCls: String,
|
2021-10-01 06:53:37 +00:00
|
|
|
value: PropTypes.any,
|
2022-06-11 05:38:46 +00:00
|
|
|
size: PropTypes.oneOf(RadioGroupSizeTypes),
|
2021-10-01 06:53:37 +00:00
|
|
|
options: {
|
2022-03-17 06:42:03 +00:00
|
|
|
type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
|
2021-10-01 06:53:37 +00:00
|
|
|
},
|
2022-03-26 14:52:54 +00:00
|
|
|
disabled: { type: Boolean, default: undefined },
|
|
|
|
name: String,
|
|
|
|
buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
|
|
|
|
id: String,
|
|
|
|
optionType: { type: String as PropType<RadioGroupOptionType>, default: 'default' },
|
|
|
|
onChange: Function as PropType<(e: RadioChangeEvent) => void>,
|
|
|
|
'onUpdate:value': Function as PropType<(val: any) => void>,
|
|
|
|
});
|
2021-10-01 06:53:37 +00:00
|
|
|
|
2022-03-26 14:52:54 +00:00
|
|
|
export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
|
2021-10-01 06:53:37 +00:00
|
|
|
|
2020-10-13 11:02:03 +00:00
|
|
|
export default defineComponent({
|
2022-09-26 13:33:41 +00:00
|
|
|
compatConfig: { MODE: 3 },
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ARadioGroup',
|
2022-03-26 14:52:54 +00:00
|
|
|
props: radioGroupProps(),
|
|
|
|
// emits: ['update:value', 'change'],
|
2021-10-01 06:53:37 +00:00
|
|
|
setup(props, { slots, emit }) {
|
2021-09-25 08:51:32 +00:00
|
|
|
const formItemContext = useInjectFormItemContext();
|
2021-10-01 07:06:18 +00:00
|
|
|
const { prefixCls, direction, size } = useConfigInject('radio', props);
|
|
|
|
const stateValue = ref(props.value);
|
2021-10-01 06:53:37 +00:00
|
|
|
const updatingValue = ref<boolean>(false);
|
|
|
|
watch(
|
|
|
|
() => props.value,
|
|
|
|
val => {
|
|
|
|
stateValue.value = val;
|
|
|
|
updatingValue.value = false;
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
const onRadioChange = (ev: RadioChangeEvent) => {
|
|
|
|
const lastValue = stateValue.value;
|
2019-01-12 03:33:27 +00:00
|
|
|
const { value } = ev.target;
|
2021-10-01 06:53:37 +00:00
|
|
|
|
|
|
|
if (!('value' in props)) {
|
|
|
|
stateValue.value = value;
|
2018-09-05 13:28:54 +00:00
|
|
|
}
|
2019-10-16 06:47:49 +00:00
|
|
|
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
|
2021-10-01 06:53:37 +00:00
|
|
|
if (!updatingValue.value && value !== lastValue) {
|
|
|
|
updatingValue.value = true;
|
|
|
|
emit('update:value', value);
|
|
|
|
emit('change', ev);
|
|
|
|
formItemContext.onFieldChange();
|
2019-10-18 05:05:35 +00:00
|
|
|
}
|
2020-06-13 14:32:10 +00:00
|
|
|
nextTick(() => {
|
2021-10-01 06:53:37 +00:00
|
|
|
updatingValue.value = false;
|
2019-10-16 06:47:49 +00:00
|
|
|
});
|
2021-10-01 06:53:37 +00:00
|
|
|
};
|
2021-10-01 07:06:18 +00:00
|
|
|
|
2021-10-01 06:53:37 +00:00
|
|
|
provide('radioGroupContext', {
|
|
|
|
onRadioChange,
|
|
|
|
stateValue,
|
|
|
|
props,
|
2020-06-20 14:22:00 +00:00
|
|
|
});
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2021-10-01 06:53:37 +00:00
|
|
|
return () => {
|
|
|
|
const { options, optionType, buttonStyle, id = formItemContext.id.value } = props;
|
|
|
|
|
|
|
|
const groupPrefixCls = `${prefixCls.value}-group`;
|
2018-09-05 13:28:54 +00:00
|
|
|
|
2021-10-01 06:53:37 +00:00
|
|
|
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
|
2021-10-01 07:06:18 +00:00
|
|
|
[`${groupPrefixCls}-${size.value}`]: size.value,
|
|
|
|
[`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
|
2021-10-01 06:53:37 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
let children = null;
|
|
|
|
if (options && options.length > 0) {
|
|
|
|
const optionsPrefixCls =
|
|
|
|
optionType === 'button' ? `${prefixCls.value}-button` : prefixCls.value;
|
|
|
|
children = options.map(option => {
|
2022-03-17 06:42:03 +00:00
|
|
|
if (typeof option === 'string' || typeof option === 'number') {
|
2021-10-01 06:53:37 +00:00
|
|
|
return (
|
|
|
|
<Radio
|
|
|
|
key={option}
|
|
|
|
prefixCls={optionsPrefixCls}
|
|
|
|
disabled={props.disabled}
|
|
|
|
value={option}
|
|
|
|
checked={stateValue.value === option}
|
|
|
|
>
|
|
|
|
{option}
|
|
|
|
</Radio>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
const { value, disabled, label } = option as RadioGroupChildOption;
|
2018-09-05 13:28:54 +00:00
|
|
|
return (
|
|
|
|
<Radio
|
2021-10-01 06:53:37 +00:00
|
|
|
key={`radio-group-value-options-${value}`}
|
|
|
|
prefixCls={optionsPrefixCls}
|
|
|
|
disabled={disabled || props.disabled}
|
|
|
|
value={value}
|
|
|
|
checked={stateValue.value === value}
|
2018-09-05 13:28:54 +00:00
|
|
|
>
|
2021-10-01 06:53:37 +00:00
|
|
|
{label}
|
2018-09-05 13:28:54 +00:00
|
|
|
</Radio>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2021-10-01 06:53:37 +00:00
|
|
|
});
|
|
|
|
} else {
|
|
|
|
children = slots.default?.();
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div class={classString} id={id}>
|
|
|
|
{children}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2017-10-27 06:04:48 +00:00
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
});
|