fix input

components/input/Input.vue

@@ -151,35 +151,37 @@ export default {
       const otherProps = omit(this.$props, [
         'prefixCls',
       ])
-      const { stateValue, getInputClassName, handleKeyDown, handleChange } = this
+      const { stateValue, getInputClassName, handleKeyDown, handleChange, $listeners } = this
-      const attrs = {
+      const inputProps = {
+        domProps: {
+          value: stateValue,
+        },
         attrs: { ...otherProps, ...this.$attrs },
+        on: {
+          ...$listeners,
+          keydown: handleKeyDown,
+          input: handleChange,
+        },
+        class: getInputClassName(),
+        ref: 'input',
       }
       return this.renderLabeledIcon(
         <input
-          {...attrs}
+          {...inputProps}
-          value={stateValue}
-          class={getInputClassName()}
-          onKeydown={handleKeyDown}
-          onInput={handleChange}
-          ref='input'
         />,
       )
     },
   },
   render () {
     if (this.$props.type === 'textarea') {
-      const self = this
+      const { $listeners } = this
       const textareaProps = {
         props: this.$props,
         attrs: this.$attrs,
         on: {
-          change (e) {
+          ...$listeners,
-            self.handleChange(e)
+          change: this.handleChange,
-          },
+          keydown: this.handleKeyDown,
-          keydown (e) {
-            self.handleKeyDown(e)
-          },
         },
       }
       return <TextArea {...textareaProps} ref='input' />

components/input/demo/basic.vue

@@ -1,12 +1,3 @@
 <template>
-  <AntInput placeholder="Basic usage"/>
+  <a-input placeholder="Basic usage"/>
 </template>
-<script>
-
-import { Input } from 'antd'
-export default {
-  components: {
-    AntInput: Input,
-  },
-}
-</script>

components/input/demo/index.vue

@@ -14,6 +14,8 @@
     <TextArea />
     <h1>Addon</h1>
     <Addon />
+    <h1>Tooltip</h1>
+    <Tooltip />
   </div>
 </template>
 <script>
@@ -24,6 +26,7 @@ import SearchInput from './search-input'
 import Size from './size'
 import TextArea from './textarea'
 import Addon from './addon'
+import Tooltip from './tooltip'
 export default {
   components: {
     Basic,
@@ -33,6 +36,7 @@ export default {
     Size,
     TextArea,
     Addon,
+    Tooltip,
   },
 }
 </script>

components/input/demo/tooltip.vue

@@ -0,0 +1,76 @@
+<template>
+  <a-tooltip
+    :trigger="['focus']"
+    placement="topLeft"
+    overlayClassName="numeric-input"
+  >
+    <span slot="title" v-if="value" class="numeric-input-title">
+      {{value !== '-' ? formatNumber(value) : '-'}}
+    </span>
+    <template slot="title" v-else>
+      Input a number
+    </template>
+    <a-input
+      :value="value"
+      @change="onChange"
+      @blur="onBlur"
+      placeholder="Input a number"
+      maxLength="25"
+      style="width: 120px"
+    />
+  </a-tooltip>
+</template>
+<script>
+function formatNumber (value) {
+  value += ''
+  const list = value.split('.')
+  const prefix = list[0].charAt(0) === '-' ? '-' : ''
+  let num = prefix ? list[0].slice(1) : list[0]
+  let result = ''
+  while (num.length > 3) {
+    result = `,${num.slice(-3)}${result}`
+    num = num.slice(0, num.length - 3)
+  }
+  if (num) {
+    result = num + result
+  }
+  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`
+}
+
+export default {
+  data () {
+    this.formatNumber = formatNumber
+    return {
+      value: '',
+    }
+  },
+  methods: {
+    onChange (e) {
+      const { value } = e.target
+      const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/
+      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
+        this.value = value
+      }
+    },
+    // '.' at the end or only '-' in the input box.
+    onBlur () {
+      const { value, onChange } = this
+      if (value.charAt(value.length - 1) === '.' || value === '-') {
+        onChange({ value: value.slice(0, -1) })
+      }
+    },
+  },
+}
+</script>
+<style>
+/* to prevent the arrow overflow the popup container,
+or the height is not enough when content is empty */
+.numeric-input .ant-tooltip-inner {
+  min-width: 32px;
+  min-height: 37px;
+}
+
+.numeric-input .numeric-input-title {
+  font-size: 14px;
+}
+</style>

components/tooltip/abstractTooltipProps.js

@@ -1,6 +1,7 @@
 import PropTypes from '../_util/vue-types'
 export default () => ({
-  trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def('hover'),
+  // trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def('hover'),
+  trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def('hover'),
   visible: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom',
     'topLeft', 'topRight', 'bottomLeft', 'bottomRight',