feat(comp): add selector component (#1861)

packages/components/selector/demo/Basic.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 基本使用
+  en: Basic usage
+order: 0
+---
+
+## zh
+
+最简单的用法。
+
+## en
+
+The simplest usage.

packages/components/selector/demo/Basic.vue

@@ -0,0 +1,145 @@
+<template>
+  <IxSpace vertical>
+    <IxSelector
+      :dataSource="dataSoure"
+      :disabled="!enabled"
+      :multiple="multiple"
+      :clearable="clearable"
+      :readonly="readonly"
+      :borderless="borderless"
+      :size="size"
+      :allowInput="allowInput"
+      :status="status"
+      :suffix="suffix"
+      :suffixRotate="suffixRotate"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+      :onClear="onClear"
+      :onCompositionStart="onCompositionStart"
+      :onCompositionEnd="onCompositionEnd"
+      :onInput="onInput"
+      :onInputValueChange="onInputValueChange"
+      :onItemRemove="onItemRemove"
+    ></IxSelector>
+    <IxSpace align="center">
+      <IxSpace align="center">
+        <span>enabled</span>
+        <IxSwitch v-model:checked="enabled">enabled</IxSwitch>
+      </IxSpace>
+      <IxSpace align="center">
+        <span>multiple</span>
+        <IxSwitch v-model:checked="multiple">multiple</IxSwitch>
+      </IxSpace>
+      <IxSpace align="center">
+        <span>clearable</span>
+        <IxSwitch v-model:checked="clearable">clearable</IxSwitch>
+      </IxSpace>
+      <IxSpace align="center">
+        <span>readonly</span>
+        <IxSwitch v-model:checked="readonly">readonly</IxSwitch>
+      </IxSpace>
+      <IxSpace align="center">
+        <span>borderless</span>
+        <IxSwitch v-model:checked="borderless">borderless</IxSwitch>
+      </IxSpace>
+    </IxSpace>
+    <IxSpace align="center">
+      <span>size: </span>
+      <IxRadioGroup v-model:value="size">
+        <IxRadio value="sm"> sm </IxRadio>
+        <IxRadio value="md"> md </IxRadio>
+        <IxRadio value="lg"> lg </IxRadio>
+      </IxRadioGroup>
+    </IxSpace>
+    <IxSpace align="center">
+      <span>allowInput: </span>
+      <IxRadioGroup v-model:value="allowInput">
+        <IxRadio :value="true"> true </IxRadio>
+        <IxRadio :value="false"> false </IxRadio>
+        <IxRadio value="searchable"> searchable </IxRadio>
+      </IxRadioGroup>
+    </IxSpace>
+    <IxSpace align="center">
+      <span>status: </span>
+      <IxRadioGroup v-model:value="status">
+        <IxRadio value="valid"> valid </IxRadio>
+        <IxRadio value="invalid"> invalid </IxRadio>
+        <IxRadio value="validating"> validating </IxRadio>
+      </IxRadioGroup>
+    </IxSpace>
+    <IxSpace align="center">
+      <span>suffix: </span>
+      <IxRadioGroup v-model:value="suffix">
+        <IxRadio value="down"> down </IxRadio>
+        <IxRadio value="search"> search </IxRadio>
+        <IxRadio value="calendar"> calendar </IxRadio>
+      </IxRadioGroup>
+    </IxSpace>
+    <IxSpace align="center">
+      <span>suffixRotate: </span>
+      <IxRadioGroup v-model:value="suffixRotate">
+        <IxRadio :value="false"> false </IxRadio>
+        <IxRadio :value="true"> true </IxRadio>
+        <IxRadio :value="180"> 180 </IxRadio>
+      </IxRadioGroup>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { SelectorData } from '@idux/components/selector'
+
+const dataSoure: SelectorData[] = [
+  {
+    key: 1,
+    label: 'item-1',
+  },
+  {
+    key: 2,
+    label: 'item-1',
+  },
+  {
+    key: 3,
+    label: 'item-1',
+    disabled: true,
+  },
+]
+
+const enabled = ref(true)
+const multiple = ref(true)
+const clearable = ref(false)
+const readonly = ref(false)
+const borderless = ref(false)
+const allowInput = ref(false)
+const size = ref<'sm' | 'md' | 'lg'>('md')
+const status = ref<'valid' | 'invalid' | 'validating'>('valid')
+const suffix = ref('down')
+const suffixRotate = ref(false)
+
+const onFocus = (evt: FocusEvent) => {
+  console.log('focus', evt)
+}
+const onBlur = (evt: FocusEvent) => {
+  console.log('blur', evt)
+}
+const onClear = (evt: MouseEvent) => {
+  console.log('clear', evt)
+}
+const onCompositionStart = (evt: CompositionEvent) => {
+  console.log('compositionstart', evt)
+}
+const onCompositionEnd = (evt: CompositionEvent) => {
+  console.log('compositionend', evt)
+}
+const onInput = (evt: Event) => {
+  console.log('input', evt)
+}
+const onInputValueChange = (value: string) => {
+  console.log('inputValueChange', value)
+}
+const onItemRemove = (value: number) => {
+  console.log('itemRemove', value)
+}
+</script>

packages/components/selector/docs/Api.en.md

@@ -0,0 +1,20 @@
+
+### IxSelector
+
+#### SelectorProps
+
+| Name | Description | Type | Default | Global Config | Remark |
+| --- | --- | --- | --- | --- | --- |
+| - | - | - | - | ✅ | - |
+
+#### SelectorSlots
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+#### SelectorMethods
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |

packages/components/selector/docs/Api.zh.md

@@ -0,0 +1,80 @@
+
+### IxSelector
+
+#### SelectorProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `allowInput` | 是否允许输入 | `boolean \| 'searchable'` | - | - | 配置为 `'searchable'` 表示可搜索 |
+| `autocomplete` | 是否自动补全 | `boolean` | - | - | - |
+| `autofocus` | 是否自动聚焦 | `boolean` | - | - | - |
+| `borderless` | 是否无边框 | `boolean` | - | - | - |
+| `clearable` | 是否可清除 | `boolean` | - | - | - |
+| `clearIcon` | 清除图标 | `string \| #clearIcon` | `'close-circle'` | - | - |
+| `dataSource` | 选择框数据 | `SelectorData[]` | - | - | - |
+| `disabled` | 是否禁用 | `boolean` | - | - | - |
+| `focused` | 是否聚焦 | `boolean` | - | - | - |
+| `getKey` | 获取数据的唯一标识 | `string \| (data: any) => VKey` | `key` | - | - |
+| `labelKey` | 选项 label 的 key | `string` | `label` | - | - |
+| `maxLabel` | 最多显示多少个标签 | `number \| 'responsive'` | - | - | 响应式模式会对性能产生损耗 |
+| `multiple` | 是否多选 | `boolean` | - | - | - |
+| `monitorFocus` | 是否监听内部的focus | `boolean` | `true` | - | 如果不监听，则 `onFocus` 和 `onBlur` 事件不会真正生效 |
+| `opened` | 是否处于打开的状态 | `boolean` | `false` | - | 由于选择框主要用于带有下拉面板的场景，该状态是为了配合表现面板打开的状态效果 |
+| `placeholder` | 占位符 | `string` | - | - | - |
+| `readonly` | 是否是只读 | `boolean` | - | - | - |
+| `size` | 设置选择框大小 | `'sm' \| 'md' \| 'lg'` | `md` | - | - |
+| `status` | 手动指定校验状态 | `valid \| invalid \| validating` | - | - | - |
+| `suffix` | 设置后缀图标 | `string \| #suffix` | `down` | - | - |
+| `suffixRotate` | 后缀图标的旋转角度 | `string \| number \| boolean` | - | - | 配置为 `false` 则不会旋转 |
+| `onClear` | 清除图标被点击后的回调 | `(evt: MouseEvent) => void` | - | - | - |
+| `onFocus` | 获取焦点后的回调 | `(evt: FocusEvent) => void` | - | - | - |
+| `onBlur` | 失去焦点后的回调 | `(evt: FocusEvent) => void` | - | - | - |
+| `onCompositionStart` | 输入框的 `compositionstart` 事件 | `(evt: CompositionEvent) => void` | - | - | - |
+| `onCompositionEnd` | 输入框的 `compositionend` 事件 | `(evt: CompositionEvent) => void` | - | - | - |
+| `onInput` | 输入框的 `input` 事件 | `(evt: Event) => void` | - | - | - |
+| `onInputValueChange` | 输入的内容变化后的回调事件 | `(value: string) => void` | - | - | 该事件区别于 `onInput` 在于，只会在输入的值变更之后触发，`composition` 阶段不触发 |
+| `onItemRemove` | 选项被移除的回调事件 | `(value: any) => void` | - | - | - |
+
+```ts
+interface SelectorData<K = VKey> {
+  disabled?: boolean
+  key?: K
+  label?: string | number
+  value?: any
+  rawData?: any // 原始数据，不提供则认为数据本身是原始数据，提供给插槽作为参数
+  customLabel?: string | ((data: SelectorData<K>) => VNodeChild)
+
+  [key: string]: any
+}
+```
+
+#### SelectorSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+|  -- | -- | -- | -- |
+| `suffix` | 自定义后缀 |  - | - |
+| `clearIcon` | 自定义清除图标 |  - | - |
+| `placeholder` | 自定义占位符 |  - | - |
+| `selectedItem` | 自定义选中项 | `data: SelectedItemProps` | 使用该插槽后`selectedLabel`将无效 |
+| `selectedLabel` | 自定义选中的标签 | `data: SelectorData` |  |
+| `overflowedLabel` | 自定义超出最多显示多少个标签的内容 | `data: SelectOption[]` | 参数为超出的数组 |
+
+```ts
+interface SelectedItemProps {
+  disabled: boolean
+  key: VKey
+  prefixCls: string
+  removable: boolean
+  label: string
+  value: unknown
+  onRemove: (key: VKey) => void
+}
+```
+
+#### SelectorMethods
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `blur` | 失去焦点 | - | - |
+| `focus` | 获取焦点 | - | - |
+| `clearInput` | 清除输入 | `() => void` | - |

packages/components/selector/docs/Design.zh.md

@@ -0,0 +1,3 @@
+## 组件定义
+
+选择框

packages/components/selector/docs/Index.en.md

@@ -0,0 +1,9 @@
+---
+category: components
+type: Data Entry
+title: Selector
+subtitle:
+order: 0
+---
+
+

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

@@ -0,0 +1,8 @@
+---
+category: components
+type: 数据录入
+title: Selector
+subtitle: 选择框
+order: 0
+---
+

packages/components/selector/index.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { SelectorComponent } from './src/types'
+
+import Selector from './src/Selector'
+
+const IxSelector = Selector as unknown as SelectorComponent
+
+export { IxSelector }
+
+export type {
+  SelectorInstance,
+  SelectorComponent,
+  SelectorPublicProps as SelectorProps,
+  SelectorData,
+} from './src/types'