diff --git a/src/auto-complete/auto-complete.tsx b/src/auto-complete/auto-complete.tsx index b05b43527d..47e9e184b7 100644 --- a/src/auto-complete/auto-complete.tsx +++ b/src/auto-complete/auto-complete.tsx @@ -1,7 +1,7 @@ import { computed, ref, defineComponent, toRefs, nextTick } from 'vue'; import props from './props'; import { TdAutoCompleteProps } from './type'; -import Input, { InputProps, TdInputProps } from '../input'; +import Input, { InputProps, StrInputProps } from '../input'; import Popup, { PopupProps } from '../popup'; import useCommonClassName from '../hooks/useCommonClassName'; import AutoCompleteOptionList from './option-list'; @@ -52,7 +52,7 @@ export default defineComponent({ return classes; }); - const onInputChange: TdInputProps['onChange'] = (value, context) => { + const onInputChange: StrInputProps['onChange'] = (value, context) => { setTValue(value, context); }; @@ -65,7 +65,7 @@ export default defineComponent({ return tProps; }); - const onInnerFocus: InputProps['onFocus'] = (value, context) => { + const onInnerFocus: StrInputProps['onFocus'] = (value, context) => { popupVisible.value = true; props.onFocus?.({ ...context, value }); nextTick(() => { @@ -73,7 +73,7 @@ export default defineComponent({ }); }; - const onInnerBlur: InputProps['onBlur'] = (value, context) => { + const onInnerBlur: StrInputProps['onBlur'] = (value, context) => { props.onBlur?.({ ...context, value }); }; @@ -85,7 +85,7 @@ export default defineComponent({ props.onCompositionstart?.({ ...context, value }); }; - const onInnerEnter: InputProps['onEnter'] = (value, context) => { + const onInnerEnter: StrInputProps['onEnter'] = (value, context) => { props.onEnter?.({ ...context, value }); }; diff --git a/src/input-number/useInputNumber.tsx b/src/input-number/useInputNumber.tsx index 763efa5389..e1d6996762 100644 --- a/src/input-number/useInputNumber.tsx +++ b/src/input-number/useInputNumber.tsx @@ -15,7 +15,7 @@ import { largeNumberToFixed, } from '../_common/js/input-number/number'; import { useFormDisabled } from '../form/hooks'; -import { TdInputProps } from '../input'; +import { StrInputProps } from '../input'; /** * 独立一个组件 Hook 方便用户直接使用相关逻辑 自定义任何样式的数字输入框 @@ -159,7 +159,7 @@ export default function useInputNumber(props: TdInputNumberProps) { setTValue(r.newValue, { type: 'add', e }); }; - const onInnerInputChange: TdInputProps['onChange'] = (inputValue, { e }) => { + const onInnerInputChange: StrInputProps['onChange'] = (inputValue, { e }) => { // 千分位处理 const val = formatThousandths(inputValue); diff --git a/src/input/__tests__/vitest-input.test.jsx b/src/input/__tests__/vitest-input.test.jsx index 9cc960c37f..995a2c9e9b 100644 --- a/src/input/__tests__/vitest-input.test.jsx +++ b/src/input/__tests__/vitest-input.test.jsx @@ -399,7 +399,7 @@ describe('Input Component', () => { wrapper.find('input').trigger('focus'); await wrapper.vm.$nextTick(); expect(onFocusFn).toHaveBeenCalled(1); - expect(onFocusFn.mock.calls[0][0]).toBe(''); + expect(onFocusFn.mock.calls[0][0]).toBe(undefined); expect(onFocusFn.mock.calls[0][1].e.type).toBe('focus'); }); diff --git a/src/input/_example/base.vue b/src/input/_example/base.vue index 44ebef17a9..f8e50ea322 100644 --- a/src/input/_example/base.vue +++ b/src/input/_example/base.vue @@ -5,9 +5,9 @@ - + - + @@ -33,4 +33,8 @@ const onFocus = (val, ctx) => { const onBlur = (val, ctx) => { console.log('blur:', val, ctx); }; + +const onNumberChange = (val, ctx) => { + console.log(val, ctx); +}; diff --git a/src/input/index.ts b/src/input/index.ts index 4b500ac97f..0a25959f09 100644 --- a/src/input/index.ts +++ b/src/input/index.ts @@ -1,12 +1,16 @@ import _Input from './input'; import _InputGroup from './input-group'; import withInstall from '../utils/withInstall'; -import { TdInputProps } from './type'; +import { InputValue, TdInputProps } from './type'; import './style'; export * from './type'; -export type InputProps = TdInputProps; +export type InputProps = TdInputProps; +export type InputBlurEventParams = Parameters; +export type InputFocusEventParams = Parameters; +export type StrInputProps = TdInputProps; +export type NumberInputProps = TdInputProps; export const Input = withInstall(_Input); export const InputGroup = withInstall(_InputGroup); diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md index d5923d22b8..c48435a75f 100644 --- a/src/input/input.en-US.md +++ b/src/input/input.en-US.md @@ -5,43 +5,44 @@ name | type | default | description | required -- | -- | -- | -- | -- -align | String | left | options: left/center/right | N -allowInputOverMax | Boolean | false | \- | N -autoWidth | Boolean | false | \- | N -autocomplete | String | undefined | \- | N -autofocus | Boolean | false | \- | N -clearable | Boolean | false | \- | N -disabled | Boolean | - | \- | N -format | Function | - | Typescript:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N -inputClass | String / Object / Array | - | Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +align | String | left | text align type。options: left/center/right | N +allowInputOverMax | Boolean | false | allow to continue input on value length is over `maxlength` or `maxcharacter` | N +autoWidth | Boolean | false | input width is fit to input content | N +autocomplete | String | undefined | attribute of input element, [see here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N +autofocus | Boolean | false | autofocus on first rendered | N +borderless | Boolean | false | input without border | N +clearable | Boolean | false | show clear icon, clicked to clear input value | N +disabled | Boolean | - | make input to be disabled | N +format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript:`InputFormatType` `type InputFormatType = (value: string) => string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +inputClass | String / Object / Array | - | add className to the element with `t-input` class。Typescript:`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +label | String / Slot / Function | - | text on the left of input。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N maxcharacter | Number | - | \- | N -maxlength | Number / String | - | \- | N +maxlength | String / Number | - | \- | N name | String | - | \- | N placeholder | String | undefined | \- | N prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N readonly | Boolean | false | \- | N -showClearIconOnEmpty | Boolean | false | \- | N +showClearIconOnEmpty | Boolean | false | show clear icon on empty input value | N showLimitNumber | Boolean | false | show limit number text on the right | N -size | String | medium | options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +size | String | medium | make input to be different size。options: small/medium/large。Typescript:`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N status | String | undefined | options: default/success/warning/error | N -suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -type | String | text | options: text/number/url/tel/password/search/submit/hidden | N -value | String | '' | `v-model` and `v-model:value` is supported。Typescript:`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N -defaultValue | String | '' | uncontrolled property。Typescript:`InputValue` `type InputValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N -onBlur | Function | | Typescript:`(value: InputValue, context: { e: FocusEvent }) => void` | N -onChange | Function | | Typescript:`(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void` | N +suffix | String / Slot / Function | - | suffix content before suffixIcon。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | suffix icon of input。Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +tips | String / Slot / Function | - | tips on the bottom of input, different `status` can make tips to be different color。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +type | String | text | type attribute of input element. if you are using `type=number`, `InputNumber` Component might be better。options: text/number/url/tel/password/search/submit/hidden | N +value | String / Number | - | input value。`v-model` and `v-model:value` is supported。Typescript:`T` `type InputValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +defaultValue | String / Number | - | input value。uncontrolled property。Typescript:`T` `type InputValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +onBlur | Function | | Typescript:`(value: T, context: { e: FocusEvent }) => void` | N +onChange | Function | | Typescript:`(value: T, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void`trigger on input value changed | N onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N -onCompositionend | Function | | Typescript:`(value: InputValue, context: { e: CompositionEvent }) => void`trigger on compositionend | N -onCompositionstart | Function | | Typescript:`(value: InputValue, context: { e: CompositionEvent }) => void`trigger on compositionstart | N -onEnter | Function | | Typescript:`(value: InputValue, context: { e: KeyboardEvent }) => void` | N -onFocus | Function | | Typescript:`(value: InputValue, context: { e: FocusEvent }) => void` | N -onKeydown | Function | | Typescript:`(value: InputValue, context: { e: KeyboardEvent }) => void` | N -onKeypress | Function | | Typescript:`(value: InputValue, context: { e: KeyboardEvent }) => void` | N -onKeyup | Function | | Typescript:`(value: InputValue, context: { e: KeyboardEvent }) => void` | N +onCompositionend | Function | | Typescript:`(value: string, context: { e: CompositionEvent }) => void`trigger on compositionend | N +onCompositionstart | Function | | Typescript:`(value: string, context: { e: CompositionEvent }) => void`trigger on compositionstart | N +onEnter | Function | | Typescript:`(value: T, context: { e: KeyboardEvent }) => void` | N +onFocus | Function | | Typescript:`(value: T, context: { e: FocusEvent }) => void` | N +onKeydown | Function | | Typescript:`(value: T, context: { e: KeyboardEvent }) => void` | N +onKeypress | Function | | Typescript:`(value: T, context: { e: KeyboardEvent }) => void` | N +onKeyup | Function | | Typescript:`(value: T, context: { e: KeyboardEvent }) => void` | N onMouseenter | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseenter | N onMouseleave | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseleave | N onPaste | Function | | Typescript:`(context: { e: ClipboardEvent; pasteValue: string }) => void` | N @@ -52,17 +53,17 @@ onWheel | Function | | Typescript:`(context: { e: WheelEvent }) => void` name | params | description -- | -- | -- -blur | `(value: InputValue, context: { e: FocusEvent })` | \- -change | `(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' })` | \- +blur | `(value: T, context: { e: FocusEvent })` | \- +change | `(value: T, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' })` | trigger on input value changed clear | `(context: { e: MouseEvent })` | \- click | `(context: { e: MouseEvent })` | \- -compositionend | `(value: InputValue, context: { e: CompositionEvent })` | trigger on compositionend -compositionstart | `(value: InputValue, context: { e: CompositionEvent })` | trigger on compositionstart -enter | `(value: InputValue, context: { e: KeyboardEvent })` | \- -focus | `(value: InputValue, context: { e: FocusEvent })` | \- -keydown | `(value: InputValue, context: { e: KeyboardEvent })` | \- -keypress | `(value: InputValue, context: { e: KeyboardEvent })` | \- -keyup | `(value: InputValue, context: { e: KeyboardEvent })` | \- +compositionend | `(value: string, context: { e: CompositionEvent })` | trigger on compositionend +compositionstart | `(value: string, context: { e: CompositionEvent })` | trigger on compositionstart +enter | `(value: T, context: { e: KeyboardEvent })` | \- +focus | `(value: T, context: { e: FocusEvent })` | \- +keydown | `(value: T, context: { e: KeyboardEvent })` | \- +keypress | `(value: T, context: { e: KeyboardEvent })` | \- +keyup | `(value: T, context: { e: KeyboardEvent })` | \- mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- diff --git a/src/input/input.md b/src/input/input.md index eb257dab02..0dc9498bf4 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -10,13 +10,14 @@ allowInputOverMax | Boolean | false | 超出 `maxlength` 或 `maxcharacter` 之 autoWidth | Boolean | false | 宽度随内容自适应 | N autocomplete | String | undefined | 是否开启自动填充功能,HTML5 原生属性,[点击查看详情](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) | N autofocus | Boolean | false | 自动聚焦 | N +borderless | Boolean | false | 【开发中】无边框模式 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | - | 是否禁用输入框 | N -format | Function | - | 指定输入框展示值的格式。TS 类型:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +format | Function | - | 指定输入框展示值的格式。注意 `type=number` 时请勿使用,此功能建议更为使用 `InputNumber` 组件。TS 类型:`InputFormatType` `type InputFormatType = (value: string) => string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N inputClass | String / Object / Array | - | t-input 同级类名,示例:'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型:`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N -maxlength | Number / String | - | 用户最多可以输入的文本长度,一个中文等于一个计数长度。值为空,则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N +maxlength | String / Number | - | 用户最多可以输入的文本长度,一个中文等于一个计数长度。值为空,则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N name | String | - | 名称 | N placeholder | String | undefined | 占位符 | N prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -28,20 +29,20 @@ status | String | undefined | 输入框状态。默认情况会由组件内部 suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N tips | String / Slot / Function | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -type | String | text | 输入框类型。可选项:text/number/url/tel/password/search/submit/hidden | N -value | String | '' | 输入框的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N -defaultValue | String | '' | 输入框的值。非受控属性。TS 类型:`InputValue` `type InputValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N -onBlur | Function | | TS 类型:`(value: InputValue, context: { e: FocusEvent }) => void`失去焦点时触发 | N -onChange | Function | | TS 类型:`(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void`输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 | N +type | String | text | 输入框类型。`type=number` 仅支持最基础的数字输入功能,更多功能建议使用 `InputNumber` 组件。可选项:text/number/url/tel/password/search/submit/hidden | N +value | String / Number | - | 输入框的值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`T` `type InputValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`T` `type InputValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input/type.ts) | N +onBlur | Function | | TS 类型:`(value: T, context: { e: FocusEvent }) => void`失去焦点时触发 | N +onChange | Function | | TS 类型:`(value: T, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' }) => void`输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 | N onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`清空按钮点击时触发 | N onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击组件时触发 | N -onCompositionend | Function | | TS 类型:`(value: InputValue, context: { e: CompositionEvent }) => void`中文输入结束时触发 | N -onCompositionstart | Function | | TS 类型:`(value: InputValue, context: { e: CompositionEvent }) => void`中文输入开始时触发 | N -onEnter | Function | | TS 类型:`(value: InputValue, context: { e: KeyboardEvent }) => void`回车键按下时触发 | N -onFocus | Function | | TS 类型:`(value: InputValue, context: { e: FocusEvent }) => void`获得焦点时触发 | N -onKeydown | Function | | TS 类型:`(value: InputValue, context: { e: KeyboardEvent }) => void`键盘按下时触发 | N -onKeypress | Function | | TS 类型:`(value: InputValue, context: { e: KeyboardEvent }) => void`按下字符键时触发(keydown -> keypress -> keyup) | N -onKeyup | Function | | TS 类型:`(value: InputValue, context: { e: KeyboardEvent }) => void`释放键盘时触发 | N +onCompositionend | Function | | TS 类型:`(value: string, context: { e: CompositionEvent }) => void`中文输入结束时触发 | N +onCompositionstart | Function | | TS 类型:`(value: string, context: { e: CompositionEvent }) => void`中文输入开始时触发 | N +onEnter | Function | | TS 类型:`(value: T, context: { e: KeyboardEvent }) => void`回车键按下时触发 | N +onFocus | Function | | TS 类型:`(value: T, context: { e: FocusEvent }) => void`获得焦点时触发 | N +onKeydown | Function | | TS 类型:`(value: T, context: { e: KeyboardEvent }) => void`键盘按下时触发 | N +onKeypress | Function | | TS 类型:`(value: T, context: { e: KeyboardEvent }) => void`按下字符键时触发(keydown -> keypress -> keyup) | N +onKeyup | Function | | TS 类型:`(value: T, context: { e: KeyboardEvent }) => void`释放键盘时触发 | N onMouseenter | Function | | TS 类型:`(context: { e: MouseEvent }) => void`进入输入框时触发 | N onMouseleave | Function | | TS 类型:`(context: { e: MouseEvent }) => void`离开输入框时触发 | N onPaste | Function | | TS 类型:`(context: { e: ClipboardEvent; pasteValue: string }) => void`粘贴事件,`pasteValue` 表示粘贴板的内容 | N @@ -52,17 +53,17 @@ onWheel | Function | | TS 类型:`(context: { e: WheelEvent }) => void` 名称 | 参数 | 描述 -- | -- | -- -blur | `(value: InputValue, context: { e: FocusEvent })` | 失去焦点时触发 -change | `(value: InputValue, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' })` | 输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 +blur | `(value: T, context: { e: FocusEvent })` | 失去焦点时触发 +change | `(value: T, context?: { e?: InputEvent \| MouseEvent \| CompositionEvent; trigger: 'input' \| 'initial' \| 'clear' })` | 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 click | `(context: { e: MouseEvent })` | 点击组件时触发 -compositionend | `(value: InputValue, context: { e: CompositionEvent })` | 中文输入结束时触发 -compositionstart | `(value: InputValue, context: { e: CompositionEvent })` | 中文输入开始时触发 -enter | `(value: InputValue, context: { e: KeyboardEvent })` | 回车键按下时触发 -focus | `(value: InputValue, context: { e: FocusEvent })` | 获得焦点时触发 -keydown | `(value: InputValue, context: { e: KeyboardEvent })` | 键盘按下时触发 -keypress | `(value: InputValue, context: { e: KeyboardEvent })` | 按下字符键时触发(keydown -> keypress -> keyup) -keyup | `(value: InputValue, context: { e: KeyboardEvent })` | 释放键盘时触发 +compositionend | `(value: string, context: { e: CompositionEvent })` | 中文输入结束时触发 +compositionstart | `(value: string, context: { e: CompositionEvent })` | 中文输入开始时触发 +enter | `(value: T, context: { e: KeyboardEvent })` | 回车键按下时触发 +focus | `(value: T, context: { e: FocusEvent })` | 获得焦点时触发 +keydown | `(value: T, context: { e: KeyboardEvent })` | 键盘按下时触发 +keypress | `(value: T, context: { e: KeyboardEvent })` | 按下字符键时触发(keydown -> keypress -> keyup) +keyup | `(value: T, context: { e: KeyboardEvent })` | 释放键盘时触发 mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发 mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发 paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件,`pasteValue` 表示粘贴板的内容 diff --git a/src/input/input.tsx b/src/input/input.tsx index a2d1607d75..fbd400c0ba 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -13,9 +13,10 @@ import useInput from './useInput'; import useInputEventHandler from './useInputEventHandler'; import useInputWidth from './useInputWidth'; import isUndefined from 'lodash/isUndefined'; +import { PlainObject } from '../common'; -function getValidAttrs(obj: Record): Record { - const newObj = {}; +function getValidAttrs(obj: PlainObject): PlainObject { + const newObj: PlainObject = {}; Object.keys(obj).forEach((key) => { if (!isUndefined(obj[key])) { newObj[key] = obj[key]; diff --git a/src/input/props.ts b/src/input/props.ts index 60460def2f..8f7fc71b15 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -28,11 +28,13 @@ export default { }, /** 自动聚焦 */ autofocus: Boolean, + /** 【开发中】无边框模式 */ + borderless: Boolean, /** 是否可清空 */ clearable: Boolean, /** 是否禁用输入框 */ disabled: Boolean, - /** 指定输入框展示值的格式 */ + /** 指定输入框展示值的格式。注意 `type=number` 时请勿使用,此功能建议更为使用 `InputNumber` 组件 */ format: { type: Function as PropType, }, @@ -50,7 +52,7 @@ export default { }, /** 用户最多可以输入的文本长度,一个中文等于一个计数长度。值为空,则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ maxlength: { - type: [Number, String] as PropType, + type: [String, Number] as PropType, }, /** 名称 */ name: { @@ -102,7 +104,7 @@ export default { tips: { type: [String, Function] as PropType, }, - /** 输入框类型 */ + /** 输入框类型。`type=number` 仅支持最基础的数字输入功能,更多功能建议使用 `InputNumber` 组件 */ type: { type: String as PropType, default: 'text' as TdInputProps['type'], @@ -113,21 +115,20 @@ export default { }, /** 输入框的值 */ value: { - type: String as PropType, + type: [String, Number] as PropType, default: undefined as TdInputProps['value'], }, modelValue: { - type: String as PropType, + type: [String, Number] as PropType, default: undefined as TdInputProps['value'], }, /** 输入框的值,非受控属性 */ defaultValue: { - type: String as PropType, - default: '' as TdInputProps['defaultValue'], + type: [String, Number] as PropType, }, /** 失去焦点时触发 */ onBlur: Function as PropType, - /** 输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 */ + /** 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 */ onChange: Function as PropType, /** 清空按钮点击时触发 */ onClear: Function as PropType, diff --git a/src/input/type.ts b/src/input/type.ts index cffad7cc42..03f6d76bf3 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -6,7 +6,7 @@ import { TNode, SizeEnum, ClassName } from '../common'; -export interface TdInputProps { +export interface TdInputProps { /** * 文本内容位置,居左/居中/居右 * @default left @@ -31,6 +31,11 @@ export interface TdInputProps { * @default false */ autofocus?: boolean; + /** + * 【开发中】无边框模式 + * @default false + */ + borderless?: boolean; /** * 是否可清空 * @default false @@ -41,7 +46,7 @@ export interface TdInputProps { */ disabled?: boolean; /** - * 指定输入框展示值的格式 + * 指定输入框展示值的格式。注意 `type=number` 时请勿使用,此功能建议更为使用 `InputNumber` 组件 */ format?: InputFormatType; /** @@ -59,7 +64,7 @@ export interface TdInputProps { /** * 用户最多可以输入的文本长度,一个中文等于一个计数长度。值为空,则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 */ - maxlength?: number | string; + maxlength?: string | number; /** * 名称 * @default '' @@ -110,34 +115,31 @@ export interface TdInputProps { */ tips?: string | TNode; /** - * 输入框类型 + * 输入框类型。`type=number` 仅支持最基础的数字输入功能,更多功能建议使用 `InputNumber` 组件 * @default text */ type?: 'text' | 'number' | 'url' | 'tel' | 'password' | 'search' | 'submit' | 'hidden'; /** * 输入框的值 - * @default '' */ - value?: InputValue; + value?: T; /** * 输入框的值,非受控属性 - * @default '' */ - defaultValue?: InputValue; + defaultValue?: T; /** * 输入框的值 - * @default '' */ - modelValue?: InputValue; + modelValue?: T; /** * 失去焦点时触发 */ - onBlur?: (value: InputValue, context: { e: FocusEvent }) => void; + onBlur?: (value: T, context: { e: FocusEvent }) => void; /** - * 输入框值发生变化时触发。`trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 + * 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期,组件自动处理后触发 change 告知父组件。如:初始值长度超过 `maxlength` 限制 */ onChange?: ( - value: InputValue, + value: T, context?: { e?: InputEvent | MouseEvent | CompositionEvent; trigger: 'input' | 'initial' | 'clear' }, ) => void; /** @@ -151,31 +153,31 @@ export interface TdInputProps { /** * 中文输入结束时触发 */ - onCompositionend?: (value: InputValue, context: { e: CompositionEvent }) => void; + onCompositionend?: (value: string, context: { e: CompositionEvent }) => void; /** * 中文输入开始时触发 */ - onCompositionstart?: (value: InputValue, context: { e: CompositionEvent }) => void; + onCompositionstart?: (value: string, context: { e: CompositionEvent }) => void; /** * 回车键按下时触发 */ - onEnter?: (value: InputValue, context: { e: KeyboardEvent }) => void; + onEnter?: (value: T, context: { e: KeyboardEvent }) => void; /** * 获得焦点时触发 */ - onFocus?: (value: InputValue, context: { e: FocusEvent }) => void; + onFocus?: (value: T, context: { e: FocusEvent }) => void; /** * 键盘按下时触发 */ - onKeydown?: (value: InputValue, context: { e: KeyboardEvent }) => void; + onKeydown?: (value: T, context: { e: KeyboardEvent }) => void; /** * 按下字符键时触发(keydown -> keypress -> keyup) */ - onKeypress?: (value: InputValue, context: { e: KeyboardEvent }) => void; + onKeypress?: (value: T, context: { e: KeyboardEvent }) => void; /** * 释放键盘时触发 */ - onKeyup?: (value: InputValue, context: { e: KeyboardEvent }) => void; + onKeyup?: (value: T, context: { e: KeyboardEvent }) => void; /** * 进入输入框时触发 */ @@ -205,6 +207,6 @@ export interface TdInputGroupProps { separate?: boolean; } -export type InputFormatType = (value: InputValue) => string; +export type InputFormatType = (value: string) => string; -export type InputValue = string; +export type InputValue = string | number; diff --git a/src/input/useInput.ts b/src/input/useInput.ts index b8a7cc02dc..eb3a49ede2 100644 --- a/src/input/useInput.ts +++ b/src/input/useInput.ts @@ -5,6 +5,13 @@ import useVModel from '../hooks/useVModel'; import { useFormDisabled } from '../form/hooks'; import useLengthLimit from './useLengthLimit'; +export function getOutputValue(val: InputValue, type: TdInputProps['type']) { + if (type === 'number') { + return val || val === 0 ? Number(val) : undefined; + } + return val; +} + export interface ExtendsTdInputProps extends TdInputProps { showInput: boolean; keepWrapperWidth: boolean; @@ -61,7 +68,8 @@ export default function useInput(props: ExtendsTdInputProps, expose: (exposed: R }; const emitClear = ({ e }: { e: MouseEvent }) => { - setInnerValue('', { e, trigger: 'clear' }); + const val = props.type === 'number' ? undefined : ''; + setInnerValue(val, { e, trigger: 'clear' }); props.onClear?.({ e }); }; @@ -89,10 +97,10 @@ export default function useInput(props: ExtendsTdInputProps, expose: (exposed: R const { target } = e; let val = (target as HTMLInputElement).value; // over length: allow delete; not add - if (props.type !== 'number' && val.length > innerValue.value?.length) { + if (props.type !== 'number' && typeof innerValue.value === 'string' && val.length > innerValue.value?.length) { val = getValueByLimitNumber(val); } - setInnerValue(val, { e } as { e: InputEvent; trigger: 'input' }); + setInnerValue(getOutputValue(val, props.type), { e, trigger: 'input' }); // 受控 nextTick(() => { setInputElValue(innerValue.value); @@ -128,7 +136,10 @@ export default function useInput(props: ExtendsTdInputProps, expose: (exposed: R if (isHover.value) return; if (!isClearIcon()) { if (props.format) { - inputValue.value = props.format(innerValue.value); + inputValue.value = + typeof innerValue.value === 'number' || props.type === 'number' + ? innerValue.value + : props.format(innerValue.value); } focused.value = false; props.onBlur?.(innerValue.value, { e }); @@ -142,15 +153,16 @@ export default function useInput(props: ExtendsTdInputProps, expose: (exposed: R isComposition.value = false; compositionValue.value = ''; inputValueChangeHandle(e); - props.onCompositionend?.(innerValue.value, { e }); + props.onCompositionend?.(String(innerValue.value), { e }); }; + const onHandleCompositionstart = (e: CompositionEvent) => { isComposition.value = true; const { currentTarget: { value }, }: any = e; compositionValue.value = value; - props.onCompositionstart?.(innerValue.value, { e }); + props.onCompositionstart?.(String(innerValue.value), { e }); }; const onRootClick = (e: MouseEvent) => { @@ -173,15 +185,16 @@ export default function useInput(props: ExtendsTdInputProps, expose: (exposed: R watch( innerValue, (val, oldVal) => { + const isNumberType = props.type === 'number'; // 初始化时,如果有 format 函数,需要对 value 进行格式化 - if (oldVal === undefined && props.format) { + if (oldVal === undefined && props.format && typeof val !== 'number' && !isNumberType) { inputValue.value = props.format(val); } else { inputValue.value = val; } // limit props value - const newVal = getValueByLimitNumber(val); - if (newVal !== val && props.type !== 'number') { + const newVal = typeof val === 'number' ? val : getValueByLimitNumber(val); + if (newVal !== val && !isNumberType) { setInnerValue(newVal, { trigger: 'initial' }); } }, diff --git a/src/input/useInputEventHandler.ts b/src/input/useInputEventHandler.ts index 4df44e6dd7..efce6645df 100644 --- a/src/input/useInputEventHandler.ts +++ b/src/input/useInputEventHandler.ts @@ -1,25 +1,29 @@ import { Ref } from 'vue'; import { TdInputProps } from './type'; +import { getOutputValue } from './useInput'; export default function useInputEventHandler(props: TdInputProps, isHover: Ref) { const handleKeydown = (e: KeyboardEvent) => { if (props.disabled) return; const { code } = e; + const tmpValue = getOutputValue((e.currentTarget as HTMLInputElement).value, props.type); if (/enter/i.test(code) || /enter/i.test(e.key)) { - props.onEnter?.((e.currentTarget as HTMLInputElement).value, { e }); + props.onEnter?.(tmpValue, { e }); } else { - props.onKeydown?.((e.currentTarget as HTMLInputElement).value, { e }); + props.onKeydown?.(tmpValue, { e }); } }; const handleKeyUp = (e: KeyboardEvent) => { if (props.disabled) return; - props.onKeyup?.((e.currentTarget as HTMLInputElement).value, { e }); + const tmpValue = getOutputValue((e.currentTarget as HTMLInputElement).value, props.type); + props.onKeyup?.(tmpValue, { e }); }; const handleKeypress = (e: KeyboardEvent) => { if (props.disabled) return; - props.onKeypress?.((e.currentTarget as HTMLInputElement).value, { e }); + const tmpValue = getOutputValue((e.currentTarget as HTMLInputElement).value, props.type); + props.onKeypress?.(tmpValue, { e }); }; const onHandlePaste = (e: ClipboardEvent) => { diff --git a/src/select-input/props.ts b/src/select-input/props.ts index f17de4f1e0..4e4e25fde0 100644 --- a/src/select-input/props.ts +++ b/src/select-input/props.ts @@ -76,6 +76,8 @@ export default { defaultPopupVisible: Boolean, /** 只读状态,值为真会隐藏输入框,且无法打开下拉框 */ readonly: Boolean, + /** 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 */ + reserveKeyword: Boolean, /** 输入框状态 */ status: { type: String as PropType, @@ -112,16 +114,12 @@ export default { /** 全部标签值。值为数组表示多个标签,值为非数组表示单个数值 */ value: { type: [String, Number, Boolean, Object, Array, Date] as PropType, - default: undefined, + default: undefined as TdSelectInputProps['value'], }, /** 自定义值呈现的全部内容,参数为所有标签的值 */ valueDisplay: { type: [String, Function] as PropType, }, - /** 自定义值呈现的选项,useInputDisplay表示在使用时仍然使用组件自带的输入回显实现,usePlaceholder表示在使用时仍然使用自带的占位符实现 */ - valueDisplayOptions: { - type: Object as PropType, - }, /** 失去焦点时触发,`context.inputValue` 表示输入框的值;`context.tagInputValue` 表示标签输入框的值 */ onBlur: Function as PropType, /** 清空按钮点击时触发 */ diff --git a/src/select-input/select-input.en-US.md b/src/select-input/select-input.en-US.md index 8c78cead13..dff57783ea 100644 --- a/src/select-input/select-input.en-US.md +++ b/src/select-input/select-input.en-US.md @@ -13,8 +13,8 @@ clearable | Boolean | false | \- | N collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N disabled | Boolean | - | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N -inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N +inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`string` | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string` | N keys | Object | - | Typescript:`SelectInputKeys` `interface SelectInputKeys { label?: string; value?: string; children?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N @@ -26,21 +26,21 @@ popupProps | Object | - | Typescript:`PopupProps`,[Popup API Documents](./po popupVisible | Boolean | - | `v-model:popupVisible` is supported | N defaultPopupVisible | Boolean | - | uncontrolled property | N readonly | Boolean | false | \- | N -status | String | default | options:default/success/warning/error | N +reserveKeyword | Boolean | false | \- | N +status | String | default | options: default/success/warning/error | N suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N tag | String / Slot / Function | - | Typescript:`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N tagInputProps | Object | - | Typescript:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -value | String / Number / Boolean / Object / Array / Date | - | Typescript:`SelectInputValue` `type SelectInputValue = string \| number \| boolean \| Date \| Object \| Array \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N +value | String / Number / Boolean / Object / Array / Date | undefined | Typescript:`SelectInputValue` `type SelectInputValue = string \| number \| boolean \| Date \| Object \| Array \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N valueDisplay | String / Slot / Function | - | Typescript:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueDisplayOptions | Object | - | Custom value display. See `SelectInputValueDisplayOptions` below. TypeScript: `SelectInputValueDisplayOptions` | N onBlur | Function | | Typescript:`(value: SelectInputValue, context: SelectInputBlurContext) => void`trigger on blur。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }` | N onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N -onEnter | Function | | Typescript:`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue }) => void` | N -onFocus | Function | | Typescript:`(value: SelectInputValue, context: SelectInputFocusContext) => void`trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }` | N -onInputChange | Function | | Typescript:`(value: InputValue, context?: SelectInputValueChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` | N +onEnter | Function | | Typescript:`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }) => void` | N +onFocus | Function | | Typescript:`(value: SelectInputValue, context: SelectInputFocusContext) => void`trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }` | N +onInputChange | Function | | Typescript:`(value: string, context?: SelectInputValueChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` | N onMouseenter | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseenter | N onMouseleave | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseleave | N onPaste | Function | | Typescript:`(context: { e: ClipboardEvent; pasteValue: string }) => void` | N @@ -53,18 +53,11 @@ name | params | description -- | -- | -- blur | `(value: SelectInputValue, context: SelectInputBlurContext)` | trigger on blur。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }` clear | `(context: { e: MouseEvent })` | \- -enter | `(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue })` | \- -focus | `(value: SelectInputValue, context: SelectInputFocusContext)` | trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }` -input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` +enter | `(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue })` | \- +focus | `(value: SelectInputValue, context: SelectInputFocusContext)` | trigger on focus。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }` +input-change | `(value: string, context?: SelectInputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputChangeContext = TagInputChangeContext` - -### SelectInputValueDisplayOptions - -name | type | default | description | required --- | -- | -- | -- | -- -useInputDisplay | Boolean | false | Use with valueDisplay, enable component's integrated input display when single select(multiple disabled) with filterable enabled. In default need to render valueDisplay via input event. This option is not used when multiple select(multiple enabled), will use component's integrated input display by default. | N -usePlaceholder | Boolean | false | Use with valueDisplay, enable component's integrated placeholder implementation when single select(multiple disabled). In default need to render valueDisplay via param value(while param placeholder not rendered). This option is not used when multiple select(multiple enabled), will use component's integrated placeholder implementation by default. | N diff --git a/src/select-input/select-input.md b/src/select-input/select-input.md index 05bd41fb9b..19c95cad23 100644 --- a/src/select-input/select-input.md +++ b/src/select-input/select-input.md @@ -13,8 +13,8 @@ clearable | Boolean | false | 是否可清空 | N collapsedItems | Slot / Function | - | 标签过多的情况下,折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 `collapsedItems` 自定义。`value` 表示所有标签值,`collapsedTags` 表示折叠标签值,`count` 表示折叠的数量。TS 类型:`TNode<{ value: SelectInputValue; collapsedTags: SelectInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用 | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N -inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N -defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N +inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`string` | N +defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`string` | N keys | Object | - | 定义字段别名,示例:`{ label: 'text', value: 'id', children: 'list' }`。TS 类型:`SelectInputKeys` `interface SelectInputKeys { label?: string; value?: string; children?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | 是否处于加载状态 | N @@ -26,6 +26,7 @@ popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型:`P popupVisible | Boolean | - | 是否显示下拉框。支持语法糖 `v-model:popupVisible` | N defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N readonly | Boolean | false | 只读状态,值为真会隐藏输入框,且无法打开下拉框 | N +reserveKeyword | Boolean | false | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | N status | String | default | 输入框状态。可选项:default/success/warning/error | N suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N suffixIcon | Slot / Function | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N @@ -33,14 +34,13 @@ tag | String / Slot / Function | - | 多选场景下,自定义选中标签的 tagInputProps | Object | - | 透传 TagInput 组件全部属性。TS 类型:`TagInputProps`,[TagInput API Documents](./tag-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N tagProps | Object | - | 透传 Tag 标签组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N tips | String / Slot / Function | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -value | String / Number / Boolean / Object / Array / Date | - | 全部标签值。值为数组表示多个标签,值为非数组表示单个数值。TS 类型:`SelectInputValue` `type SelectInputValue = string \| number \| boolean \| Date \| Object \| Array \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N +value | String / Number / Boolean / Object / Array / Date | undefined | 全部标签值。值为数组表示多个标签,值为非数组表示单个数值。TS 类型:`SelectInputValue` `type SelectInputValue = string \| number \| boolean \| Date \| Object \| Array \| Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N valueDisplay | String / Slot / Function | - | 自定义值呈现的全部内容,参数为所有标签的值。TS 类型:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueDisplayOptions | Object | - | 自定义值呈现的选项。具体属性请看下方 `SelectInputValueDisplayOptions` 文档。TS 类型:`SelectInputValueDisplayOptions` | N onBlur | Function | | TS 类型:`(value: SelectInputValue, context: SelectInputBlurContext) => void`失去焦点时触发,`context.inputValue` 表示输入框的值;`context.tagInputValue` 表示标签输入框的值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }` | N onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`清空按钮点击时触发 | N -onEnter | Function | | TS 类型:`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue }) => void`按键按下 Enter 时触发 | N -onFocus | Function | | TS 类型:`(value: SelectInputValue, context: SelectInputFocusContext) => void`聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }` | N -onInputChange | Function | | TS 类型:`(value: InputValue, context?: SelectInputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` | N +onEnter | Function | | TS 类型:`(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }) => void`按键按下 Enter 时触发 | N +onFocus | Function | | TS 类型:`(value: SelectInputValue, context: SelectInputFocusContext) => void`聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }` | N +onInputChange | Function | | TS 类型:`(value: string, context?: SelectInputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` | N onMouseenter | Function | | TS 类型:`(context: { e: MouseEvent }) => void`进入输入框时触发 | N onMouseleave | Function | | TS 类型:`(context: { e: MouseEvent }) => void`离开输入框时触发 | N onPaste | Function | | TS 类型:`(context: { e: ClipboardEvent; pasteValue: string }) => void`粘贴事件,`pasteValue` 表示粘贴板的内容 | N @@ -53,18 +53,11 @@ onTagChange | Function | | TS 类型:`(value: TagInputValue, context: SelectI -- | -- | -- blur | `(value: SelectInputValue, context: SelectInputBlurContext)` | 失去焦点时触发,`context.inputValue` 表示输入框的值;`context.tagInputValue` 表示标签输入框的值。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue; }` clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 -enter | `(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue })` | 按键按下 Enter 时触发 -focus | `(value: SelectInputValue, context: SelectInputFocusContext)` | 聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: InputValue; tagInputValue?: TagInputValue; e: FocusEvent }` -input-change | `(value: InputValue, context?: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` +enter | `(value: SelectInputValue, context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue })` | 按键按下 Enter 时触发 +focus | `(value: SelectInputValue, context: SelectInputFocusContext)` | 聚焦时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputFocusContext { inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent }` +input-change | `(value: string, context?: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`interface SelectInputValueChangeContext { e?: Event \| InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent; trigger: 'input' \| 'clear' \| 'blur' \| 'focus' \| 'initial' \| 'change' }` mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发 mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发 paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件,`pasteValue` 表示粘贴板的内容 popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`import { PopupVisibleChangeContext } from '@Popup'` tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。`type SelectInputChangeContext = TagInputChangeContext` - -### SelectInputValueDisplayOptions - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -useInputDisplay | Boolean | false | 配合valueDisplay使用,单选模式(未启用multiple)时仍然使用组件自带的输入回显实现(启用filterable),默认需自行通过输入事件维护valueDisplay实现。多选模式(启用multiple)时此选项无效,会使用自带的输入回显实现。 | N -usePlaceholder | Boolean | false | 配合valueDisplay使用,单选模式(未启用multiple)时仍然使用自带的占位符实现,默认需自行通过value参数维护valueDisplay实现(同时placeholder参数无效)。多选模式(启用multiple)时此选项无效,会使用自带的占位符实现。 | N diff --git a/src/select-input/select-input.tsx b/src/select-input/select-input.tsx index 01a670728f..68b01a253d 100644 --- a/src/select-input/select-input.tsx +++ b/src/select-input/select-input.tsx @@ -1,8 +1,8 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, ref, SetupContext, toRefs, watch } from 'vue'; +import { computed, defineComponent, onBeforeUnmount, onMounted, PropType, ref, SetupContext, toRefs, watch } from 'vue'; import Popup, { PopupInstanceFunctions, PopupProps, PopupVisibleChangeContext } from '../popup'; import props from './props'; import { TdSelectInputProps } from './type'; -import useSingle from './useSingle'; +import useSingle, { SelectInputValueDisplayOptions } from './useSingle'; import useMultiple from './useMultiple'; import useOverlayInnerStyle from './useOverlayInnerStyle'; import { usePrefixClass } from '../hooks/useConfig'; @@ -21,9 +21,20 @@ const useComponentClassName = () => { export default defineComponent({ name: 'TSelectInput', - props: { ...props }, + props: { + ...props, + /** + * 非公开 API,请勿使用(后续即将删除) + * 自定义值呈现的选项 + * useInputDisplay 表示在使用时仍然使用组件自带的输入回显实现, + * usePlaceholder 表示在使用时仍然使用自带的占位符实现 + * */ + valueDisplayOptions: { + type: Object as PropType, + }, + }, - setup(props: TdSelectInputProps, context: SetupContext) { + setup(props: TdSelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext) { const { NAME_CLASS, BASE_CLASS_BORDERLESS, BASE_CLASS_MULTIPLE, BASE_CLASS_POPUP_VISIBLE, BASE_CLASS_EMPTY } = useComponentClassName(); const classPrefix = usePrefixClass(); diff --git a/src/select-input/type.ts b/src/select-input/type.ts index 25fdd11462..26471925c4 100644 --- a/src/select-input/type.ts +++ b/src/select-input/type.ts @@ -5,7 +5,6 @@ * */ import { InputProps } from '../input'; -import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { TagInputProps, TagInputValue, TagInputChangeContext } from '../tag-input'; import { TagProps } from '../tag'; @@ -53,11 +52,11 @@ export interface TdSelectInputProps { /** * 输入框的值 */ - inputValue?: InputValue; + inputValue?: string; /** * 输入框的值,非受控属性 */ - defaultInputValue?: InputValue; + defaultInputValue?: string; /** * 定义字段别名,示例:`{ label: 'text', value: 'id', children: 'list' }` */ @@ -107,6 +106,11 @@ export interface TdSelectInputProps { * @default false */ readonly?: boolean; + /** + * 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 + * @default false + */ + reserveKeyword?: boolean; /** * 输入框状态 * @default default @@ -144,10 +148,6 @@ export interface TdSelectInputProps { * 自定义值呈现的全部内容,参数为所有标签的值 */ valueDisplay?: string | TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>; - /** - * 自定义值呈现的选项,useInputDisplay表示在使用时仍然使用组件自带的输入回显实现,usePlaceholder表示在使用时仍然使用自带的占位符实现 - */ - valueDisplayOptions?: SelectInputValueDisplayOptions; /** * 失去焦点时触发,`context.inputValue` 表示输入框的值;`context.tagInputValue` 表示标签输入框的值 */ @@ -161,7 +161,7 @@ export interface TdSelectInputProps { */ onEnter?: ( value: SelectInputValue, - context: { e: KeyboardEvent; inputValue: InputValue; tagInputValue?: TagInputValue }, + context: { e: KeyboardEvent; inputValue: string; tagInputValue?: TagInputValue }, ) => void; /** * 聚焦时触发 @@ -170,7 +170,7 @@ export interface TdSelectInputProps { /** * 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发等 */ - onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void; + onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void; /** * 进入输入框时触发 */ @@ -204,7 +204,7 @@ export type SelectInputValue = string | number | boolean | Date | Object | Array export type SelectInputBlurContext = PopupVisibleChangeContext & { inputValue: string; tagInputValue?: TagInputValue }; export interface SelectInputFocusContext { - inputValue: InputValue; + inputValue: string; tagInputValue?: TagInputValue; e: FocusEvent; } @@ -215,8 +215,3 @@ export interface SelectInputValueChangeContext { } export type SelectInputChangeContext = TagInputChangeContext; - -export interface SelectInputValueDisplayOptions { - useInputDisplay: boolean; - usePlaceholder: boolean; -} diff --git a/src/select-input/useSingle.tsx b/src/select-input/useSingle.tsx index ebfed73d94..b757366650 100644 --- a/src/select-input/useSingle.tsx +++ b/src/select-input/useSingle.tsx @@ -1,7 +1,7 @@ import { SetupContext, ref, computed, toRefs, Ref } from 'vue'; import isObject from 'lodash/isObject'; import pick from 'lodash/pick'; -import Input, { InputProps, TdInputProps } from '../input'; +import Input, { StrInputProps } from '../input'; import Loading from '../loading'; import { useTNodeJSX } from '../hooks/tnode'; import { usePrefixClass } from '../hooks/useConfig'; @@ -32,13 +32,18 @@ const DEFAULT_KEYS = { children: 'children', }; +export interface SelectInputValueDisplayOptions { + useInputDisplay: boolean; + usePlaceholder: boolean; +} + function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) { const iKeys = { ...DEFAULT_KEYS, ...keys }; return isObject(value) ? value[iKeys.label] : value; } export default function useSingle( - props: TdSelectInputProps, + props: TdSelectInputProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, context: SetupContext, popupRef: Ref, ) { @@ -66,7 +71,7 @@ export default function useSingle( setInputValue('', { trigger: 'clear' }); }; - const onInnerInputChange: TdInputProps['onChange'] = (value, context) => { + const onInnerInputChange: StrInputProps['onChange'] = (value, context) => { if (props.allowInput) { setInputValue(value, { ...context, trigger: context.trigger || 'input' }); } @@ -97,18 +102,18 @@ export default function useSingle( ? [`${classPrefix.value}-input--focused`, `${classPrefix.value}-is-focused`, inputProps?.inputClass] : inputProps?.inputClass; - const onEnter: InputProps['onEnter'] = (val, context) => { + const onEnter: StrInputProps['onEnter'] = (val, context) => { props.onEnter?.(value.value, { ...context, inputValue: val }); }; - const onFocus: InputProps['onFocus'] = (val, context) => { + const onFocus: StrInputProps['onFocus'] = (val, context) => { const overlayState = popupRef.value?.getOverlayState(); if (isSingleFocus.value || overlayState?.hover) return; isSingleFocus.value = true; props.onFocus?.(value.value, { ...context, inputValue: val }); }; - const onBlur: InputProps['onBlur'] = (val, context) => { + const onBlur: StrInputProps['onBlur'] = (val, context) => { const overlayState = popupRef.value?.getOverlayState(); if (overlayState?.hover) return; isSingleFocus.value = false; diff --git a/src/select/props.ts b/src/select/props.ts index bf99ae075c..0556695077 100644 --- a/src/select/props.ts +++ b/src/select/props.ts @@ -178,10 +178,6 @@ export default { valueDisplay: { type: [String, Function] as PropType, }, - /** 自定义值呈现的选项,useInputDisplay表示在使用时仍然使用组件自带的输入回显实现,usePlaceholder表示在使用时仍然使用自带的占位符实现 */ - valueDisplayOptions: { - type: Object as PropType, - }, /** 用于控制选中值的类型。假设数据选项为:`[{ label: '姓名', value: 'name' }]`,value 表示值仅返回数据选项中的 value, object 表示值返回全部数据。 */ valueType: { type: String as PropType, diff --git a/src/select/select.en-US.md b/src/select/select.en-US.md index 2cf427bf9c..8b6ca7c1d1 100644 --- a/src/select/select.en-US.md +++ b/src/select/select.en-US.md @@ -48,7 +48,6 @@ tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more value | String / Number / Boolean / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N defaultValue | String / Number / Boolean / Object / Array | - | uncontrolled property。Typescript:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N valueDisplay | String / Slot / Function | - | `MouseEvent`。Typescript:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueDisplayOptions | Object | - | Custom select item display. See `SelectInputValueDisplayOptions` below. TypeScript: `SelectInputValueDisplayOptions` | N valueType | String | value | options: value/object | N onBlur | Function | | Typescript:`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void` | N onChange | Function | | Typescript:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'` | N @@ -104,10 +103,3 @@ isFixedRowHeight | Boolean | false | \- | N rowHeight | Number | - | \- | N threshold | Number | 100 | \- | N type | String | - | required。options: lazy/virtual | Y - -### SelectInputValueDisplayOptions - -name | type | default | description | required --- | -- | -- | -- | -- -useInputDisplay | Boolean | false | Use with valueDisplay, enable component's integrated input display when single select(multiple disabled) with filterable enabled. In default need to render valueDisplay via input event. This option is not used when multiple select(multiple enabled), will use component's integrated input display by default. | N -usePlaceholder | Boolean | false | Use with valueDisplay, enable component's integrated placeholder implementation when single select(multiple disabled). In default need to render valueDisplay via param value(while param placeholder not rendered). This option is not used when multiple select(multiple enabled), will use component's integrated placeholder implementation by default. | N diff --git a/src/select/select.md b/src/select/select.md index cc4468c458..853654e277 100644 --- a/src/select/select.md +++ b/src/select/select.md @@ -48,7 +48,6 @@ tips | String / Slot / Function | - | 输入框下方提示文本,会根据不 value | String / Number / Boolean / Object / Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N defaultValue | String / Number / Boolean / Object / Array | - | 选中值。非受控属性。TS 类型:`SelectValue` `type SelectValue = string \| number \| boolean \| T \| Array>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N valueDisplay | String / Slot / Function | - | 自定义选中项呈现的内容。TS 类型:`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -valueDisplayOptions | Object | - | 自定义选中项呈现的选项。具体属性请看下方 `SelectInputValueDisplayOptions` 文档。TS 类型:`SelectInputValueDisplayOptions` | N valueType | String | value | 用于控制选中值的类型。假设数据选项为:`[{ label: '姓名', value: 'name' }]`,value 表示值仅返回数据选项中的 value, object 表示值返回全部数据。。可选项:value/object | N onBlur | Function | | TS 类型:`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`输入框失去焦点时触发 | N onChange | Function | | TS 类型:`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`选中值变化时触发。`context.trigger` 表示触发变化的来源;`context.selectedOptions` 表示选中值的完整对象,数组长度一定和 `value` 相同;`context.option` 表示当前操作的选项,不一定存在。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'` | N @@ -104,10 +103,3 @@ isFixedRowHeight | Boolean | false | 表示每行内容是否同一个固定高 rowHeight | Number | - | 行高,不会给``元素添加样式高度,仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置,可尽量将该属性设置为每行平均高度,从而使得滚动过程更加平滑 | N threshold | Number | 100 | 启动虚拟滚动的阈值。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动 | N type | String | - | 必需。滚动加载类型,有两种:懒加载和虚拟滚动。值为 `lazy` ,表示滚动时会进行懒加载,非可视区域内的内容将不会默认渲染,直到该内容可见时,才会进行渲染,并且已渲染的内容滚动到不可见时,不会被销毁;值为`virtual`时,表示会进行虚拟滚动,无论滚动条滚动到哪个位置,同一时刻,仅渲染该可视区域内的内容,当需要展示的数据量较大时,建议开启该特性。可选项:lazy/virtual | Y - -### SelectInputValueDisplayOptions - -名称 | 类型 | 默认值 | 说明 | 必传 --- | -- | -- | -- | -- -useInputDisplay | Boolean | false | 配合valueDisplay使用,单选模式(未启用multiple)时仍然使用组件自带的输入回显实现(启用filterable),默认需自行通过输入事件维护valueDisplay实现。多选模式(启用multiple)时此选项无效,会使用自带的输入回显实现。 | N -usePlaceholder | Boolean | false | 配合valueDisplay使用,单选模式(未启用multiple)时仍然使用自带的占位符实现,默认需自行通过value参数维护valueDisplay实现(同时placeholder参数无效)。多选模式(启用multiple)时此选项无效,会使用自带的占位符实现。 | N diff --git a/src/select/select.tsx b/src/select/select.tsx index f12e6f1b0e..424171293b 100644 --- a/src/select/select.tsx +++ b/src/select/select.tsx @@ -1,4 +1,4 @@ -import { defineComponent, provide, computed, toRefs, watch, ref, nextTick } from 'vue'; +import { defineComponent, provide, computed, toRefs, watch, ref, nextTick, PropType } from 'vue'; import picker from 'lodash/pick'; import isArray from 'lodash/isArray'; import isFunction from 'lodash/isFunction'; @@ -6,11 +6,9 @@ import debounce from 'lodash/debounce'; import cloneDeep from 'lodash/cloneDeep'; import get from 'lodash/get'; import intersection from 'lodash/intersection'; - import FakeArrow from '../common-components/fake-arrow'; import SelectInput from '../select-input'; import SelectPanel from './select-panel'; - import props from './props'; // hooks import { useFormDisabled } from '../form/hooks'; @@ -21,15 +19,23 @@ import { useConfig, usePrefixClass } from '../hooks/useConfig'; import { selectInjectKey, getSingleContent, getMultipleContent } from './helper'; import { useSelectOptions } from './hooks/useSelectOptions'; import useKeyboardControl from './hooks/useKeyboardControl'; - import type { PopupVisibleChangeContext } from '../popup'; import type { SelectInputValueChangeContext } from '../select-input'; import type { TdSelectProps, SelectValue } from './type'; +import { SelectInputValueDisplayOptions } from '../select-input/useSingle'; export default defineComponent({ name: 'TSelect', - props: { ...props }, - setup(props: TdSelectProps, { slots }) { + props: { + ...props, + /** + * 非公开 API,请勿使用(后续即将删除) + */ + valueDisplayOptions: { + type: Object as PropType, + }, + }, + setup(props: TdSelectProps & { valueDisplayOptions: SelectInputValueDisplayOptions }, { slots }) { const classPrefix = usePrefixClass(); const disabled = useFormDisabled(); const renderTNodeJSX = useTNodeJSX(); diff --git a/src/select/type.ts b/src/select/type.ts index 50ad7be692..08bf55221f 100644 --- a/src/select/type.ts +++ b/src/select/type.ts @@ -5,9 +5,8 @@ * */ import { InputProps } from '../input'; -import { InputValue } from '../input'; import { PopupProps } from '../popup'; -import { SelectInputProps, SelectInputValueDisplayOptions } from '../select-input'; +import { SelectInputProps } from '../select-input'; import { TagInputProps } from '../tag-input'; import { TagProps } from '../tag'; import { SelectInputValueChangeContext } from '../select-input'; @@ -67,11 +66,11 @@ export interface TdSelectProps { /** * 输入框的值 */ - inputValue?: InputValue; + inputValue?: string; /** * 输入框的值,非受控属性 */ - defaultInputValue?: InputValue; + defaultInputValue?: string; /** * 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */ @@ -205,10 +204,6 @@ export interface TdSelectProps { * 自定义选中项呈现的内容 */ valueDisplay?: string | TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>; - /** - * 自定义值呈现的选项,useInputDisplay表示在使用时仍然使用组件自带的输入回显实现,usePlaceholder表示在使用时仍然使用自带的占位符实现 - */ - valueDisplayOptions?: SelectInputValueDisplayOptions; /** * 用于控制选中值的类型。假设数据选项为:`[{ label: '姓名', value: 'name' }]`,value 表示值仅返回数据选项中的 value, object 表示值返回全部数据。 * @default value @@ -244,7 +239,7 @@ export interface TdSelectProps { /** * 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 */ - onInputChange?: (value: InputValue, context?: SelectInputValueChangeContext) => void; + onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void; /** * 下拉框显示或隐藏时触发 */ diff --git a/src/tag-input/props.ts b/src/tag-input/props.ts index a893d31f19..a220f668f5 100644 --- a/src/tag-input/props.ts +++ b/src/tag-input/props.ts @@ -36,12 +36,12 @@ export default { /** 输入框的值 */ inputValue: { type: [String, Number] as PropType, - default: undefined, + default: undefined as TdTagInputProps['inputValue'], }, /** 输入框的值,非受控属性 */ defaultInputValue: { type: [String, Number] as PropType, - default: '', + default: '' as TdTagInputProps['defaultInputValue'], }, /** 左侧文本 */ label: { @@ -61,6 +61,10 @@ export default { type: String, default: undefined, }, + /** 组件前置图标 */ + prefixIcon: { + type: Function as PropType, + }, /** 只读状态,值为真会隐藏标签移除按钮和输入框 */ readonly: Boolean, /** 尺寸 */ @@ -88,10 +92,6 @@ export default { suffixIcon: { type: Function as PropType, }, - /** 组件前置图标 */ - prefixIcon: { - type: Function as PropType, - }, /** 自定义标签的内部内容,每一个标签的当前值。注意和 `valueDisplay` 区分,`valueDisplay` 是用来定义全部标签内容,而非某一个标签 */ tag: { type: [String, Function] as PropType, diff --git a/src/tag-input/tag-input.en-US.md b/src/tag-input/tag-input.en-US.md index 11b06230f7..d456267152 100644 --- a/src/tag-input/tag-input.en-US.md +++ b/src/tag-input/tag-input.en-US.md @@ -1,62 +1,61 @@ :: BASE_DOC :: ## API - ### TagInput Props -| name | type | default | description | required | -| --------------------- | ------------------------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| autoWidth | Boolean | false | \- | N | -| clearable | Boolean | false | \- | N | -| collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| disabled | Boolean | - | \- | N | -| dragSort | Boolean | false | \- | N | -| excessTagsDisplayType | String | break-line | options:scroll/break-line | N | -| inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| inputValue | String / Number | '' | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| max | Number | - | max tag number | N | -| minCollapsedNum | Number | 0 | \- | N | -| placeholder | String | undefined | placeholder description | N | -| readonly | Boolean | false | \- | N | -| size | String | medium | options:small/medium/large | N | -| status | String | - | options:default/success/warning/error | N | -| suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| tag | String / Slot / Function | - | Typescript:`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| value | Array | [] | value。`v-model` and `v-model:value` is supported。Typescript:`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| defaultValue | Array | [] | value。uncontrolled property。Typescript:`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| valueDisplay | String / Slot / Function | - | Typescript:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| onBlur | Function | | Typescript:`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`trigger on blur | N | -| onChange | Function | | Typescript:`(value: TagInputValue, context: TagInputChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | N | -| onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N | -| onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N | -| onDragSort | Function | | Typescript:`(context: TagInputDragSortContext) => void`trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | N | -| onEnter | Function | | Typescript:`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void` | N | -| onFocus | Function | | Typescript:`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`trigger on focus | N | -| onInputChange | Function | | Typescript:`(value: InputValue, context?: InputValueChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | N | -| onMouseenter | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseenter | N | -| onMouseleave | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseleave | N | -| onPaste | Function | | Typescript:`(context: { e: ClipboardEvent; pasteValue: string }) => void` | N | -| onRemove | Function | | Typescript:`(context: TagInputRemoveContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | N | +name | type | default | description | required +-- | -- | -- | -- | -- +autoWidth | Boolean | false | \- | N +clearable | Boolean | false | \- | N +collapsedItems | Slot / Function | - | Typescript:`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +disabled | Boolean | - | \- | N +dragSort | Boolean | false | \- | N +excessTagsDisplayType | String | break-line | options: scroll/break-line | N +inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +inputValue | String / Number | '' | input value。`v-model:inputValue` is supported。Typescript:`string` | N +defaultInputValue | String / Number | '' | input value。uncontrolled property。Typescript:`string` | N +label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +max | Number | - | max tag number | N +minCollapsedNum | Number | 0 | \- | N +placeholder | String | undefined | placeholder description | N +prefixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +readonly | Boolean | false | \- | N +size | String | medium | options: small/medium/large | N +status | String | - | options: default/success/warning/error | N +suffix | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +tag | String / Slot / Function | - | Typescript:`string \| TNode<{ value: string \| number }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +tagProps | Object | - | Typescript:`TagProps`,[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +value | Array | [] | value。`v-model` and `v-model:value` is supported。Typescript:`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +defaultValue | Array | [] | value。uncontrolled property。Typescript:`TagInputValue` `type TagInputValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +valueDisplay | String / Slot / Function | - | Typescript:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +onBlur | Function | | Typescript:`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`trigger on blur | N +onChange | Function | | Typescript:`(value: TagInputValue, context: TagInputChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | N +onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N +onClick | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N +onDragSort | Function | | Typescript:`(context: TagInputDragSortContext) => void`trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | N +onEnter | Function | | Typescript:`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void` | N +onFocus | Function | | Typescript:`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`trigger on focus | N +onInputChange | Function | | Typescript:`(value: string, context?: InputValueChangeContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | N +onMouseenter | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseenter | N +onMouseleave | Function | | Typescript:`(context: { e: MouseEvent }) => void`trigger on mouseleave | N +onPaste | Function | | Typescript:`(context: { e: ClipboardEvent; pasteValue: string }) => void` | N +onRemove | Function | | Typescript:`(context: TagInputRemoveContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | N ### TagInput Events -| name | params | description | -| ------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| blur | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | trigger on blur | -| change | `(value: TagInputValue, context: TagInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | -| clear | `(context: { e: MouseEvent })` | \- | -| click | `(context: { e: MouseEvent })` | \- | -| drag-sort | `(context: TagInputDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | -| enter | `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue })` | \- | -| focus | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | trigger on focus | -| input-change | `(value: InputValue, context?: InputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | -| mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter | -| mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave | -| paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- | -| remove | `(context: TagInputRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | +name | params | description +-- | -- | -- +blur | `(value: TagInputValue, context: { inputValue: string; e: FocusEvent })` | trigger on blur +change | `(value: TagInputValue, context: TagInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` +clear | `(context: { e: MouseEvent })` | \- +click | `(context: { e: MouseEvent })` | \- +drag-sort | `(context: TagInputDragSortContext)` | trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` +enter | `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string })` | \- +focus | `(value: TagInputValue, context: { inputValue: string; e: FocusEvent })` | trigger on focus +input-change | `(value: string, context?: InputValueChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` +mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter +mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave +paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \- +remove | `(context: TagInputRemoveContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` diff --git a/src/tag-input/tag-input.md b/src/tag-input/tag-input.md index 3b2b97c2d2..7131a227f1 100644 --- a/src/tag-input/tag-input.md +++ b/src/tag-input/tag-input.md @@ -1,62 +1,61 @@ :: BASE_DOC :: ## API - ### TagInput Props -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| --------------------- | ------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -| autoWidth | Boolean | false | 宽度随内容自适应 | N | -| clearable | Boolean | false | 是否可清空 | N | -| collapsedItems | Slot / Function | - | 标签过多的情况下,折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签,`collapsedTags` 表示折叠的标签,`count` 表示折叠的数量。TS 类型:`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| disabled | Boolean | - | 是否禁用标签输入框 | N | -| dragSort | Boolean | false | 拖拽调整标签顺序 | N | -| excessTagsDisplayType | String | break-line | 标签超出时的呈现方式,有两种:横向滚动显示 和 换行显示。可选项:scroll/break-line | N | -| inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| inputValue | String / Number | '' | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| max | Number | - | 最大允许输入的标签数量 | N | -| minCollapsedNum | Number | 0 | 最小折叠数量,用于标签数量过多的情况下折叠选中项,超出该数值的选中项折叠。值为 0 则表示不折叠 | N | -| placeholder | String | undefined | 占位符 | N | -| readonly | Boolean | false | 只读状态,值为真会隐藏标签移除按钮和输入框 | N | -| size | String | medium | 尺寸。可选项:small/medium/large | N | -| status | String | - | 输入框状态。可选项:default/success/warning/error | N | -| suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| suffixIcon | Slot / Function | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| tag | String / Slot / Function | - | 自定义标签的内部内容,每一个标签的当前值。注意和 `valueDisplay` 区分,`valueDisplay` 是用来定义全部标签内容,而非某一个标签。TS 类型:`string \| TNode<{ value: string \| number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| tagProps | Object | - | 透传 Tag 组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| tips | String / Slot / Function | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| value | Array | [] | 值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| defaultValue | Array | [] | 值。非受控属性。TS 类型:`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N | -| valueDisplay | String / Slot / Function | - | 自定义值呈现的全部内容,参数为所有标签的值。TS 类型:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N | -| onBlur | Function | | TS 类型:`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`失去焦点时触发 | N | -| onChange | Function | | TS 类型:`(value: TagInputValue, context: TagInputChangeContext) => void`值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | N | -| onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`清空按钮点击时触发 | N | -| onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击组件时触发 | N | -| onDragSort | Function | | TS 类型:`(context: TagInputDragSortContext) => void`【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | N | -| onEnter | Function | | TS 类型:`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void`按键按下 Enter 时触发 | N | -| onFocus | Function | | TS 类型:`(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void`聚焦时触发 | N | -| onInputChange | Function | | TS 类型:`(value: InputValue, context?: InputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | N | -| onMouseenter | Function | | TS 类型:`(context: { e: MouseEvent }) => void`进入输入框时触发 | N | -| onMouseleave | Function | | TS 类型:`(context: { e: MouseEvent }) => void`离开输入框时触发 | N | -| onPaste | Function | | TS 类型:`(context: { e: ClipboardEvent; pasteValue: string }) => void`粘贴事件,`pasteValue` 表示粘贴板的内容 | N | -| onRemove | Function | | TS 类型:`(context: TagInputRemoveContext) => void`移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | N | +名称 | 类型 | 默认值 | 说明 | 必传 +-- | -- | -- | -- | -- +autoWidth | Boolean | false | 宽度随内容自适应 | N +clearable | Boolean | false | 是否可清空 | N +collapsedItems | Slot / Function | - | 标签过多的情况下,折叠项内容,默认为 `+N`。如果需要悬浮就显示其他内容,可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签,`collapsedTags` 表示折叠的标签,`count` 表示折叠的数量。TS 类型:`TNode<{ value: TagInputValue; collapsedTags: TagInputValue; count: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +disabled | Boolean | - | 是否禁用标签输入框 | N +dragSort | Boolean | false | 拖拽调整标签顺序 | N +excessTagsDisplayType | String | break-line | 标签超出时的呈现方式,有两种:横向滚动显示 和 换行显示。可选项:scroll/break-line | N +inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +inputValue | String / Number | '' | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`string` | N +defaultInputValue | String / Number | '' | 输入框的值。非受控属性。TS 类型:`string` | N +label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +max | Number | - | 最大允许输入的标签数量 | N +minCollapsedNum | Number | 0 | 最小折叠数量,用于标签数量过多的情况下折叠选中项,超出该数值的选中项折叠。值为 0 则表示不折叠 | N +placeholder | String | undefined | 占位符 | N +prefixIcon | Slot / Function | - | 组件前置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +readonly | Boolean | false | 只读状态,值为真会隐藏标签移除按钮和输入框 | N +size | String | medium | 尺寸。可选项:small/medium/large | N +status | String | - | 输入框状态。可选项:default/success/warning/error | N +suffix | String / Slot / Function | - | 后置图标前的后置内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +suffixIcon | Slot / Function | - | 组件后置图标。TS 类型:`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +tag | String / Slot / Function | - | 自定义标签的内部内容,每一个标签的当前值。注意和 `valueDisplay` 区分,`valueDisplay` 是用来定义全部标签内容,而非某一个标签。TS 类型:`string \| TNode<{ value: string \| number }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +tagProps | Object | - | 透传 Tag 组件全部属性。TS 类型:`TagProps`,[Tag API Documents](./tag?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +tips | String / Slot / Function | - | 输入框下方提示文本,会根据不同的 `status` 呈现不同的样式。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +value | Array | [] | 值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +defaultValue | Array | [] | 值。非受控属性。TS 类型:`TagInputValue` `type TagInputValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts) | N +valueDisplay | String / Slot / Function | - | 自定义值呈现的全部内容,参数为所有标签的值。TS 类型:`string \| TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +onBlur | Function | | TS 类型:`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`失去焦点时触发 | N +onChange | Function | | TS 类型:`(value: TagInputValue, context: TagInputChangeContext) => void`值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | N +onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`清空按钮点击时触发 | N +onClick | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击组件时触发 | N +onDragSort | Function | | TS 类型:`(context: TagInputDragSortContext) => void`【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | N +onEnter | Function | | TS 类型:`(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void`按键按下 Enter 时触发 | N +onFocus | Function | | TS 类型:`(value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void`聚焦时触发 | N +onInputChange | Function | | TS 类型:`(value: string, context?: InputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | N +onMouseenter | Function | | TS 类型:`(context: { e: MouseEvent }) => void`进入输入框时触发 | N +onMouseleave | Function | | TS 类型:`(context: { e: MouseEvent }) => void`离开输入框时触发 | N +onPaste | Function | | TS 类型:`(context: { e: ClipboardEvent; pasteValue: string }) => void`粘贴事件,`pasteValue` 表示粘贴板的内容 | N +onRemove | Function | | TS 类型:`(context: TagInputRemoveContext) => void`移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | N ### TagInput Events -| 名称 | 参数 | 描述 | -| ------------ | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| blur | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | 失去焦点时触发 | -| change | `(value: TagInputValue, context: TagInputChangeContext)` | 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` | -| clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 | -| click | `(context: { e: MouseEvent })` | 点击组件时触发 | -| drag-sort | `(context: TagInputDragSortContext)` | 【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` | -| enter | `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue })` | 按键按下 Enter 时触发 | -| focus | `(value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent })` | 聚焦时触发 | -| input-change | `(value: InputValue, context?: InputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` | -| mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发 | -| mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发 | -| paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件,`pasteValue` 表示粘贴板的内容 | -| remove | `(context: TagInputRemoveContext)` | 移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` | +名称 | 参数 | 描述 +-- | -- | -- +blur | `(value: TagInputValue, context: { inputValue: string; e: FocusEvent })` | 失去焦点时触发 +change | `(value: TagInputValue, context: TagInputChangeContext)` | 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputChangeContext { trigger: TagInputTriggerSource; index?: number; item?: string \| number; e?: MouseEvent \| KeyboardEvent }``type TagInputTriggerSource = 'enter' \| 'tag-remove' \| 'backspace' \| 'clear'` +clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发 +click | `(context: { e: MouseEvent })` | 点击组件时触发 +drag-sort | `(context: TagInputDragSortContext)` | 【开发中】拖拽排序时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputDragSortContext { newTags: TagInputValue; currentIndex: number; current: string \| number; targetIndex: number; target: string \| number }` +enter | `(value: TagInputValue, context: { e: KeyboardEvent; inputValue: string })` | 按键按下 Enter 时触发 +focus | `(value: TagInputValue, context: { inputValue: string; e: FocusEvent })` | 聚焦时触发 +input-change | `(value: string, context?: InputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、回车键触发等。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface InputValueChangeContext { e?: InputEvent \| MouseEvent \| CompositionEvent \| KeyboardEvent; trigger: 'input' \| 'clear' \| 'enter' \| 'blur' }` +mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发 +mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发 +paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件,`pasteValue` 表示粘贴板的内容 +remove | `(context: TagInputRemoveContext)` | 移除单个标签时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tag-input/type.ts)。`interface TagInputRemoveContext { value: TagInputValue; index: number; item: string \| number; e?: MouseEvent \| KeyboardEvent; trigger: TagInputRemoveTrigger }``type TagInputRemoveTrigger = 'tag-remove' \| 'backspace'` diff --git a/src/tag-input/tag-input.tsx b/src/tag-input/tag-input.tsx index 95e72f8afd..da17b130bc 100644 --- a/src/tag-input/tag-input.tsx +++ b/src/tag-input/tag-input.tsx @@ -1,6 +1,6 @@ import { defineComponent, computed, toRefs, ref, nextTick, reactive, watch } from 'vue'; import { CloseCircleFilledIcon as TdCloseCircleFilledIcon } from 'tdesign-icons-vue-next'; -import TInput, { InputProps, InputValue, TdInputProps } from '../input'; +import TInput, { InputProps, StrInputProps, TdInputProps } from '../input'; import { TdTagInputProps } from './type'; import props from './props'; import { renderTNodeJSX } from '../utils/render-tnode'; @@ -94,7 +94,7 @@ export default defineComponent({ ), ); - const onInputEnter = (value: InputValue, context: { e: KeyboardEvent }) => { + const onInputEnter = (value: string, context: { e: KeyboardEvent }) => { // 阻止 Enter 默认行为,避免在 Form 中触发 submit 事件 context.e?.preventDefault?.(); setTInputValue('', { e: context.e, trigger: 'enter' }); @@ -105,12 +105,12 @@ export default defineComponent({ }); }; - const onInputCompositionstart = (value: InputValue, context: { e: CompositionEvent }) => { + const onInputCompositionstart = (value: string, context: { e: CompositionEvent }) => { isComposition.value = true; inputProps.value?.onCompositionstart?.(value, context); }; - const onInputCompositionend = (value: InputValue, context: { e: CompositionEvent }) => { + const onInputCompositionend = (value: string, context: { e: CompositionEvent }) => { isComposition.value = false; inputProps.value?.onCompositionend?.(value, context); }; @@ -145,19 +145,19 @@ export default defineComponent({ scrollToLeftOnLeave(); }; - const onInnerFocus: InputProps['onFocus'] = (inputValue: InputValue, context: { e: MouseEvent }) => { + const onInnerFocus: InputProps['onFocus'] = (inputValue: string, context: { e: MouseEvent }) => { if (isFocused.value) return; isFocused.value = true; props.onFocus?.(tagValue.value, { e: context.e, inputValue }); }; - const onInnerBlur: InputProps['onFocus'] = (inputValue: InputValue, context: { e: MouseEvent }) => { + const onInnerBlur: InputProps['onFocus'] = (inputValue: string, context: { e: MouseEvent }) => { isFocused.value = false; setTInputValue('', { e: context.e, trigger: 'blur' }); props.onBlur?.(tagValue.value, { e: context.e, inputValue }); }; - const onInnerChange: InputProps['onChange'] = (val, context) => { + const onInnerChange: StrInputProps['onChange'] = (val, context) => { setTInputValue(val, { ...context, trigger: 'input' }); }; diff --git a/src/tag-input/type.ts b/src/tag-input/type.ts index cec767840b..1a17485109 100644 --- a/src/tag-input/type.ts +++ b/src/tag-input/type.ts @@ -5,7 +5,6 @@ * */ import { InputProps } from '../input'; -import { InputValue } from '../input'; import { TagProps } from '../tag'; import { TNode } from '../common'; @@ -46,12 +45,12 @@ export interface TdTagInputProps { * 输入框的值 * @default '' */ - inputValue?: InputValue; + inputValue?: string; /** * 输入框的值,非受控属性 * @default '' */ - defaultInputValue?: InputValue; + defaultInputValue?: string; /** * 左侧文本 */ @@ -69,6 +68,10 @@ export interface TdTagInputProps { * 占位符 */ placeholder?: string; + /** + * 组件前置图标 + */ + prefixIcon?: TNode; /** * 只读状态,值为真会隐藏标签移除按钮和输入框 * @default false @@ -91,10 +94,6 @@ export interface TdTagInputProps { * 组件后置图标 */ suffixIcon?: TNode; - /** - * 组件前置图标 - */ - prefixIcon?: TNode; /** * 自定义标签的内部内容,每一个标签的当前值。注意和 `valueDisplay` 区分,`valueDisplay` 是用来定义全部标签内容,而非某一个标签 */ @@ -129,7 +128,7 @@ export interface TdTagInputProps { /** * 失去焦点时触发 */ - onBlur?: (value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void; + onBlur?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void; /** * 值变化时触发,参数 `context.trigger` 表示数据变化的触发来源;`context.index` 指当前变化项的下标;`context.item` 指当前变化项;`context.e` 表示事件参数 */ @@ -149,15 +148,15 @@ export interface TdTagInputProps { /** * 按键按下 Enter 时触发 */ - onEnter?: (value: TagInputValue, context: { e: KeyboardEvent; inputValue: InputValue }) => void; + onEnter?: (value: TagInputValue, context: { e: KeyboardEvent; inputValue: string }) => void; /** * 聚焦时触发 */ - onFocus?: (value: TagInputValue, context: { inputValue: InputValue; e: FocusEvent }) => void; + onFocus?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent }) => void; /** * 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、回车键触发等 */ - onInputChange?: (value: InputValue, context?: InputValueChangeContext) => void; + onInputChange?: (value: string, context?: InputValueChangeContext) => void; /** * 进入输入框时触发 */ diff --git a/src/tag-input/useTagList.tsx b/src/tag-input/useTagList.tsx index f32c5a2fa9..5e8bc8a1e0 100644 --- a/src/tag-input/useTagList.tsx +++ b/src/tag-input/useTagList.tsx @@ -32,7 +32,7 @@ export default function useTagList(props: TagInputProps) { }; // 按下 Enter 键,新增标签 - const onInnerEnter = (value: InputValue, context: { e: KeyboardEvent }) => { + const onInnerEnter = (value: string, context: { e: KeyboardEvent }) => { const valueStr = value ? String(value).trim() : ''; const isLimitExceeded = max && tagValue.value?.length >= max.value; let newValue: TagInputValue = tagValue.value; diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md index 8cfb0c0a70..c3ec424f4f 100644 --- a/src/tree-select/tree-select.en-US.md +++ b/src/tree-select/tree-select.en-US.md @@ -16,8 +16,8 @@ empty | String / Slot / Function | - | Typescript:`string \| TNode`。[see mor filter | Function | - | Typescript:`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | \- | N inputProps | Object | - | Typescript:`InputProps`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N -defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`InputValue`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript:`string`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript:`string`,[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N keys | Object | - | alias filed name in data。Typescript:`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | \- | N @@ -51,7 +51,7 @@ onChange | Function | | Typescript:`(value: TreeValueType, context: TreeSelec onClear | Function | | Typescript:`(context: { e: MouseEvent }) => void` | N onEnter | Function | | Typescript:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void` | N onFocus | Function | | Typescript:`(context: { value: TreeSelectValue; e: FocusEvent }) => void` | N -onInputChange | Function | | Typescript:`(value: InputValue, context: SelectInputValueChangeContext) => void` | N +onInputChange | Function | | Typescript:`(value: string, context: SelectInputValueChangeContext) => void` | N onPopupVisibleChange | Function | | Typescript:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'``interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }` | N onRemove | Function | | Typescript:`(options: RemoveOptions) => void`[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }` | N onSearch | Function | | Typescript:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void` | N @@ -65,7 +65,7 @@ change | `(value: TreeValueType, context: TreeSelectChangeContext)` clear | `(context: { e: MouseEvent })` | \- enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | \- focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | \- -input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | \- +input-change | `(value: string, context: SelectInputValueChangeContext)` | \- popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'``interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }` remove | `(options: RemoveOptions)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }` search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | \- diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md index 7e80d4bc75..32163b52c9 100644 --- a/src/tree-select/tree-select.md +++ b/src/tree-select/tree-select.md @@ -16,8 +16,8 @@ empty | String / Slot / Function | - | 当下拉列表为空时显示的内容 filter | Function | - | 过滤方法,用于对现有数据进行搜索过滤,判断是否过滤某一项数据。TS 类型:`(filterWords: string, option: DataOption) => boolean` | N filterable | Boolean | false | 是否可搜索 | N inputProps | Object | - | 透传给 输入框 Input 组件的全部属性。TS 类型:`InputProps`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N -inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N -defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`InputValue`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型:`string`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N +defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型:`string`,[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts) | N keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名,示例:`{ value: 'key', label: 'name', children: 'list' }`。TS 类型:`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N loading | Boolean | false | 是否正在加载数据 | N @@ -51,7 +51,7 @@ onChange | Function | | TS 类型:`(value: TreeValueType, context: TreeSelect onClear | Function | | TS 类型:`(context: { e: MouseEvent }) => void`点击清除按钮时触发 | N onEnter | Function | | TS 类型:`(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType }) => void`回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` | N onFocus | Function | | TS 类型:`(context: { value: TreeSelectValue; e: FocusEvent }) => void`输入框获得焦点时触发 | N -onInputChange | Function | | TS 类型:`(value: InputValue, context: SelectInputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 | N +onInputChange | Function | | TS 类型:`(value: string, context: SelectInputValueChangeContext) => void`输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 | N onPopupVisibleChange | Function | | TS 类型:`(visible: boolean, context: TreeSelectPopupVisibleContext) => void`下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'``interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }` | N onRemove | Function | | TS 类型:`(options: RemoveOptions) => void`多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }` | N onSearch | Function | | TS 类型:`(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] }) => void`输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 | N @@ -65,7 +65,7 @@ change | `(value: TreeValueType, context: TreeSelectChangeContext)` clear | `(context: { e: MouseEvent })` | 点击清除按钮时触发 enter | `(context: { inputValue: string; e: KeyboardEvent; value: TreeValueType })` | 回车键按下时触发。`inputValue` 表示输入框的值,`value` 表示选中值。泛型 `TreeValueType` 继承 `TreeSelectValue` focus | `(context: { value: TreeSelectValue; e: FocusEvent })` | 输入框获得焦点时触发 -input-change | `(value: InputValue, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 +input-change | `(value: string, context: SelectInputValueChangeContext)` | 输入框值发生变化时触发,`context.trigger` 表示触发输入框值变化的来源:文本输入触发、清除按钮触发、失去焦点等 popup-visible-change | `(visible: boolean, context: TreeSelectPopupVisibleContext)` | 下拉框显示或隐藏时触发。单选场景,选中某个选项时触发关闭,此时需要添加参数 `node`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`import { PopupVisibleChangeContext, PopupTriggerEvent, PopupTriggerSource } from '@Popup'``interface TreeSelectPopupVisibleContext { e?: PopupTriggerEvent \| Event; node?: TreeNodeModel; trigger?: PopupTriggerSource \| 'clear'; }` remove | `(options: RemoveOptions)` | 多选模式下,选中数据被移除时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/tree-select/type.ts)。`export interface RemoveOptions { value: N; data: T; index: number; node: TreeNodeModel; e?: MouseEvent \| KeyboardEvent; trigger: 'tag-remove' \| 'backspace'; }` search | `(filterWords: string, context: { e: KeyboardEvent \| SelectInputValueChangeContext['e'] })` | 输入值变化时,触发搜索事件。主要用于远程搜索新数据。设置 `filterable=true` 开启此功能。优先级高于本地数据搜索 `filter`,即一旦存在这个远程搜索事件 `filter` 失效 diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx index 326f793dc5..2260f88b95 100644 --- a/src/tree-select/tree-select.tsx +++ b/src/tree-select/tree-select.tsx @@ -7,7 +7,6 @@ import isNil from 'lodash/isNil'; import Tree, { TreeProps, TreeNodeModel, TreeNodeValue } from '../tree'; import SelectInput, { TdSelectInputProps } from '../select-input'; -import { InputValue } from '../input'; import FakeArrow from '../common-components/fake-arrow'; import { PopupVisibleChangeContext } from '../popup'; @@ -224,7 +223,7 @@ export default defineComponent({ changeNodeInfo(); }; - const inputChange = (value: InputValue): boolean => { + const inputChange = (value: string): boolean => { // 未打开状态不处理输入框输入 if (!innerVisible.value) { props.onSearch?.(String(value)); diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts index 6fe58ced49..e196338051 100644 --- a/src/tree-select/type.ts +++ b/src/tree-select/type.ts @@ -5,7 +5,6 @@ * */ import { InputProps } from '../input'; -import { InputValue } from '../input'; import { PopupProps } from '../popup'; import { SelectInputProps } from '../select-input'; import { TagProps } from '../tag'; @@ -65,11 +64,11 @@ export interface TdTreeSelectProps void; + onInputChange?: (value: string, context?: SelectInputValueChangeContext) => void; /** * 下拉框显示或隐藏时触发 */ diff --git a/test/unit/snap/__snapshots__/csr.test.js.snap b/test/unit/snap/__snapshots__/csr.test.js.snap index 90659933fb..ad2965d4d0 100644 --- a/test/unit/snap/__snapshots__/csr.test.js.snap +++ b/test/unit/snap/__snapshots__/csr.test.js.snap @@ -76236,7 +76236,7 @@ exports[`csr snapshot test > csr test ./src/input/_example/base.vue 1`] = ` csr test ./src/input/_example/base.vue 1`] = ` class="t-input__wrap" > - - 姓名: - + diff --git a/test/unit/snap/__snapshots__/ssr.test.js.snap b/test/unit/snap/__snapshots__/ssr.test.js.snap index cfe39e9ea1..96ec4dc045 100644 --- a/test/unit/snap/__snapshots__/ssr.test.js.snap +++ b/test/unit/snap/__snapshots__/ssr.test.js.snap @@ -521,7 +521,7 @@ exports[`ssr snapshot test > ssr test ./src/input/_example/align.vue 1`] = `" ssr test ./src/input/_example/auto-width.vue 1`] = `"宽度自适应"`; -exports[`ssr snapshot test > ssr test ./src/input/_example/base.vue 1`] = `"价格:元姓名:"`; +exports[`ssr snapshot test > ssr test ./src/input/_example/base.vue 1`] = `"价格:元"`; exports[`ssr snapshot test > ssr test ./src/input/_example/clearable.vue 1`] = `""`;