New fix input number (#1284)

* feat(input-number): keypress value * feat(input-number): input supports focus and blur function * fix: remove multiple focus * fix: remove demo.tsx * feat(input-number): something * chore: snapshot * chore: update common Co-authored-by: Uyarn <[email protected]>
Tencent · Aug 16, 2022 · 30de0c4 · 30de0c4
1 parent e0da354
commit 30de0c4
Show file tree

Hide file tree

Showing 15 changed files with 628 additions and 563 deletions.
diff --git a/examples/input-number/demos/align.vue b/examples/input-number/demos/align.vue
@@ -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>
diff --git a/examples/input-number/demos/center.vue b/examples/input-number/demos/center.vue
@@ -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>

diff --git a/examples/input-number/demos/format.vue b/examples/input-number/demos/format.vue
@@ -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>

diff --git a/examples/input-number/demos/left.vue b/examples/input-number/demos/left.vue
@@ -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,
     };
   },
 };

diff --git a/examples/input-number/demos/normal.vue b/examples/input-number/demos/normal.vue
@@ -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>

diff --git a/examples/input-number/demos/status.vue b/examples/input-number/demos/status.vue
@@ -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>
diff --git 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`<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 })` | \-

diff --git 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`<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
@@ -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 })` | 键盘按下时触发

diff --git a/src/_common b/src/_common
diff --git a/src/input-number/props.ts b/src/input-number/props.ts
@@ -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);
     },
   },
   /** 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串 */
@@ -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']>,

diff --git 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<T = InputNumberValue> {
   /**
    * 文本内容位置，居左/居中/居右
    */
@@ -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,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;
   /**
    * 回车键按下时触发
    */