Merge remote-tracking branch 'origin/master' into feat-vue3

CHANGELOG.en-US.md

@@ -10,6 +10,20 @@
 
 ---
 
+## 1.6.3
+
+`2020-07-05`
+
+- 🐞 Fix Input.Password focus position shift issue [#2420](https://github.com/vueComponent/ant-design-vue/pull/2420)
+- 🐞 Fix Drawer maskstyle not working [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
+- 🐞 Fix Drawer maskstyle not working [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
+- 🌟 Button supports custom Icon [#2245](https://github.com/vueComponent/ant-design-vue/pull/2245)
+- 🌟 DatePicker supports custom format [#2276](https://github.com/vueComponent/ant-design-vue/pull/2276)
+- 🐞 Fix DatePicker year and time is incorrect [#2488](https://github.com/vueComponent/ant-design-vue/issues/2488)
+- 🌟 Optimize the Menu component, the animation is smoother
+- 🐞 Fix Dropdown pop-up position error [#2359](https://github.com/vueComponent/ant-design-vue/issues/2359)
+- 🐞 Fix the problem of duplicate key when `Breadcrumb` has the same name [#2505](https://github.com/vueComponent/ant-design-vue/issues/2505)
+
 ## 1.6.2
 
 `2020-06-02`

CHANGELOG.zh-CN.md

@@ -10,6 +10,20 @@
 
 ---
 
+## 1.6.3
+
+`2020-07-05`
+
+- 🐞 修复 Input.Password focus 位置移位问题 [#2420](https://github.com/vueComponent/ant-design-vue/pull/2420)
+- 🐞 修复 Drawer maskstyle 不生效问题 [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
+- 🐞 修复 Drawer maskstyle 不生效问题 [#2407](https://github.com/vueComponent/ant-design-vue/issues/2407)
+- 🌟 Button 支持自定义 Icon [#2245](https://github.com/vueComponent/ant-design-vue/pull/2245)
+- 🌟 DatePicker 支持自定义 format [#2276](https://github.com/vueComponent/ant-design-vue/pull/2276)
+- 🐞 修复 DatePicker 年份时间不正确问题 [#2488](https://github.com/vueComponent/ant-design-vue/issues/2488)
+- 🌟 优化 Menu 组件，动画更加流畅
+- 🐞 修复 Dropdown 弹窗位置错误问题 [#2359](https://github.com/vueComponent/ant-design-vue/issues/2359)
+- 🐞 修复 Breadcrumb 名称相同时重复 key 问题 [#2505](https://github.com/vueComponent/ant-design-vue/issues/2505)
+
 ## 1.6.2
 
 `2020-06-02`

antd-tools/gulpfile.js

@@ -196,6 +196,9 @@ function githubRelease(done) {
     })
     .then(() => {
       done();
+    })
+    .catch(err => {
+      console.log(err);
     });
 }
 

components/breadcrumb/Breadcrumb.jsx

@@ -77,7 +77,7 @@ export default {
           overlay = (
             <Menu>
               {route.children.map(child => (
-                <Menu.Item key={child.breadcrumbName || child.path}>
+                <Menu.Item key={child.path || child.breadcrumbName}>
                   {itemRender({
                     route: child,
                     params,

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -70,7 +70,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/autoplay.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" style="display: block;">
       <li class="slick-active"><button class="">1</button></li>
       <li class=""><button class="">2</button></li>
       <li class=""><button class="">3</button></li>
@@ -150,7 +150,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/basic.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" style="display: block;">
       <li class="slick-active"><button class="">1</button></li>
       <li class=""><button class="">2</button></li>
       <li class=""><button class="">3</button></li>
@@ -231,8 +231,11 @@ exports[`renders ./antdv-demo/docs/carousel/demo/customArrows.md correctly 1`] =
         </div>
       </div>
     </div>
-    <div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><span role="img" aria-label="right-circle" class="anticon anticon-right-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="right-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M666.7 505.5l-246-178A8 8 0 00408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
+    <div class="custom-slick-arrow slick-arrow slick-next" style="right: 10px; display: block;"><i aria-label="icon: right-circle" class="anticon anticon-right-circle"><svg viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+          <path d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path>
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+        </svg></i></div>
+    <ul class="slick-dots slick-dots-bottom" style="display: block;">
       <li class="slick-active"><button class="">1</button></li>
       <li class=""><button class="">2</button></li>
       <li class=""><button class="">3</button></li>
@@ -339,7 +342,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/fade.md correctly 1`] = `
         </div>
       </div>
     </div>
-    <ul class="slick-dots slick-dots-bottom undefined" style="display: block;">
+    <ul class="slick-dots slick-dots-bottom" style="display: block;">
       <li class="slick-active"><button class="">1</button></li>
       <li class=""><button class="">2</button></li>
       <li class=""><button class="">3</button></li>
@@ -429,7 +432,7 @@ exports[`renders ./antdv-demo/docs/carousel/demo/position.md correctly 1`] = `
           </div>
         </div>
       </div>
-      <ul class="slick-dots slick-dots-top undefined" style="display: block;">
+      <ul class="slick-dots slick-dots-top" style="display: block;">
         <li class="slick-active"><button class="">1</button></li>
         <li class=""><button class="">2</button></li>
         <li class=""><button class="">3</button></li>

components/carousel/index.jsx

@@ -9,6 +9,7 @@ import hasProp, {
 import { ConfigConsumerProps } from '../config-provider';
 import Base from '../base';
 import warning from '../_util/warning';
+import classNames from 'classnames';
 
 // matchMedia polyfill for
 // https://github.com/WickyNilliams/enquire.js/issues/82
@@ -164,7 +165,9 @@ const Carousel = {
     const dotsClass = 'slick-dots';
     const dotPosition = this.getDotPosition();
     props.vertical = dotPosition === 'left' || dotPosition === 'right';
-    props.dotsClass = `${dotsClass} ${dotsClass}-${dotPosition || 'bottom'} ${props.dotsClass}`;
+    props.dotsClass = classNames(`${dotsClass}`, `${dotsClass}-${dotPosition || 'bottom'}`, {
+      [`${props.dotsClass}`]: !!props.dotsClass,
+    });
     if (props.vertical) {
       className = `${className} ${className}-vertical`;
     }

components/color-picker/ColorPicker.jsx

@@ -0,0 +1,208 @@
+import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
+import BaseMixin from '../_util/BaseMixin';
+import Pickr from '@simonwep/pickr/dist/pickr.es5.min';
+import Icon from '../icon';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import enUS from './locale/en_US';
+import debounce from 'lodash/debounce';
+
+import { getOptionProps } from '../_util/props-util';
+let colors = '#194d33';
+export default {
+  name: 'AColorPicker',
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change.value', //为了支持v-model直接返回颜色字符串 所以用了自定义的事件,与pickr自带change事件进行区分
+  },
+  props: {
+    prefixCls: PropTypes.string,
+    defaultValue: PropTypes.string, //默认值
+    config: PropTypes.object, //pickr配置
+    value: PropTypes.string, //颜色值
+    locale: PropTypes.object, //双语包
+    colorRounded: PropTypes.number, //颜色数值保留几位小数
+    size: PropTypes.oneOf(['default', 'small', 'large']).def('default'), //尺寸
+    getPopupContainer: PropTypes.func, //指定渲染容器
+    disabled: PropTypes.bool.def(false), //是否禁用
+    format: PropTypes.string, //颜色格式设置
+    alpha: PropTypes.bool.def(false), //是否开启透明通道
+    hue: PropTypes.bool.def(true), //是否开启色彩预选
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  data() {
+    return {
+      colors,
+      myOpen: false,
+      pickr: null,
+      i18n: enUS,
+    };
+  },
+  watch: {
+    'configProvider.locale.ColorPicker': {
+      handler(val) {
+        if (this.locale) return;
+        this.i18n = val;
+        this.reInitialize();
+      },
+    },
+    locale(val) {
+      this.i18n = val.ColorPicker || val.lang;
+      this.reInitialize();
+    },
+    value(val) {
+      this.setColor(val);
+    },
+    disabled(val) {
+      this.pickr[val ? 'disable' : 'enable']();
+    },
+    config: {
+      handler() {
+        this.reInitialize();
+      },
+      deep: true,
+    },
+    format(val) {
+      const type = val.toLocaleUpperCase();
+      let res = this.pickr.setColorRepresentation(type);
+      if (res) {
+        this.pickr.applyColor();
+      } else {
+        throw new TypeError('format was invalid');
+      }
+    },
+  },
+  mounted() {
+    if (this.locale) {
+      this.i18n = this.locale.ColorPicker || this.locale.lang;
+    }
+    this.createPickr();
+    this.eventsBinding();
+  },
+  destroyed() {
+    this.pickr.destroyAndRemove();
+  },
+  methods: {
+    reInitialize() {
+      this.pickr.destroyAndRemove();
+      const dom = document.createElement('div');
+      dom.id = 'color-picker' + this._uid;
+      const box = this.$el.querySelector('#color-picker-box' + this._uid);
+      box.appendChild(dom);
+      this.createPickr();
+      this.eventsBinding();
+    },
+    setColor: debounce(function(val) {
+      this.pickr.setColor(val);
+    }, 1000),
+    eventsBinding() {
+      const pickrEvents = [
+        'init',
+        'hide',
+        'show',
+        'save',
+        'clear',
+        'change',
+        'changestop',
+        'cancel',
+        'swatchselect',
+      ];
+      Object.keys(this.$listeners).forEach(event => {
+        pickrEvents.includes(event) && this.pickr.on(event, this.$listeners[event]);
+      });
+    },
+    createPickr() {
+      const { getPopupContainer } = getOptionProps(this);
+      const { getPopupContainer: getContextPopupContainer } = this.configProvider;
+      const container = getPopupContainer || getContextPopupContainer;
+      this.pickr = Pickr.create(
+        Object.assign(
+          {
+            el: '#color-picker' + this._uid,
+            container: (container && container(this.$el)) || document.body,
+            theme: 'monolith', // or 'monolith', or 'nano'
+            default: this.value || this.defaultValue || null, // 有默认颜色pickr才可以获取到_representation
+            components: {
+              // Main components
+              preview: true,
+              opacity: this.alpha,
+              hue: this.hue,
+              // Input / output Options
+              interaction: {
+                hex: true,
+                rgba: true,
+                input: true,
+                clear: true,
+                save: true,
+              },
+            },
+          },
+          this.config,
+          { i18n: this.i18n },
+        ),
+      )
+        .on('save', (color, instance) => {
+          if (color) {
+            let _representation = instance._representation || 'HEXA';
+            color = color['to' + _representation]().toString(this.colorRounded || 0);
+          }
+          this.$emit('change.value', color || '');
+        })
+        .on('hide', () => {
+          this.setState({ myOpen: false });
+        });
+    },
+    handleOpenChange() {
+      const open = !this.myOpen;
+      this.setState({ myOpen: open });
+      this.pickr[open ? 'show' : 'hide']();
+      this.$emit('openChange', open);
+    },
+    getDefaultLocale() {
+      const result = {
+        ...enUS,
+        ...this.$props.locale,
+      };
+      result.lang = {
+        ...result.lang,
+        ...(this.$props.locale || {}).lang,
+      };
+      return result;
+    },
+    renderColorPicker() {
+      const { prefixCls: customizePrefixCls } = this.$props;
+      const { getPrefixCls } = this.configProvider;
+      const prefixCls = getPrefixCls('color-picker', customizePrefixCls);
+      const { disabled } = getOptionProps(this);
+      const classString = {
+        [prefixCls]: true,
+        [`${prefixCls}-open`]: this.myOpen,
+        [`${prefixCls}-lg`]: this.size === 'large',
+        [`${prefixCls}-sm`]: this.size === 'small',
+        [`${prefixCls}-disabled`]: this.disabled,
+      };
+      return (
+        <div class={classString} tabIndex={disabled ? -1 : 0} onClick={this.handleOpenChange}>
+          <div class={`${prefixCls}-selection`}>
+            <div id={'color-picker-box' + this._uid}>
+              <div id={'color-picker' + this._uid}></div>
+            </div>
+            <Icon type="down" class={`${prefixCls}-icon`} />
+          </div>
+        </div>
+      );
+    },
+  },
+  render() {
+    return (
+      <LocaleReceiver
+        componentName="ColorPicker"
+        defaultLocale={this.getDefaultLocale}
+        scopedSlots={{ default: this.renderColorPicker }}
+      />
+    );
+  },
+};

components/color-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./antdv-demo/docs/color-picker/demo/alpha.md correctly 1`] = `<a-color-picker alpha="true"></a-color-picker>`;
+
+exports[`renders ./antdv-demo/docs/color-picker/demo/basic.md correctly 1`] = `
+<div class="ant-row">
+  <div class="ant-col ant-col-12">
+    有默认值
+    <a-colorpicker></a-colorpicker>
+  </div>
+  <div class="ant-col ant-col-12">
+    无默认值
+    <a-colorpicker></a-colorpicker>
+  </div>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/color-picker/demo/colors.md correctly 1`] = `<a-color-picker config="[object Object]"></a-color-picker>`;
+
+exports[`renders ./antdv-demo/docs/color-picker/demo/hue.md correctly 1`] = `<a-color-picker></a-color-picker>`;
+
+exports[`renders ./antdv-demo/docs/color-picker/demo/size.md correctly 1`] = `
+<div>
+  <div class="ant-row">
+    <div class="ant-col ant-col-8">
+      <a-colorpicker size="large"></a-colorpicker>
+    </div>
+    <div class="ant-col ant-col-8">
+      <a-colorpicker></a-colorpicker>
+    </div>
+    <div class="ant-col ant-col-8">
+      <a-colorpicker size="small"></a-colorpicker>
+    </div>
+  </div>
+</div>
+`;

components/color-picker/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,337 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorPicker prop locale should works 1`] = `
+<div tabindex="0" class="ant-color-picker ant-color-picker-open">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box25">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="color: rgb(205, 2, 0);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app visible" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
+        <div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker" style="background: rgb(205, 2, 0);"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="1セーブ" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="1キャンセル" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="1晴れ" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker save event should works 1`] = `
+<div tabindex="0" class="ant-color-picker ant-color-picker-open">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box31">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="color: rgb(205, 2, 0);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
+        <div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker" style="background: rgb(205, 2, 0);"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="Save" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker should support default value 1`] = `
+<div tabindex="0" class="ant-color-picker ant-color-picker-open">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box1">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="color: rgb(205, 2, 0);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app visible" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(205, 2, 0);"></button>
+        <div class="pcr-current-color" style="color: rgb(205, 2, 0);"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker" style="background: rgb(205, 2, 0);"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker" style="background-color: hsl(0.5853658536585238, 100%, 50%);"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="Save" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker should support disabled 1`] = `
+<div tabindex="-1" class="ant-color-picker ant-color-picker-disabled">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box13">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button disabled clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color"></button>
+        <div class="pcr-current-color"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="Save" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker should support format 1`] = `
+<div tabindex="0" class="ant-color-picker">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box19">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color" style="color: rgb(0, 0, 0);"></button>
+        <div class="pcr-current-color"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="Save" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ColorPicker should support v-model 1`] = `
+<div tabindex="0" class="ant-color-picker">
+  <div class="ant-color-picker-selection">
+    <div id="color-picker-box7">
+      <div class="pickr">
+
+        <button type="button" class="pcr-button clear" role="button" aria-label="toggle color picker dialog" style="color: rgba(0, 0, 0, 0.15);"></button>
+
+
+      </div>
+    </div><i aria-label="icon: down" class="anticon anticon-down ant-color-picker-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
+        <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
+      </svg></i>
+  </div>
+  <div class="pcr-app" data-theme="monolith" aria-label="color picker dialog" role="window" style="left: 512px; top: 384px;">
+    <div class="pcr-selection">
+      <div class="pcr-color-preview">
+        <button type="button" class="pcr-last-color" aria-label="use previous color"></button>
+        <div class="pcr-current-color"></div>
+      </div>
+
+      <div class="pcr-color-palette">
+        <div class="pcr-picker"></div>
+        <div class="pcr-palette" tabindex="0" aria-label="color selection area" role="listbox"></div>
+      </div>
+
+      <div class="pcr-color-chooser">
+        <div class="pcr-picker"></div>
+        <div class="pcr-hue pcr-slider" tabindex="0" aria-label="hue selection slider" role="slider"></div>
+      </div>
+
+      <div class="pcr-color-opacity" style="display:none" hidden="">
+        <div class="pcr-picker"></div>
+        <div class="pcr-opacity pcr-slider" tabindex="0" aria-label="selection slider" role="slider"></div>
+      </div>
+    </div>
+
+    <div class="pcr-swatches "></div>
+
+    <div class="pcr-interaction">
+      <input class="pcr-result" type="text" spellcheck="false" aria-label="color input field">
+
+      <input class="pcr-type active" data-type="HEXA" value="HEXA" type="button">
+      <input class="pcr-type" data-type="RGBA" value="RGBA" type="button">
+      <input class="pcr-type" data-type="HSLA" value="HSLA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="HSVA" value="HSVA" type="button" style="display:none" hidden="">
+      <input class="pcr-type" data-type="CMYK" value="CMYK" type="button" style="display:none" hidden="">
+
+      <input class="pcr-save" value="Save" type="button" aria-label="save and close">
+      <input class="pcr-cancel" value="Cancel" type="button" style="display:none" hidden="" aria-label="cancel and close">
+      <input class="pcr-clear" value="Clear" type="button" aria-label="clear and close">
+    </div>
+  </div>
+</div>
+`;

components/color-picker/__tests__/demo.test.js

@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('color-picker');

components/color-picker/__tests__/index.test.js

@@ -0,0 +1,155 @@
+import { mount } from '@vue/test-utils';
+import ColorPicker from '..';
+import { asyncExpect } from '@/tests/utils';
+describe('ColorPicker', () => {
+  it('should support default value', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return <ColorPicker default-value="#cd0200" getPopupContainer={p => p}></ColorPicker>;
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot();
+      wrapper.destroy();
+    }, 1000);
+  });
+  it('should support v-model', async () => {
+    let color = 'rgba(10, 10, 10, 1)';
+    const wrapper = mount(
+      {
+        data() {
+          return {
+            color,
+          };
+        },
+        render() {
+          return <ColorPicker v-model={this.color} getPopupContainer={p => p}></ColorPicker>;
+        },
+        mounted() {
+          this.color = 'rgba(110, 120, 130, 1)';
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot();
+      wrapper.destroy();
+    }, 1000);
+  });
+  it('should support disabled', async () => {
+    const wrapper = mount(
+      {
+        data() {
+          return {
+            disabled: false,
+          };
+        },
+        render() {
+          return <ColorPicker disabled={this.disabled} getPopupContainer={p => p}></ColorPicker>;
+        },
+        mounted() {
+          this.disabled = true;
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+
+    await asyncExpect(async () => {
+      expect(wrapper.html()).toMatchSnapshot();
+      await asyncExpect(() => {
+        wrapper.destroy();
+      });
+    }, 1000);
+  });
+  it('should support format', async () => {
+    const wrapper = mount(
+      {
+        data() {
+          return {
+            format: 'RGBA',
+          };
+        },
+        render() {
+          return <ColorPicker format={this.format} getPopupContainer={p => p}></ColorPicker>;
+        },
+        mounted() {
+          this.format = 'HEX';
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+
+    await asyncExpect(async () => {
+      expect(wrapper.html()).toMatchSnapshot();
+      await asyncExpect(() => {
+        wrapper.destroy();
+      });
+    }, 1000);
+  });
+  it('prop locale should works', async () => {
+    const wrapper = mount(
+      {
+        data() {
+          return {
+            locale: {
+              lang: {
+                'btn:save': 'セーブ',
+                'btn:cancel': 'キャンセル',
+                'btn:clear': '晴れ',
+              },
+            },
+          };
+        },
+        render() {
+          return (
+            <ColorPicker default-value="#cd0200" locale={this.locale} getPopupContainer={p => p} />
+          );
+        },
+        mounted() {
+          this.locale = {
+            lang: {
+              'btn:save': '1セーブ',
+              'btn:cancel': '1キャンセル',
+              'btn:clear': '1晴れ',
+            },
+          };
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+    await asyncExpect(async () => {
+      expect(wrapper.html()).toMatchSnapshot();
+      await asyncExpect(() => {
+        wrapper.destroy();
+      });
+    }, 1000);
+  });
+  it('save event should works', async () => {
+    const wrapper = mount(
+      {
+        render() {
+          return (
+            <ColorPicker default-value="#cd0200" getPopupContainer={p => p} onSave={this.save} />
+          );
+        },
+        methods: {
+          save(val) {
+            return val;
+          },
+        },
+      },
+      { sync: false, attachToDocument: true },
+    );
+    await asyncExpect(async () => {
+      wrapper.find('.pcr-save').trigger('click');
+      expect(wrapper.html()).toMatchSnapshot();
+      await asyncExpect(() => {
+        wrapper.destroy();
+      });
+    }, 1000);
+  });
+});

components/color-picker/index.js

@@ -0,0 +1,9 @@
+import ColorPicker from './ColorPicker';
+import Base from '../base';
+/* istanbul ignore next */
+ColorPicker.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(ColorPicker.name, ColorPicker);
+};
+
+export default ColorPicker;

components/color-picker/locale/en_US.js

@@ -0,0 +1,5 @@
+export default {
+  'btn:save': 'Save',
+  'btn:cancel': 'Cancel',
+  'btn:clear': 'Clear',
+};

components/color-picker/locale/zh_CN.js

@@ -0,0 +1,5 @@
+export default {
+  'btn:save': '保存',
+  'btn:cancel': '取消',
+  'btn:clear': '清除',
+};

components/color-picker/locale/zh_TW.js

@@ -0,0 +1,5 @@
+export default {
+  'btn:save': '保存',
+  'btn:cancel': '取消',
+  'btn:clear': '清除',
+};

components/color-picker/style/index.js

@@ -0,0 +1,4 @@
+import '../../style/index.less';
+import './index.less';
+// style dependencies
+import '../../grid/style';

components/color-picker/style/index.less

@@ -0,0 +1,121 @@
+@import '../../style/themes/index';
+@import '../../input/style/mixin';
+
+@color-picker-prefix-cls: ~'@{ant-prefix}-color-picker';
+.@{color-picker-prefix-cls} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  display: inline-block;
+  outline: none;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  min-width: 55px;
+  .pickr {
+    display: inline-block;
+    .pcr-button {
+      width: 18px;
+      height: 18px;
+      margin-left: 7px;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+  &.@{color-picker-prefix-cls}-disabled {
+    cursor: not-allowed;
+    .@{color-picker-prefix-cls}-selection {
+      background: @input-disabled-bg;
+      box-shadow: none;
+      border: @border-width-base @border-style-base @select-border-color;
+      &:hover,
+      &:focus,
+      &:active {
+        border: @border-width-base @border-style-base @select-border-color;
+        box-shadow: none;
+      }
+    }
+    &.@{color-picker-prefix-cls}-open {
+      .@{color-picker-prefix-cls}-icon {
+        & svg {
+          transform: none;
+        }
+      }
+    }
+  }
+  &-open {
+    .@{color-picker-prefix-cls}-icon {
+      & svg {
+        transform: rotate(180deg);
+      }
+    }
+    .@{color-picker-prefix-cls}-selection {
+      .active();
+    }
+  }
+  &-selection {
+    display: block;
+    box-sizing: border-box;
+    background-color: @select-background;
+    border: @border-width-base @border-style-base @select-border-color;
+    border-top-width: @border-width-base + 0.02px;
+    border-radius: @border-radius-base;
+    outline: none;
+    transition: all 0.3s @ease-in-out;
+    user-select: none;
+
+    position: relative;
+    height: @input-height-base;
+    cursor: inherit;
+    &:hover {
+      .hover;
+    }
+  }
+  &-icon {
+    .iconfont-mixin();
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal - 4px;
+    margin-top: -@font-size-sm / 2;
+    color: @disabled-color;
+    font-size: @font-size-sm;
+    line-height: 1;
+    transform-origin: 50% 50%;
+    & svg {
+      transition: transform 0.3s;
+    }
+  }
+  &-lg {
+    font-size: @font-size-lg;
+    .@{color-picker-prefix-cls}-selection {
+      line-height: @input-height-lg - 12;
+      height: @input-height-lg;
+    }
+    .@{color-picker-prefix-cls}-icon {
+      top: @input-height-lg / 2;
+    }
+  }
+
+  &-sm {
+    .@{color-picker-prefix-cls}-selection {
+      line-height: @input-height-sm - 12;
+      height: @input-height-sm;
+    }
+    .pickr .pcr-button {
+      width: 14px;
+      height: 14px;
+    }
+    .@{color-picker-prefix-cls}-icon {
+      right: @control-padding-horizontal - 2px;
+      top: @input-height-sm / 2;
+      font-size: 10px;
+    }
+  }
+}

components/date-picker/interface.js

@@ -7,7 +7,7 @@ export const PickerProps = () => ({
   transitionName: PropTypes.string,
   prefixCls: PropTypes.string,
   inputPrefixCls: PropTypes.string,
-  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
   disabled: PropTypes.bool,
   allowClear: PropTypes.bool,
   suffixIcon: PropTypes.any,

components/date-picker/utils.js

@@ -5,5 +5,13 @@ export function formatDate(value, format) {
   if (Array.isArray(format)) {
     format = format[0];
   }
+  if (typeof format === 'function') {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
   return value.format(format);
 }

components/index.js

@@ -136,6 +136,8 @@ import { default as Skeleton } from './skeleton';
 
 import { default as Comment } from './comment';
 
+// import { default as ColorPicker } from './color-picker';
+
 import { default as ConfigProvider } from './config-provider';
 
 import { default as Empty } from './empty';
@@ -203,6 +205,7 @@ const components = [
   Drawer,
   Skeleton,
   Comment,
+  // ColorPicker,
   ConfigProvider,
   Empty,
   Result,
@@ -292,6 +295,7 @@ export {
   Drawer,
   Skeleton,
   Comment,
+  // ColorPicker,
   ConfigProvider,
   Empty,
   Result,

components/list/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('list');
+demoTest('list', { skip: ['infinite-virtualized-load'] });

components/locale-provider/LocaleReceiver.jsx

@@ -37,7 +37,6 @@ export default {
       return localeCode;
     },
   },
-
   render() {
     const { $slots } = this;
     const children = this.children || $slots.default;

components/locale/default.js

@@ -2,6 +2,7 @@ import Pagination from '../vc-pagination/locale/en_US';
 import DatePicker from '../date-picker/locale/en_US';
 import TimePicker from '../time-picker/locale/en_US';
 import Calendar from '../calendar/locale/en_US';
+import ColorPicker from '../color-picker/locale/en_US';
 
 export default {
   locale: 'en',
@@ -9,6 +10,7 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  ColorPicker,
   global: {
     placeholder: 'Please select',
   },

components/locale/zh_CN.js

@@ -2,6 +2,7 @@ import Pagination from '../vc-pagination/locale/zh_CN';
 import DatePicker from '../date-picker/locale/zh_CN';
 import TimePicker from '../time-picker/locale/zh_CN';
 import Calendar from '../calendar/locale/zh_CN';
+import ColorPicker from '../color-picker/locale/zh_CN';
 
 export default {
   locale: 'zh-cn',
@@ -9,6 +10,7 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  ColorPicker,
   // locales for all comoponents
   global: {
     placeholder: '请选择',

components/locale/zh_TW.js

@@ -2,6 +2,7 @@ import Pagination from '../vc-pagination/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
 import TimePicker from '../time-picker/locale/zh_TW';
 import Calendar from '../calendar/locale/zh_TW';
+import ColorPicker from '../color-picker/locale/zh_TW';
 
 export default {
   locale: 'zh-tw',
@@ -9,6 +10,7 @@ export default {
   DatePicker,
   TimePicker,
   Calendar,
+  ColorPicker,
   Table: {
     filterTitle: '篩選器',
     filterConfirm: '確 定',

components/menu/style/index.less

@@ -15,7 +15,7 @@
   background: @menu-bg;
   outline: none;
   box-shadow: @box-shadow-base;
-  transition: background 0.3s, width 0.2s;
+  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
   .clearfix;
 
   ul,

components/style.js

@@ -60,3 +60,4 @@ import './result/style';
 import './descriptions/style';
 import './page-header/style';
 import './form-model/style';
+// import './color-picker/style';

components/vc-calendar/src/Calendar.jsx

@@ -25,7 +25,7 @@ const Calendar = {
   name: 'Calendar',
   props: {
     locale: PropTypes.object.def(enUs),
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     // prefixCls: PropTypes.string,

components/vc-calendar/src/FullCalendar.jsx

@@ -12,7 +12,7 @@ const FullCalendar = {
   name: 'FullCalendar',
   props: {
     locale: PropTypes.object.def(enUs),
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     defaultType: PropTypes.string.def('date'),

components/vc-calendar/src/Picker.jsx

@@ -25,7 +25,7 @@ const Picker = {
     animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     disabled: PropTypes.bool,
     transitionName: PropTypes.string,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
     // onChange: PropTypes.func,
     // onOpenChange: PropTypes.func,
     children: PropTypes.func,

components/vc-calendar/src/RangeCalendar.jsx

@@ -110,7 +110,7 @@ const RangeCalendar = {
     // onValueChange: PropTypes.func,
     // onHoverChange: PropTypes.func,
     // onPanelChange: PropTypes.func,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     // onClear: PropTypes.func,
     type: PropTypes.any.def('both'),
     disabledDate: PropTypes.func,

components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -174,7 +174,7 @@ const CalendarHeader = {
       panel = (
         <YearPanel
           locale={locale}
-          defaultValue={value}
+          value={value}
           rootPrefixCls={prefixCls}
           onSelect={this.onYearSelect}
           onDecadePanelShow={this.showDecadePanel}
@@ -186,7 +186,7 @@ const CalendarHeader = {
       panel = (
         <DecadePanel
           locale={locale}
-          defaultValue={value}
+          value={value}
           rootPrefixCls={prefixCls}
           onSelect={this.onDecadeSelect}
           renderFooter={renderFooter}

components/vc-calendar/src/date/DateInput.jsx

@@ -16,7 +16,7 @@ const DateInput = {
     timePicker: PropTypes.object,
     value: PropTypes.object,
     disabledTime: PropTypes.any,
-    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]),
     locale: PropTypes.object,
     disabledDate: PropTypes.func,
     // onChange: PropTypes.func,

components/vc-calendar/src/decade/DecadePanel.jsx

@@ -35,7 +35,11 @@ export default {
       sValue: this.value || this.defaultValue,
     };
   },
-
+  watch: {
+    value(val) {
+      this.sValue = val;
+    },
+  },
   render() {
     const value = this.sValue;
     const { locale, renderFooter } = this.$props;

components/vc-calendar/src/util/index.js

@@ -100,5 +100,14 @@ export function formatDate(value, format) {
     format = format[0];
   }
 
+  if (typeof format === 'function') {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
+
   return value.format(format);
 }

components/vc-calendar/src/year/YearPanel.jsx

@@ -36,6 +36,11 @@ export default {
       sValue: this.value || this.defaultValue,
     };
   },
+  watch: {
+    value(val) {
+      this.sValue = val;
+    },
+  },
   methods: {
     years() {
       const value = this.sValue;

components/vc-dropdown/src/Dropdown.jsx

@@ -136,9 +136,10 @@ export default {
           if (
             this.$refs.trigger &&
             this.$refs.trigger._component &&
-            this.$refs.trigger._component.alignInstance
+            this.$refs.trigger._component.$refs &&
+            this.$refs.trigger._component.$refs.alignInstance
           ) {
-            this.$refs.trigger._component.alignInstance.forceAlign();
+            this.$refs.trigger._component.$refs.alignInstance.forceAlign();
           }
         }
       }

components/vc-input-number/src/index.js

@@ -783,7 +783,6 @@ export default {
             onBlur={this.onBlur}
             onKeydown={editable ? this.onKeyDown : noop}
             onKeyup={editable ? this.onKeyUp : noop}
-            maxlength={props.maxLength}
             readOnly={this.readOnly}
             disabled={this.disabled}
             max={this.max}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-vue",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "title": "Ant Design Vue",
   "description": "An enterprise-class UI design language and Vue-based implementation",
   "keywords": [
@@ -175,6 +175,7 @@
   "dependencies": {
     "@ant-design-vue/babel-helper-vue-compatible-props": "^1.0.0",
     "@ant-design/icons-vue": "^5.0.0-beta.0",
+    "@simonwep/pickr": "~1.7.0",
     "add-dom-event-listener": "^1.0.2",
     "array-tree-filter": "^2.1.0",
     "async-validator": "^3.0.3",

tests/shared/demoTest.js

@@ -18,7 +18,8 @@ export default function demoTest(component, options = {}) {
     testMethod(`renders ${file} correctly`, done => {
       MockDate.set(moment('2016-11-22'));
       const demo = require(`../.${file}`).default || require(`../.${file}`);
-      const wrapper = mount(demo, { sync: false });
+      document.body.innerHTML = '';
+      const wrapper = mount(demo, { sync: false, attachToDocument: true });
       Vue.nextTick(() => {
         // should get dom from element
         // snap files copy from antd does not need to change
@@ -27,6 +28,7 @@ export default function demoTest(component, options = {}) {
         expect(dom).toMatchSnapshot();
         MockDate.reset();
         wrapper.destroy();
+        document.body.innerHTML = '';
         done();
       });
     });

types/color-picker.d.ts

@@ -0,0 +1,51 @@
+// Project: https://github.com/vueComponent/ant-design-vue Definitions by:
+// https://github.com/vueComponent/ant-design-vue/types
+
+import { AntdComponent } from './component';
+import Pickr from '@simonwep/pickr';
+
+export declare class ColorPicker extends AntdComponent {
+  /** simonwep/pickr's options */
+  config?:Pickr.Options
+  /**prefix class name */
+  prefixCls?: string
+  /** default color value */
+  defaultValue?: string
+  /** color value */
+  value?: string
+  /**
+   * language package setting
+   * @type object
+   */
+  locale: object;
+  /**
+   * precision of color value
+   * @default 0
+   * @type number
+   * */
+  colorRounded?:number
+  /**
+   * descriptions size type
+   * @default 'default'
+   * @type string
+   */
+  size: 'large' | 'default' | 'small';
+  /**
+   * Parent Node which the selector should be rendered to. Default to body.
+   * When position issues happen, try to modify it into scrollable content and position it relative.
+   * @default () => document.body
+   * @type Function
+   */
+  getPopupContainer: (triggerNode: any) => HTMLElement;
+  /**
+   * Disabled or not
+   * @default false
+   * @type boolean
+   */
+  disabled: boolean
+  /**
+   * to set the color format
+   * @default "HEXA"
+   */
+  format: Pickr.Representation
+}

webpack.config.js

@@ -18,6 +18,7 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
+        exclude: /pickr.*js/,
         options: {
           cacheDirectory: true,
           presets: [