diff --git a/examples/input-number/demos/align.vue b/examples/input-number/demos/align.vue index 6b19c3d0e..b8a719811 100644 --- a/examples/input-number/demos/align.vue +++ b/examples/input-number/demos/align.vue @@ -1,14 +1,14 @@ diff --git a/examples/input-number/demos/center.vue b/examples/input-number/demos/center.vue index f8ea16d96..6dfed1f4e 100644 --- a/examples/input-number/demos/center.vue +++ b/examples/input-number/demos/center.vue @@ -1,31 +1,25 @@ diff --git a/examples/input-number/input-number.en-US.md b/examples/input-number/input-number.en-US.md index 0c3d92564..8168c0de7 100644 --- a/examples/input-number/input-number.en-US.md +++ b/examples/input-number/input-number.en-US.md @@ -8,7 +8,7 @@ name | type | default | description | required align | String | - | options：left/center/right | N autoWidth | Boolean | false | \- | N decimalPlaces | Number | undefined | \- | N -disabled | Boolean | false | \- | N +disabled | Boolean | - | \- | N format | Function | - | Typescript：`(value: InputNumberValue, context?: { fixedNumber?: InputNumberValue }) => InputNumberValue` | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N label | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -18,28 +18,28 @@ min | String / Number | -Infinity | Typescript：`InputNumberValue` | N placeholder | String | undefined | \- | N readonly | Boolean | false | \- | N size | String | medium | options：small/medium/large | N -status | String | - | options：success/warning/error | N +status | String | - | options：default/success/warning/error | N step | String / Number | 1 | Typescript：`InputNumberValue` | N suffix | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | row | options：column/row/normal | N tips | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number | undefined | `v-model` is supported。Typescript：`InputNumberValue` `type InputNumberValue = number | string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N -defaultValue | String / Number | undefined | uncontrolled property。Typescript：`InputNumberValue` `type InputNumberValue = number | string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N -onBlur | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N -onChange | Function | | TS 类型：`(value: InputNumberValue, context: ChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
| N -onEnter | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N -onFocus | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N -onKeydown | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N -onKeypress | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N -onKeyup | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N -onValidate | Function | | TS 类型：`(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void`
| N +value | String / Number | - | `v-model` is supported。Typescript：`T` `type InputNumberValue = number | string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript：`T` `type InputNumberValue = number | string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N +onBlur | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N +onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
| N +onEnter | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N +onFocus | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
| N +onKeydown | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N +onKeypress | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N +onKeyup | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
| N +onValidate | Function | | Typescript：`(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void`
| N ### InputNumber Events name | params | description -- | -- | -- blur | `(value: InputNumberValue, context: { e: FocusEvent })` | \- -change | `(value: InputNumberValue, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
+change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \- focus | `(value: InputNumberValue, context: { e: FocusEvent })` | \- keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \- diff --git a/examples/input-number/input-number.md b/examples/input-number/input-number.md index 41a88ed49..ae63982cb 100644 --- a/examples/input-number/input-number.md +++ b/examples/input-number/input-number.md @@ -8,7 +8,7 @@ align | String | - | 文本内容位置，居左/居中/居右。可选项：left/center/right | N autoWidth | Boolean | false | 宽度随内容自适应 | N decimalPlaces | Number | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place) | N -disabled | Boolean | false | 禁用组件 | N +disabled | Boolean | - | 禁用组件 | N format | Function | - | 格式化输入框展示值。第二个事件参数 `context.fixedNumber` 表示处理过小数位数 `decimalPlaces` 的数字。TS 类型：`(value: InputNumberValue, context?: { fixedNumber?: InputNumberValue }) => InputNumberValue` | N inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N @@ -18,15 +18,15 @@ min | String / Number | -Infinity | 最小值。如果是大数，请传入字 placeholder | String | undefined | 占位符 | N readonly | Boolean | false | 只读状态 | N size | String | medium | 组件尺寸。可选项：small/medium/large | N -status | String | - | 文本框状态。可选项：success/warning/error | N +status | String | - | 文本框状态。可选项：default/success/warning/error | N step | String / Number | 1 | 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串。TS 类型：`InputNumberValue` | N suffix | String / Slot / Function | - | 后置内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N theme | String | row | 按钮布局。可选项：column/row/normal | N tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -value | String / Number | undefined | 值。支持语法糖 `v-model`。TS 类型：`InputNumberValue` `type InputNumberValue = number | string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N -defaultValue | String / Number | undefined | 值。非受控属性。TS 类型：`InputNumberValue` `type InputNumberValue = number | string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N +value | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。支持语法糖 `v-model`。TS 类型：`T` `type InputNumberValue = number | string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N +defaultValue | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。非受控属性。TS 类型：`T` `type InputNumberValue = number | string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts) | N onBlur | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N -onChange | Function | | TS 类型：`(value: InputNumberValue, context: ChangeContext) => void`
值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
| N +onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`
值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
| N onEnter | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
回车键按下时触发 | N onFocus | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`
获取焦点时触发 | N onKeydown | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`
键盘按下时触发 | N @@ -39,7 +39,7 @@ onValidate | Function | | TS 类型：`(context: { error?: 'exceed-maximum' | ' 名称 | 参数 | 描述 -- | -- | -- blur | `(value: InputNumberValue, context: { e: FocusEvent })` | 失去焦点时触发 -change | `(value: InputNumberValue, context: ChangeContext)` | 值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
+change | `(value: T, context: ChangeContext)` | 值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/input-number/type.ts)。
`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`

`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 回车键按下时触发 focus | `(value: InputNumberValue, context: { e: FocusEvent })` | 获取焦点时触发 keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 键盘按下时触发 diff --git a/src/_common b/src/_common index ea02472f9..47eeb106c 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit ea02472f924235d5ed7c90bf760487a7957c1a1d +Subproject commit 47eeb106c00b813a6808698ae876559eb394cf85 diff --git a/src/input-number/props.ts b/src/input-number/props.ts index 0462b6a57..28485a81b 100644 --- a/src/input-number/props.ts +++ b/src/input-number/props.ts @@ -70,7 +70,7 @@ export default { type: String as PropType, validator(val: TdInputNumberProps['status']): boolean { if (!val) return true; - return ['success', 'warning', 'error'].includes(val); + return ['default', 'success', 'warning', 'error'].includes(val); }, }, /** 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串 */ @@ -95,15 +95,14 @@ export default { tips: { type: [String, Function] as PropType, }, - /** 值 */ + /** 数字输入框的值。当值为 '' 时，输入框显示为空 */ value: { type: [String, Number] as PropType, default: undefined, }, - /** 值，非受控属性 */ + /** 数字输入框的值。当值为 '' 时，输入框显示为空，非受控属性 */ defaultValue: { type: [String, Number] as PropType, - default: undefined, }, /** 失去焦点时触发 */ onBlur: Function as PropType, diff --git a/src/input-number/type.ts b/src/input-number/type.ts index 61a6c89a8..a42eed8aa 100644 --- a/src/input-number/type.ts +++ b/src/input-number/type.ts @@ -7,7 +7,7 @@ import { InputProps } from '../input'; import { TNode } from '../common'; -export interface TdInputNumberProps { +export interface TdInputNumberProps { /** * 文本内容位置，居左/居中/居右 */ @@ -23,7 +23,6 @@ export interface TdInputNumberProps { decimalPlaces?: number; /** * 禁用组件 - * @default false */ disabled?: boolean; /** @@ -70,7 +69,7 @@ export interface TdInputNumberProps { /** * 文本框状态 */ - status?: 'success' | 'warning' | 'error'; + status?: 'default' | 'success' | 'warning' | 'error'; /** * 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串 * @default 1 @@ -90,13 +89,13 @@ export interface TdInputNumberProps { */ tips?: string | TNode; /** - * 值 + * 数字输入框的值。当值为 '' 时，输入框显示为空 */ - value?: InputNumberValue; + value?: T; /** - * 值，非受控属性 + * 数字输入框的值。当值为 '' 时，输入框显示为空，非受控属性 */ - defaultValue?: InputNumberValue; + defaultValue?: T; /** * 失去焦点时触发 */ @@ -104,7 +103,7 @@ export interface TdInputNumberProps { /** * 值变化时触发 */ - onChange?: (value: InputNumberValue, context: ChangeContext) => void; + onChange?: (value: T, context: ChangeContext) => void; /** * 回车键按下时触发 */ diff --git a/src/input-number/useInputNumber.tsx b/src/input-number/useInputNumber.tsx index 5550d8bb8..82600a11c 100644 --- a/src/input-number/useInputNumber.tsx +++ b/src/input-number/useInputNumber.tsx @@ -132,8 +132,9 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup const onInnerInputChange = (val: string, ctx: { e: InputEvent }) => { if (!canInputNumber(val, props.largeNumber)) return; userInput.value = val; - // 大数-字符串；普通数-数字 - const newVal = props.largeNumber || !val ? val : Number(val); + const isDelete = ctx.e.inputType === 'deleteContentBackward'; + // 大数-字符串；普通数-数字。此处是了将 2e3，2.1e3 等内容转换为数字 + const newVal = isDelete || props.largeNumber || !val ? val : Number(val); if (newVal !== tValue.value && !['-', '.', 'e', 'E'].includes(val.slice(-1))) { setTValue(newVal, { type: 'input', e: ctx.e }); } @@ -154,8 +155,8 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup const handleFocus = (value: string, ctx: { e: FocusEvent }) => { userInput.value = tValue.value || tValue.value === 0 ? String(tValue.value) : ''; - props.onFocus?.(tValue.value, ctx); - context.emit('focus', tValue.value, ctx); + props.onFocus?.(value, ctx); + context.emit('focus', value, ctx); }; const handleKeydown = (value: string, ctx: { e: KeyboardEvent }) => { @@ -168,18 +169,18 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup if (keyEvent[code] !== undefined) { keyEvent[code](e); } - props.onKeydown?.(tValue.value, ctx); - context.emit('keydown', tValue.value, ctx); + props.onKeydown?.(value, ctx); + context.emit('keydown', value, ctx); }; const handleKeyup = (value: string, ctx: { e: KeyboardEvent }) => { - props.onKeyup?.(tValue.value, ctx); - context.emit('keyup', tValue.value, ctx); + props.onKeyup?.(value, ctx); + context.emit('keyup', value, ctx); }; const handleKeypress = (value: string, ctx: { e: KeyboardEvent }) => { - props.onKeypress?.(tValue.value, ctx); - context.emit('keypress', tValue.value, ctx); + props.onKeypress?.(value, ctx); + context.emit('keypress', value, ctx); }; const handleEnter = (value: string, ctx: { e: KeyboardEvent }) => { @@ -195,6 +196,14 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup context.emit('enter', newValue, ctx); }; + const focus = () => { + (inputRef.value as any).focus(); + }; + + const blur = () => { + (inputRef.value as any).blur(); + }; + const listeners = { blur: handleBlur, focus: handleFocus, @@ -202,6 +211,7 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup keyup: handleKeyup, keypress: handleKeypress, enter: handleEnter, + click: focus, }; return { @@ -217,6 +227,8 @@ export default function useInputNumber(props: TdInputNumberProps, context: Setup tValue, inputRef, formDisabled, + focus, + blur, handleReduce, handleAdd, onInnerInputChange, diff --git a/src/input/input.tsx b/src/input/input.tsx index 5c9e99613..ccee798d5 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -169,13 +169,11 @@ export default mixins(getConfigReceiverMixins('input input.value = sV; } }, - focus(): void { - const input = this.$refs.inputRef as HTMLInputElement; - input?.focus(); + focus() { + (this.$refs.inputRef as HTMLInputElement).focus(); }, - blur(): void { - const input = this.$refs.inputRef as HTMLInputElement; - input?.blur(); + blur() { + (this.$refs.inputRef as HTMLInputElement).blur(); }, handleKeydown(e: KeyboardEvent) { if (this.tDisabled) return; diff --git a/test/ssr/__snapshots__/ssr.test.js.snap b/test/ssr/__snapshots__/ssr.test.js.snap index 56a517a5d..108858405 100644 --- a/test/ssr/__snapshots__/ssr.test.js.snap +++ b/test/ssr/__snapshots__/ssr.test.js.snap @@ -7950,50 +7950,66 @@ exports[`ssr snapshot test renders ./examples/input-adornment/demos/text.vue cor `; exports[`ssr snapshot test renders ./examples/input-number/demos/align.vue correctly 1`] = ` -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
@@ -8015,8 +8031,8 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/auto-width.vue `; exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue correctly 1`] = ` -
-
+
+
@@ -8027,19 +8043,19 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/center.vue corr
-
-
-
3.41
+
-
-
@@ -8098,8 +8114,8 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/empty.vue corre `; exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue correctly 1`] = ` -
-
+
+
@@ -8110,7 +8126,7 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/format.vue corr
-
+
@@ -8152,50 +8168,60 @@ exports[`ssr snapshot test renders ./examples/input-number/demos/large-number.vu `; exports[`ssr snapshot test renders ./examples/input-number/demos/left.vue correctly 1`] = ` -
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
数字
-
-
+
+
+
+
+
数字
+
+
+
`; exports[`ssr snapshot test renders ./examples/input-number/demos/normal.vue correctly 1`] = ` -
-
-
-
+
+
+
+
+
+
-
-
-
-
金额：
-
元
+
+
+
+
+
金额：
+
元
+
-
-
-
-
机器：
-
台
+
+
+
+
+
机器：
+
台
+
diff --git a/test/unit/input-number/__snapshots__/demo.test.js.snap b/test/unit/input-number/__snapshots__/demo.test.js.snap index 39dec0d8a..ff0620eba 100644 --- a/test/unit/input-number/__snapshots__/demo.test.js.snap +++ b/test/unit/input-number/__snapshots__/demo.test.js.snap @@ -2,239 +2,269 @@ exports[`InputNumber InputNumber alignVue demo works fine 1`] = `
-
- + +
+
+ +
+
+
- -
- -
-
- + +
+
+ +
+
+
- -
- -
-
- + +
+
+ +
+
+
-
-
- +
+
+ +
+
-
- -
- +
+
+ +
+
-
- -
- +
+
+ +
+
@@ -309,9 +339,12 @@ exports[`InputNumber InputNumber autoWidthVue demo works fine 1`] = ` exports[`InputNumber InputNumber centerVue demo works fine 1`] = `
-
+
@@ -373,10 +406,12 @@ exports[`InputNumber InputNumber centerVue demo works fine 1`] = `
- -
+
- -
+
- -
+
@@ -819,212 +854,231 @@ exports[`InputNumber InputNumber formatVue demo works fine 1`] = ` `; exports[`InputNumber InputNumber leftVue demo works fine 1`] = ` -
+
-
+
- +
+ +
-
- + + + + +
-
-
+
- 数字 +
+ 数字 +
+
-
-
- + + + + +
`; exports[`InputNumber InputNumber normalVue demo works fine 1`] = `
- +
+ +
-
- - 金额： - -
- -
- - 元 - +
+ + 金额： + +
+ +
+ + 元 + +
-
- 机器： -
- -
- 台 +
+ 机器： +
+ +
+ 台 +