diff --git a/src/radio/__tests__/index.test.jsx b/src/radio/__tests__/index.test.jsx index 7cf6e937d4..5c99541793 100644 --- a/src/radio/__tests__/index.test.jsx +++ b/src/radio/__tests__/index.test.jsx @@ -1,7 +1,7 @@ import { mount } from '@vue/test-utils'; import { it, expect, describe, vi } from 'vitest'; import { nextTick, ref } from 'vue'; -import Radio, { RadioGroup } from '@/src/radio/index.ts'; +import Radio, { RadioButton, RadioGroup } from '@/src/radio/index.ts'; // every component needs four parts: props/events/slots/functions. describe('Radio', () => { @@ -171,6 +171,23 @@ describe('RadioGroup', () => { )); expect(wrapper3.find('.t-radio-group').classes()).toContain(`t-radio-group--filled`); }); + it(':theme', () => { + const wrapper = mount(() => ( + + 选项一 + 选项二 + + )); + expect(wrapper.findComponent(Radio)).toBeTruthy(); + const wrapper2 = mount(() => ( + + 选项一 + 选项二 + + )); + + expect(wrapper2.findComponent(RadioButton)).toBeTruthy(); + }); }); describe(':events', () => { diff --git a/src/radio/_example-ts/group.vue b/src/radio/_example-ts/group.vue index 00ea0f3a92..03e5d60eb3 100644 --- a/src/radio/_example-ts/group.vue +++ b/src/radio/_example-ts/group.vue @@ -18,6 +18,8 @@ 可取消选中项三 不可取消选中项 + + diff --git a/src/radio/_example/group.vue b/src/radio/_example/group.vue index 181b059340..e8f0517923 100644 --- a/src/radio/_example/group.vue +++ b/src/radio/_example/group.vue @@ -18,6 +18,8 @@ 可取消选中项三 不可取消选中项 + + diff --git a/src/radio/group.tsx b/src/radio/group.tsx index fb1fed2652..9062031b78 100644 --- a/src/radio/group.tsx +++ b/src/radio/group.tsx @@ -19,7 +19,8 @@ import throttle from 'lodash/throttle'; import props from './radio-group-props'; import { RadioOptionObj, RadioOption } from './type'; -import Radio from './radio'; +import TRadio from './radio'; +import TRadioButton from './radio-button'; import { RadioGroupInjectionKey } from './constants'; import { usePrefixClass, useCommonClassName } from '../hooks/useConfig'; import useVModel from '../hooks/useVModel'; @@ -168,8 +169,9 @@ export default defineComponent({ if (isNumber(option) || isString(option)) { opt = { value: option, label: option.toString() }; } + const RadioComponent = props.theme === 'button' ? TRadioButton : TRadio; return ( - {isFunction(opt.label) ? opt.label(h) : opt.label} - + ); }); }; diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index 69cf1f9b3a..d297e60c1b 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -38,6 +38,15 @@ export default { return ['small', 'medium', 'large'].includes(val); }, }, + /** 组件风格 */ + theme: { + type: String as PropType, + 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, diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index 9636797713..09163b7189 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -36,6 +36,7 @@ name | String | - | \- | N options | Array | - | Typescript：`Array` `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/src/radio/radio.md b/src/radio/radio.md index 107e0ade91..698743dac3 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -36,6 +36,7 @@ name | String | - | HTML 元素原生属性 | N options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array` `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/src/radio/type.ts b/src/radio/type.ts index 5d70a5521c..bac6a8165e 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -90,6 +90,11 @@ export interface TdRadioGroupProps { * @default medium */ size?: SizeEnum; + /** + * 组件风格 + * @default radio + */ + theme?: 'radio' | 'button'; /** * 选中的值 */ diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index 22be7741af..e01c6e78f7 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/test/unit/snap/__snapshots__/csr.test.js.snap @@ -104119,6 +104119,125 @@ exports[`csr snapshot test > csr test ./src/radio/_example/group.vue 1`] = ` +
+
+ + + + + + + +
+
+ + + `; diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index f46df292db..0eb58a806a 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -832,7 +832,7 @@ exports[`ssr snapshot test > ssr test ./src/radio/_example/base.vue 1`] = `"
ssr test ./src/radio/_example/button.vue 1`] = `"
"`; -exports[`ssr snapshot test > ssr test ./src/radio/_example/group.vue 1`] = `"
可取消选中单选框组
"`; +exports[`ssr snapshot test > ssr test ./src/radio/_example/group.vue 1`] = `"
可取消选中单选框组
"`; exports[`ssr snapshot test > ssr test ./src/radio/_example/size.vue 1`] = `"
"`;