refactor(comp:radio): use dataSource instead of options (#771)

BREAKING CHANGE: `options` was deprecated, please use `dataSource` instead

packages/components/radio/__tests__/__snapshots__/radioGroup.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RadioGroup render work 1`] = `"<label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" options=\\"[object Object],[object Object],[object Object],[object Object]\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Test</span></label>"`;
+exports[`RadioGroup render work 1`] = `"<div class=\\"ix-radio-group\\"><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"a\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Beijing</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"b\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shanghai</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"c\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Guangzhou</span></label><label class=\\"ix-radio\\" role=\\"radio\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-radio-input\\"><input type=\\"radio\\" class=\\"ix-radio-input-inner\\" aria-hidden=\\"true\\" value=\\"d\\"><span class=\\"ix-radio-input-box\\"></span></span><span class=\\"ix-radio-label\\">Shenzhen</span></label></div>"`;

packages/components/radio/__tests__/radioGroup.spec.ts

@@ -8,18 +8,18 @@ import RadioGroup from '../src/RadioGroup'
 import { RadioGroupProps } from '../src/types'
 
 describe('RadioGroup', () => {
-  const defaultOptions = [
+  const defaultDataSource = [
     { label: 'Beijing', value: 'a' },
     { label: 'Shanghai', value: 'b' },
     { label: 'Guangzhou', value: 'c' },
     { label: 'Shenzhen', value: 'd' },
   ]
   const RadioGroupMount = (groupOptions?: MountingOptions<Partial<RadioGroupProps>>) => {
     const { props, ...rest } = groupOptions || {}
-    return mount(RadioGroup, { props: { options: defaultOptions, ...props }, ...rest })
+    return mount(RadioGroup, { props: { dataSource: defaultDataSource, ...props }, ...rest })
   }
 
-  renderWork<RadioGroupProps>(Radio, { props: { label: 'Test', options: defaultOptions } })
+  renderWork<RadioGroupProps>(RadioGroup, { props: { dataSource: defaultDataSource } })
 
   test('value work', async () => {
     const wrapper = RadioGroupMount({ props: { value: 'a' } })
@@ -31,7 +31,7 @@ describe('RadioGroup', () => {
     expect(wrapper.find('.ix-radio-checked').text()).toBe('Shanghai')
   })
 
-  test('onUpdate:checked work', async () => {
+  test('onUpdate:value work', async () => {
     const onUpdate = jest.fn()
     const wrapper = RadioGroupMount({ props: { 'onUpdate:value': onUpdate } })
 
@@ -96,22 +96,30 @@ describe('RadioGroup', () => {
     expect(wrapper.findAll('.ix-radio-default').length).toBe(4)
   })
 
-  test('options work', async () => {
-    let options = [
+  test('dataSource work', async () => {
+    let dataSource = [
       { label: 'Beijing', value: 'a' },
       { label: 'Shanghai', value: 'b' },
     ]
-    const wrapper = RadioGroupMount({ props: { options } })
+    const wrapper = RadioGroupMount({ props: { dataSource } })
 
     expect(wrapper.findAll('.ix-radio').length).toBe(2)
 
-    options = [
+    dataSource = [
       { label: 'Beijing', value: 'a' },
       { label: 'Shanghai', value: 'b' },
       { label: 'Guangzhou', value: 'c' },
     ]
 
-    await wrapper.setProps({ options })
+    await wrapper.setProps({ dataSource })
+
+    expect(wrapper.findAll('.ix-radio').length).toBe(3)
+  })
+
+  test('default slot work', async () => {
+    const dataSource = undefined
+    const slots = [h(Radio, { label: 'A' }), h(Radio, { label: 'B' }), h(Radio, { label: 'C' })]
+    const wrapper = RadioGroupMount({ props: { dataSource }, slots: { default: () => slots } })
 
     expect(wrapper.findAll('.ix-radio').length).toBe(3)
   })
@@ -129,12 +137,4 @@ describe('RadioGroup', () => {
 
     expect(wrapper.findAll('.ix-radio-md').length).toBe(4)
   })
-
-  test('default slot work', async () => {
-    const options = undefined
-    const slots = [h(Radio, { label: 'A' }), h(Radio, { label: 'B' }), h(Radio, { label: 'C' })]
-    const wrapper = RadioGroupMount({ props: { options }, slots: { default: () => slots } })
-
-    expect(wrapper.findAll('.ix-radio').length).toBe(3)
-  })
 })

packages/components/radio/demo/Buttoned.vue

@@ -1,28 +1,20 @@
 <template>
   <IxSpace vertical>
-    <IxRadioGroup v-model:value="value" buttoned>
-      <IxRadio value="beijing">Beijing</IxRadio>
-      <IxRadio value="shanghai">Shanghai</IxRadio>
-      <IxRadio value="guangzhou">Guangzhou</IxRadio>
-      <IxRadio value="shenzhen">Shenzhen</IxRadio>
-    </IxRadioGroup>
-    <IxRadioGroup v-model:value="value" buttoned mode="primary">
-      <IxRadio value="beijing">Beijing</IxRadio>
-      <IxRadio value="shanghai">Shanghai</IxRadio>
-      <IxRadio value="guangzhou">Guangzhou</IxRadio>
-      <IxRadio value="shenzhen">Shenzhen</IxRadio>
-    </IxRadioGroup>
-    <IxRadioGroup v-model:value="value" buttoned disabled>
-      <IxRadio value="beijing">Beijing</IxRadio>
-      <IxRadio value="shanghai">Shanghai</IxRadio>
-      <IxRadio value="guangzhou">Guangzhou</IxRadio>
-      <IxRadio value="shenzhen">Shenzhen</IxRadio>
-    </IxRadioGroup>
+    <IxRadioGroup v-model:value="value" buttoned :dataSource="dataSource"> </IxRadioGroup>
+    <IxRadioGroup v-model:value="value" buttoned :dataSource="dataSource" mode="primary"> </IxRadioGroup>
+    <IxRadioGroup v-model:value="value" buttoned :dataSource="dataSource" disabled> </IxRadioGroup>
   </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
 const value = ref('beijing')
+
+const dataSource = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
 </script>

packages/components/radio/demo/Gap.vue

@@ -1,7 +1,7 @@
 <template>
   <IxSpace vertical>
-    <IxRadioGroup v-model:value="value" :options="options" :gap="16" />
-    <IxRadioGroup v-model:value="value" :options="options" :gap="16" buttoned />
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" :gap="16" />
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" :gap="16" buttoned />
   </IxSpace>
 </template>
 
@@ -10,7 +10,7 @@ import { ref } from 'vue'
 
 const value = ref('beijing')
 
-const options = [
+const dataSource = [
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Guangzhou', value: 'guangzhou' },

packages/components/radio/demo/Group.vue

@@ -1,15 +1,20 @@
 <template>
-  <IxRadioGroup v-model:value="value" @Change="onChange">
-    <IxRadio value="a">A</IxRadio>
-    <IxRadio value="b">B</IxRadio>
-    <IxRadio value="c">C</IxRadio>
-    <IxRadio value="d">D</IxRadio>
-  </IxRadioGroup>
+  <IxRadioGroup v-model:value="value" :dataSource="dataSource" @Change="onChange"> </IxRadioGroup>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const value = ref('a')
+import { RadioData } from '@idux/components/radio'
+
+const value = ref('beijing')
+
+const dataSource: RadioData[] = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
+
 const onChange = console.log
 </script>

packages/components/radio/demo/Name.vue

@@ -1,8 +1,8 @@
 <template>
   <IxSpace vertical>
-    <IxRadioGroup v-model:value="value" :options="options" name="city"></IxRadioGroup>
-    <IxRadioGroup v-model:value="value2" :options="options" name="city2" buttoned></IxRadioGroup>
-    <IxRadioGroup v-model:value="value3" :options="options" name="city3" buttoned mode="primary"></IxRadioGroup>
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" name="city"></IxRadioGroup>
+    <IxRadioGroup v-model:value="value2" :dataSource="dataSource" name="city2" buttoned></IxRadioGroup>
+    <IxRadioGroup v-model:value="value3" :dataSource="dataSource" name="city3" buttoned mode="primary"></IxRadioGroup>
   </IxSpace>
 </template>
 
@@ -13,7 +13,7 @@ const value = ref('beijing')
 const value2 = ref('beijing')
 const value3 = ref('beijing')
 
-const options = [
+const dataSource = [
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Guangzhou', value: 'guangzhou' },

packages/components/radio/demo/Size.vue

@@ -1,8 +1,8 @@
 <template>
   <IxSpace vertical>
-    <IxRadioGroup v-model:value="value" :options="options" buttoned size="sm"></IxRadioGroup>
-    <IxRadioGroup v-model:value="value" :options="options" buttoned></IxRadioGroup>
-    <IxRadioGroup v-model:value="value" :options="options" buttoned size="lg">></IxRadioGroup>
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" buttoned size="sm"></IxRadioGroup>
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" buttoned></IxRadioGroup>
+    <IxRadioGroup v-model:value="value" :dataSource="dataSource" buttoned size="lg">></IxRadioGroup>
   </IxSpace>
 </template>
 
@@ -11,7 +11,7 @@ import { ref } from 'vue'
 
 const value = ref('beijing')
 
-const options = [
+const dataSource = [
   { label: 'Beijing', value: 'beijing' },
   { label: 'Shanghai', value: 'shanghai' },
   { label: 'Guangzhou', value: 'guangzhou' },

packages/components/radio/docs/Index.zh.md

@@ -13,16 +13,16 @@ subtitle: 单选框
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `v-model:checked` | 是否选中 | `boolean` | - | - | 使用 `control` 时，此配置无效 |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:checked` | 是否选中 | `boolean` | - | - | 使用 `control` 时，此配置无效 |
 | `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |
 | `buttoned` | 是否以按钮显示 | `boolean` | `false` | - | - |
 | `disabled` | 是否为禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `label` | 单选框的文本 | `string \| #default` | `false` | - | - |
 | `mode` | 按钮类型 | `'default' \| 'primary'`| `'default'` | - | 仅 `buttoned` 为 `true` 时生效  |
 | `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'`| `'md'` | ✅ | 仅 `buttoned` 为 `true` 时生效 |
 | `value` | 设置单选框的值，与 `IxRadioGroup` 配合使用 | `any`| - | - | - |
-| `onChange` | 选中状态发生变化后的回调 | `(checked: boolean) => void`| - | - | - |
+| `onChange` | 选中状态发生变化后的回调 | `(checked: boolean, oldChecked: boolean) => void`| - | - | - |
 | `onBlur` | 失去焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
 | `onFocus` | 获取焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
 
@@ -39,16 +39,16 @@ subtitle: 单选框
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
+| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
 | `v-model:value` | 当前选中的值 | `any` | - | - | 使用 `control` 时，此配置无效 |
 | `buttoned` | 设置单选框组内 `IxRadio` 的 `buttoned` | `boolean` | - | - | - |
-| `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
 | `disabled` | 设置单选框组内 `IxRadio` 的 `disabled` | `boolean` | - | - | 使用 `control` 时，此配置无效 |
 | `gap` | 设置单选框组内的 `IxRadio` 的间隔 | `number \| string` | - | - | - |
 | `name` | 设置单选框组内的 `IxRadio` 的原生 `name` 属性 | `string` | - | - | - |
 | `mode` | 设置单选框组内 `IxRadio` 的 `mode` | `'default' \| 'primary'`| - | - | - |
-| `options` | 以配置形式设置子元素 | `RadioOption[]`| - | 优先级高于 `default` 插槽 |  |
+| `dataSource` | 以配置形式设置子元素 | `RadioData[]`| - | 优先级高于 `default` 插槽 |  |
 | `size` | 设置单选框组内 `IxRadio` 的 `size` | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
-| `onChange` | 选中值发生变化后的回调 | `(value: any) => void`| - | - | - |
+| `onChange` | 选中值发生变化后的回调 | `(value: any, oldValue: any) => void`| - | - | - |
 
 <!--- insert less variable begin  --->
 ## 主题变量

packages/components/radio/index.ts

@@ -23,5 +23,5 @@ export type {
   RadioGroupComponent,
   RadioGroupPublicProps as RadioGroupProps,
   RadioMode,
-  RadioOption,
+  RadioData,
 } from './src/types'

packages/components/radio/src/Radio.tsx

@@ -28,7 +28,7 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-radio`)
     const config = useGlobalConfig('radio')
 
-    const { elementRef, focus, blur } = useFormElement()
+    const { elementRef, focus, blur } = useFormElement<HTMLInputElement>()
     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)
       }
     }
   }

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 => <Radio {...option}></Radio>) : 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 => <Radio {...item} />) : slots.default?.()
       return (
         <div class={classes.value} style={style.value}>
           {children}