github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: radio support rtl #4720

pull/4723/head
tangjinzhou 2021-10-01 15:06:18 +08:00
parent cf3fe6b9e0
commit 84341ef912
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/radio/Group.tsx
View File

@ -1,4 +1,4 @@
import { provide, nextTick, defineComponent, ref, watch, onBeforeMount } from 'vue'; import { provide, nextTick, defineComponent, ref, watch } from 'vue';
import type { PropType, ExtractPropTypes } from 'vue'; import type { PropType, ExtractPropTypes } from 'vue';
import classNames from '../_util/classNames'; import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -44,8 +44,8 @@ export default defineComponent({
emits: ['update:value', 'change'], emits: ['update:value', 'change'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const { prefixCls } = useConfigInject('radio', props); const { prefixCls, direction, size } = useConfigInject('radio', props);
const stateValue = ref(props.value === undefined ? props.defaultValue : props.value); const stateValue = ref(props.value);
const updatingValue = ref<boolean>(false); const updatingValue = ref<boolean>(false);
watch( watch(
() => props.value, () => props.value,
@ -73,7 +73,7 @@ export default defineComponent({
updatingValue.value = false; updatingValue.value = false;
}); });
}; };
provide('radioGroupContext', { provide('radioGroupContext', {
onRadioChange, onRadioChange,
stateValue, stateValue,
@ -86,7 +86,8 @@ export default defineComponent({
const groupPrefixCls = `${prefixCls.value}-group`; const groupPrefixCls = `${prefixCls.value}-group`;
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, { const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
[`${groupPrefixCls}-${props.size}`]: props.size, [`${groupPrefixCls}-${size.value}`]: size.value,
[`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
}); });
let children = null; let children = null;

5
components/radio/Radio.tsx
View File

@ -31,8 +31,8 @@ export default defineComponent({
setup(props, { emit, expose, slots }) { setup(props, { emit, expose, slots }) {
const formItemContext = useInjectFormItemContext(); const formItemContext = useInjectFormItemContext();
const vcCheckbox = ref<HTMLElement>(); const vcCheckbox = ref<HTMLElement>();
const radioGroupContext = inject<RadioGroupContext>('radioGroupContext'); const radioGroupContext = inject<RadioGroupContext>('radioGroupContext', undefined);
const { prefixCls } = useConfigInject('radio', props); const { prefixCls, direction } = useConfigInject('radio', props);
const focus = () => { const focus = () => {
vcCheckbox.value.focus(); vcCheckbox.value.focus();
@ -81,6 +81,7 @@ export default defineComponent({
[`${prefixCls.value}-wrapper`]: true, [`${prefixCls.value}-wrapper`]: true,
[`${prefixCls.value}-wrapper-checked`]: rProps.checked, [`${prefixCls.value}-wrapper-checked`]: rProps.checked,
[`${prefixCls.value}-wrapper-disabled`]: rProps.disabled, [`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
[`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
}); });
return ( return (

2
components/radio/RadioButton.tsx
View File

@ -9,7 +9,7 @@ export default defineComponent({
props: radioProps, props: radioProps,
setup(props: RadioProps, { slots }) { setup(props: RadioProps, { slots }) {
const { prefixCls } = useConfigInject('radio-button', props); const { prefixCls } = useConfigInject('radio-button', props);
const radioGroupContext = inject<RadioGroupContext>('radioGroupContext'); const radioGroupContext = inject<RadioGroupContext>('radioGroupContext', undefined);
return () => { return () => {
const rProps: RadioProps = { const rProps: RadioProps = {