refactor: input-number

Author: tangjinzhou

components/_util/isValidValue.ts

@@ -0,0 +1,3 @@
+export default function (val: any) {
+  return val !== undefined && val !== null;
+}

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -22,8 +22,6 @@ describe('InputNumber', () => {
     );
     wrapper.find('input').element.value = '';
     wrapper.find('input').trigger('input');
-    expect(onChange).toHaveBeenLastCalledWith('');
-    wrapper.find('input').trigger('blur');
     expect(onChange).toHaveBeenLastCalledWith(null);
   });
 });

components/input-number/__tests__/index.test.js

@@ -0,0 +1,64 @@
+<docs>
+---
+order: 2
+title:
+  zh-CN: 前置/后置标签
+  en-US: Pre / Post tab
+---
+
+## zh-CN
+
+用于配置一些固定组合。
+
+## en-US
+
+Using pre & post tabs example.
+
+</docs>
+
+<template>
+  <a-space direction="vertical">
+    <a-input-number v-model:value="value1" addon-before="+" addon-after="$"></a-input-number>
+    <a-input-number v-model:value="value2">
+      <template #addonBefore>
+        <a-select v-model:value="addonBeforeValue" style="width: 60px">
+          <a-select-option value="add">+</a-select-option>
+          <a-select-option value="minus">-</a-select-option>
+        </a-select>
+      </template>
+      <template #addonAfter>
+        <a-select v-model:value="addonAfterValue" style="width: 60px">
+          <a-select-option value="USD">$</a-select-option>
+          <a-select-option value="EUR">€</a-select-option>
+          <a-select-option value="GBP">£</a-select-option>
+          <a-select-option value="CNY">¥</a-select-option>
+        </a-select>
+      </template>
+    </a-input-number>
+    <a-input-number v-model:value="value3">
+      <template #addonAfter><SettingOutlined /></template>
+    </a-input-number>
+    <a-input-number v-model:value="value4">
+      <template #addonAfter>
+        <a-cascader placeholder="cascader" style="width: 150px" />
+      </template>
+    </a-input-number>
+  </a-space>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { SettingOutlined } from '@ant-design/icons-vue';
+export default defineComponent({
+  components: { SettingOutlined },
+  setup() {
+    return {
+      value1: ref(100),
+      value2: ref(100),
+      value3: ref(100),
+      value4: ref(100),
+      addonBeforeValue: ref('add'),
+      addonAfterValue: ref('USD'),
+    };
+  },
+});
+</script>

components/input-number/demo/addon.vue

@@ -0,0 +1,35 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 无边框
+  en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+No border.
+
+</docs>
+
+<template>
+  <div>
+    <a-input-number id="inputNumber" v-model:value="value" :bordered="false" :min="1" :max="10" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const value = ref<number>(3);
+
+    return {
+      value,
+    };
+  },
+});
+</script>

components/input-number/demo/borderless.vue

@@ -1,29 +1,38 @@
 <docs>
 ---
-order: 0
+order: 3
 title:
-  zh-CN: 小数
-  en-US: Decimals
+  zh-CN: 高精度小数
+  en-US: High precision decimals
 ---
 
 ## zh-CN
 
-和原生的数字输入框一样，value 的精度由 step 的小数位数决定。
+通过 `stringMode` 开启高精度小数支持，`change` 事件将返回 string 类型。
+对于旧版浏览器，你需要 BigInt polyfill。
 
 ## en-US
 
-A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop.
+Use `stringMode` to support high precision decimals support.
+`change` will return string value instead. You need polyfill of BigInt if browser not support.
 
 </docs>
 
 <template>
-  <a-input-number v-model:value="value" :min="0" :max="10" :step="0.1" />
+  <a-input-number
+    v-model:value="value"
+    style="width: 200px"
+    :min="0"
+    :max="10"
+    :step="0.00000000000001"
+    string-mode
+  />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const value = ref<number>();
+    const value = ref<string>('1');
 
     return {
       value,

components/input-number/demo/digit.vue

@@ -1,10 +1,14 @@
 <template>
   <demo-sort>
     <basic />
+    <addonVue />
     <size />
     <disabled />
     <digit />
     <formatter />
+    <keyboardVue />
+    <outOfRangeVue />
+    <borderlessVue />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -13,7 +17,10 @@ import Disabled from './disabled.vue';
 import Digit from './digit.vue';
 import Formatter from './formatter.vue';
 import Size from './size.vue';
-
+import addonVue from './addon.vue';
+import borderlessVue from './borderless.vue';
+import keyboardVue from './keyboard.vue';
+import outOfRangeVue from './out-of-range.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 import { defineComponent } from 'vue';
@@ -27,6 +34,10 @@ export default defineComponent({
     Digit,
     Formatter,
     Size,
+    addonVue,
+    borderlessVue,
+    keyboardVue,
+    outOfRangeVue,
   },
 });
 </script>

components/input-number/demo/index.vue

@@ -0,0 +1,36 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 键盘行为
+  en-US: Keyboard
+---
+
+## zh-CN
+
+使用 `keyboard` 属性可以控制键盘行为。
+
+## en-US
+
+Control keyboard behavior by `keyboard`.
+</docs>
+
+<template>
+  <a-space>
+    <a-input-number v-model:value="value" :keyboard="keyboard" :min="1" :max="10" />
+    <a-checkbox v-model:checked="keyboard">Toggle keyboard</a-checkbox>
+  </a-space>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const value = ref<number>(3);
+
+    return {
+      value,
+      keyboard: ref(true),
+    };
+  },
+});
+</script>

components/input-number/demo/keyboard.vue

@@ -0,0 +1,36 @@
+<docs>
+---
+order: 6
+title:
+  zh-CN: 超出边界
+  en-US: Out of range
+---
+
+## zh-CN
+
+当通过受控将 `value` 超出边界时，提供警告样式。
+
+## en-US
+
+Show warning style when `value` is out of range by control.
+
+</docs>
+
+<template>
+  <a-space>
+    <a-input-number v-model:value="value" :min="1" :max="10" />
+    <a-button type="primary" @click="value = 99">Reset</a-button>
+  </a-space>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+export default defineComponent({
+  setup() {
+    const value = ref<number>(99);
+
+    return {
+      value,
+    };
+  },
+});
+</script>