feat: radio support rtl #4720

components/radio/Group.tsx

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

components/radio/Radio.tsx

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

components/radio/RadioButton.tsx

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