Refactor(InputNumber): Vue2/Vue3/React 多个框架逻辑统一，支持超过 16 位的大数字 (#1412)

* feat(input): add allowInputOverMax, onValidate, showLimitNumber * feat(input-number): update demos * feat(input-number): supoort large number * test(unit): update snapshots * test(unit): update snapshots * chore(input-number): remove code * fix(table): affixed header 1px Co-authored-by: sheepluo <sheepluo@tencent.com>
Tencent · Aug 17, 2022 · 73eaef1 · 73eaef1
1 parent 10d12e8
commit 73eaef1
Show file tree

Hide file tree

Showing 33 changed files with 3,414 additions and 3,043 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-input-number :default-value="100" align="left" style="width: 120px" />
-      <t-input-number :default-value="200" align="center" style="width: 120px" />
-      <t-input-number :default-value="300" align="right" style="width: 120px" />
-    </div>
-    <div style="width: 20%">
-      <t-input-number :default-value="100" align="left" theme="normal" style="width: 120px" />
-      <t-input-number :default-value="200" align="center" theme="normal" style="width: 120px" />
-      <t-input-number :default-value="300" align="right" theme="normal" style="width: 120px" />
-    </div>
-  </div>
+  <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" />
+    </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" />
+    </t-space>
+  </t-space>
 </template>
diff --git a/examples/input-number/demos/center.vue b/examples/input-number/demos/center.vue
@@ -1,27 +1,47 @@
 <template>
-  <div>
+  <t-space direction="vertical">
+    <t-input-number v-model="value1" :step="0.1" :max="5" auto-width />
+
+    <t-input-number v-model="decimalValue" :step="0.18" :max="5" style="width: 200px" />
+
     <t-input-number
-      v-model="value"
+      v-model="value2"
       theme="row"
-      size="medium"
       :max="15"
       :min="-2"
       :disabled="false"
+      :tips="tips"
+      suffix="个"
+      style="width: 250px"
       @change="handleChange"
+      @validate="onValidate"
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown-enter="handleKeydownEnter"
       @keydown="handleKeydown"
       @keyup="handleKeyup"
       @keypress="handleKeypress"
-    />
-  </div>
+    ></t-input-number>
+  </t-space>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+
+const value1 = ref('');
+const value2 = ref(100);
+const decimalValue = ref(3);
+const error = ref(undefined);
 
-const value = ref(3);
+const tips = computed(() => {
+  if (error.value === 'exceed-maximum') return 'number can not be exceed maximum';
+  if (error.value === 'below-minimum') return 'number can not be below minimum';
+  return undefined;
+});
+
+const onValidate = (p) => {
+  error.value = p.error;
+};
 
 const handleChange = (v, ctx) => {
   console.info('change', v, ctx);

diff --git a/examples/input-number/demos/format.vue b/examples/input-number/demos/format.vue
@@ -1,14 +1,20 @@
 <template>
-  <div>
-    <t-input-number v-model="value" :max="15" :min="-2" :format="(value) => `${value}%`" @change="onChange" />
-  </div>
+  <t-space direction="vertical">
+    <t-input-number v-model="value1" :max="15" :min="-2" :format="(value) => `${value} %`" auto-width></t-input-number>
+
+    <!-- 小数位数和格式化函数组合使用 -->
+    <t-input-number
+      v-model="value2"
+      :decimal-places="2"
+      :format="(value, { fixedNumber }) => `${fixedNumber} %`"
+      auto-width
+    ></t-input-number>
+  </t-space>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref(3);
-const onChange = (ev) => {
-  console.info(ev);
-};
+const value1 = ref(3);
+const value2 = ref(3.01);
 </script>
diff --git a/examples/input-number/demos/large-number.vue b/examples/input-number/demos/large-number.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="tdesign-demo-block-column-large">
+    <div>
+      <t-input-number v-model="value1" large-number :decimal-places="2" step="1" style="width: 300px"></t-input-number>
+    </div>
+
+    <div>
+      <t-input-number v-model="value2" large-number step="0.888" style="width: 300px"></t-input-number>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value1 = ref('19999999999999999');
+const value2 = ref('0.8975527383412673418');
+</script>
diff --git a/examples/input-number/demos/left.vue b/examples/input-number/demos/left.vue
@@ -1,11 +1,22 @@
 <template>
-  <div>
-    <t-input-number v-model="value" theme="column" :max="15" :min="-2" />
-  </div>
+  <t-space>
+    <t-input-number v-model="value1" theme="column"></t-input-number>
+
+    <t-input-number
+      v-model="value2"
+      theme="column"
+      align="center"
+      :max="15"
+      :min="-2"
+      label="数字"
+      style="width: 150px"
+    ></t-input-number>
+  </t-space>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref(3);
+const value1 = ref(3);
+const value2 = ref(3);
 </script>
diff --git a/examples/input-number/demos/normal.vue b/examples/input-number/demos/normal.vue
@@ -1,7 +1,14 @@
 <template>
-  <div>
-    <t-input-number v-model="value" theme="normal" :max="15" :min="-2" />
-  </div>
+  <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">
+      <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="台"></t-input-number>
+  </t-space>
 </template>
 
 <script setup>

diff --git a/examples/input-number/demos/status.vue b/examples/input-number/demos/status.vue
@@ -1,43 +1,91 @@
 <template>
-  <div>
+  <div class="tdesign-demo-block-column-large">
+    <div>
+      <t-radio-group v-model="type" variant="default-filled">
+        <t-radio-button value="hide">隐藏文本提示</t-radio-button>
+        <t-radio-button value="align-left">文本提示左对齐</t-radio-button>
+        <t-radio-button value="align-input">文本提示对齐输入框</t-radio-button>
+      </t-radio-group>
+    </div>
     <t-form>
-      <t-form-item label="禁用">
-        <t-input-number v-model="value0" disabled></t-input-number>
-      </t-form-item>
-      <t-form-item label="只读">
-        <t-input-number v-model="value1" readonly></t-input-number>
-      </t-form-item>
-      <t-form-item label="正常">
-        <t-input-number v-model="value2"></t-input-number>
-      </t-form-item>
-      <t-form-item label="成功">
-        <t-input-number v-model="value3" status="success"></t-input-number>
-      </t-form-item>
-      <t-form-item label="警告">
-        <t-input-number v-model="value4" status="warning"></t-input-number>
-      </t-form-item>
-      <t-form-item label="错误">
-        <t-input-number v-model="value5" status="error"></t-input-number>
-      </t-form-item>
-      <t-form-item label="正常提示">
-        <t-input-number v-model="value6" tips="这是普通文本提示"></t-input-number>
-      </t-form-item>
-      <t-form-item label="成功提示">
-        <t-input-number v-model="value7" status="success" tips="校验通过文本提示"></t-input-number>
-      </t-form-item>
-      <t-form-item label="警告提示">
-        <t-input-number v-model="value8" status="warning" tips="校验不通过文本提示"></t-input-number>
-      </t-form-item>
-      <t-form-item label="错误提示">
-        <t-input-number v-model="value9" status="error" tips="校验存在严重问题文本提示"></t-input-number>
-      </t-form-item>
+      <!-- 隐藏文本提示 -->
+      <template v-if="type === 'hide'">
+        <t-form-item label="禁用">
+          <t-input-number v-model="value0" disabled></t-input-number>
+        </t-form-item>
+        <t-form-item label="只读">
+          <t-input-number v-model="value1" readonly></t-input-number>
+        </t-form-item>
+        <t-form-item label="正常">
+          <t-input-number v-model="value2"></t-input-number>
+        </t-form-item>
+        <t-form-item label="成功">
+          <t-input-number v-model="value3" status="success"></t-input-number>
+        </t-form-item>
+        <t-form-item label="警告">
+          <t-input-number v-model="value4" status="warning"></t-input-number>
+        </t-form-item>
+        <t-form-item label="错误">
+          <t-input-number v-model="value5" status="error"></t-input-number>
+        </t-form-item>
+      </template>
+
+      <!-- 文本提示左对齐 -->
+      <template v-if="type === 'align-left'">
+        <t-form-item label="正常提示">
+          <t-input-number v-model="value6" tips="这是普通文本提示"></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="成功提示">
+          <t-input-number v-model="value7" status="success" tips="校验通过文本提示"></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="警告提示">
+          <t-input-number v-model="value8" status="warning" tips="校验不通过文本提示"></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="错误提示">
+          <t-input-number
+            v-model="value9"
+            status="error"
+            tips="校验存在严重问题文本提示"
+          ></t-input-number> </t-form-item
+        ><br />
+      </template>
+
+      <!-- 文本提示对齐输入框 -->
+      <template v-if="type === 'align-input'">
+        <t-form-item label="正常提示">
+          <t-input-number v-model="value6" :input-props="{ tips: '这是普通文本提示' }"></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="成功提示">
+          <t-input-number
+            v-model="value7"
+            status="success"
+            :input-props="{ tips: '校验通过文本提示' }"
+          ></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="警告提示">
+          <t-input-number
+            v-model="value8"
+            status="warning"
+            :input-props="{ tips: '校验不通过文本提示' }"
+          ></t-input-number> </t-form-item
+        ><br />
+        <t-form-item label="错误提示">
+          <t-input-number
+            v-model="value9"
+            status="error"
+            :input-props="{ tips: '校验存在严重问题文本提示' }"
+          ></t-input-number> </t-form-item
+        ><br />
+      </template>
     </t-form>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
+const type = ref('align-input');
+
 const value0 = ref(3);
 const value1 = ref(3);
 const value2 = ref(3);

diff --git a/examples/input-number/input-number.en-US.md b/examples/input-number/input-number.en-US.md
@@ -0,0 +1,49 @@
+:: BASE_DOC ::
+
+## API
+
+### InputNumber Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | - | options：left/center/right | N
+autoWidth | Boolean | false | \- | N
+decimalPlaces | Number | undefined | \- | 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-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
+largeNumber | Boolean | false | \- | N
+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 | - | 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
+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' | ''`<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: 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' | ''`<br/>
+enter | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
+focus | `(value: InputNumberValue, context: { e: FocusEvent })` | \-
+keydown | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
+keypress | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
+keyup | `(value: InputNumberValue, context: { e: KeyboardEvent })` | \-
+validate | `(context: { error?: 'exceed-maximum' | 'below-minimum' })` | \-