()
expose({ focus, blur })
const formContext = inject(FORM_TOKEN, null)
@@ -125,11 +125,12 @@ const useRadio = (
if (elementRef.value) {
const checked = (evt.target as HTMLInputElement).checked
const value = props.value
+ const oldValue = accessor.valueRef.value
accessor.setValue(value)
// 为了保持受控模式下保持原生input状态和数据一致
elementRef.value.checked = false
- callEmit(props.onChange, checked)
- callEmit(groupProps.onChange, value)
+ callEmit(props.onChange, checked, !checked)
+ callEmit(groupProps.onChange, value, oldValue)
}
}
} else {
@@ -146,7 +147,7 @@ const useRadio = (
const checked = (evt.target as HTMLInputElement).checked
accessor.setValue(checked)
elementRef.value.checked = false
- callEmit(props.onChange, checked)
+ callEmit(props.onChange, checked, !checked)
}
}
}
diff --git a/packages/components/radio/src/RadioGroup.tsx b/packages/components/radio/src/RadioGroup.tsx
index 055ddf1f8..ee9da650c 100644
--- a/packages/components/radio/src/RadioGroup.tsx
+++ b/packages/components/radio/src/RadioGroup.tsx
@@ -5,11 +5,11 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { computed, defineComponent, provide } from 'vue'
+import { computed, defineComponent, normalizeClass, provide } from 'vue'
import { isNil } from 'lodash-es'
-import { convertCssPixel } from '@idux/cdk/utils'
+import { Logger, convertCssPixel } from '@idux/cdk/utils'
import { useGlobalConfig } from '@idux/components/config'
import { useFormAccessor } from '@idux/components/utils'
@@ -31,20 +31,24 @@ export default defineComponent({
const classes = computed(() => {
const { gap } = props
const prefixCls = mergedPrefixCls.value
- return {
+ return normalizeClass({
[prefixCls]: true,
[`${prefixCls}-with-gap`]: !isNil(gap),
- }
+ })
})
const style = computed(() => {
const { gap } = props
- return gap !== 0 ? `gap: ${convertCssPixel(gap)};` : undefined
+ return gap != null ? `gap: ${convertCssPixel(gap)};` : undefined
})
return () => {
- const { options } = props
- const children = options ? options.map(option => ) : slots.default?.()
+ const { options, dataSource } = props
+ if (options) {
+ Logger.warn('components/radio', '`options` was deprecated, please use `dataSource` instead')
+ }
+ const data = options ?? dataSource
+ const children = data ? data.map(item => ) : slots.default?.()
return (
{children}
diff --git a/packages/components/radio/src/types.ts b/packages/components/radio/src/types.ts
index 75f68591f..f9750d134 100644
--- a/packages/components/radio/src/types.ts
+++ b/packages/components/radio/src/types.ts
@@ -7,22 +7,19 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { IxInnerPropTypes, IxPublicPropTypes } from '@idux/cdk/utils'
-import type { FormSize } from '@idux/components/form'
-import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes } from 'vue'
+import { type DefineComponent, type HTMLAttributes, type LabelHTMLAttributes } from 'vue'
import { controlPropDef } from '@idux/cdk/forms'
-import { IxPropTypes } from '@idux/cdk/utils'
-
-export type RadioMode = 'default' | 'primary'
-export type RadioOption = Omit
+import { type IxInnerPropTypes, IxPropTypes, type IxPublicPropTypes, type VKey } from '@idux/cdk/utils'
+import { type FormSize } from '@idux/components/form'
export const radioProps = {
+ control: controlPropDef,
checked: IxPropTypes.bool,
autofocus: IxPropTypes.bool.def(false),
buttoned: IxPropTypes.bool,
- control: controlPropDef,
+
disabled: IxPropTypes.bool,
label: IxPropTypes.string,
mode: IxPropTypes.oneOf(['default', 'primary']),
@@ -31,7 +28,7 @@ export const radioProps = {
// events
'onUpdate:checked': IxPropTypes.emit<(checked: boolean) => void>(),
- onChange: IxPropTypes.emit<(checked: boolean) => void>(),
+ onChange: IxPropTypes.emit<(checked: boolean, oldChecked: boolean) => void>(),
onBlur: IxPropTypes.emit<(evt: FocusEvent) => void>(),
onFocus: IxPropTypes.emit<(evt: FocusEvent) => void>(),
}
@@ -49,19 +46,21 @@ export type RadioComponent = DefineComponent<
export type RadioInstance = InstanceType>
export const radioGroupProps = {
- value: IxPropTypes.any,
control: controlPropDef,
+ value: IxPropTypes.any,
+
buttoned: IxPropTypes.bool.def(false),
+ dataSource: IxPropTypes.array(),
disabled: IxPropTypes.bool.def(false),
gap: IxPropTypes.oneOfType([Number, String]),
name: IxPropTypes.string,
mode: IxPropTypes.oneOf(['default', 'primary']),
- options: IxPropTypes.array(),
+ options: IxPropTypes.array(),
size: IxPropTypes.oneOf(['sm', 'md', 'lg']).def('md'),
// events
'onUpdate:value': IxPropTypes.emit<(value: any) => void>(),
- onChange: IxPropTypes.emit<(value: any) => void>(),
+ onChange: IxPropTypes.emit<(value: any, oldValue: any) => void>(),
}
export type RadioGroupProps = IxInnerPropTypes
@@ -70,3 +69,8 @@ export type RadioGroupComponent = DefineComponent<
Omit & RadioGroupPublicProps
>
export type RadioGroupInstance = InstanceType>
+
+export type RadioMode = 'default' | 'primary'
+export interface RadioData extends RadioPublicProps {
+ key?: VKey
+}