feat(Radio): radio options support radio button (#3402)

myronliu347 · web-flow · commit 1b5b7f29064a · 2024-12-23T16:41:25.000+08:00
* fix(TimePicker): fixed only support hh:mm format

* fix(TimePicker): disabled position only is  start

* fix(Upload): fixed vue error on uploadPastedFiles is false

* docs: add readonly in api

* feat(RadioGroup): 单选组使用options时 支持button 模式
diff --git a/src/radio/_example-composition/group.vue b/src/radio/_example-composition/group.vue
@@ -3,7 +3,6 @@
     <t-space>
       <t-radio-group name="city" v-model="value" :options="options" allowUncheck @change="onChange"></t-radio-group>
     </t-space>
-
     <t-space>
       <t-radio-group v-model="value2" @change="onChange2">
         <t-radio value="1" allow-uncheck>选项一</t-radio>
@@ -12,13 +11,24 @@
         <t-radio value="4" disabled>选项四</t-radio>
       </t-radio-group>
     </t-space>
+    <t-space>
+      <t-radio-group
+        name="city"
+        v-model="value1"
+        :options="options"
+        theme="button"
+        allowUncheck
+        @change="onChange"
+      ></t-radio-group>
+    </t-space>
   </t-space>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
 const value = ref('');
+const value1 = ref('');
 const value2 = ref('');
 const options = ref([
   {
diff --git a/src/radio/_example/group.vue b/src/radio/_example/group.vue
@@ -3,7 +3,6 @@
     <t-space>
       <t-radio-group name="city" v-model="value" :options="options" allowUncheck @change="onChange"></t-radio-group>
     </t-space>
-
     <t-space>
       <t-radio-group v-model="value2" @change="onChange2">
         <t-radio value="1" allow-uncheck>选项一</t-radio>
@@ -12,6 +11,16 @@
         <t-radio value="4" disabled>选项四</t-radio>
       </t-radio-group>
     </t-space>
+    <t-space>
+      <t-radio-group
+        name="city"
+        v-model="value1"
+        :options="options"
+        theme="button"
+        allowUncheck
+        @change="onChange"
+      ></t-radio-group>
+    </t-space>
   </t-space>
 </template>
 
@@ -20,6 +29,7 @@ export default {
   data() {
     return {
       value: '',
+      value1: '',
       value2: '',
       options: [
         {
diff --git a/src/radio/group.tsx b/src/radio/group.tsx
@@ -6,6 +6,7 @@ import {
   TdRadioGroupProps, RadioOptionObj, RadioOption, RadioValue,
 } from './type';
 import Radio from './radio';
+import RadioButton from './radio-button';
 import { TNodeReturnValue } from '../common';
 import { emitEvent } from '../utils/event';
 import { getClassPrefixMixins } from '../config-provider/config-receiver';
@@ -17,7 +18,9 @@ const classPrefixMixins = getClassPrefixMixins('radio-group');
 
 export default mixins(classPrefixMixins).extend({
   name: 'TRadioGroup',
-  props: { ...props },
+  props: {
+    ...props,
+  },
 
   components: {
     Radio,
@@ -52,8 +55,11 @@ export default mixins(classPrefixMixins).extend({
         if (isNumber(option) || isString(option)) {
           opt = { value: option, label: option.toString() };
         }
+
+        const RadioComponent = this.theme === 'button' ? RadioButton : Radio;
+
         return (
-          <Radio
+          <RadioComponent
             props={option}
             key={`radio-group-options-${opt.value}-${index}`}
             name={this.name}
@@ -62,7 +68,7 @@ export default mixins(classPrefixMixins).extend({
             value={opt.value}
           >
             {typeof opt.label === 'function' ? opt.label(h) : opt.label}
-          </Radio>
+          </RadioComponent>
         );
       });
     }
diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts
@@ -24,6 +24,14 @@ export default {
   options: {
     type: Array as PropType<TdRadioGroupProps['options']>,
   },
+  /** 组件风格 */
+  theme: {
+    type: String as PropType<TdRadioGroupProps['theme']>,
+    default: 'radio' as TdRadioGroupProps['theme'],
+    validator(val: TdRadioGroupProps['theme']): boolean {
+      return ['radio', 'button'].includes(val);
+    },
+  },
   /** 组件尺寸【讨论中】 */
   size: {
     type: String as PropType<TdRadioGroupProps['size']>,
diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md
@@ -31,6 +31,7 @@ allowUncheck | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 name | String | - | \- | N
 options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; 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
+theme | String | radio | options：radio/button。 | 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
 value | String / Number / Boolean | - | `v-model` is supported。Typescript：`T` | N
 defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` | N
diff --git a/src/radio/radio.md b/src/radio/radio.md
@@ -31,6 +31,7 @@ allowUncheck | Boolean | false | 是否允许取消选中 | N
 disabled | Boolean | undefined | 是否禁用全部子单选框 | 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; 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
+theme | String | radio | 组件风格,可选项：radio/button。 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 value | String / Number / Boolean | - | 选中的值。支持语法糖 `v-model`。TS 类型：`T` | N
 defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` | N
diff --git a/src/radio/type.ts b/src/radio/type.ts
@@ -90,6 +90,11 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * @default outline
    */
   variant?: 'outline' | 'primary-filled' | 'default-filled';
+
+  /**
+   * 组件风格
+   */
+  theme?: 'radio' | 'button';
   /**
    * 选中值发生变化时触发
    */
diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -84880,6 +84880,111 @@ exports[`csr snapshot test > csr test ./src/radio/_example/group.vue 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-space t-space-horizontal"
+      style="gap: 16px;"
+    >
+      <div
+        class="t-space-item"
+      >
+        <div
+          class="t-radio-group t-size-m t-radio-group__outline"
+        >
+          <label
+            class="t-radio-button"
+            tabindex="0"
+          >
+            <input
+              class="t-radio-button__former"
+              data-allow-uncheck="true"
+              data-value="1"
+              name="city"
+              tabindex="-1"
+              type="radio"
+              value="1"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              选项一
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+            tabindex="0"
+          >
+            <input
+              class="t-radio-button__former"
+              data-allow-uncheck="true"
+              data-value="2"
+              name="city"
+              tabindex="-1"
+              type="radio"
+              value="2"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              选项二
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+            tabindex="0"
+          >
+            <input
+              class="t-radio-button__former"
+              data-allow-uncheck="true"
+              data-value="'3'"
+              name="city"
+              tabindex="-1"
+              type="radio"
+              value="3"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              选项三
+            </span>
+          </label>
+          <label
+            class="t-radio-button"
+            tabindex="0"
+          >
+            <input
+              class="t-radio-button__former"
+              data-allow-uncheck="true"
+              data-value="'4'"
+              name="city"
+              tabindex="-1"
+              type="radio"
+              value="4"
+            />
+            <span
+              class="t-radio-button__input"
+            />
+            <span
+              class="t-radio-button__label"
+            >
+              选项四
+            </span>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
