-
Notifications
You must be signed in to change notification settings - Fork 141
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp): add selector component (#1861)
- Loading branch information
Showing
20 changed files
with
1,108 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
title: | ||
zh: 基本使用 | ||
en: Basic usage | ||
order: 0 | ||
--- | ||
|
||
## zh | ||
|
||
最简单的用法。 | ||
|
||
## en | ||
|
||
The simplest usage. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | | ||
| --- | --- | --- | --- | | ||
| - | - | - | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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` | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
## 组件定义 | ||
|
||
选择框 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
--- | ||
category: components | ||
type: Data Entry | ||
title: Selector | ||
subtitle: | ||
order: 0 | ||
--- | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
--- | ||
category: components | ||
type: 数据录入 | ||
title: Selector | ||
subtitle: 选择框 | ||
order: 0 | ||
--- | ||
|
Empty file.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' |
Oops, something went wrong.