[comp: select] add select component

[danranVm]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

ix-select

SelectProps

名称	说明	类型	默认值	全局配置	备注
v-model:value	当前选中的 option 的值	`any	any[]`	-	-
control	控件控制器	string|AbstractControl	-	-	当存在 control 时, 控件将由 AbstractControl 完全控制，此时 value 会失效
disabled	是否禁用状态	boolean	false	-	-
options	option 列表，可以取代 ix-option	SelectOptionItem[]	-	-	-
compareWith	用于自定义判断两个 option 的值是否相同	(o1: any, o2: any) => boolean	(o1: any, o2: any) => o1 === o2	-	通常用于 option 的为对象的情况
multiple	多选模式	boolean	false	-	-
autofocus	默认获取焦点	boolean	false	-	-
clearable	是否显示清除图标	boolean	false	✅	-
borderless	是否无边框	boolean	false	✅	-
dropdownClassName	下拉菜单的 className 属性	string	-
searchable	是否可搜索	boolean	false	✅	-
filterOption	根据搜索的文本进行筛选	boolean | (searchValue: string, option: IxOptionComponent) => boolean	true	-	为 true 时使用 defaultFilterOption, 如果使用远程搜索，应该设置为 false
loading	设置加载中状态	boolean	-	-	-
placeholder	选择框默认文本	string	-	-	-
suffix	设置后缀图标	string | v-slot:suffix	-	-	单选默认为 down，多选默认为 false
size	设置大小	large | medium | small	medium	✅	-
v-model:open	下拉菜单是否展开	boolean	false	-	-

export interface SelectOptionItem {
  label: string
  value: any
  disabled?: boolean
  groupLabel?: string
  key?: any
}

const defaultFilterOption = (searchValue: string, option: IxOptionComponent): boolean => {
  if (option && option.label) {
    return option.label.toLowerCase().includes(searchValue.toLowerCase())
  } else {
    return false
  }
}

SelectEmits

名称	说明	参数类型	备注
change	选中的值发生改变	(value: any) => void	-
search	搜索文本发生改变	(searchValue: string) => void	-
clear	清除图标被点击	(evt: MouseEvent) => void	-
openChange	下拉菜单打开状态发生改变	(isOpen: boolean) => void	-
scrollToBottom	下拉列表滚动到底部的回调	() => void	-
focus	focus 时回调	() => void	-
blur	blur 时回调	() => void	-

SelectSlots

名称	说明	参数类型	备注
default	option 内容	-	-
customLabel	自定义选中的 label	-	-
dropdownExtra	自定义下拉菜单的扩展内容	-	-

ix-option

OptionProps

名称	说明	类型	默认值	全局配置	备注
label	显示的文本	string	-	-	同时也是被选中后文本框显示的内容
value	option 的值	any	-	-	-
disabled	是否禁用	boolean	false	-	-

OptionSlots

名称	说明	参数类型	备注
default	显示的文本	-	-

ix-option-group

OptionGroupProps

名称	说明	类型	默认值	全局配置	备注
label	分组名	string	-	-	-

OptionSlots

名称	说明	参数类型	备注
default	分组名	-	-

[huangtenghui]

showSuffix 跟 suffix 可以合并只用showSuffix, 配置为true就用默认的，false隐藏，string等配置自定义；

[huangtenghui]

compareWith看否用idfields代替会更好。。

[huangtenghui]

size这个定义成设置大小有点懵逼，注解改下。。

[hele10086]

有几个业务场景如何实现：

• 可输入的下拉框如何实现？
• 远程加载下拉选项的如何实现（下拉时重新发请求的）？
• 期望多选时有全部的勾选项如何实现？
• 下拉框选项为空时，如何自定义这个空的样式（有时需要自定义组件作为空的样式）？
• 下拉选项默认的值和文本配置是 value 和 label，是否支持可配置（映射表）？

[danranVm]

有几个业务场景如何实现：

• 可输入的下拉框如何实现？
• 远程加载下拉选项的如何实现（下拉时重新发请求的）？
• 期望多选时有全部的勾选项如何实现？
• 下拉框选项为空时，如何自定义这个空的样式（有时需要自定义组件作为空的样式）？
• 下拉选项默认的值和文本配置是 value 和 label，是否支持可配置（映射表）？

• 可以新增一个 props, 叫什么名字呢。。。allowInput
• 可以监听 openChange 和 scrollToBottom 去获取数据
• 暂时不做，后续加上或放到 pro
• 新增一个 empty 的 slot
• 讨论后决定不加。

[danranVm]

compareWith

支持 string | fn