refactor(comp:select): api redesign (#773)

BREAKING CHANGE: `compareWith` was deprecated, please use `compareFn` instead, `options` was deprecated, please use `dataSource` instead, `searchFilter` was deprecated, please use `searchFn` instead.
IDuxFE · Mar 1, 2022 · 934c0b2 · 934c0b2
1 parent 25e85a3
commit 934c0b2
Show file tree

Hide file tree

Showing 24 changed files with 177 additions and 166 deletions.
diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md
@@ -42,11 +42,11 @@ subtitle: 单选框
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
 | `v-model:value` | 当前选中的值 | `any` | - | - | 使用 `control` 时，此配置无效 |
 | `buttoned` | 设置单选框组内 `IxRadio` 的 `buttoned` | `boolean` | - | - | - |
+| `dataSource` | 以配置形式设置子元素 | `RadioData[]`| - | 优先级高于 `default` 插槽 |  |
 | `disabled` | 设置单选框组内 `IxRadio` 的 `disabled` | `boolean` | - | - | 使用 `control` 时，此配置无效 |
 | `gap` | 设置单选框组内的 `IxRadio` 的间隔 | `number \| string` | - | - | - |
 | `name` | 设置单选框组内的 `IxRadio` 的原生 `name` 属性 | `string` | - | - | - |
 | `mode` | 设置单选框组内 `IxRadio` 的 `mode` | `'default' \| 'primary'`| - | - | - |
-| `dataSource` | 以配置形式设置子元素 | `RadioData[]`| - | 优先级高于 `default` 插槽 |  |
 | `size` | 设置单选框组内 `IxRadio` 的 `size` | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
 | `onChange` | 选中值发生变化后的回调 | `(value: any, oldValue: any) => void`| - | - | - |
 

diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
@@ -14,7 +14,7 @@ import { SelectData, SelectProps } from '../src/types'
 
 describe('Select', () => {
   describe('single work', () => {
-    const defaultOptions = [
+    const defaultDataSource = [
       { key: 1, label: 'Tom', value: 'tom' },
       { key: 2, label: 'Jerry', value: 'jerry' },
       { key: 3, label: 'Speike', value: 'speike', disabled: true },
@@ -24,7 +24,7 @@ describe('Select', () => {
       const { props, ...rest } = options || {}
       return mount(Select, {
         ...rest,
-        props: { options: defaultOptions, value: defaultValue, ...props },
+        props: { dataSource: defaultDataSource, value: defaultValue, ...props },
         attachTo: 'body',
       })
     }
@@ -35,7 +35,7 @@ describe('Select', () => {
       }
     })
 
-    renderWork<SelectProps>(Select, { props: { options: defaultOptions, value: defaultValue }, attachTo: 'body' })
+    renderWork<SelectProps>(Select, { props: { dataSource: defaultDataSource, value: defaultValue }, attachTo: 'body' })
 
     test('v-model:value work', async () => {
       const onUpdateValue = jest.fn()
@@ -121,7 +121,7 @@ describe('Select', () => {
     })
 
     test('custom keys work', async () => {
-      const options = [
+      const dataSource = [
         {
           key: 1,
           text: 'Manager',
@@ -138,7 +138,7 @@ describe('Select', () => {
       ]
 
       const wrapper = SelectMount({
-        props: { value: 'tom', open: true, options, childrenKey: 'options', labelKey: 'text', valueKey: 'name' },
+        props: { value: 'tom', open: true, dataSource, childrenKey: 'options', labelKey: 'text', valueKey: 'name' },
       })
 
       expect(wrapper.find('.ix-select-selector-item').text()).toBe('Tom')
@@ -165,9 +165,9 @@ describe('Select', () => {
       expect(wrapper.find('.ix-select-selector-item').text()).toBe('Jerry')
     })
 
-    test('compareWith work', async () => {
-      const compareWith = (o1: string, o2: string) => !!o1 && !!o2 && o1.charAt(0) === o2.charAt(0)
-      const wrapper = SelectMount({ props: { value: 't', compareWith } })
+    test('compareFn work', async () => {
+      const compareFn = (o1: string, o2: string) => !!o1 && !!o2 && o1.charAt(0) === o2.charAt(0)
+      const wrapper = SelectMount({ props: { value: 't', compareFn } })
 
       expect(wrapper.find('.ix-select-selector-item').text()).toBe('Tom')
 
@@ -222,7 +222,7 @@ describe('Select', () => {
 
     test('empty work', async () => {
       let emptyText = 'empty text'
-      const wrapper = SelectMount({ props: { open: true, empty: emptyText, options: [] } })
+      const wrapper = SelectMount({ props: { open: true, empty: emptyText, dataSource: [] } })
 
       expect(wrapper.findComponent(Content).find('.ix-empty-description').text()).toBe(emptyText)
 
@@ -234,19 +234,19 @@ describe('Select', () => {
 
     test('empty slot work', async () => {
       const wrapper = SelectMount({
-        props: { open: true, empty: 'empty text', options: [] },
+        props: { open: true, empty: 'empty text', dataSource: [] },
         slots: { empty: () => h(IxEmpty, { description: 'empty slot' }) },
       })
 
       expect(wrapper.findComponent(Content).find('.ix-empty-description').text()).toBe('empty slot')
     })
 
-    test('options work', async () => {
-      const wrapper = SelectMount({ props: { open: true, options: [] } })
+    test('dataSource work', async () => {
+      const wrapper = SelectMount({ props: { open: true, dataSource: [] } })
 
       expect(wrapper.findAllComponents(Option).length).toBe(0)
 
-      await wrapper.setProps({ options: defaultOptions })
+      await wrapper.setProps({ dataSource: defaultDataSource })
 
       expect(wrapper.findAllComponents(Option).length).toBe(3)
     })
@@ -315,9 +315,9 @@ describe('Select', () => {
       expect(input.element.style.opacity).toBe('0')
     })
 
-    test('searchFilter work', async () => {
-      const searchFilter = (searchValue: string, option: SelectData) => searchValue === option.value
-      const wrapper = SelectMount({ props: { open: true, searchable: true, searchFilter } })
+    test('searchable with searchFn work', async () => {
+      const searchFn = (option: SelectData, searchValue: string) => searchValue === option.value
+      const wrapper = SelectMount({ props: { open: true, searchable: true, searchFn } })
 
       expect(wrapper.find('.ix-select-searchable').exists()).toBe(true)
 
@@ -330,12 +330,12 @@ describe('Select', () => {
       expect(wrapper.findAllComponents(Option).length).toBe(0)
     })
 
-    test('searchFilter with labelKey work', async () => {
+    test('searchable with labelKey work', async () => {
       const wrapper = SelectMount({
         props: {
           open: true,
           searchable: true,
-          options: [
+          dataSource: [
             { key: 1, name: 'Tom', id: 'tom' },
             { key: 2, name: 'Jerry', id: 'jerry' },
             { key: 3, name: 'Speike', id: 'speike' },
@@ -390,14 +390,14 @@ describe('Select', () => {
     })
 
     test('virtual work', async () => {
-      const options: SelectData[] = []
+      const dataSource: SelectData[] = []
 
       for (let index = 0; index < 100; index++) {
         const value = `${index.toString(36)}${index}`
-        options.push({ key: index, label: value, value, disabled: index % 10 === 0 })
+        dataSource.push({ key: index, label: value, value, disabled: index % 10 === 0 })
       }
 
-      const wrapper = SelectMount({ props: { virtual: true, open: true, options } })
+      const wrapper = SelectMount({ props: { virtual: true, open: true, dataSource } })
 
       expect(wrapper.findAllComponents(Option).length).toBe(10)
 
@@ -408,10 +408,10 @@ describe('Select', () => {
   })
 
   describe('multiple work', () => {
-    const defaultOptions: SelectData[] = []
+    const defaultDataSource: SelectData[] = []
     for (let index = 0; index < 20; index++) {
       const prefix = index > 9 ? 'B' : 'A'
-      defaultOptions.push({ key: index, label: prefix + index, value: index, disabled: index % 3 === 0 })
+      defaultDataSource.push({ key: index, label: prefix + index, value: index, disabled: index % 3 === 0 })
     }
 
     const defaultValue = [0, 1, 2]
@@ -420,7 +420,7 @@ describe('Select', () => {
       const { props, ...rest } = options || {}
       return mount(Select, {
         ...rest,
-        props: { multiple: true, options: defaultOptions, value: defaultValue, ...props },
+        props: { multiple: true, dataSource: defaultDataSource, value: defaultValue, ...props },
         attachTo: 'body',
       })
     }
@@ -510,7 +510,7 @@ describe('Select', () => {
         {
           components: { Select, SelectOptionComponent, SelectOptionGroupComponent },
           template: `<Select v-model:value="value">
-          <SelectOptionComponent v-for="option in options" :key="option.key" :label="option.label" :value="option.value" :disabled="option.disabled">
+          <SelectOptionComponent v-for="option in dataSource" :key="option.key" :label="option.label" :value="option.value" :disabled="option.disabled">
           </SelectOptionComponent>
           <SelectOptionGroupComponent key="1" label="Manager">
             <SelectOptionComponent key="11" label="Tom" value="tom1"></SelectOptionComponent>
@@ -522,12 +522,12 @@ describe('Select', () => {
         </Select>`,
           setup() {
             const value = ref('tom')
-            const options: SelectData[] = [
+            const dataSource: SelectData[] = [
               { key: '01', label: 'Tom', value: 'tom' },
               { key: '02', label: 'Jerry', value: 'jerry' },
               { key: '03', label: 'Speike', value: 'speike', disabled: true },
             ]
-            return { value, options }
+            return { value, dataSource }
           },
         },
         {

diff --git a/packages/components/select/demo/AllowInput.vue b/packages/components/select/demo/AllowInput.vue
@@ -1,22 +1,30 @@
 <template>
-  <IxSelect v-model:value="singleValue" :options="options" allowInput placeholder="Allow input" @change="onChange">
-  </IxSelect>
-  <IxSelect
-    v-model:value="multipleValue"
-    :options="options"
-    allowInput
-    multiple
-    placeholder="Allow input"
-    @change="onChange"
-  >
-  </IxSelect>
+  <IxSpace>
+    <IxSelect
+      v-model:value="singleValue"
+      :dataSource="dataSource"
+      allowInput
+      placeholder="Allow input"
+      @change="onChange"
+    >
+    </IxSelect>
+    <IxSelect
+      v-model:value="multipleValue"
+      :dataSource="dataSource"
+      allowInput
+      multiple
+      placeholder="Allow input"
+      @change="onChange"
+    >
+    </IxSelect>
+  </IxSpace>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { key: 1, label: 'Tom', value: 'tom' },
   { key: 2, label: 'Jerry', value: 'jerry' },
   { key: 3, label: 'Speike', value: 'speike' },
@@ -29,9 +37,3 @@ const onChange = (value: string, oldValue: string) => {
   console.log('selected change: ', value, oldValue)
 }
 </script>
-
-<style scoped lang="less">
-:deep(.ix-select) {
-  width: 200px;
-}
-</style>
diff --git a/packages/components/select/demo/Basic.vue b/packages/components/select/demo/Basic.vue
@@ -1,10 +1,10 @@
 <template>
   <IxSpace>
-    <IxSelect v-model:value="value" :options="options" @change="onChange"></IxSelect>
-    <IxSelect v-model:value="value" :options="options" disabled></IxSelect>
-    <IxSelect v-model:value="value" :options="options" clearable></IxSelect>
+    <IxSelect v-model:value="value" :dataSource="dataSource" @change="onChange"></IxSelect>
+    <IxSelect v-model:value="value" :dataSource="dataSource" disabled></IxSelect>
+    <IxSelect v-model:value="value" :dataSource="dataSource" clearable></IxSelect>
     <IxSelect v-model:value="value">
-      <IxSelectOption v-for="option in options" :key="option.key" :value="option.value" :disabled="option.disabled">
+      <IxSelectOption v-for="option in dataSource" :key="option.key" :value="option.value" :disabled="option.disabled">
         <IxIcon name="star"></IxIcon>
         <span style="margin-left: 8px">{{ option.label }}</span>
       </IxSelectOption>
@@ -16,7 +16,7 @@ import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { key: 1, label: 'Tom', value: 'tom' },
   { key: 2, label: 'Jerry', value: 'jerry' },
   { key: 3, label: 'Speike', value: 'speike', disabled: true },
@@ -28,9 +28,3 @@ const onChange = (value: string, oldValue: string) => {
   console.log('selected change: ', value, oldValue)
 }
 </script>
-
-<style scoped lang="less">
-:deep(.ix-select) {
-  width: 120px;
-}
-</style>
diff --git a/packages/components/select/demo/Borderless.vue b/packages/components/select/demo/Borderless.vue
@@ -1,22 +1,16 @@
 <template>
-  <IxSelect v-model:value="value" :options="options" borderless></IxSelect>
+  <IxSelect v-model:value="value" :dataSource="dataSource" borderless></IxSelect>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { key: 1, label: 'Tom', value: 'tom' },
   { key: 2, label: 'Jerry', value: 'jerry' },
   { key: 3, label: 'Speike', value: 'speike', disabled: true },
 ]
 
 const value = ref('tom')
 </script>
-
-<style scoped lang="less">
-:deep(.ix-select) {
-  width: 120px;
-}
-</style>
diff --git a/packages/components/select/demo/CompareWith.vue b/packages/components/select/demo/CompareWith.vue
@@ -1,6 +1,6 @@
 <template>
-  <IxSelect v-model:value="value" :compareWith="compareFn" @change="onChange">
-    <IxSelectOption v-for="option in options" :key="option.id" :label="option.name" :value="option" />
+  <IxSelect v-model:value="value" :compareFn="compareFn" @change="onChange">
+    <IxSelectOption v-for="option in dataSource" :key="option.id" :label="option.name" :value="option" />
   </IxSelect>
 </template>
 <script setup lang="ts">
@@ -11,7 +11,7 @@ interface User {
   name: string
 }
 
-const options: User[] = [
+const dataSource: User[] = [
   { id: 1, name: 'Tom' },
   { id: 2, name: 'Jerry' },
   { id: 3, name: 'Speike' },

diff --git a/packages/components/select/demo/CustomLabel.vue b/packages/components/select/demo/CustomLabel.vue
@@ -1,5 +1,12 @@
 <template>
-  <IxSelect v-model:value="value" :options="options" multiple :maxLabelCount="3" :multipleLimit="5" @change="onChange">
+  <IxSelect
+    v-model:value="value"
+    :dataSource="dataSource"
+    multiple
+    :maxLabelCount="3"
+    :multipleLimit="5"
+    @change="onChange"
+  >
     <template #selectedLabel="option"><IxIcon :name="option.value" />{{ option.label }}</template>
     <template #overflowedLabel="moreOptions">and {{ moreOptions.length }} more selected</template>
   </IxSelect>
@@ -9,7 +16,7 @@ import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { key: 1, label: 'GitHub', value: 'github' },
   { key: 2, label: 'Gitlab', value: 'gitlab' },
   { key: 3, label: 'Chrome', value: 'chrome' },

diff --git a/packages/components/select/demo/Group.vue b/packages/components/select/demo/Group.vue
@@ -1,21 +1,23 @@
 <template>
-  <IxSelect v-model:value="value" :options="options"> </IxSelect>
-  <IxSelect v-model:value="value">
-    <IxSelectOptionGroup key="1" label="Manager">
-      <IxSelectOption key="11" label="Tom" value="tom"></IxSelectOption>
-      <IxSelectOption key="12" label="Jerry" value="jerry"></IxSelectOption>
-    </IxSelectOptionGroup>
-    <IxSelectOptionGroup key="2" label="Engineer">
-      <IxSelectOption key="21" label="Speike" value="speike"></IxSelectOption>
-    </IxSelectOptionGroup>
-  </IxSelect>
+  <IxSpace>
+    <IxSelect v-model:value="value" :dataSource="dataSource"> </IxSelect>
+    <IxSelect v-model:value="value">
+      <IxSelectOptionGroup key="1" label="Manager">
+        <IxSelectOption key="11" label="Tom" value="tom"></IxSelectOption>
+        <IxSelectOption key="12" label="Jerry" value="jerry"></IxSelectOption>
+      </IxSelectOptionGroup>
+      <IxSelectOptionGroup key="2" label="Engineer">
+        <IxSelectOption key="21" label="Speike" value="speike"></IxSelectOption>
+      </IxSelectOptionGroup>
+    </IxSelect>
+  </IxSpace>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   {
     key: 1,
     label: 'Manager',

diff --git a/packages/components/select/demo/Key.vue b/packages/components/select/demo/Key.vue
@@ -1,12 +1,13 @@
 <template>
-  <IxSelect v-model:value="value" :options="options" childrenKey="options" labelKey="text" valueKey="name"> </IxSelect>
+  <IxSelect v-model:value="value" :dataSource="dataSource" childrenKey="options" labelKey="text" valueKey="name">
+  </IxSelect>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   {
     key: 1,
     text: 'Manager',