feat(comp:checkbox): use dataSource instead of options (#753)

BREAKING CHANGE: `options` was deprecated, please use `dataSource` instead
IDuxFE · Feb 15, 2022 · ac2579a · ac2579a
1 parent 9a970de
commit ac2579a
Show file tree

Hide file tree

Showing 23 changed files with 175 additions and 197 deletions.
diff --git a/README.md b/README.md
@@ -58,9 +58,9 @@ See [Getting Started](https://idux.site/docs/getting-started/en) for more detail
 ## ⌨️ Development
 
 ```bash
-npm install
+pnpm install
 
-npm start
+pnpm start
 ```
 
 Open a browser: `http://localhost:3000`

diff --git a/packages/components/checkbox/__tests__/checkboxGroup.spec.ts b/packages/components/checkbox/__tests__/checkboxGroup.spec.ts
@@ -14,10 +14,10 @@ describe('CheckboxGroup', () => {
 
   const CheckboxGroupMount = (groupOptions?: MountingOptions<Partial<CheckboxGroupProps>>) => {
     const { props, ...rest } = groupOptions || {}
-    return mount(CheckboxGroup, { props: { options: defaultOptions, ...props }, ...rest })
+    return mount(CheckboxGroup, { props: { dataSource: defaultOptions, ...props }, ...rest })
   }
 
-  renderWork<CheckboxGroupProps>(CheckboxGroup, { props: { options: defaultOptions } })
+  renderWork<CheckboxGroupProps>(CheckboxGroup, { props: { dataSource: defaultOptions } })
 
   test('v-model:value work', async () => {
     const onUpdateValue = jest.fn()
@@ -68,39 +68,39 @@ describe('CheckboxGroup', () => {
     await wrapper.findAll('input')[0].setValue(false)
 
     expect(onChange).toBeCalledTimes(1)
-    expect(onChange).toBeCalledWith([])
+    expect(onChange).toBeCalledWith([], ['option1'])
   })
 
-  test('options work', async () => {
-    let options = [
+  test('dataSource work', async () => {
+    let dataSource = [
       { label: 'option1', value: 'option1' },
       { label: 'option2', value: 'option2' },
     ]
-    const wrapper = CheckboxGroupMount({ props: { options } })
+    const wrapper = CheckboxGroupMount({ props: { dataSource } })
 
     expect(wrapper.findAll('.ix-checkbox').length).toBe(2)
 
-    options = [
+    dataSource = [
       { label: 'option1', value: 'option1' },
       { label: 'option2', value: 'option2' },
       { label: 'option3', value: 'option3' },
     ]
 
-    await wrapper.setProps({ options })
+    await wrapper.setProps({ dataSource })
 
     expect(wrapper.findAll('.ix-checkbox').length).toBe(3)
   })
 
   test('name work', async () => {
-    const options = [
+    const dataSource = [
       { label: 'option1', value: 'option1', name: 'child' },
       { label: 'option2', value: 'option2' },
       { label: 'option3', value: 'option3' },
     ]
     const wrapper = CheckboxGroupMount({
       props: {
         name: 'group',
-        options,
+        dataSource,
       },
     })
 

diff --git a/packages/components/checkbox/demo/Button.vue b/packages/components/checkbox/demo/Button.vue
@@ -1,22 +1,21 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" buttoned>
-      <IxCheckbox value="beijing">Beijing</IxCheckbox>
-      <IxCheckbox value="shanghai">Shanghai</IxCheckbox>
-      <IxCheckbox value="guangzhou">Guangzhou</IxCheckbox>
-      <IxCheckbox value="shenzhen">Shenzhen</IxCheckbox>
-    </IxCheckboxGroup>
-    <IxCheckboxGroup v-model:value="value" buttoned disabled>
-      <IxCheckbox value="beijing">Beijing</IxCheckbox>
-      <IxCheckbox value="shanghai">Shanghai</IxCheckbox>
-      <IxCheckbox value="guangzhou">Guangzhou</IxCheckbox>
-      <IxCheckbox value="shenzhen">Shenzhen</IxCheckbox>
-    </IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" buttoned :dataSource="dataSource"></IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" buttoned :dataSource="dataSource" disabled></IxCheckboxGroup>
   </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
+import { CheckboxData } from '@idux/components/checkbox'
+
 const value = ref(['beijing'])
+
+const dataSource: CheckboxData[] = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
 </script>
diff --git a/packages/components/checkbox/demo/Gap.vue b/packages/components/checkbox/demo/Gap.vue
@@ -1,7 +1,7 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" />
-    <IxCheckboxGroup v-model:value="value" :options="options" :gap="16" buttoned />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" :gap="16" />
+    <IxCheckboxGroup 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' },

diff --git a/packages/components/checkbox/demo/Group.vue b/packages/components/checkbox/demo/Group.vue
@@ -1,15 +1,21 @@
 <template>
-  <IxCheckboxGroup v-model:value="value" @Change="onChang">
-    <IxCheckbox value="a">A</IxCheckbox>
-    <IxCheckbox value="b">B</IxCheckbox>
-    <IxCheckbox value="c">C</IxCheckbox>
-    <IxCheckbox value="d">D</IxCheckbox>
-  </IxCheckboxGroup>
+  <IxSpace vertical>
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource"></IxCheckboxGroup>
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned></IxCheckboxGroup>
+  </IxSpace>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const value = ref(['a'])
-const onChang = console.log
+import { CheckboxData } from '@idux/components/checkbox'
+
+const value = ref(['beijing'])
+
+const dataSource: CheckboxData[] = [
+  { label: 'Beijing', value: 'beijing' },
+  { label: 'Shanghai', value: 'shanghai' },
+  { label: 'Guangzhou', value: 'guangzhou' },
+  { label: 'Shenzhen', value: 'shenzhen' },
+]
 </script>
diff --git a/packages/components/checkbox/demo/Indeterminate.vue b/packages/components/checkbox/demo/Indeterminate.vue
@@ -3,7 +3,7 @@
     <IxCheckbox v-model:checked="isCheckAll" :indeterminate="indeterminate" @change="onCheckAllChange">
       Check all
     </IxCheckbox>
-    <IxCheckboxGroup v-model:value="groupValue" :options="options" />
+    <IxCheckboxGroup v-model:value="groupValue" :dataSource="dataSource" />
   </IxSpace>
 </template>
 
@@ -15,7 +15,7 @@ const list = ['Apple', 'Pear', 'Orange']
 const isCheckAll = ref(false)
 const indeterminate = ref(true)
 const groupValue = ref(['Apple', 'Orange'])
-const options = list.map(item => {
+const dataSource = list.map(item => {
   return { label: item, value: item }
 })
 

diff --git a/packages/components/checkbox/demo/Options.md b/packages/components/checkbox/demo/Options.md
diff --git a/packages/components/checkbox/demo/Options.vue b/packages/components/checkbox/demo/Options.vue
diff --git a/packages/components/checkbox/demo/Size.vue b/packages/components/checkbox/demo/Size.vue
@@ -1,8 +1,8 @@
 <template>
   <IxSpace vertical>
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="sm" />
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned />
-    <IxCheckboxGroup v-model:value="value" :options="options" buttoned size="lg" />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned size="sm" />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned />
+    <IxCheckboxGroup v-model:value="value" :dataSource="dataSource" buttoned size="lg" />
   </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' },

diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
@@ -16,20 +16,18 @@ cover:
 
 | 名称 | 说明 |  类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
+| `v-model:checked` | 指定当前勾选框是否选中 |  `boolean \| string \| number`  | - | - | 使用 `control` 时，此配置无效 |
 | `autofocus` | 是否以自动聚焦 | `boolean` | `false` | - | - |.
 | `buttoned` | 是否以按钮显示 | `boolean` | - | - | - |
 | `disabled` | 禁用状态 |`boolean`| - | - | 使用 `control` 时，此配置无效 |
 | `indeterminate` | 是否处于不确定状态 | `boolean` | `false`| - | 当值为`true`时，按钮样式处于半选状态，且不受`checked`影响 |
 | `label` | 勾选框的文本 | `string \| #default` | - | - | - |
-| `trueValue` | 勾选框选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
-| `falseValue` | 勾选框不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
+| `trueValue` | 选中时返回的值 |  `boolean \| string \| number`  | `true`| - | - |
+| `falseValue` | 不选中时返回的值 | `boolean \| string \| number` | `false`| - | - |
 | `value` | 设置勾选框的值，与 `IxCheckboxGroup` 配合使用 | `any`| - | - | - |
 | `size` | 按钮大小 | `'sm' \| 'md' \| 'lg'` | - | `'md'` | 仅`buttoned`为`true`时生效 |
-| `onBlur` | 失去焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
-| `onChange` | 选中状态发生变化后的回调 | `(checked: boolean \| string \| number) => void`| - | - | - |
-| `onFocus` | 获取焦点后触发 | `(evt: FocusEvent) => void`| - | - | - |
+| `onChange` | 选中状态发生变化后的回调 | `(newChecked: boolean \| string \| number, oldChecked: boolean \| string \| number) => void`| - | - | - |
 
 #### CheckboxMethods
 
@@ -44,51 +42,51 @@ cover:
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
-| `buttoned` | 子`IxCheckbox`的`buttoned`属性 | `boolean` | `false` | - | - |
-| `disabled` | 子`IxCheckbox`的`disabled`属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
-| `gap` | 子`IxCheckbox` 的间隔 | `number \| string` | - | - | - |
-| `name` | 子`IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
-| `options` | 以配置形式设置子元素 | `CheckboxOption[]`| - | - | 优先级高于 `default` 插槽 |
-| `size` | 子`IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
-| `onChange` | 选中值发生变化后的回调 | `(value: Array<string \| number>) => void`| - | - | - |
-
-<!--- insert less variable begin  --->
-## 主题变量
-
-| 名称 | `default` | `dark` | 备注 |
-| --- | --- | --- | --- |
-| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
-| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
-| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@checkbox-line-height` | `@form-line-height` | - | - |
-| `@checkbox-height-sm` | `@form-height-sm` | - | - |
-| `@checkbox-height-md` | `@form-height-md` | - | - |
-| `@checkbox-height-lg` | `@form-height-lg` | - | - |
-| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
-| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
-| `@checkbox-border-width` | `@form-border-width` | - | - |
-| `@checkbox-border-style` | `@form-border-style` | - | - |
-| `@checkbox-border-color` | `@form-border-color` | - | - |
-| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-color` | `@form-color` | - | - |
-| `@checkbox-background-color` | `@form-background-color` | - | - |
-| `@checkbox-hover-color` | `@form-hover-color` | - | - |
-| `@checkbox-active-color` | `@form-active-color` | - | - |
-| `@checkbox-focus-color` | `@form-focus-color` | - | - |
-| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
-| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
-| `@checkbox-font-size` | `@font-size-md` | - | - |
-| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
-| `@checkbox-box-size` | `16px` | - | - |
-| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-indeterminate-width` | `8px` | - | - |
-| `@checkbox-indeterminate-height` | `2px` | - | - |
-| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
-| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
-| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
-| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
-| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
-<!--- insert less variable end  --->
+| `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
+| `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
+| `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
+| `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
+| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
+| `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
+| `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
+| `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
+
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | `default` | `dark` | 备注 |
+| --- | --- | --- | --- |
+| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
+| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
+| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
+| `@checkbox-line-height` | `@form-line-height` | - | - |
+| `@checkbox-height-sm` | `@form-height-sm` | - | - |
+| `@checkbox-height-md` | `@form-height-md` | - | - |
+| `@checkbox-height-lg` | `@form-height-lg` | - | - |
+| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
+| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
+| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
+| `@checkbox-border-width` | `@form-border-width` | - | - |
+| `@checkbox-border-style` | `@form-border-style` | - | - |
+| `@checkbox-border-color` | `@form-border-color` | - | - |
+| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-color` | `@form-color` | - | - |
+| `@checkbox-background-color` | `@form-background-color` | - | - |
+| `@checkbox-hover-color` | `@form-hover-color` | - | - |
+| `@checkbox-active-color` | `@form-active-color` | - | - |
+| `@checkbox-focus-color` | `@form-focus-color` | - | - |
+| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
+| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
+| `@checkbox-font-size` | `@font-size-md` | - | - |
+| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
+| `@checkbox-box-size` | `16px` | - | - |
+| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-indeterminate-width` | `8px` | - | - |
+| `@checkbox-indeterminate-height` | `2px` | - | - |
+| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
+| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
+| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
+| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
+| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
+<!--- insert less variable end  --->
diff --git a/packages/components/checkbox/index.ts b/packages/components/checkbox/index.ts
@@ -22,5 +22,5 @@ export type {
   CheckboxGroupInstance,
   CheckboxGroupComponent,
   CheckboxGroupPublicProps as CheckboxGroupProps,
-  CheckboxOption,
+  CheckboxData,
 } from './src/types'