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

New fix input number #1284

Merged
merged 7 commits into from
Aug 16, 2022
Merged

New fix input number #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4ecf8d4
feat(input-number): keypress value
chaishi Aug 13, 2022
f6a691a
feat(input-number): input supports focus and blur function
chaishi Aug 13, 2022
8e55d1e
fix: remove multiple focus
chaishi Aug 13, 2022
dbd6590
fix: remove demo.tsx
chaishi Aug 13, 2022
c488d4a
feat(input-number): something
chaishi Aug 14, 2022
853c2cc
chore: snapshot
uyarn Aug 15, 2022
d1ce4b8
chore: update common
uyarn Aug 16, 2022
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
12 changes: 6 additions & 6 deletions examples/input-number/demos/align.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<template>
<div class="tdesign-demo-block-column">
<div style="width: 20%">
<t-space>
<t-space direction="vertical">
<t-input-number :default-value="100" align="left" />
<t-input-number :default-value="200" align="center" />
<t-input-number :default-value="300" align="right" />
</div>
<div style="width: 20%">
</t-space>
<t-space direction="vertical" style="margin-left: 100px">
<t-input-number :default-value="100" align="left" theme="normal" />
<t-input-number :default-value="200" align="center" theme="normal" />
<t-input-number :default-value="300" align="right" theme="normal" />
</div>
</div>
</t-space>
</t-space>
</template>
44 changes: 19 additions & 25 deletions examples/input-number/demos/center.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,25 @@
<template>
<div class="tdesign-demo-block-column-large tdesign-demo__input-number-center">
<div>
<t-input-number v-model="value1" :step="0.1" :max="5" autoWidth />
</div>
<t-space direction="vertical">
<t-input-number v-model="value1" :step="0.1" :max="5" autoWidth />

<div>
<t-input-number v-model="decimalValue" :step="0.18" :max="5" autoWidth />
</div>
<t-input-number v-model="decimalValue" :step="0.18" :max="5" style="width: 200px" />

<div>
<t-input-number
v-model="value2"
theme="row"
:max="15"
:min="-2"
:disabled="false"
:tips="tips"
suffix="个"
style="width: 160px"
@change="handleChange"
@validate="onValidate"
@blur="handleBlur"
@focus="handleFocus"
@enter="handleEnter"
></t-input-number>
</div>
</div>
<t-input-number
v-model="value2"
theme="row"
:max="15"
:min="-2"
:disabled="false"
:tips="tips"
suffix="个"
style="width: 250px"
@change="handleChange"
@validate="onValidate"
@blur="handleBlur"
@focus="handleFocus"
@enter="handleEnter"
></t-input-number>
</t-space>
</template>

<script>
Expand Down
38 changes: 17 additions & 21 deletions examples/input-number/demos/format.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
<template>
<div class="tdesign-demo-block-column-large">
<div>
<t-input-number
v-model="value1"
:max="15"
:min="-2"
:format="(value) => `${value} %`"
autoWidth
@change="onChange"
></t-input-number>
</div>
<t-space direction="vertical">
<t-input-number
v-model="value1"
:max="15"
:min="-2"
:format="(value) => `${value} %`"
autoWidth
@change="onChange"
></t-input-number>

<!-- 小数位数和格式化函数组合使用 -->
<div>
<t-input-number
v-model="value2"
:decimalPlaces="2"
:format="(value, { fixedNumber }) => `${fixedNumber} %`"
autoWidth
@change="onChange"
></t-input-number>
</div>
</div>
<t-input-number
v-model="value2"
:decimalPlaces="2"
:format="(value, { fixedNumber }) => `${fixedNumber} %`"
autoWidth
@change="onChange"
></t-input-number>
</t-space>
</template>

<script>
Expand Down
11 changes: 6 additions & 5 deletions examples/input-number/demos/left.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
<template>
<div>
<t-input-number v-model="value" theme="column"></t-input-number>
<t-space>
<t-input-number v-model="value1" theme="column"></t-input-number>

<t-input-number
v-model="value"
v-model="value2"
theme="column"
align="center"
:max="15"
:min="-2"
label="数字"
style="width: 150px"
></t-input-number>
</div>
</t-space>
</template>

<script>
export default {
data() {
return {
value: 3,
value1: 3,
value2: 3,
};
},
};
Expand Down
17 changes: 5 additions & 12 deletions examples/input-number/demos/normal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
<template>
<div style="display: flex; justify-content: space-between">
<t-input-number v-model="value" theme="normal" :max="15" :min="-2"></t-input-number>
<t-space direction="vertical">
<t-input-number v-model="value" theme="normal" :max="15" :min="0"></t-input-number>

<t-input-number v-model="value" theme="normal" align="right" style="width: 130px">
<t-input-number v-model="value" theme="normal" align="right">
<template #label><span>金额：</span></template>
<template #suffix><span>元</span></template>
</t-input-number>

<t-input-number
v-model="value"
theme="normal"
align="right"
label="机器："
suffix="台"
style="width: 130px"
></t-input-number>
</div>
<t-input-number v-model="value" theme="normal" align="right" label="机器：" suffix="台"></t-input-number>
</t-space>
</template>

<script>
Expand Down
7 changes: 0 additions & 7 deletions examples/input-number/demos/status.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,7 @@ export default {
};
</script>
<style scoped>
.t-form__item {
margin-bottom: 0;
}
.t-input-number {
width: 300px;
}
.tdesign-demo-item--input-number .t-input-number {
margin-bottom: 16px;
}
</style>
26 changes: 13 additions & 13 deletions examples/input-number/input-number.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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`<br/> | N
onChange | Function | | TS 类型：`(value: InputNumberValue, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/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' | ''`<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
onKeypress | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onKeyup | Function | | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onValidate | Function | | TS 类型：`(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void`<br/> | 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`<br/> | N
onChange | Function | | Typescript：`(value: T, context: ChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/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' | ''`<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
onKeypress | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onKeyup | Function | | Typescript：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/> | N
onValidate | Function | | Typescript：`(context: { error?: 'exceed-maximum' | 'below-minimum' }) => void`<br/> | 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)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`<br/>
change | `(value: T, context: ChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/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' | ''`<br/>
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
focus | `(value: InputNumberValue, context: { e: FocusEvent })` | \-
keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
Expand Down
12 changes: 6 additions & 6 deletions examples/input-number/input-number.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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`<br/>失去焦点时触发 | N
onChange | Function | | TS 类型：`(value: InputNumberValue, context: ChangeContext) => void`<br/>值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/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' | ''`<br/> | N
onChange | Function | | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/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' | ''`<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 All @@ -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)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent | MouseEvent | FocusEvent | KeyboardEvent }`<br/><br/>`type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | ''`<br/>
change | `(value: T, context: ChangeContext)` | 值变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/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' | ''`<br/>
enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 回车键按下时触发
focus | `(value: InputNumberValue, context: { e: FocusEvent })` | 获取焦点时触发
keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | 键盘按下时触发
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 1 files
+3 −5 style/web/components/date-picker/_index.less
7 changes: 3 additions & 4 deletions src/input-number/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export default {
type: String as PropType<TdInputNumberProps['status']>,
validator(val: TdInputNumberProps['status']): boolean {
if (!val) return true;
return ['success', 'warning', 'error'].includes(val);
return ['default', 'success', 'warning', 'error'].includes(val);
},
},
/** 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串 */
Expand All @@ -95,15 +95,14 @@ export default {
tips: {
type: [String, Function] as PropType<TdInputNumberProps['tips']>,
},
/** 值 */
/** 数字输入框的值。当值为 '' 时，输入框显示为空 */
value: {
type: [String, Number] as PropType<TdInputNumberProps['value']>,
default: undefined,
},
/** 值，非受控属性 */
/** 数字输入框的值。当值为 '' 时，输入框显示为空，非受控属性 */
defaultValue: {
type: [String, Number] as PropType<TdInputNumberProps['defaultValue']>,
default: undefined,
},
/** 失去焦点时触发 */
onBlur: Function as PropType<TdInputNumberProps['onBlur']>,
Expand Down
15 changes: 7 additions & 8 deletions src/input-number/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
import { InputProps } from '../input';
import { TNode } from '../common';

export interface TdInputNumberProps {
export interface TdInputNumberProps<T = InputNumberValue> {
/**
* 文本内容位置，居左/居中/居右
*/
Expand All @@ -23,7 +23,6 @@ export interface TdInputNumberProps {
decimalPlaces?: number;
/**
* 禁用组件
* @default false
*/
disabled?: boolean;
/**
Expand Down Expand Up @@ -70,7 +69,7 @@ export interface TdInputNumberProps {
/**
* 文本框状态
*/
status?: 'success' | 'warning' | 'error';
status?: 'default' | 'success' | 'warning' | 'error';
/**
* 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串
* @default 1
Expand All @@ -90,21 +89,21 @@ export interface TdInputNumberProps {
*/
tips?: string | TNode;
/**
* 值
* 数字输入框的值。当值为 '' 时，输入框显示为空
*/
value?: InputNumberValue;
value?: T;
/**
* 值，非受控属性
* 数字输入框的值。当值为 '' 时，输入框显示为空，非受控属性
*/
defaultValue?: InputNumberValue;
defaultValue?: T;
/**
* 失去焦点时触发
*/
onBlur?: (value: InputNumberValue, context: { e: FocusEvent }) => void;
/**
* 值变化时触发
*/
onChange?: (value: InputNumberValue, context: ChangeContext) => void;
onChange?: (value: T, context: ChangeContext) => void;
/**
* 回车键按下时触发
*/
Expand Down
Loading