feat(Radio): radio-group support theme api (#503)

* feat(Radio): radio-group support theme api * chore: reset defaultProps.ts radioDefaultProps type * chore: adjustment stylelint * feat: theme 仅pc 支持 --------- Co-authored-by: 黎伟杰 <674416404@qq.com>
TDesignOteam · Dec 30, 2024 · 09ef7eb · 09ef7eb
1 parent 8f746ac
commit 09ef7eb
Show file tree

Hide file tree

Showing 14 changed files with 81 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/radio/defaultProps.ts b/packages/products/tdesign-react/src/radio/defaultProps.ts
@@ -17,5 +17,6 @@ export const radioGroupDefaultProps: TdRadioGroupProps = {
   disabled: undefined,
   readonly: undefined,
   size: 'medium',
+  theme: 'radio',
   variant: 'outline',
 };
diff --git a/packages/products/tdesign-react/src/radio/radio.en-US.md b/packages/products/tdesign-react/src/radio/radio.en-US.md
@@ -33,6 +33,7 @@ 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-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | radio | component Style。options: radio/button | N
 value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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-react/blob/develop/src/radio/type.ts) | N
 variant | String | outline | options: outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-react/src/radio/radio.md b/packages/products/tdesign-react/src/radio/radio.md
@@ -33,6 +33,7 @@ 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-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | radio | 组件风格。可选项：radio/button | N
 value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-react/src/radio/type.ts b/packages/products/tdesign-react/src/radio/type.ts
@@ -86,6 +86,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中的值
    */

diff --git a/packages/products/tdesign-vue-next/src/radio/radio-group-props.ts b/packages/products/tdesign-vue-next/src/radio/radio-group-props.ts
@@ -38,6 +38,15 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdRadioGroupProps['theme']>,
+    default: 'radio' as TdRadioGroupProps['theme'],
+    validator(val: TdRadioGroupProps['theme']): boolean {
+      if (!val) return true;
+      return ['radio', 'button'].includes(val);
+    },
+  },
   /** 选中的值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdRadioGroupProps['value']>,

diff --git a/packages/products/tdesign-vue-next/src/radio/radio.en-US.md b/packages/products/tdesign-vue-next/src/radio/radio.en-US.md
@@ -36,6 +36,7 @@ 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-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | radio | component Style。options: radio/button | 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-vue-next/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-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | options: outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-vue-next/src/radio/radio.md b/packages/products/tdesign-vue-next/src/radio/radio.md
@@ -36,6 +36,7 @@ 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-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+theme | String | radio | 组件风格。可选项：radio/button | N
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-vue-next/src/radio/type.ts b/packages/products/tdesign-vue-next/src/radio/type.ts
@@ -90,6 +90,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中的值
    */

diff --git a/packages/products/tdesign-vue/src/radio/radio-group-props.ts b/packages/products/tdesign-vue/src/radio/radio-group-props.ts
@@ -38,6 +38,15 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdRadioGroupProps['theme']>,
+    default: 'radio' as TdRadioGroupProps['theme'],
+    validator(val: TdRadioGroupProps['theme']): boolean {
+      if (!val) return true;
+      return ['radio', 'button'].includes(val);
+    },
+  },
   /** 选中的值 */
   value: {
     type: [String, Number, Boolean] as PropType<TdRadioGroupProps['value']>,

diff --git a/packages/products/tdesign-vue/src/radio/radio.en-US.md b/packages/products/tdesign-vue/src/radio/radio.en-US.md
@@ -36,6 +36,7 @@ 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-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+theme | String | radio | component Style。options: radio/button | N
 value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-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-vue/tree/develop/src/radio/type.ts) | N
 variant | String | outline | options: outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-vue/src/radio/radio.md b/packages/products/tdesign-vue/src/radio/radio.md
@@ -36,6 +36,7 @@ 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-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N
 readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
+theme | String | radio | 组件风格。可选项：radio/button | N
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model`。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N

diff --git a/packages/products/tdesign-vue/src/radio/type.ts b/packages/products/tdesign-vue/src/radio/type.ts
@@ -85,6 +85,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 组件风格
+   * @default radio
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中的值
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -90352,6 +90352,47 @@
         "String"
       ]
     },
+    {
+      "id": 1735405582,
+      "platform_framework": [
+        "1",
+        "2",
+        "4"
+      ],
+      "component": "RadioGroup",
+      "field_category": 1,
+      "field_name": "theme",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "radio",
+      "field_enum": "radio/button",
+      "field_desc_zh": "组件风格",
+      "field_desc_en": "component Style",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-12-28 17:06:22",
+      "update_time": "2024-12-28 17:06:22",
+      "event_output": null,
+      "custom_field_type": "",
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
     {
       "id": 495,
       "platform_framework": [