add util

components/_util/getLocale.js

@@ -0,0 +1,30 @@
+export function getComponentLocale (props, context, componentName, getDefaultLocale) {
+  let locale = {}
+  if (context && context.antLocale && context.antLocale[componentName]) {
+    locale = context.antLocale[componentName]
+  } else {
+    const defaultLocale = getDefaultLocale()
+    // TODO: make default lang of antd be English
+    // https://github.com/ant-design/ant-design/issues/6334
+    locale = defaultLocale.default || defaultLocale
+  }
+
+  const result = {
+    ...locale,
+    ...props.locale,
+  }
+  result.lang = {
+    ...locale.lang,
+    ...props.locale.lang,
+  }
+  return result
+}
+
+export function getLocaleCode (context) {
+  const localeCode = context.antLocale && context.antLocale.locale
+  // Had use LocaleProvide but didn't set locale
+  if (context.antLocale && context.antLocale.exist && !localeCode) {
+    return 'zh-cn'
+  }
+  return localeCode
+}

components/_util/getRequestAnimationFrame.js

@@ -0,0 +1,44 @@
+const availablePrefixs = ['moz', 'ms', 'webkit']
+
+function requestAnimationFramePolyfill () {
+  let lastTime = 0
+  return function (callback) {
+    const currTime = new Date().getTime()
+    const timeToCall = Math.max(0, 16 - (currTime - lastTime))
+    const id = window.setTimeout(function () { callback(currTime + timeToCall) }, timeToCall)
+    lastTime = currTime + timeToCall
+    return id
+  }
+}
+
+export default function getRequestAnimationFrame () {
+  if (typeof window === 'undefined') {
+    return () => {}
+  }
+  if (window.requestAnimationFrame) {
+    // https://github.com/vuejs/vue/issues/4465
+    return window.requestAnimationFrame.bind(window)
+  }
+
+  const prefix = availablePrefixs.filter(key => `${key}RequestAnimationFrame` in window)[0]
+
+  return prefix
+    ? window[`${prefix}RequestAnimationFrame`]
+    : requestAnimationFramePolyfill()
+}
+
+export function cancelRequestAnimationFrame (id) {
+  if (typeof window === 'undefined') {
+    return null
+  }
+  if (window.cancelAnimationFrame) {
+    return window.cancelAnimationFrame(id)
+  }
+  const prefix = availablePrefixs.filter(key =>
+    `${key}CancelAnimationFrame` in window || `${key}CancelRequestAnimationFrame` in window,
+  )[0]
+
+  return prefix
+    ? (window[`${prefix}CancelAnimationFrame`] || window[`${prefix}CancelRequestAnimationFrame`]).call(this, id)
+    : clearTimeout(id)
+}

components/_util/getScroll.js

@@ -0,0 +1,17 @@
+export default function getScroll (target, top) {
+  if (typeof window === 'undefined') {
+    return 0
+  }
+
+  const prop = top ? 'pageYOffset' : 'pageXOffset'
+  const method = top ? 'scrollTop' : 'scrollLeft'
+  const isWindow = target === window
+
+  let ret = isWindow ? target[prop] : target[method]
+  // ie6,7,8 standard mode
+  if (isWindow && typeof ret !== 'number') {
+    ret = window.document.documentElement[method]
+  }
+
+  return ret
+}

components/_util/isCssAnimationSupported.js

@@ -0,0 +1,24 @@
+let animation
+
+function isCssAnimationSupported () {
+  if (animation !== undefined) {
+    return animation
+  }
+  const domPrefixes = 'Webkit Moz O ms Khtml'.split(' ')
+  const elm = document.createElement('div')
+  if (elm.style.animationName !== undefined) {
+    animation = true
+  }
+  if (animation !== undefined) {
+    for (let i = 0; i < domPrefixes.length; i++) {
+      if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) {
+        animation = true
+        break
+      }
+    }
+  }
+  animation = animation || false
+  return animation
+}
+
+export default isCssAnimationSupported

components/_util/openAnimation.js

@@ -0,0 +1,52 @@
+import cssAnimation from 'css-animation'
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from './getRequestAnimationFrame'
+
+const reqAnimFrame = getRequestAnimationFrame()
+
+function animate (node, show, done) {
+  let height
+  let requestAnimationFrameId
+  return cssAnimation(node, 'ant-motion-collapse', {
+    start () {
+      if (!show) {
+        node.style.height = `${node.offsetHeight}px`
+        node.style.opacity = 1
+      } else {
+        height = node.offsetHeight
+        node.style.height = 0
+        node.style.opacity = 0
+      }
+    },
+    active () {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId)
+      }
+      requestAnimationFrameId = reqAnimFrame(() => {
+        node.style.height = `${show ? height : 0}px`
+        node.style.opacity = show ? 1 : 0
+      })
+    },
+    end () {
+      if (requestAnimationFrameId) {
+        cancelRequestAnimationFrame(requestAnimationFrameId)
+      }
+      node.style.height = ''
+      node.style.opacity = ''
+      done()
+    },
+  })
+}
+
+const animation = {
+  enter (node, done) {
+    return animate(node, true, done)
+  },
+  leave (node, done) {
+    return animate(node, false, done)
+  },
+  appear (node, done) {
+    return animate(node, true, done)
+  },
+}
+
+export default animation

components/_util/throttleByAnimationFrame.js

@@ -0,0 +1,47 @@
+import getRequestAnimationFrame, { cancelRequestAnimationFrame } from '../_util/getRequestAnimationFrame'
+
+const reqAnimFrame = getRequestAnimationFrame()
+
+export default function throttleByAnimationFrame (fn) {
+  let requestId
+
+  const later = args => () => {
+    requestId = null
+    fn(...args)
+  }
+
+  const throttled = (...args) => {
+    if (requestId == null) {
+      requestId = reqAnimFrame(later(args))
+    }
+  }
+
+  throttled.cancel = () => cancelRequestAnimationFrame(requestId)
+
+  return throttled
+}
+
+export function throttleByAnimationFrameDecorator () {
+  return function (target, key, descriptor) {
+    const fn = descriptor.value
+    let definingProperty = false
+    return {
+      configurable: true,
+      get () {
+        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
+          return fn
+        }
+
+        const boundFn = throttleByAnimationFrame(fn.bind(this))
+        definingProperty = true
+        Object.defineProperty(this, key, {
+          value: boundFn,
+          configurable: true,
+          writable: true,
+        })
+        definingProperty = false
+        return boundFn
+      },
+    }
+  }
+}

components/_util/triggerEvent.js

@@ -0,0 +1,8 @@
+export default function triggerEvent (el, type) {
+  if ('createEvent' in document) {
+    // modern browsers, IE9+
+    const e = document.createEvent('HTMLEvents')
+    e.initEvent(type, false, true)
+    el.dispatchEvent(e)
+  }
+}

components/_util/warning.js

@@ -0,0 +1,9 @@
+import warning from 'warning'
+
+const warned = {}
+export default (valid, message) => {
+  if (!valid && !warned[message]) {
+    warning(false, message)
+    warned[message] = true
+  }
+}

components/input/Input.vue

@@ -151,11 +151,12 @@ export default {
       ])
       const { stateValue, getInputClassName, handleKeyDown, handleChange } = this
       const attrs = {
-        attrs: { ...otherProps, ...this.$attrs, value: stateValue },
+        attrs: { ...otherProps, ...this.$attrs },
       }
       return this.renderLabeledIcon(
         <input
           {...attrs}
+          value={stateValue}
           class={getInputClassName()}
           onKeydown={handleKeyDown}
           onInput={handleChange}

components/input/demo/presuffix.vue

@@ -0,0 +1,41 @@
+<template>
+  <AntInput placeholder="Basic usage" v-model="userName" ref="userNameInput">
+    <Icon slot="prefix" type="user" />
+    <Icon v-if="userName" slot="suffix" type="close-circle" @click="emitEmpty" />
+  </AntInput>
+</template>
+<script>
+
+import { Input, Icon } from 'antd'
+export default {
+  data () {
+    return {
+      userName: '',
+    }
+  },
+  methods: {
+    emitEmpty () {
+      this.$refs.userNameInput.focus()
+      this.userName = ''
+    },
+  },
+  components: {
+    AntInput: Input,
+    Icon,
+  },
+}
+</script>
+<style>
+.anticon-close-circle {
+  cursor: pointer;
+  color: #ccc;
+  transition: color 0.3s;
+  font-size: 12px;
+}
+.anticon-close-circle:hover {
+  color: #999;
+}
+.anticon-close-circle:active {
+  color: #666;
+}
+</style>

contributors.md

@@ -1,6 +1,6 @@
 ##唐
-组件    |进度
+组件    |进度| 备注
---------|----
+--------|----|----
 Button  |  done
 Icon  |  done
 Checkbox  |  done
@@ -9,7 +9,7 @@ Tabs | done
 Tag | done
 Carousel
 Mention
-Input
+Input | done |select完成后补全demo
 InputNumber
 AutoComplete
 Select

package.json

@@ -75,8 +75,10 @@
   },
   "dependencies": {
     "add-dom-event-listener": "^1.0.2",
+    "css-animation": "^1.4.1",
     "eslint-plugin-vue": "^3.13.0",
     "lodash.debounce": "^4.0.8",
-    "omit.js": "^1.0.0"
+    "omit.js": "^1.0.0",
+    "warning": "^3.0.0"
   }
 }