fix(radio): fix placement get value priority (#1674)

* fix(radio): fix placement get value priority * docs: sync api * fix: finalPlacement * feat: group readonly
Tencent · Dec 18, 2024 · cdf35f8 · cdf35f8
1 parent 3052a24
commit cdf35f8
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git a/src/radio/props.ts b/src/radio/props.ts
@@ -70,10 +70,9 @@ export default {
     type: String,
     default: '',
   },
-  /** 复选框和内容相对位置 */
+  /** 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定 */
   placement: {
     type: String as PropType<TdRadioProps['placement']>,
-    default: 'left' as TdRadioProps['placement'],
     validator(val: TdRadioProps['placement']): boolean {
       if (!val) return true;
       return ['left', 'right'].includes(val);

diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts
@@ -35,7 +35,7 @@ export default {
   options: {
     type: Array as PropType<TdRadioGroupProps['options']>,
   },
-  /** 复选框和内容相对位置 */
+  /** 复选框和内容相对位置。优先级低于 Radio.placement */
   placement: {
     type: String as PropType<TdRadioGroupProps['placement']>,
     default: 'left' as TdRadioGroupProps['placement'],
@@ -44,6 +44,11 @@ export default {
       return ['left', 'right'].includes(val);
     },
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 选中的值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdRadioGroupProps['value']>,

diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
@@ -20,7 +20,7 @@ label | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor
 maxContentRow | Number | 5 | \- | N
 maxLabelRow | Number | 3 | \- | N
 name | String | - | \- | N
-placement | String | left | options: left/right | N
+placement | String | - | options: left/right | N
 readonly | Boolean | undefined | \- | N
 value | String / Number / Boolean | undefined | Typescript：`T` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: Event }) => void`<br/> | N
@@ -44,6 +44,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 \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/type.ts) | N
 placement | String | left | options: left/right | N
+readonly | Boolean | undefined | \- | 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; name?:string }) => void`<br/> | N

diff --git a/src/radio/radio.md b/src/radio/radio.md
@@ -20,7 +20,7 @@ label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`
 maxContentRow | Number | 5 | 内容最大行数限制 | N
 maxLabelRow | Number | 3 | 主文案最大行数限制 | N
 name | String | - | HTML 元素原生属性 | N
-placement | String | left | 复选框和内容相对位置。可选项：left/right | N
+placement | String | - | 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定。可选项：left/right | N
 readonly | Boolean | undefined | 只读状态 | N
 value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event }) => void`<br/>选中状态变化时触发 | N
@@ -43,7 +43,8 @@ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/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 \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/radio/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 | - | 选中的值。支持语法糖 `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; name?:string }) => void`<br/>选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N

diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx
@@ -42,12 +42,14 @@ export default defineComponent({
 
     const finalAllowUncheck = computed(() => Boolean(props.allowUncheck || rootGroupProps?.allowUncheck));
 
+    const finalReadonly = computed(() => Boolean(props.readonly || rootGroupProps?.readonly));
+
     // input props attribute
     const inputProps = computed(() => ({
       name: rootGroupProps.name || props.name,
       checked: radioChecked.value,
       disabled: isDisabled.value,
-      readonly: props.readonly,
+      readonly: finalReadonly.value,
       value: props.value,
     }));
 
@@ -92,7 +94,7 @@ export default defineComponent({
     };
 
     const radioOrgChange = (e: Event) => {
-      if (isDisabled.value || props.readonly) {
+      if (isDisabled.value || finalReadonly.value) {
         return;
       }
       if (rootGroupChange) {

diff --git a/src/radio/type.ts b/src/radio/type.ts
@@ -77,8 +77,7 @@ export interface TdRadioProps<T = RadioValue> {
    */
   name?: string;
   /**
-   * 复选框和内容相对位置
-   * @default left
+   * 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
    */
   placement?: 'left' | 'right';
   /**
@@ -129,10 +128,14 @@ export interface TdRadioGroupProps<T = RadioValue> {
    */
   options?: Array<RadioOption>;
   /**
-   * 复选框和内容相对位置
+   * 复选框和内容相对位置。优先级低于 Radio.placement
    * @default left
    */
   placement?: 'left' | 'right';
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
   /**
    * 选中的值
    */