feat(radiogroup): support readonly props

src/radio-group/props.ts

@@ -39,11 +39,16 @@ const props: TdRadioGroupProps = {
   options: {
     type: Array,
   },
-  /** 复选框和内容相对位置 */
+  /** 复选框和内容相对位置。优先级低于 Radio.placement */
   placement: {
     type: String,
     value: 'left',
   },
+  /** 只读状态 */
+  readonly: {
+    type: null,
+    value: undefined,
+  },
   /** 选中的值 */
   value: {
     type: null,

src/radio-group/radio-group.ts

@@ -19,11 +19,12 @@ export default class RadioGroup extends SuperComponent {
     '../radio/radio': {
       type: 'descendant',
       linked(target) {
-        const { value, disabled } = this.data;
+        const { value, disabled, readonly } = this.data;
         target.setData({
           checked: value === target.data.value,
         });
         target.setDisabled(disabled);
+        target.setReadonly(readonly);
       },
     },
   };
@@ -82,7 +83,7 @@ export default class RadioGroup extends SuperComponent {
 
     // 支持自定义options
     initWithOptions() {
-      const { options, value, keys, disabled } = this.data;
+      const { options, value, keys, disabled, readonly } = this.data;
       // 数字数组｜字符串数组｜对像数组
       if (!options?.length || !Array.isArray(options)) {
         this.setData({
@@ -100,6 +101,7 @@ export default class RadioGroup extends SuperComponent {
               value: element,
               checked: value === element,
               disabled,
+              readonly,
             });
           } else if (typeName === 'object') {
             optionsValue.push({
@@ -108,6 +110,7 @@ export default class RadioGroup extends SuperComponent {
               value: element[keys?.value ?? 'value'],
               checked: value === element[keys?.value ?? 'value'],
               disabled: element.disabled || disabled,
+              readonly: element.readonly || readonly,
             });
           }
         });

src/radio-group/type.ts

@@ -61,13 +61,20 @@ export interface TdRadioGroupProps<T = RadioValue> {
     value?: Array<RadioOption>;
   };
   /**
-   * 复选框和内容相对位置
+   * 复选框和内容相对位置。优先级低于 Radio.placement
    * @default left
    */
   placement?: {
     type: StringConstructor;
     value?: 'left' | 'right';
   };
+  /**
+   * 只读状态
+   */
+  readonly?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 选中的值
    */

src/radio/README.en-US.md

@@ -20,8 +20,8 @@ label | String / Slot | - | [see more ts definition](https://github.com/Tencent/
 max-content-row | Number | 5 | \- | N
 max-label-row | Number | 3 | \- | N
 name | String | - | \- | N
-placement | String | left | options: left/right | N
-readonly | Boolean | false | \- | N
+placement | String | - | options: left/right | N
+readonly | Boolean | undefined | \- | N
 value | String / Number / Boolean | false | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
 
 ### Radio Events
@@ -55,6 +55,7 @@ keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://g
 name | String | - | \- | N
 options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
 placement | String | left | options: left/right | N
+readonly | Boolean | undefined | \- | N
 value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
 default-value | String / Number / Boolean | undefined | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
 

src/radio/README.md

@@ -73,8 +73,8 @@ label | String / Slot | - | 主文案。[通用类型定义](https://github.com/
 max-content-row | Number | 5 | 内容最大行数限制 | N
 max-label-row | Number | 3 | 主文案最大行数限制 | N
 name | String | - | HTML 元素原生属性 | N
-placement | String | left | 复选框和内容相对位置。可选项：left/right | N
-readonly | Boolean | false | 只读状态 | N
+placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
 value | String / Number / Boolean | false | 单选按钮的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio/type.ts) | N
 
 ### Radio Events
@@ -107,7 +107,8 @@ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 name | String | - | HTML 元素原生属性 | N
 options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string; value?: string \| number; readonly?: boolean; disabled?: boolean; allowUncheck?: boolean; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
-placement | String | left | 复选框和内容相对位置。可选项：left/right | N
+placement | String | left | 复选框和内容相对位置。优先级低于 Radio.placement。可选项：left/right | N
+readonly | Boolean | undefined | 只读状态 | N
 value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
 default-value | String / Number / Boolean | undefined | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/radio-group/type.ts) | N
 

src/radio/props.ts

@@ -64,15 +64,14 @@ const props: TdRadioProps = {
     type: String,
     value: '',
   },
-  /** 复选框和内容相对位置 */
+  /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */
   placement: {
     type: String,
-    value: 'left',
   },
   /** 只读状态 */
   readonly: {
-    type: Boolean,
-    value: false,
+    type: null,
+    value: undefined,
   },
   /** 单选按钮的值 */
   value: {

src/radio/radio.ts

@@ -65,20 +65,24 @@ export default class Radio extends SuperComponent {
     iconVal: [],
     _placement: '',
     _disabled: false,
+    _readonly: false,
   };
 
   observers = {
     disabled(v) {
       this.setData({ _disabled: v });
     },
+    readonly(v) {
+      this.setData({ _readonly: v });
+    },
   };
 
   methods = {
     handleTap(e) {
-      const { _disabled, readonly, contentDisabled } = this.data;
+      const { _disabled, _readonly, contentDisabled } = this.data;
       const { target } = e.currentTarget.dataset;
 
-      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+      if (_disabled || _readonly || (target === 'text' && contentDisabled)) return;
 
       this.doChange();
     },
@@ -110,5 +114,11 @@ export default class Radio extends SuperComponent {
         _disabled: this.data.disabled || disabled,
       });
     },
+
+    setReadonly(readonly: Boolean) {
+      this.setData({
+        _readonly: this.data.readonly || readonly,
+      });
+    },
   };
 }

src/radio/type.ts

@@ -99,16 +99,14 @@ export interface TdRadioProps<T = RadioValue> {
     value?: string;
   };
   /**
-   * 复选框和内容相对位置
-   * @default left
+   * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
    */
   placement?: {
     type: StringConstructor;
     value?: 'left' | 'right';
   };
   /**
    * 只读状态
-   * @default false
    */
   readonly?: {
     type: BooleanConstructor;