Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(inputnumber): enhance decimal places #415

Merged
merged 1 commit into from
Sep 10, 2024
Merged

feat(inputnumber): enhance decimal places #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified db/TDesign.db
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions packages/products/tdesign-react/src/input-number/defaultProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const inputNumberDefaultProps: TdInputNumberProps = {
allowInputOverLimit: true,
autoWidth: false,
decimalPlaces: undefined,
disabled: undefined,
largeNumber: false,
max: Infinity,
min: -Infinity,
Expand Down
19 changes: 10 additions & 9 deletions packages/products/tdesign-react/src/input-number/input-number.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
:: BASE_DOC ::

## API

### InputNumber Props

name | type | default | description | required
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
align | String | - | options：left/center/right | N
className | String | - | className of component | N
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
align | String | - | options: left/center/right | N
allowInputOverLimit | Boolean | true | \- | N
autoWidth | Boolean | false | \- | N
decimalPlaces | Number | undefined | \- | N
disabled | Boolean | - | \- | N
decimalPlaces | Number / Object | undefined | Typescript：`InputNumberDecimalPlaces` `type InputNumberDecimalPlaces = number \| { enableRound: boolean; places: number } `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
disabled | Boolean | undefined | \- | 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-react/blob/develop/src/input-number/type.ts) | N
label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
Expand All @@ -20,16 +21,16 @@ max | String / Number | Infinity | Typescript：`InputNumberValue` | N
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 | default | options：default/success/warning/error | N
size | String | medium | options: small/medium/large | N
status | String | default | options: default/success/warning/error | N
step | String / Number | 1 | Typescript：`InputNumberValue` | N
suffix | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
theme | String | row | options：column/row/normal | N
theme | String | row | options: column/row/normal | N
tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
value | String / Number | - | Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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-react/blob/develop/src/input-number/type.ts) | N
onBlur | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onEnter | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onFocus | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
onKeydown | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
Expand Down
9 changes: 5 additions & 4 deletions packages/products/tdesign-react/src/input-number/input-number.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
:: BASE_DOC ::

## API

### InputNumber Props

名称 | 类型 | 默认值 | 说明 | 必传
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
align | String | - | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
allowInputOverLimit | Boolean | true | 是否允许输入超过 `max` `min` 范围外的数字。为保障用户体验，仅在失去焦点时进行数字范围矫正。默认允许超出，数字超出范围时，输入框变红提醒 | N
autoWidth | Boolean | false | 宽度随内容自适应 | N
decimalPlaces | Number | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place) | N
disabled | Boolean | - | 禁用组件 | N
decimalPlaces | Number / Object | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place)。TS 类型：`InputNumberDecimalPlaces` `type InputNumberDecimalPlaces = number \| { enableRound: boolean; places: number } `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
disabled | Boolean | undefined | 禁用组件 | 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-react/blob/develop/src/input-number/type.ts) | N
label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
Expand All @@ -29,7 +30,7 @@ tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈
value | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
defaultValue | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。非受控属性。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts) | N
onBlur | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onEnter | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>回车键按下时触发 | N
onFocus | Function | | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>获取焦点时触发 | N
onKeydown | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>键盘按下时触发 | N
Expand Down
9 changes: 6 additions & 3 deletions packages/products/tdesign-react/src/input-number/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

import { InputProps } from '../input';
import { TNode } from '../common';
import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent } from 'react';
import { MouseEvent, KeyboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';

export interface TdInputNumberProps<T = InputNumberValue> {
/**
Expand All @@ -26,7 +26,7 @@ export interface TdInputNumberProps<T = InputNumberValue> {
/**
* [小数位数](https://en.wiktionary.org/wiki/decimal_place)
*/
decimalPlaces?: number;
decimalPlaces?: InputNumberDecimalPlaces;
/**
* 禁用组件
*/
Expand Down Expand Up @@ -137,6 +137,8 @@ export interface TdInputNumberProps<T = InputNumberValue> {
onValidate?: (context: { error?: 'exceed-maximum' | 'below-minimum' }) => void;
}

export type InputNumberDecimalPlaces = number | { enableRound: boolean; places: number };

export type InputNumberValue = number | string;

export interface ChangeContext {
Expand All @@ -145,7 +147,8 @@ export interface ChangeContext {
| FormEvent<HTMLInputElement>
| MouseEvent<HTMLDivElement | SVGElement>
| FocusEvent<HTMLDivElement>
| KeyboardEvent<HTMLDivElement>;
| KeyboardEvent<HTMLDivElement>
| CompositionEvent<HTMLDivElement>;
}

export type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | 'clear' | 'props';
17 changes: 9 additions & 8 deletions packages/products/tdesign-vue-next/src/input-number/input-number.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
:: BASE_DOC ::

## API

### InputNumber Props

name | type | default | description | required
-- | -- | -- | -- | --
align | String | - | options：left/center/right | N
align | String | - | options: left/center/right | N
allowInputOverLimit | Boolean | true | \- | N
autoWidth | Boolean | false | \- | N
decimalPlaces | Number | undefined | \- | N
disabled | Boolean | - | \- | N
decimalPlaces | Number / Object | undefined | Typescript：`InputNumberDecimalPlaces` `type InputNumberDecimalPlaces = number \| { enableRound: boolean; places: number } `。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input-number/type.ts) | N
disabled | Boolean | undefined | \- | 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-next/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-next/blob/develop/src/common.ts) | N
Expand All @@ -18,16 +19,16 @@ max | String / Number | Infinity | Typescript：`InputNumberValue` | N
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 | default | options：default/success/warning/error | N
size | String | medium | options: small/medium/large | N
status | String | default | 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-next/blob/develop/src/common.ts) | N
theme | String | row | options：column/row/normal | 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-next/blob/develop/src/common.ts) | N
value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`T` `type InputNumberValue = number \| string`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/tree/develop/src/input-number/type.ts) | N
onBlur | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
onEnter | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onFocus | Function | | Typescript：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/> | N
onKeydown | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
Expand All @@ -40,7 +41,7 @@ onValidate | Function | | Typescript：`(context: { error?: 'exceed-maximum' \|
name | params | description
-- | -- | --
blur | `(value: InputNumberValue, context: { e: FocusEvent })` | \-
change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/>
change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/>
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
focus | `(value: InputNumberValue, context: { e: FocusEvent })` | \-
keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
Expand Down
Loading
Loading