From 934c0b21e14e63860874f4a2fb3664d31e3534d0 Mon Sep 17 00:00:00 2001
From: danranVm <danranvm@gmail.com>
Date: Tue, 1 Mar 2022 14:10:56 +0800
Subject: [PATCH] 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.
---
 packages/components/radio/docs/Index.zh.md    |  2 +-
 .../select/__tests__/select.spec.ts           | 54 +++++++++----------
 .../components/select/demo/AllowInput.vue     | 38 ++++++-------
 packages/components/select/demo/Basic.vue     | 16 ++----
 .../components/select/demo/Borderless.vue     | 10 +---
 .../components/select/demo/CompareWith.vue    |  6 +--
 .../components/select/demo/CustomLabel.vue    | 11 +++-
 packages/components/select/demo/Group.vue     | 24 +++++----
 packages/components/select/demo/Key.vue       |  5 +-
 packages/components/select/demo/Multiple.vue  | 10 ++--
 .../components/select/demo/OverlayRender.vue  |  8 +--
 .../components/select/demo/Searchable.vue     | 16 ++----
 packages/components/select/demo/Server.vue    | 12 ++---
 packages/components/select/demo/Size.vue      |  8 +--
 packages/components/select/demo/Virtual.vue   |  6 +--
 packages/components/select/docs/Index.zh.md   | 13 +++--
 .../select/src/composables/useActiveState.ts  |  5 +-
 .../select/src/composables/useOptions.ts      | 32 ++++++-----
 .../src/composables/useSelectedState.ts       | 12 +++--
 .../components/select/src/content/ListBox.tsx | 17 +++---
 .../components/select/src/content/Option.tsx  |  8 +--
 .../components/select/src/trigger/Trigger.tsx |  6 +--
 packages/components/select/src/types.ts       | 13 +++--
 packages/site/src/styles/components.less      | 11 ++--
 24 files changed, 177 insertions(+), 166 deletions(-)

diff --git a/packages/components/radio/docs/Index.zh.md b/packages/components/radio/docs/Index.zh.md
index dac010157..6bf6873f3 100644
--- 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
index d06cfcfed..752a096af 100644
--- 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
index 16b9121d9..09ad0cff1 100644
--- 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
index 001a0e9b7..e32be6707 100644
--- 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
index 2949a8817..d89022dd7 100644
--- a/packages/components/select/demo/Borderless.vue
+++ b/packages/components/select/demo/Borderless.vue
@@ -1,12 +1,12 @@
 <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 },
@@ -14,9 +14,3 @@ const options: SelectData[] = [
 
 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
index c63523a7f..fe2a77290 100644
--- 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
index 23b21fc88..10c41ec8e 100644
--- 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
index 16e735dcd..a5f94bcbb 100644
--- 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
index 717c97f13..c651ad6cf 100644
--- 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',
diff --git a/packages/components/select/demo/Multiple.vue b/packages/components/select/demo/Multiple.vue
index 26dfa7e1a..43677a280 100644
--- a/packages/components/select/demo/Multiple.vue
+++ b/packages/components/select/demo/Multiple.vue
@@ -1,17 +1,19 @@
 <template>
-  <IxSelect v-model:value="value" :options="options" multiple @change="onChange"></IxSelect>
-  <IxSelect v-model:value="value" :options="options" multiple disabled></IxSelect>
+  <IxSpace>
+    <IxSelect v-model:value="value" :dataSource="dataSource" multiple @change="onChange"></IxSelect>
+    <IxSelect v-model:value="value" :dataSource="dataSource" multiple disabled></IxSelect>
+  </IxSpace>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = []
+const dataSource: SelectData[] = []
 
 for (let index = 0; index < 20; index++) {
   const prefix = index > 9 ? 'B' : 'A'
-  options.push({ key: index, label: prefix + index, value: index, disabled: index % 3 === 0 })
+  dataSource.push({ key: index, label: prefix + index, value: index, disabled: index % 3 === 0 })
 }
 
 const value = ref([0, 1])
diff --git a/packages/components/select/demo/OverlayRender.vue b/packages/components/select/demo/OverlayRender.vue
index 763a9792c..3c1ed4773 100644
--- a/packages/components/select/demo/OverlayRender.vue
+++ b/packages/components/select/demo/OverlayRender.vue
@@ -1,5 +1,5 @@
 <template>
-  <IxSelect v-model:value="value" :options="options" :overlayRender="overlayRender" style="width: 200px"></IxSelect>
+  <IxSelect v-model:value="value" :dataSource="dataSource" :overlayRender="overlayRender"></IxSelect>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +10,7 @@ import { IxDivider } from '@idux/components/divider'
 import { IxInput } from '@idux/components/input'
 import { SelectData } from '@idux/components/select'
 
-const options = ref<SelectData[]>([
+const dataSource = ref<SelectData[]>([
   { key: 1, label: 'Tom', value: 'tom' },
   { key: 2, label: 'Jerry', value: 'jerry' },
   { key: 3, label: 'Speike', value: 'speike' },
@@ -23,9 +23,9 @@ const onChange = (value: string) => {
   inputValue.value = value
 }
 const onAdd = () => {
-  const currOptions = options.value
+  const currOptions = dataSource.value
   const label = inputValue.value
-  options.value = [...currOptions, { key: label, label, value: label }]
+  dataSource.value = [...currOptions, { key: label, label, value: label }]
   inputValue.value = ''
 }
 
diff --git a/packages/components/select/demo/Searchable.vue b/packages/components/select/demo/Searchable.vue
index 0da32482d..2a15179ae 100644
--- a/packages/components/select/demo/Searchable.vue
+++ b/packages/components/select/demo/Searchable.vue
@@ -1,9 +1,9 @@
 <template>
   <IxSpace vertical>
-    <IxSpace> searchable:<IxRadioGroup v-model:value="searchableValue" :options="searchableOptions" /></IxSpace>
+    <IxSpace> searchable:<IxRadioGroup v-model:value="searchableValue" :dataSource="searchableOptions" /></IxSpace>
     <IxSelect
       v-model:value="value"
-      :options="options"
+      :dataSource="dataSource"
       :searchable="searchableValue"
       placeholder="Searchable"
       @change="onChange"
@@ -12,20 +12,20 @@
   </IxSpace>
 </template>
 <script setup lang="ts">
-import type { RadioOption } from '@idux/components/radio'
+import type { RadioData } from '@idux/components/radio'
 import type { SelectData } from '@idux/components/select'
 
 import { ref } from 'vue'
 
 const searchableValue = ref(true)
 
-const searchableOptions: RadioOption[] = [
+const searchableOptions: RadioData[] = [
   { label: 'true', value: true },
   { label: 'overlay', value: 'overlay' },
   { label: 'false', value: false },
 ]
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { key: 1, label: 'Tom', value: 'tom' },
   { key: 2, label: 'Jerry', value: 'jerry' },
   { key: 3, label: 'Speike', value: 'speike' },
@@ -37,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/Server.vue b/packages/components/select/demo/Server.vue
index 6f5bf6e6b..ff7700c5c 100644
--- a/packages/components/select/demo/Server.vue
+++ b/packages/components/select/demo/Server.vue
@@ -8,7 +8,7 @@
     @change="onChange"
     @search="onSearch"
   >
-    <IxSelectOption v-for="option in options" :key="option.login.uuid" :value="option.email">
+    <IxSelectOption v-for="option in dataSource" :key="option.login.uuid" :value="option.email">
       {{ option.name.first }} {{ option.name.last }}
     </IxSelectOption>
   </IxSelect>
@@ -32,7 +32,7 @@ interface RandomUser {
 
 const value = ref()
 const loading = ref(false)
-const options = ref<RandomUser[]>([])
+const dataSource = ref<RandomUser[]>([])
 
 const onChange = (value: string, oldValue: string) => {
   console.log('selected change: ', value, oldValue)
@@ -46,12 +46,6 @@ const onSearch = async (searchValue: string) => {
   const { data } = await axios.get('https://randomuser.me/api', { params })
 
   loading.value = false
-  options.value = data.results
+  dataSource.value = data.results
 }
 </script>
-
-<style scoped lang="less">
-:deep(.ix-select) {
-  width: 200px;
-}
-</style>
diff --git a/packages/components/select/demo/Size.vue b/packages/components/select/demo/Size.vue
index b0d5a825d..02a6f73ff 100644
--- a/packages/components/select/demo/Size.vue
+++ b/packages/components/select/demo/Size.vue
@@ -6,15 +6,17 @@
   </IxRadioGroup>
   <br />
   <br />
-  <IxSelect v-model:value="singleValue" :options="options" :size="size" style="width: 120px"> </IxSelect>
-  <IxSelect v-model:value="multipleValue" :options="options" :size="size" multiple> </IxSelect>
+  <IxSpace>
+    <IxSelect v-model:value="singleValue" :dataSource="dataSource" :size="size"> </IxSelect>
+    <IxSelect v-model:value="multipleValue" :dataSource="dataSource" :size="size" multiple> </IxSelect>
+  </IxSpace>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = [
+const dataSource: SelectData[] = [
   { label: 'Tom', value: 'tom' },
   { label: 'Jerry', value: 'jerry' },
   { label: 'Speike', value: 'speike', disabled: true },
diff --git a/packages/components/select/demo/Virtual.vue b/packages/components/select/demo/Virtual.vue
index 37cd210a3..6a5238241 100644
--- a/packages/components/select/demo/Virtual.vue
+++ b/packages/components/select/demo/Virtual.vue
@@ -1,7 +1,7 @@
 <template>
   <IxSelect
     v-model:value="value"
-    :options="options"
+    :dataSource="dataSource"
     multiple
     virtual
     @change="onChange"
@@ -15,11 +15,11 @@ import { ref } from 'vue'
 
 import { SelectData } from '@idux/components/select'
 
-const options: SelectData[] = []
+const dataSource: SelectData[] = []
 
 for (let index = 0; index < 9999; 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 value = ref(['00', '11'])
diff --git a/packages/components/select/docs/Index.zh.md b/packages/components/select/docs/Index.zh.md
index 736027894..bb2b2feda 100644
--- a/packages/components/select/docs/Index.zh.md
+++ b/packages/components/select/docs/Index.zh.md
@@ -22,33 +22,36 @@ order: 0
 | `borderless` | 是否无边框 | `boolean` | `false` | ✅ | - |
 | `childrenKey` | 分组选项的 key | `string` | `children` | ✅ | 仅在使用 `options` 时有效 |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | - | - |
-| `compareWith` | 用于自定义判断两个 `option` 的值是否相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1 === o2` | - | 通常用于 `option` 的为对象的情况 |
+| `compareFn` | 用于自定义判断两个 `option` 的值是否相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1 === o2` | - | 通常用于 `option` 的为对象的情况 |
+| `dataSource` | 选项数据源 | `SelectData[]` | - | - | 优先级高于 `default` 插槽, 性能会更好 |
 | `disabled` | 是否禁用状态 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
 | `empty` | 自定义当下拉列表为空时显示的内容 | `string \| EmptyProps \| #empty` | - | - | - |
 | `labelKey` | 选项 label 的 key | `string` | `label` | ✅ | 仅在使用 `options` 时有效 |
 | `maxLabelCount` | 最多显示多少个标签 | `number` | - | - | - |
 | `multiple` | 多选模式 | `boolean` | `false` | - | - |
 | `multipleLimit` | 最多选中多少项 | `number` | - | - | - |
-| `options` | 选项列表 | `SelectData[]` | - | - | 推荐使用此配置替换 `default` 插槽, 性能会更好 |
 | `overlayClassName` | 下拉菜单的 `class`  | `string` | - | - | - |
 | `overlayRender` | 自定义下拉菜单内容的渲染  | `(children:VNode[]) => VNodeTypes` | - | - | - |
 | `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | - |
 | `readonly` | 只读模式 | `boolean` | - | - | - |
 | `searchable` | 是否可搜索 | `boolean \| 'overlay'` | `false` | - | 当为 `true` 时搜索功能集成在选择器上，当为 `overlay` 时，搜索功能集成在悬浮层上 |
-| `searchFilter` | 根据搜索的文本进行筛选 | `boolean \| SelectFilterFn` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索，应该设置为 `false` |
+| `searchFn` | 根据搜索的文本进行筛选 | `boolean \| SelectSearchFn` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索，应该设置为 `false` |
 | `size` | 设置选择器大小 | `'sm' \| 'md' \| 'lg'` | `md` | ✅ | - |
 | `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | ✅ | - |
 | `target` | 自定义浮层容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `valueKey` | 选项 value 的 key | `string` | `value` | ✅ | - |
 | `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | - |
+| `onChange` | 选中值发生改变后的回调 | `(value: any, oldValue: any) => void` | - | - | - |
+| `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - |
+| `onSearch` | 开启搜索功能后，输入后的回调 | `(searchValue: string) => void` | - | - | 通常用于服务端搜索 |
 | `onScroll` | 滚动事件 | `(evt: Event) => void` | - | - | - |
 | `onScrolledChange` | 滚动的位置发生变化 | `(startIndex: number, endIndex: number, visibleData: SelectData[]) => void` | - | - | 仅 `virtual` 模式下可用 |
 | `onScrolledBottom` | 滚动到底部时触发 | `() => void` | - | - | 仅 `virtual` 模式下可用 |
 
 ```ts
-export type SelectData = SelectOption | SelectOptionGroup
+export type SelectData = SelectOptionProps | SelectOptionGroupProps
 
-export type SelectFilterFn = (searchValue: string, data: SelectData) => boolean
+export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean
 ```
 
 #### SelectCommonProps
diff --git a/packages/components/select/src/composables/useActiveState.ts b/packages/components/select/src/composables/useActiveState.ts
index 94ac683f3..d6141f32d 100644
--- a/packages/components/select/src/composables/useActiveState.ts
+++ b/packages/components/select/src/composables/useActiveState.ts
@@ -32,15 +32,16 @@ export function useActiveState(
 
   onMounted(() => {
     watchEffect(() => {
-      const { compareWith, allowInput } = props
+      const allowInput = props.allowInput
       const options = flattedOptions.value
       let currIndex: number
       if (allowInput && inputValue.value) {
         const searchValue = inputValue.value
         currIndex = options.findIndex(option => option.value === searchValue)
       } else {
+        const compareFn = props.compareWith ?? props.compareFn
         const currValue = selectedValue.value
-        currIndex = options.findIndex(option => currValue.some(value => compareWith(option.value, value)))
+        currIndex = options.findIndex(option => currValue.some(value => compareFn(option.value, value)))
       }
       currIndex = currIndex === -1 ? 0 : currIndex
       activeIndex.value = getEnabledActiveIndex(options, currIndex, 1)
diff --git a/packages/components/select/src/composables/useOptions.ts b/packages/components/select/src/composables/useOptions.ts
index 5d1227793..4aa00f40e 100644
--- a/packages/components/select/src/composables/useOptions.ts
+++ b/packages/components/select/src/composables/useOptions.ts
@@ -7,8 +7,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { SelectData, SelectFilterFn, SelectProps } from '../types'
-import type { VKey } from '@idux/cdk/utils'
+import type { SelectData, SelectProps, SelectSearchFn } from '../types'
 import type { SelectConfig } from '@idux/components/config'
 import type { ComputedRef, Ref, Slots, VNode } from 'vue'
 
@@ -16,7 +15,7 @@ import { computed } from 'vue'
 
 import { isFunction, isSymbol } from 'lodash-es'
 
-import { flattenNode } from '@idux/cdk/utils'
+import { Logger, VKey, flattenNode } from '@idux/cdk/utils'
 
 import { optionGroupKey, optionKey } from '../option'
 import { generateOption } from '../utils/generateOption'
@@ -39,9 +38,12 @@ export interface OptionsContext {
 
 export function useMergedOptions(props: SelectProps, slots: Slots, config: SelectConfig): ComputedRef<MergedOption[]> {
   return computed(() => {
-    const { options } = props
-    if (options) {
-      return mergeOptions(props, config, options)
+    const dataSource = props.options ?? props.dataSource
+    if (dataSource) {
+      if (__DEV__ && props.options) {
+        Logger.warn('components/select', '`options` was deprecated, please use `dataSource` instead')
+      }
+      return mergeOptions(props, config, dataSource)
     } else {
       return convertOptions(slots.default?.())
     }
@@ -62,7 +64,7 @@ export function useFlattedOptions(
       return options
     }
     const filter = searchFilter.value
-    const filteredOptions = !filter ? options : options.filter(option => filter(searchValue, option.rawOption!))
+    const filteredOptions = !filter ? options : options.filter(option => filter(option.rawOption!, searchValue))
     const { allowInput } = props
     if (allowInput) {
       const matchedOption = filteredOptions.find(option => option.label === searchValue)
@@ -150,8 +152,8 @@ function convertOptions(nodes: VNode[] | undefined, parentKey?: VKey, grouped?:
   return mergedOptions
 }
 
-const getDefaultFilter = (props: SelectProps): SelectFilterFn => {
-  return (searchValue: string, option: SelectData) => {
+const getDefaultSearchFn = (props: SelectProps): SelectSearchFn => {
+  return (option: SelectData, searchValue: string) => {
     const filterField = props.labelKey ?? 'label'
     return option[filterField]?.toLowerCase().includes(searchValue.toLowerCase()) ?? false
   }
@@ -159,12 +161,14 @@ const getDefaultFilter = (props: SelectProps): SelectFilterFn => {
 
 function useSearchFilter(props: SelectProps) {
   return computed(() => {
-    const { searchFilter } = props
-    if (isFunction(searchFilter)) {
-      return searchFilter
+    const searchFn = props.searchFilter ?? props.searchFn
+    if (isFunction(searchFn)) {
+      if (__DEV__ && props.searchFilter) {
+        Logger.warn('components/select', '`searchFilter` was deprecated, please use `searchFn` instead')
+      }
+      return searchFn
     }
-
     // #750 配置了labelKey后过滤筛选不生效
-    return searchFilter ? getDefaultFilter(props) : false
+    return searchFn ? getDefaultSearchFn(props) : false
   })
 }
diff --git a/packages/components/select/src/composables/useSelectedState.ts b/packages/components/select/src/composables/useSelectedState.ts
index 5256da502..f617096ad 100644
--- a/packages/components/select/src/composables/useSelectedState.ts
+++ b/packages/components/select/src/composables/useSelectedState.ts
@@ -33,10 +33,10 @@ export function useSelectedState(
 ): SelectedStateContext {
   const selectedValue = computed(() => convertArray(accessor.valueRef.value))
   const selectedOptions = computed(() => {
-    const { compareWith } = props
+    const compareFn = props.compareWith ?? props.compareFn
     const options = mergedOptions.value
     return selectedValue.value.map(
-      value => options.find(option => compareWith(option.value, value)) ?? generateOption(value),
+      value => options.find(option => compareFn(option.value, value)) ?? generateOption(value),
     )
   })
 
@@ -50,9 +50,10 @@ export function useSelectedState(
   }
 
   const changeSelected = (value: any) => {
-    const { compareWith, multiple, multipleLimit } = props
+    const compareFn = props.compareWith ?? props.compareFn
+    const { multiple, multipleLimit } = props
     const currValue = selectedValue.value
-    const targetIndex = currValue.findIndex(item => compareWith(item, value))
+    const targetIndex = currValue.findIndex(item => compareFn(item, value))
     const isSelected = targetIndex > -1
     if (!multiple) {
       !isSelected && setValue([value])
@@ -70,7 +71,8 @@ export function useSelectedState(
   }
 
   const handleItemRemove = (value: any) => {
-    setValue(selectedValue.value.filter(item => !props.compareWith(value, item)))
+    const compareFn = props.compareWith ?? props.compareFn
+    setValue(selectedValue.value.filter(item => !compareFn(value, item)))
   }
 
   const handleClear = (evt: MouseEvent) => {
diff --git a/packages/components/select/src/content/ListBox.tsx b/packages/components/select/src/content/ListBox.tsx
index 91ea38a84..c02f7d227 100644
--- a/packages/components/select/src/content/ListBox.tsx
+++ b/packages/components/select/src/content/ListBox.tsx
@@ -7,11 +7,11 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import type { MergedOption } from '../composables/useOptions'
-import type { FunctionalComponent } from 'vue'
+import { type FunctionalComponent, type Slots, inject } from 'vue'
 
-import { type Slots, inject } from 'vue'
+import { Logger } from '@idux/cdk/utils'
 
+import { type MergedOption } from '../composables/useOptions'
 import { selectToken } from '../token'
 import { renderOptionLabel } from '../utils/renderOptionLabel'
 
@@ -20,12 +20,15 @@ const defaultStyle = { height: 0, width: 0, overflow: 'hidden' }
 const ListBox: FunctionalComponent = () => {
   const { props, slots, selectedValue, mergedOptions, activeIndex, activeOption } = inject(selectToken)!
   const currSelectedValue = selectedValue.value
-  const { compareWith } = props
+  const compareFn = props.compareWith ?? props.compareFn
+  if (__DEV__ && props.compareWith) {
+    Logger.warn('components/select', '`compareWith` was deprecated, please use `compareFn` instead')
+  }
   return (
     <div role="listbox" style={defaultStyle}>
-      {renderOption(slots, mergedOptions.value[activeIndex.value - 1], currSelectedValue, compareWith)}
-      {renderOption(slots, activeOption.value, currSelectedValue, compareWith)}
-      {renderOption(slots, mergedOptions.value[activeIndex.value + 1], currSelectedValue, compareWith)}
+      {renderOption(slots, mergedOptions.value[activeIndex.value - 1], currSelectedValue, compareFn)}
+      {renderOption(slots, activeOption.value, currSelectedValue, compareFn)}
+      {renderOption(slots, mergedOptions.value[activeIndex.value + 1], currSelectedValue, compareFn)}
     </div>
   )
 }
diff --git a/packages/components/select/src/content/Option.tsx b/packages/components/select/src/content/Option.tsx
index 058307992..54313c1e8 100644
--- a/packages/components/select/src/content/Option.tsx
+++ b/packages/components/select/src/content/Option.tsx
@@ -28,15 +28,15 @@ export default defineComponent({
 
     const isActive = computed(() => {
       const { value } = props
-      const { compareWith } = selectProps
+      const compareFn = selectProps.compareWith ?? selectProps.compareFn
       const activeValue = activeOption.value?.value
-      return compareWith(activeValue, value)
+      return compareFn(activeValue, value)
     })
 
     const isSelected = computed(() => {
       const { value } = props
-      const { compareWith } = selectProps
-      return selectedValue.value.some(item => compareWith(item, value))
+      const compareFn = selectProps.compareWith ?? selectProps.compareFn
+      return selectedValue.value.some(item => compareFn(item, value))
     })
 
     const classes = computed(() => {
diff --git a/packages/components/select/src/trigger/Trigger.tsx b/packages/components/select/src/trigger/Trigger.tsx
index 9bec7207e..cbb9d08a4 100644
--- a/packages/components/select/src/trigger/Trigger.tsx
+++ b/packages/components/select/src/trigger/Trigger.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, inject, onBeforeUnmount, onMounted, watch } from 'vue'
+import { computed, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, watch } from 'vue'
 
 import { FORM_TOKEN } from '@idux/components/form'
 
@@ -62,7 +62,7 @@ export default defineComponent({
       } = props
       const disabled = isDisabled.value
       const prefixCls = mergedPrefixCls.value
-      return {
+      return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-borderless`]: borderless,
         [`${prefixCls}-clearable`]: clearable.value,
@@ -75,7 +75,7 @@ export default defineComponent({
         [`${prefixCls}-searchable`]: searchable.value,
         [`${prefixCls}-with-suffix`]: slots.suffix || suffix.value,
         [`${prefixCls}-${size}`]: true,
-      }
+      })
     })
 
     const handleClick = () => {
diff --git a/packages/components/select/src/types.ts b/packages/components/select/src/types.ts
index 084023257..bb3e4ecf7 100644
--- a/packages/components/select/src/types.ts
+++ b/packages/components/select/src/types.ts
@@ -17,11 +17,11 @@ import { controlPropDef } from '@idux/cdk/forms'
 import { ɵPortalTargetDef } from '@idux/cdk/portal'
 import { IxPropTypes } from '@idux/cdk/utils'
 
-const defaultCompareWith = (o1: any, o2: any) => o1 === o2
+const defaultCompareFn = (o1: any, o2: any) => o1 === o2
 
 export const selectProps = {
-  value: IxPropTypes.oneOfType([String, Number, Object]),
   control: controlPropDef,
+  value: IxPropTypes.oneOfType([String, Number, Object]),
   open: IxPropTypes.bool,
 
   allowInput: IxPropTypes.bool.def(false),
@@ -29,7 +29,9 @@ export const selectProps = {
   borderless: IxPropTypes.bool,
   childrenKey: IxPropTypes.string,
   clearable: IxPropTypes.bool.def(false),
-  compareWith: IxPropTypes.func<(o1: any, o2: any) => boolean>().def(defaultCompareWith),
+  compareWith: IxPropTypes.func<(o1: any, o2: any) => boolean>(),
+  compareFn: IxPropTypes.func<(o1: any, o2: any) => boolean>().def(defaultCompareFn),
+  dataSource: IxPropTypes.array<SelectData>(),
   disabled: IxPropTypes.bool.def(false),
   empty: IxPropTypes.oneOfType([String, IxPropTypes.object<EmptyProps>()]),
   maxLabelCount: IxPropTypes.number.def(Number.MAX_SAFE_INTEGER),
@@ -42,7 +44,8 @@ export const selectProps = {
   placeholder: IxPropTypes.string,
   readonly: IxPropTypes.bool.def(false),
   searchable: IxPropTypes.oneOfType([Boolean, IxPropTypes.oneOf(['overlay'])]).def(false),
-  searchFilter: IxPropTypes.oneOfType([Boolean, IxPropTypes.func<SelectFilterFn>()]).def(true),
+  searchFilter: IxPropTypes.oneOfType([Boolean, IxPropTypes.func<SelectSearchFn>()]),
+  searchFn: IxPropTypes.oneOfType([Boolean, IxPropTypes.func<SelectSearchFn>()]).def(true),
   size: IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg']),
   suffix: IxPropTypes.string,
   target: ɵPortalTargetDef,
@@ -117,7 +120,7 @@ export type SelectOptionGroupComponent = FunctionalComponent<
 
 export type SelectData = SelectOptionProps | SelectOptionGroupProps
 
-export type SelectFilterFn = (searchValue: string, data: SelectData) => boolean
+export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean
 
 // private
 export const selectorProps = {
diff --git a/packages/site/src/styles/components.less b/packages/site/src/styles/components.less
index d8506274a..5d1ebbe3a 100644
--- a/packages/site/src/styles/components.less
+++ b/packages/site/src/styles/components.less
@@ -7,9 +7,7 @@
 // grid
 
 [id^='components-grid-demo-'] {
-
   .ix-row:not(.gutter-row) {
-
     .ix-col {
       background: @color-primary;
       color: @color-white;
@@ -26,7 +24,6 @@
 // layout
 
 [id^='components-layout-demo-'] {
-
   .ix-layout {
     text-align: center;
 
@@ -51,7 +48,13 @@
 // select
 
 [id^='components-select-demo-'] .ix-select {
-  margin-bottom: 16px;
+  &-single {
+    width: 120px;
+  }
+
+  &-multiple {
+    width: 300px;
+  }
 }
 
 // card