feat(Radio): support readonly (#1593)

* feat(Radio): support readonly

* chore: remove unuse code

* docs: sync api

src/radio/props.ts

@@ -79,6 +79,11 @@ export default {
       return ['left', 'right'].includes(val);
     },
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 单选按钮的值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdRadioProps['value']>,

src/radio/radio-group-props.ts

@@ -57,6 +57,6 @@ export default {
   defaultValue: {
     type: [String, Number, Boolean] as PropType<TdRadioGroupProps['defaultValue']>,
   },
-  /** 选中值发生变化时触发 */
+  /** 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 */
   onChange: Function as PropType<TdRadioGroupProps['onChange']>,
 };

src/radio/radio-group.tsx

@@ -35,11 +35,11 @@ export default defineComponent({
         return opt;
       });
     });
-    const handleRadioChange = (val: RadioValue, e: Event) => {
+    const handleRadioChange = (val: RadioValue, context: { e: Event; name?: string }) => {
       if (props.allowUncheck && val === groupValue.value) {
-        setGroupValue('', { e });
+        setGroupValue('', context);
       } else {
-        setGroupValue(val, { e });
+        setGroupValue(val, context);
       }
     };
 

src/radio/radio.en-US.md

@@ -21,7 +21,8 @@ maxContentRow | Number | 5 | \- | N
 maxLabelRow | Number | 3 | \- | N
 name | String | - | \- | N
 placement | String | left | options: left/right | N
-value | String / Number / Boolean | undefined | Typescript：`string \| number \| boolean` | N
+readonly | Boolean | undefined | \- | N
+value | String / Number / Boolean | undefined | Typescript：`T` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: Event }) => void`<br/> | N
 
 ### Radio Events
@@ -45,13 +46,13 @@ options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = stri
 placement | String | left | options: left/right | N
 value | String / Number / Boolean | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N
-onChange | Function |  | Typescript：`(value: T, context: { e: Event }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: T, context: { e: Event; name?:string }) => void`<br/> | N
 
 ### RadioGroup Events
 
 name | params | description
 -- | -- | --
-change | `(value: T, context: { e: Event })` | \-
+change | `(value: T, context: { e: Event; name?:string })` | \-
 
 ### CSS Variables
 

src/radio/radio.md

@@ -21,7 +21,8 @@ maxContentRow | Number | 5 | 内容最大行数限制 | N
 maxLabelRow | Number | 3 | 主文案最大行数限制 | N
 name | String | - | HTML 元素原生属性 | N
 placement | String | left | 复选框和内容相对位置。可选项：left/right | N
-value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`string \| number \| boolean` | N
+readonly | Boolean | undefined | 只读状态 | N
+value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event }) => void`<br/>选中状态变化时触发 | N
 
 ### Radio Events
@@ -45,13 +46,13 @@ options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 str
 placement | String | left | 复选框和内容相对位置。可选项：left/right | N
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N
-onChange | Function |  | TS 类型：`(value: T, context: { e: Event }) => void`<br/>选中值发生变化时触发 | N
+onChange | Function |  | TS 类型：`(value: T, context: { e: Event; name?:string }) => void`<br/>选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N
 
 ### RadioGroup Events
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(value: T, context: { e: Event })` | 选中值发生变化时触发
+change | `(value: T, context: { e: Event; name?:string })` | 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
 
 ### CSS Variables
 

src/radio/radio.tsx

@@ -47,6 +47,7 @@ export default defineComponent({
       name: rootGroupProps.name || props.name,
       checked: radioChecked.value,
       disabled: isDisabled.value,
+      readonly: props.readonly,
       value: props.value,
     }));
 
@@ -91,12 +92,12 @@ export default defineComponent({
     };
 
     const radioOrgChange = (e: Event) => {
-      if (isDisabled.value) {
+      if (isDisabled.value || props.readonly) {
         return;
       }
       if (rootGroupChange) {
         const value = finalAllowUncheck.value && radioChecked.value ? undefined : props.value;
-        rootGroupChange(value, e);
+        rootGroupChange(value, { e, name: props.name });
       } else {
         const value = finalAllowUncheck.value ? !radioChecked.value : true;
         setInnerChecked(value, { e });

src/radio/type.ts

@@ -6,7 +6,7 @@
 
 import { TNode, KeysType } from '../common';
 
-export interface TdRadioProps {
+export interface TdRadioProps<T = RadioValue> {
   /**
    * 是否允许取消选中
    * @default false
@@ -81,10 +81,14 @@ export interface TdRadioProps {
    * @default left
    */
   placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
   /**
    * 单选按钮的值
    */
-  value?: string | number | boolean;
+  value?: T;
   /**
    * 选中状态变化时触发
    */
@@ -142,9 +146,9 @@ export interface TdRadioGroupProps<T = RadioValue> {
    */
   modelValue?: T;
   /**
-   * 选中值发生变化时触发
+   * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
    */
-  onChange?: (value: T, context: { e: Event }) => void;
+  onChange?: (value: T, context: { e: Event; name?: string }) => void;
 }
 
 export type RadioOption = string | number | RadioOptionObj;