add inputNumber

Author: wangxueliang

components/index.js

@@ -146,3 +146,5 @@ export { default as Progress } from './progress'
 import Timeline from './timeline'
 const TimelineItem = Timeline.Item
 export { Timeline, TimelineItem }
+
+export { default as InputNumber } from './input-number'

components/input-number/demo/basic.md

@@ -0,0 +1,35 @@
+<cn>
+#### 基本
+数字输入框。
+</cn>
+
+<us>
+#### Basic
+Numeric-only input box.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number :min="1" :max="10" v-model="value" @change="onChange" />
+    当前值：{{value}}
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    },
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+

components/input-number/demo/digit.md

@@ -0,0 +1,28 @@
+<cn>
+#### 小数
+和原生的数字输入框一样，value 的精度由 step 的小数位数决定。
+</cn>
+
+<us>
+#### Decimals
+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.
+</us>
+
+```html
+<template>
+  <a-input-number :min="0" :max="10" :step="0.1" @change="onChange" />
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+
+

components/input-number/demo/disabled.md

@@ -0,0 +1,37 @@
+<cn>
+#### 不可用
+点击按钮切换可用状态。
+</cn>
+
+<us>
+#### Disabled
+Click the button to toggle between available and disabled states.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number :min="1" :max="10" :disabled="disabled" :defaultValue="3" />
+    <div style="marginTop:20px">
+      <a-button @click="toggle" type="primary">Toggle disabled</a-button>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        disabled: true,
+      }
+    },
+    methods: {
+      toggle() {
+        this.disabled = !this.disabled
+      }
+    },
+  }
+</script>
+```
+
+
+

components/input-number/demo/formatter.md

@@ -0,0 +1,42 @@
+<cn>
+#### 格式化展示
+通过 `formatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `parser` 一起使用。
+</cn>
+
+<us>
+#### Formatter
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number
+      :defaultValue="1000"
+      :formatter="value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+      :parser="value => value.replace(/\$\s?|(,*)/g, '')"
+      @change="onChange"
+    />
+    <a-input-number
+      :defaultValue="100"
+      :min="0"
+      :max="100"
+      :formatter="value => `${value}%`"
+      :parser="value => value.replace('%', '')"
+      @change="onChange"
+    />
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+```
+
+
+

components/input-number/demo/index.vue

@@ -0,0 +1,53 @@
+<script>
+import Basic from './basic.md'
+import Disabled from './disabled.md'
+import Digit from './digit.md'
+import Formatter from './formatter.md'
+import Size from './size.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+  cn: `# 数字输入框
+  通过鼠标或键盘，输入范围内的数值。
+  ## 何时使用
+  当需要获取标准数值时。
+        ## 代码演示`,
+  us: `# Data Entry
+  Enter a number within certain range with the mouse or keyboard.
+  ## When To Use
+  When a numeric value needs to be provided.
+  ## Examples
+  `,
+}
+export default {
+  category: 'Components',
+  subtitle: '数字输入框',
+  type: 'Data Entry',
+  title: 'InputNumber',
+  render () {
+    return (
+      <div>
+        <md cn={md.cn} us={md.us}/>
+        <br/>
+        <Basic />
+        <br/>
+        <Size />
+        <br />
+        <Disabled />
+        <br/>
+        <Digit />
+        <br/>
+        <Formatter />
+        <br/>
+        <api>
+          <template slot='cn'>
+            <CN/>
+          </template>
+          <US/>
+        </api>
+      </div>
+    )
+  },
+}
+</script>

components/input-number/demo/size.md

@@ -0,0 +1,36 @@
+<cn>
+#### 三种大小
+三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `40px` 和 `24px` ，默认高度为 `32px`。
+</cn>
+
+<us>
+#### Sizes
+There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
+</us>
+
+```html
+<template>
+  <div>
+    <a-input-number size="large" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+    <a-input-number :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+    <a-input-number size="small" :min="1" :max="100000" :defaultValue="3" @change="onChange" />
+  </div>
+</template>
+<script>
+  export default {
+    methods: {
+      onChange(value) {
+        console.log('changed', value);
+      },
+    },
+  }
+</script>
+<style scoped>
+  .ant-input-number {
+    margin-right: 10px;
+  }
+</style>
+```
+
+
+

components/input-number/index.en-US.md

@@ -0,0 +1,28 @@
+## API
+
+| property | description | type | default |
+| -------- | ----------- | ---- | ------- |
+| autoFocus | get focus when component mounted | boolean | false |
+| defaultValue | initial value | number |  |
+| disabled | disable the input | boolean | false |
+| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
+| max | max vale | number | Infinity |
+| min | min value | number | -Infinity |
+| parser | Specifies the value extracted from formatter | function( string): number | - |
+| precision | precision of input value | number | - |
+| size | width of input box | string | - |
+| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
+| value(v-model) | current value | number |  |
+
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| change | The callback triggered when the value is changed. | function(value: number \| string) |  |
+
+## Methods
+
+| Name | Description |
+| ---- | ----------- |
+| blur() | remove focus |
+| focus() | get focus |

components/input-number/index.jsx

@@ -0,0 +1,62 @@
+import PropTypes from '../_util/vue-types'
+import { initDefaultProps, getOptionProps } from '../_util/props-util'
+import classNames from 'classnames'
+import VcInputNumber from '../vc-input-number/src'
+
+export const InputNumberProps = {
+  prefixCls: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+  step: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
+  defaultValue: PropTypes.number,
+  tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  size: PropTypes.oneOf(['large', 'small', 'default']),
+  formatter: PropTypes.func,
+  parser: PropTypes.func,
+  placeholder: PropTypes.string,
+  name: PropTypes.string,
+  id: PropTypes.string,
+  precision: PropTypes.number,
+}
+
+export default {
+  name: 'InputNumber',
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+  props: initDefaultProps(InputNumberProps, {
+    prefixCls: 'ant-input-number',
+    step: 1,
+  }),
+  methods: {
+    focus () {
+      this.$refs.inputNumberRef.focus()
+    },
+    blur () {
+      this.$refs.inputNumberRef.blur()
+    },
+  },
+
+  render () {
+    const { size, ...others } = getOptionProps(this)
+    const inputNumberClass = classNames({
+      [`${this.prefixCls}-lg`]: size === 'large',
+      [`${this.prefixCls}-sm`]: size === 'small',
+    })
+    const vcInputNumberprops = {
+      props: {
+        ...others,
+      },
+      class: inputNumberClass,
+      ref: 'inputNumberRef',
+      on: this.$listeners,
+    }
+    return <VcInputNumber {...vcInputNumberprops} />
+  },
+}

components/input-number/index.zh-CN.md

@@ -0,0 +1,29 @@
+## API
+
+属性如下
+
+| 成员 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| defaultValue | 初始值 | number |  |
+| disabled | 禁用 | boolean | false |
+| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |
+| max | 最大值 | number | Infinity |
+| min | 最小值 | number | -Infinity |
+| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |
+| precision | 数值精度 | number | - |
+| size | 输入框大小 | string | 无 |
+| step | 每次改变步数，可以为小数 | number\|string | 1 |
+| value(v-model) | 当前值 | number |  |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 变化回调 | Function(value: number \| string) |  |
+
+## 方法
+
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |