diff --git a/components/_util/getLocale.js b/components/_util/getLocale.js new file mode 100644 index 000000000..ecd60b5cf --- /dev/null +++ b/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 +} diff --git a/components/_util/getRequestAnimationFrame.js b/components/_util/getRequestAnimationFrame.js new file mode 100644 index 000000000..a4678dfef --- /dev/null +++ b/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) +} diff --git a/components/_util/getScroll.js b/components/_util/getScroll.js new file mode 100644 index 000000000..f600d7fed --- /dev/null +++ b/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 +} diff --git a/components/_util/isCssAnimationSupported.js b/components/_util/isCssAnimationSupported.js new file mode 100644 index 000000000..791776cae --- /dev/null +++ b/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 diff --git a/components/_util/openAnimation.js b/components/_util/openAnimation.js new file mode 100644 index 000000000..4bde0bbba --- /dev/null +++ b/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 diff --git a/components/_util/throttleByAnimationFrame.js b/components/_util/throttleByAnimationFrame.js new file mode 100644 index 000000000..bf0e63236 --- /dev/null +++ b/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 + }, + } + } +} diff --git a/components/_util/triggerEvent.js b/components/_util/triggerEvent.js new file mode 100644 index 000000000..bca06148f --- /dev/null +++ b/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) + } +} diff --git a/components/_util/warning.js b/components/_util/warning.js new file mode 100644 index 000000000..9603df24b --- /dev/null +++ b/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 + } +} diff --git a/components/input/Input.vue b/components/input/Input.vue index 754be7b01..c52285a2f 100644 --- a/components/input/Input.vue +++ b/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( + + + + + + + diff --git a/contributors.md b/contributors.md index bbda32e08..01194ee13 100644 --- a/contributors.md +++ b/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 diff --git a/package.json b/package.json index 473e40b41..3276e61d6 100644 --- a/package.json +++ b/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" } }