Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
+22 −11
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca41d18
fix(radio): fix placement get value priority
liweijie0812 Dec 6, 2024
d5d45da
docs: sync api
liweijie0812 Dec 6, 2024
a618ec0
fix: finalPlacement
liweijie0812 Dec 6, 2024
21c6679
feat: group readonly
liweijie0812 Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions src/radio/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 6 additions & 1 deletion src/radio/radio-group-props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
Expand All @@ -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']>,
Expand Down
3 changes: 2 additions & 1 deletion src/radio/radio.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
5 changes: 3 additions & 2 deletions src/radio/radio.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
6 changes: 4 additions & 2 deletions src/radio/radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}));

Expand Down Expand Up @@ -92,7 +94,7 @@ export default defineComponent({
};

const radioOrgChange = (e: Event) => {
if (isDisabled.value || props.readonly) {
if (isDisabled.value || finalReadonly.value) {
return;
}
if (rootGroupChange) {
Expand Down
9 changes: 6 additions & 3 deletions src/radio/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,7 @@ export interface TdRadioProps<T = RadioValue> {
*/
name?: string;
/**
* 复选框和内容相对位置
* @default left
* 复选框和内容相对位置。优先级高于 RadioGroup.placement。Radio 单独存在时，默认值为 left。如果父组件存在 RadioGroup，默认值便由 RadioGroup.placement 决定
*/
placement?: 'left' | 'right';
/**
Expand Down Expand Up @@ -129,10 +128,14 @@ export interface TdRadioGroupProps<T = RadioValue> {
*/
options?: Array<RadioOption>;
/**
* 复选框和内容相对位置
* 复选框和内容相对位置。优先级低于 Radio.placement
* @default left
*/
placement?: 'left' | 'right';
/**
* 只读状态
*/
readonly?: boolean;
/**
* 选中的值
*/
Expand Down
Loading