refactor:radio (#6299)

* refactor:radio

* fix attrs

Author: shifeng1993

components/radio/Group.tsx

@@ -1,5 +1,5 @@
 import { nextTick, defineComponent, ref, watch, computed } from 'vue';
-import type { PropType, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import Radio from './Radio';
@@ -8,6 +8,10 @@ import { tuple } from '../_util/type';
 import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import { useProvideRadioGroupContext } from './context';
+import { booleanType, stringType, arrayType, functionType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
 
 const RadioGroupSizeTypes = tuple('large', 'default', 'small');
 
@@ -25,28 +29,31 @@ export const radioGroupProps = () => ({
   prefixCls: String,
   value: PropTypes.any,
   size: PropTypes.oneOf(RadioGroupSizeTypes),
-  options: {
-    type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
-  },
-  disabled: { type: Boolean, default: undefined },
+  options: arrayType<Array<string | RadioGroupChildOption | number>>(),
+  disabled: booleanType(),
   name: String,
-  buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
+  buttonStyle: stringType<RadioGroupButtonStyle>('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>,
+  optionType: stringType<RadioGroupOptionType>('default'),
+  onChange: functionType<(e: RadioChangeEvent) => void>(),
+  'onUpdate:value': functionType<(val: any) => void>(),
 });
 
 export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ARadioGroup',
+  inheritAttrs: false,
   props: radioGroupProps(),
   // emits: ['update:value', 'change'],
-  setup(props, { slots, emit }) {
+  setup(props, { slots, emit, attrs }) {
     const formItemContext = useInjectFormItemContext();
     const { prefixCls, direction, size } = useConfigInject('radio', props);
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+
     const stateValue = ref(props.value);
     const updatingValue = ref<boolean>(false);
     watch(
@@ -89,10 +96,16 @@ export default defineComponent({
 
       const groupPrefixCls = `${prefixCls.value}-group`;
 
-      const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
-        [`${groupPrefixCls}-${size.value}`]: size.value,
-        [`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
-      });
+      const classString = classNames(
+        groupPrefixCls,
+        `${groupPrefixCls}-${buttonStyle}`,
+        {
+          [`${groupPrefixCls}-${size.value}`]: size.value,
+          [`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
+        },
+        attrs.class,
+        hashId.value,
+      );
 
       let children = null;
       if (options && options.length > 0) {
@@ -126,10 +139,10 @@ export default defineComponent({
       } else {
         children = slots.default?.();
       }
-      return (
-        <div class={classString} id={id}>
+      return wrapSSR(
+        <div {...attrs} class={classString} id={id}>
           {children}
-        </div>
+        </div>,
       );
     };
   },

components/radio/Radio.tsx

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import { computed, defineComponent, ref } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCheckbox from '../vc-checkbox/Checkbox';
@@ -9,31 +9,36 @@ import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItem
 import omit from '../_util/omit';
 import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
 import { useInjectRadioGroupContext, useInjectRadioOptionTypeContext } from './context';
+import { booleanType, functionType } from '../_util/type';
+
+// CSSINJS
+import useStyle from './style';
 
 export const radioProps = () => ({
   prefixCls: String,
-  checked: { type: Boolean, default: undefined },
-  disabled: { type: Boolean, default: undefined },
-  isGroup: { type: Boolean, default: undefined },
+  checked: booleanType(),
+  disabled: booleanType(),
+  isGroup: booleanType(),
   value: PropTypes.any,
   name: String,
   id: String,
-  autofocus: { type: Boolean, default: undefined },
-  onChange: Function as PropType<(event: RadioChangeEvent) => void>,
-  onFocus: Function as PropType<FocusEventHandler>,
-  onBlur: Function as PropType<FocusEventHandler>,
-  onClick: Function as PropType<MouseEventHandler>,
-  'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
-  'onUpdate:value': Function as PropType<(checked: boolean) => void>,
+  autofocus: booleanType(),
+  onChange: functionType<(event: RadioChangeEvent) => void>(),
+  onFocus: functionType<FocusEventHandler>(),
+  onBlur: functionType<FocusEventHandler>(),
+  onClick: functionType<MouseEventHandler>(),
+  'onUpdate:checked': functionType<(checked: boolean) => void>(),
+  'onUpdate:value': functionType<(checked: boolean) => void>(),
 });
 
 export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
 
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ARadio',
+  inheritAttrs: false,
   props: radioProps(),
-  setup(props, { emit, expose, slots }) {
+  setup(props, { emit, expose, slots, attrs }) {
     const formItemContext = useInjectFormItemContext();
     const formItemInputContext = FormItemInputContext.useInject();
     const radioOptionTypeContext = useInjectRadioOptionTypeContext();
@@ -42,10 +47,14 @@ export default defineComponent({
 
     const { prefixCls: radioPrefixCls, direction } = useConfigInject('radio', props);
     const prefixCls = computed(() =>
-      (radioGroupContext?.optionType.value || radioOptionTypeContext) === 'button'
+      radioGroupContext?.optionType.value === 'button' || radioOptionTypeContext === 'button'
         ? `${radioPrefixCls.value}-button`
         : radioPrefixCls.value,
     );
+
+    // Style
+    const [wrapSSR, hashId] = useStyle(radioPrefixCls);
+
     const focus = () => {
       vcCheckbox.value.focus();
     };
@@ -89,19 +98,23 @@ export default defineComponent({
       } else {
         rProps.onChange = handleChange;
       }
-      const wrapperClassString = classNames({
-        [`${prefixCls.value}-wrapper`]: true,
-        [`${prefixCls.value}-wrapper-checked`]: rProps.checked,
-        [`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
-        [`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
-        [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
-      });
+      const wrapperClassString = classNames(
+        {
+          [`${prefixCls.value}-wrapper`]: true,
+          [`${prefixCls.value}-wrapper-checked`]: rProps.checked,
+          [`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
+          [`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
+          [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
+        },
+        attrs.class,
+        hashId.value,
+      );
 
-      return (
-        <label class={wrapperClassString}>
+      return wrapSSR(
+        <label {...attrs} class={wrapperClassString}>
           <VcCheckbox {...rProps} type="radio" ref={vcCheckbox} />
           {slots.default && <span>{slots.default()}</span>}
-        </label>
+        </label>,
       );
     };
   },

components/radio/RadioButton.tsx

@@ -6,13 +6,14 @@ import { useProvideRadioOptionTypeContext } from './context';
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ARadioButton',
+  inheritAttrs: false,
   props: radioProps(),
-  setup(props, { slots }) {
-    const { prefixCls } = useConfigInject('radio-button', props);
+  setup(props, { slots, attrs }) {
+    const { prefixCls } = useConfigInject('radio', props);
     useProvideRadioOptionTypeContext('button');
     return () => {
       return (
-        <Radio {...props} prefixCls={prefixCls.value}>
+        <Radio {...attrs} {...props} prefixCls={prefixCls.value}>
           {slots.default?.()}
         </Radio>
       );

components/radio/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Entry
 title: Radio
-cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Radio.

components/radio/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据录入
 title: Radio
 subtitle: 单选框
-cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 单选框。