Merge branch 'master' into feat-1.4.0

.eslintrc

@@ -1,4 +1,5 @@
 {
+  "root": true,
     "env": {
         "browser": true,
         "node": true,
@@ -6,14 +7,18 @@
         "jest": true,
         "es6": true
     },
-    "parser": "babel-eslint",
+    "parserOptions": {
-    "extends": ["plugin:vue-libs/recommended", "prettier"],
+      "parser": "babel-eslint"
+    },
+    "extends": ["plugin:vue/recommended", "prettier"],
     "rules": {
         "comma-dangle": [2, "always-multiline"],
         "no-var": "error",
-        "no-unused-vars": "warn",
         "camelcase": "off",
         "no-extra-boolean-cast": "off",
-        "semi": ["error", "always"]
+        "semi": ["error", "always"],
+        "vue/require-prop-types": "off",
+        "vue/require-default-prop": "off",
+        "vue/no-reserved-keys": "off"
     }
 }

.jest.js

@@ -28,7 +28,8 @@ module.exports = {
     : '.*\\.test\\.js$',
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
-    "ant-design-vue": "<rootDir>/components/index.js"
+    "ant-design-vue": "<rootDir>/components/index.js",
+    "^vue$": "vue/dist/vue.common.js"
   },
   snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
   collectCoverage: process.env.COVERAGE === 'true',

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 sudo: required
 node_js:
-  - 8.2.1
+  - 10.10.0
 before_script:
   - npm install vue vue-template-compiler
 script:

CHANGELOG.en-US.md

@@ -10,6 +10,23 @@
 
 ---
 
+## 1.3.4
+`2019-01-31`
+
+🎉 🎉 🎉 Happy New Year!
+- 🐞 fix: AutoComplete placeholder not display when disabled. [#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
+- 🐞 Add the `BreadcrmbItem` ts type file.[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
+- 🐞 Fixed an issue where the FormItem was not updated when it was in a subcomponent. [#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
+- 🐞 Fix some component TypeScript definitions.
+
+## 1.3.3
+`2019-01-26`
+
+- 🐞 Fix `message` not close When you configure maxcount.[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
+- 🐞 Fix some component TypeScript definitions.[#422](https://github.com/vueComponent/ant-design-vue/pull/422)。
+- 🌟 The Anchor component add `warpperClass` `wrapperStyle` property.[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
+- 📝 Update the document: form adds the `preserve` description, and the `icon` modifies the custom component reference document description.
+
 ## 1.3.2
 `2019-01-17`
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,23 @@
 
 ---
 
+## 1.3.4
+`2019-01-31`
+
+🎉 🎉 🎉 祝大家新年快乐！
+- 🐞 修复AutoComplete组件disabled时，placeholder不显示的问题。[#402](https://github.com/vueComponent/ant-design-vue/issues/402)。
+- 🐞 添加 `BreadcrmbItem` ts类型文件。[#452](https://github.com/vueComponent/ant-design-vue/issues/452)。
+- 🐞 修复当FormItem在子组件中时不更新问题。[#446](https://github.com/vueComponent/ant-design-vue/issues/446)。
+- 🐞 修复一些组件 TypeScript 定义。
+
+## 1.3.3
+`2019-01-26`
+
+- 🐞 修复message在配置maxcount时，不能关闭提示窗问题。[#428](https://github.com/vueComponent/ant-design-vue/pull/428)。
+- 🐞 修复一些组件 TypeScript 定义。[#422](https://github.com/vueComponent/ant-design-vue/pull/422)。
+- 🌟 Anchor组件新增`warpperClass` `wrapperStyle`属性。[1aa42d](https://github.com/vueComponent/ant-design-vue/commit/1aa42dfe18bd7ac7893a765b6ee341844ea02550)
+- 📝 更新文档：form增加preserve说明，icon修改自定义组件引用文档说明。
+
 ## 1.3.2
 `2019-01-17`
 

README-zh_CN.md

@@ -91,7 +91,7 @@ ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)
 
 ## Backers
 

README.md

@@ -86,7 +86,7 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://user-images.githubusercontent.com/6937879/43032487-932a5536-8cea-11e8-9175-9c006e938a82.png)
+- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)
 
 ## Backers
 

antd-tools/utils/CleanUpStatsPlugin.js

@@ -24,13 +24,13 @@ class CleanUpStatsPlugin {
 
   apply(compiler) {
     compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
-      const { children, warnings } = stats.compilation;
+      const { children } = stats.compilation;
       if (Array.isArray(children)) {
         stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
       }
-      if (Array.isArray(warnings)) {
+      // if (Array.isArray(warnings)) {
-        stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
+      //   stats.compilation.warnings = warnings.filter(message => this.shouldPickWarning(message));
-      }
+      // }
     });
   }
 }

components/_util/ContainerRender.jsx

@@ -53,11 +53,11 @@ export default {
 
         if (!this._component) {
           this._component = new Vue({
+            el: el,
+            parent: self.parent,
             data: {
               comProps: props,
             },
-            parent: self.parent,
-            el: el,
             mounted() {
               this.$nextTick(() => {
                 if (ready) {

components/_util/FormDecoratorDirective.js

@@ -4,7 +4,7 @@ export function antDecorator(Vue) {
 
 export default {
   // just for tag
-  install: (Vue, options) => {
+  install: Vue => {
     antDecorator(Vue);
   },
 };

components/_util/antDirective.js

@@ -2,7 +2,7 @@ import { antInput } from './antInputDirective';
 import { antDecorator } from './FormDecoratorDirective';
 
 export default {
-  install: (Vue, options) => {
+  install: Vue => {
     antInput(Vue);
     antDecorator(Vue);
   },

components/_util/antInputDirective.js

@@ -46,7 +46,7 @@ if (isIE9) {
 
 export function antInput(Vue) {
   return Vue.directive('ant-input', {
-    inserted(el, binding, vnode, oldVnode) {
+    inserted(el, binding, vnode) {
       if (vnode.tag === 'textarea' || isTextInputType(el.type)) {
         if (!binding.modifiers || !binding.modifiers.lazy) {
           el.addEventListener('compositionstart', onCompositionStart);
@@ -67,7 +67,7 @@ export function antInput(Vue) {
 }
 
 export default {
-  install: (Vue, options) => {
+  install: Vue => {
     antInput(Vue);
   },
 };

components/_util/openAnimation.js

@@ -1,7 +1,7 @@
 import cssAnimation from './css-animation';
 import raf from 'raf';
 
-function animate(node, show, done, type) {
+function animate(node, show, done) {
   let height;
   let requestAnimationFrameId;
   let appearRequestAnimationFrameId;

components/_util/props-util.js

@@ -250,7 +250,7 @@ const initDefaultProps = (propTypes, defaultProps) => {
 export function mergeProps() {
   const args = [].slice.call(arguments, 0);
   const props = {};
-  args.forEach((p = {}, i) => {
+  args.forEach((p = {}) => {
     for (const [k, v] of Object.entries(p)) {
       props[k] = props[k] || {};
       if (isPlainObject(v)) {

components/_util/store/connect.jsx

@@ -24,7 +24,7 @@ export default function connect(mapStateToProps) {
       name: `Connect_${getDisplayName(WrappedComponent)}`,
       props,
       inject: {
-        storeContext: { default: {} },
+        storeContext: { default: () => ({}) },
       },
       data() {
         this.store = this.storeContext.store;

components/_util/vue-types/index.js

@@ -111,7 +111,7 @@ const VuePropTypes = {
 
     let hasCustomValidators = false;
 
-    const nativeChecks = arr.reduce((ret, type, i) => {
+    const nativeChecks = arr.reduce((ret, type) => {
       if (isPlainObject(type)) {
         if (type._vueTypes_name === 'oneOf') {
           return ret.concat(type.type || []);

components/_util/warning.js

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

components/affix/index.jsx

@@ -81,10 +81,10 @@ const Affix = {
       // Mock Event object.
       this.updatePosition({});
     },
-    offsetTop(val) {
+    offsetTop() {
       this.updatePosition({});
     },
-    offsetBottom(val) {
+    offsetBottom() {
       this.updatePosition({});
     },
   },

components/anchor/Anchor.jsx

@@ -4,7 +4,7 @@ import addEventListener from '../_util/Dom/addEventListener';
 import Affix from '../affix';
 import getScroll from '../_util/getScroll';
 import raf from 'raf';
-import { initDefaultProps, getClass } from '../_util/props-util';
+import { initDefaultProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 
 function getDefaultContainer() {
@@ -82,6 +82,8 @@ export const AnchorProps = {
   affix: PropTypes.bool,
   showInkInFixed: PropTypes.bool,
   getContainer: PropTypes.func,
+  wrapperClass: PropTypes.string,
+  wrapperStyle: PropTypes.object,
 };
 
 export default {
@@ -213,7 +215,7 @@ export default {
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(getClass(this), `${prefixCls}-wrapper`);
+    const wrapperClass = classNames(this.wrapperClass, `${prefixCls}-wrapper`);
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,
@@ -221,7 +223,7 @@ export default {
 
     const wrapperStyle = {
       maxHeight: offsetTop ? `calc(100vh - ${offsetTop}px)` : '100vh',
-      // ...getStyle(this, true),
+      ...this.wrapperStyle,
     };
 
     const anchorContent = (

components/anchor/AnchorLink.jsx

@@ -15,8 +15,14 @@ export default {
     href: '#',
   }),
   inject: {
-    antAnchor: { default: {} },
+    antAnchor: { default: () => ({}) },
-    antAnchorContext: { default: {} },
+    antAnchorContext: { default: () => ({}) },
+  },
+  watch: {
+    href(val, oldVal) {
+      this.antAnchor.unregisterLink(oldVal);
+      this.antAnchor.registerLink(val);
+    },
   },
 
   mounted() {
@@ -26,12 +32,6 @@ export default {
   beforeDestroy() {
     this.antAnchor.unregisterLink(this.href);
   },
-  watch: {
-    href(val, oldVal) {
-      this.antAnchor.unregisterLink(oldVal);
-      this.antAnchor.registerLink(val);
-    },
-  },
   methods: {
     handleClick(e) {
       this.antAnchor.scrollTo(this.href);

components/anchor/index.en-US.md

@@ -11,6 +11,8 @@
 | offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
 | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
+| wrapperClass | The class name of the container | string | - |
+| wrapperStyle | The style of the container | object | - |
 
 ### Events
 | Events Name | Description | Arguments |

components/anchor/index.zh-CN.md

@@ -11,6 +11,8 @@
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |
 | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
+| wrapperClass | 容器的类名 | string | - |
+| wrapperStyle | 容器样式 | object | - |
 
 ### 事件
 | 事件名称 | 说明 | 回调参数 |

components/auto-complete/__tests__/index.test.js

@@ -11,7 +11,7 @@ describe('AutoComplete with Custom Input Element Render', () => {
   it('AutoComplete with custom Input render perfectly', done => {
     const wrapper = mount(
       {
-        render(h) {
+        render() {
           return (
             <AutoComplete ref="component" dataSource={['12345', '23456', '34567']}>
               <input />

components/auto-complete/style/index.less

@@ -54,6 +54,7 @@
       }
       &[disabled] {
         .disabled;
+        background-color: transparent;
       }
     }
 

components/button/__tests__/index.test.js

@@ -16,7 +16,7 @@ describe('Button', () => {
 
   it('create primary button', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Button type="primary">按钮</Button>;
       },
     });
@@ -25,14 +25,14 @@ describe('Button', () => {
 
   it('renders Chinese characters correctly', done => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Button>按钮</Button>;
       },
     });
     expect(wrapper.text()).toBe('按 钮');
 
     const wrapper1 = mount({
-      render(h) {
+      render() {
         return <Button icon="search">按钮</Button>;
       },
     });
@@ -40,7 +40,7 @@ describe('Button', () => {
     expect(wrapper1.html()).toMatchSnapshot();
 
     const wrapper2 = mount({
-      render(h) {
+      render() {
         return (
           <Button>
             <Icon type="search" />
@@ -52,14 +52,14 @@ describe('Button', () => {
     expect(wrapper2.html()).toMatchSnapshot();
     // should not insert space when there is icon
     const wrapper3 = mount({
-      render(h) {
+      render() {
         return <Button icon="search">按钮</Button>;
       },
     });
     expect(wrapper3.html()).toMatchSnapshot();
     // should not insert space when there is icon while loading
     const wrapper4 = mount({
-      render(h) {
+      render() {
         return (
           <Button icon="search" loading>
             按钮
@@ -70,13 +70,13 @@ describe('Button', () => {
     expect(wrapper4.html()).toMatchSnapshot();
     // should insert space while loading
     const wrapper5 = mount({
-      render(h) {
+      render() {
         return <Button loading>按钮</Button>;
       },
     });
     expect(wrapper5.html()).toMatchSnapshot();
     const wrapper6 = mount({
-      render(h) {
+      render() {
         return (
           <Button>
             <span>按钮</span>
@@ -151,7 +151,7 @@ describe('Button', () => {
 
   it('should support link button', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return (
           <Button target="_blank" href="http://ant.design">
             link button
@@ -164,21 +164,21 @@ describe('Button', () => {
 
   it('fixbug renders {0} , 0 and {false}', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Button>{0}</Button>;
       },
     });
     expect(wrapper.html()).toMatchSnapshot();
 
     const wrapper1 = mount({
-      render(h) {
+      render() {
         return <Button>0</Button>;
       },
     });
     expect(wrapper1.html()).toMatchSnapshot();
 
     const wrapper2 = mount({
-      render(h) {
+      render() {
         return <Button>{false}</Button>;
       },
     });

components/button/button.jsx

@@ -6,8 +6,8 @@ import buttonTypes from './buttonTypes';
 import { filterEmpty } from '../_util/props-util';
 const props = buttonTypes();
 export default {
-  inheritAttrs: false,
   name: 'AButton',
+  inheritAttrs: false,
   __ANT_BUTTON: true,
   props,
   data() {
@@ -21,32 +21,6 @@ export default {
       hasTwoCNChar: false,
     };
   },
-  mounted() {
-    this.fixTwoCNChar();
-  },
-  updated() {
-    this.fixTwoCNChar();
-  },
-  beforeDestroy() {
-    // if (this.timeout) {
-    //   clearTimeout(this.timeout)
-    // }
-    if (this.delayTimeout) {
-      clearTimeout(this.delayTimeout);
-    }
-  },
-  watch: {
-    loading(val) {
-      clearTimeout(this.delayTimeout);
-      if (typeof val !== 'boolean' && val && val.delay) {
-        this.delayTimeout = setTimeout(() => {
-          this.sLoading = !!val;
-        }, val.delay);
-      } else {
-        this.sLoading = !!val;
-      }
-    },
-  },
   computed: {
     classes() {
       const {
@@ -77,6 +51,32 @@ export default {
       };
     },
   },
+  watch: {
+    loading(val) {
+      clearTimeout(this.delayTimeout);
+      if (typeof val !== 'boolean' && val && val.delay) {
+        this.delayTimeout = setTimeout(() => {
+          this.sLoading = !!val;
+        }, val.delay);
+      } else {
+        this.sLoading = !!val;
+      }
+    },
+  },
+  mounted() {
+    this.fixTwoCNChar();
+  },
+  updated() {
+    this.fixTwoCNChar();
+  },
+  beforeDestroy() {
+    // if (this.timeout) {
+    //   clearTimeout(this.timeout)
+    // }
+    if (this.delayTimeout) {
+      clearTimeout(this.delayTimeout);
+    }
+  },
   methods: {
     fixTwoCNChar() {
       // Fix for HOC usage like <FormatMessage />

components/cascader/index.jsx

@@ -142,8 +142,8 @@ const Cascader = {
     event: 'change',
   },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
-    localeData: { default: {} },
+    localeData: { default: () => ({}) },
   },
   data() {
     this.cachedOptions = [];

components/checkbox/Checkbox.jsx

@@ -5,8 +5,11 @@ import { getOptionProps, getAttrs } from '../_util/props-util';
 function noop() {}
 
 export default {
-  inheritAttrs: false,
   name: 'ACheckbox',
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+  },
   props: {
     prefixCls: {
       default: 'ant-checkbox',
@@ -23,11 +26,8 @@ export default {
     type: PropTypes.string.def('checkbox'),
     autoFocus: Boolean,
   },
-  model: {
-    prop: 'checked',
-  },
   inject: {
-    checkboxGroupContext: { default: null },
+    checkboxGroupContext: { default: () => null },
   },
   methods: {
     handleChange(event) {

components/checkbox/Group.jsx

@@ -3,6 +3,9 @@ import hasProp from '../_util/props-util';
 function noop() {}
 export default {
   name: 'ACheckboxGroup',
+  model: {
+    prop: 'value',
+  },
   props: {
     prefixCls: {
       default: 'ant-checkbox',
@@ -22,9 +25,6 @@ export default {
     },
     disabled: Boolean,
   },
-  model: {
-    prop: 'value',
-  },
   provide() {
     return {
       checkboxGroupContext: this,

components/comment/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Comment Comment can be used as editor, user can customize the editor component. 1`] = `
+<div>
+  <div class="ant-list ant-list-split">
+    <div class="ant-list-header">1 reply</div>
+    <div class="ant-spin-nested-loading">
+      <div class="ant-spin-container">
+        <div class="ant-list-item">
+          <div class="ant-list-item-content ant-list-item-content-single">
+            <div class="ant-comment">
+              <div class="ant-comment-inner">
+                <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+                <div class="ant-comment-content">
+                  <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time">a few seconds ago</span></div>
+                  <div class="ant-comment-content-detail">222</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-comment">
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar"></div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-detail">
+          <div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary" ant-click-animating-without-extra-node="true"><span>Add Comment</span></button></span>
+                  <!---->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/comment/__tests__/index.test.js

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import moment from 'moment';
+import { asyncExpect } from '@/tests/utils';
+import Comment from '..';
+import List from '../../list';
+import Form from '../../form';
+import Button from '../../button';
+import Input from '../../input';
+
+const CommentTest = {
+  data() {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+    };
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.value) {
+        return;
+      }
+
+      this.submitting = true;
+
+      setTimeout(() => {
+        this.submitting = false;
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow(),
+          },
+          ...this.comments,
+        ];
+        this.value = '';
+      }, 1000);
+    },
+    handleChange(e) {
+      this.value = e.target.value;
+    },
+  },
+  render() {
+    return (
+      <div>
+        {this.comments.length ? (
+          <List
+            dataSource={this.comments}
+            header={`${this.comments.length} ${this.comments.length > 1 ? 'replies' : 'reply'}`}
+            itemLayout="horizontal"
+            renderItem={item => {
+              return (
+                <List.Item>
+                  <Comment
+                    author={item.author}
+                    avatar={item.avatar}
+                    content={item.content}
+                    datetime={item.datetime}
+                  />
+                </List.Item>
+              );
+            }}
+          />
+        ) : null}
+        <Comment>
+          <div slot="content">
+            <Form.Item>
+              <Input.TextArea rows={4} onChange={this.handleChange} value={this.value} />
+            </Form.Item>
+            <Form.Item>
+              <Button
+                htmlType="submit"
+                loading={this.submitting}
+                onClick={this.handleSubmit}
+                type="primary"
+              >
+                Add Comment
+              </Button>
+            </Form.Item>
+          </div>
+        </Comment>
+      </div>
+    );
+  },
+};
+
+describe('Comment', () => {
+  it('Comment can be used as editor, user can customize the editor component.', async () => {
+    const wrapper = mount(CommentTest, {
+      sync: false,
+    });
+    await asyncExpect(() => {
+      wrapper.find('textarea').element.value = '222';
+      wrapper.find('textarea').trigger('input');
+    });
+    await asyncExpect(() => {
+      wrapper.find('Button').trigger('click');
+    });
+
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.ant-list-header').wrappers[0].element.innerHTML).toBe('1 reply');
+      expect(wrapper.html()).toMatchSnapshot();
+    }, 2000);
+  });
+});

components/date-picker/RangePicker.jsx

@@ -66,18 +66,18 @@ function fixLocale(value, localeCode) {
 }
 
 export default {
-  mixins: [BaseMixin],
   name: 'ARangePicker',
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   props: initDefaultProps(RangePickerProps(), {
     prefixCls: 'ant-calendar',
     tagPrefixCls: 'ant-tag',
     allowClear: true,
     showToday: false,
   }),
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
   data() {
     const value = this.value || this.defaultValue || [];
     const [start, end] = value;

components/date-picker/WeekPicker.jsx

@@ -26,16 +26,16 @@ export default {
   // };
 
   // private input: any;
-  props: initDefaultProps(WeekPickerProps(), {
-    format: 'gggg-wo',
-    allowClear: true,
-  }),
   name: 'AWeekPicker',
   mixins: [BaseMixin],
   model: {
     prop: 'value',
     event: 'change',
   },
+  props: initDefaultProps(WeekPickerProps(), {
+    format: 'gggg-wo',
+    allowClear: true,
+  }),
   data() {
     const value = this.value || this.defaultValue;
     if (value && !interopDefault(moment).isMoment(value)) {

components/drawer/demo/descriptionItem.vue

@@ -1,15 +1,20 @@
 <template>
   <div
-      style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
+    style="fontSize: 14px;lineHeight: 22px;marginBottom: 7px;color: rgba(0,0,0,0.65)"
+  >
+    <p
+      style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
     >
-      <p
+      {{ title }}
-        style="marginRight: 8px;display: inline-block;color: rgba(0,0,0,0.85)"
+    </p>
-      >
+    <template v-if="content">
-        {{title}}
+      {{ content }}
-      </p>
+    </template>
-      <template v-if="content">{{content}}</template>
+    <slot
-      <slot name="content" v-else></slot>
+      v-else
-    </div>
+      name="content"
+    />
+  </div>
 </template>
 <script>
 export default {

components/drawer/index.jsx

@@ -35,7 +35,7 @@ const Drawer = {
   },
   inject: {
     parentDrawer: {
-      default: null,
+      default: () => null,
     },
   },
   provide() {

components/dropdown/dropdown-button.jsx

@@ -20,6 +20,10 @@ const DropdownButtonProps = {
 export { DropdownButtonProps };
 export default {
   name: 'ADropdownButton',
+  model: {
+    prop: 'visible',
+    event: 'visibleChange',
+  },
   props: DropdownButtonProps,
   methods: {
     onClick(e) {
@@ -29,12 +33,8 @@ export default {
       this.$emit('visibleChange', val);
     },
   },
-  model: {
-    prop: 'visible',
-    event: 'visibleChange',
-  },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   render() {
     const {

components/dropdown/dropdown.jsx

@@ -21,7 +21,7 @@ const Dropdown = {
     event: 'visibleChange',
   },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   methods: {
     getTransitionName() {

components/form/Form.jsx

@@ -139,9 +139,31 @@ const Form = {
   createForm(context, options = {}) {
     return new Vue(Form.create({ ...options, templateContext: context })());
   },
+  created() {
+    this.formItemContexts = new Map();
+  },
   provide() {
     return {
       FormProps: this.$props,
+      // https://github.com/vueComponent/ant-design-vue/issues/446
+      collectFormItemContext:
+        this.form && this.form.templateContext
+          ? (c, type = 'add') => {
+              const formItemContexts = this.formItemContexts;
+              const number = formItemContexts.get(c) || 0;
+              if (type === 'delete') {
+                if (number <= 1) {
+                  formItemContexts.delete(c);
+                } else {
+                  formItemContexts.set(c, number - 1);
+                }
+              } else {
+                if (c !== this.form.templateContext) {
+                  formItemContexts.set(c, number + 1);
+                }
+              }
+            }
+          : () => {},
     };
   },
   watch: {
@@ -149,6 +171,13 @@ const Form = {
       this.$forceUpdate();
     },
   },
+  beforeUpdate() {
+    this.formItemContexts.forEach((number, c) => {
+      if (c.$forceUpdate) {
+        c.$forceUpdate();
+      }
+    });
+  },
   updated() {
     if (this.form && this.form.cleanUpUselessFields) {
       this.form.cleanUpUselessFields();
@@ -232,7 +261,6 @@ const Form = {
         />
       );
     }
-
     return (
       <form onSubmit={onSubmit} class={formClassName}>
         {$slots.default}

components/form/FormItem.jsx

@@ -19,6 +19,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement, cloneVNodes } from '../_util/vnode';
 import Icon from '../icon';
 
+function noop() {}
 export const FormItemProps = {
   id: PropTypes.string,
   prefixCls: PropTypes.string,
@@ -34,6 +35,22 @@ export const FormItemProps = {
   fieldDecoratorId: PropTypes.string,
   fieldDecoratorOptions: PropTypes.object,
 };
+function comeFromSlot(vnodes = [], itemVnode) {
+  let isSlot = false;
+  for (let i = 0, len = vnodes.length; i < len; i++) {
+    const vnode = vnodes[i];
+    if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
+      isSlot = true;
+    } else {
+      const children = vnode.componentOptions ? vnode.componentOptions.children : vnode.children;
+      isSlot = comeFromSlot(children, itemVnode);
+    }
+    if (isSlot) {
+      break;
+    }
+  }
+  return isSlot;
+}
 
 export default {
   name: 'AFormItem',
@@ -45,12 +62,24 @@ export default {
     colon: true,
   }),
   inject: {
-    FormProps: { default: {} },
+    FormProps: { default: () => ({}) },
-    decoratorFormProps: { default: {} },
+    decoratorFormProps: { default: () => ({}) },
+    collectFormItemContext: { default: () => noop },
   },
   data() {
     return { helpShow: false };
   },
+  created() {
+    this.collectContext();
+  },
+  beforeUpdate() {
+    if (process.env.NODE_ENV !== 'production') {
+      this.collectContext();
+    }
+  },
+  beforeDestroy() {
+    this.collectFormItemContext(this.$vnode.context, 'delete');
+  },
   mounted() {
     warning(
       this.getControls(this.slotDefault, true).length <= 1,
@@ -63,6 +92,24 @@ export default {
     );
   },
   methods: {
+    collectContext() {
+      if (this.FormProps.form && this.FormProps.form.templateContext) {
+        const { templateContext } = this.FormProps.form;
+        const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
+          return [...a, ...b];
+        }, []);
+        const isSlot = comeFromSlot(vnodes, this.$vnode);
+        warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
+        let isSlotScope = false;
+        // 进一步判断是否是通过slot-scope传递
+        if (!isSlot && this.$vnode.context !== templateContext) {
+          isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
+        }
+        if (!isSlotScope && !isSlot) {
+          this.collectFormItemContext(this.$vnode.context);
+        }
+      }
+    },
     getHelpMessage() {
       const help = getComponentFromProp(this, 'help');
       const onlyControl = this.getOnlyControl();
@@ -387,7 +434,11 @@ export default {
     decoratorChildren(vnodes) {
       const { FormProps } = this;
       const getFieldDecorator = FormProps.form.getFieldDecorator;
-      vnodes.forEach((vnode, index) => {
+      for (let i = 0, len = vnodes.length; i < len; i++) {
+        const vnode = vnodes[i];
+        if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
+          break;
+        }
         if (vnode.children) {
           vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
         } else if (vnode.componentOptions && vnode.componentOptions.children) {
@@ -397,9 +448,9 @@ export default {
         }
         const option = this.decoratorOption(vnode);
         if (option && option[0]) {
-          vnodes[index] = getFieldDecorator(option[0], option[1])(vnode);
+          vnodes[i] = getFieldDecorator(option[0], option[1])(vnode);
         }
-      });
+      }
       return vnodes;
     },
   },

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

@@ -112,7 +112,9 @@ exports[`renders ./components/form/demo/advanced-search.vue correctly 1`] = `
             </svg></i></a></div>
     </div>
   </form>
-  <div class="search-result-list">Search Result List</div>
+  <div class="search-result-list">
+    Search Result List
+  </div>
 </div>
 `;
 
@@ -150,10 +152,11 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
   <div class="ant-row ant-form-item">
     <div class="ant-form-item-label"><label for="price" title="Price" class="">Price</label></div>
     <div class="ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--></span>
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
-        <!---->
+    </div></span></span>
-      </div>
+    <!---->
-    </div>
+  </div>
+  </div>
   </div>
   <div class="ant-row ant-form-item">
     <div class="ant-form-item-control-wrapper">
@@ -223,13 +226,22 @@ exports[`renders ./components/form/demo/dynamic-rule.vue correctly 1`] = `
 
 exports[`renders ./components/form/demo/form-in-modal.vue correctly 1`] = `
 <div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
-  <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
+  <!---->
 </div>
 `;
 
 exports[`renders ./components/form/demo/global-state.vue correctly 1`] = `
 <div id="components-form-demo-global-state">
-  <!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }--> <pre class="language-bash">    {
+  <form class="ant-form ant-form-inline">
+    <div class="ant-row ant-form-item">
+      <div class="ant-form-item-label"><label for="username" title="Username" class="ant-form-item-required">Username</label></div>
+      <div class="ant-form-item-control-wrapper">
+        <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="username" class="ant-input"></span>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </form> <pre class="language-bash">    {
   "username": {
     "value": "benjycui"
   }
@@ -270,7 +282,13 @@ exports[`renders ./components/form/demo/layout.vue correctly 1`] = `
     <div class="ant-row ant-form-item">
       <div class="ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
       <div class="ant-col-14 ant-form-item-control-wrapper">
-        <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>Horizontal</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>Vertical</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>Inline</span></label></div></span>
+        <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
+          Horizontal
+        </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
+          Vertical
+        </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
+          Inline
+        </span></label></div></span>
         <!---->
       </div>
     </div>
@@ -322,8 +340,12 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = `
     <div class="ant-form-item-control-wrapper">
       <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
       Remember me
-    </span></label><a href="" class="login-form-forgot">Forgot password</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
+    </span></label><a href="" class="login-form-forgot">
-        Or <a href="">register now!</a></span>
+          Forgot password
+        </a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
+        Or <a href="">
+          register now!
+        </a></span>
         <!---->
       </div>
     </div>
@@ -382,7 +404,11 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
     <div class="ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">+86</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
+          +86
+        " class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+          +86
+        </div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
     </div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="phone" class="ant-input"></span></span></span>
     <!---->
   </div>
@@ -413,7 +439,10 @@ exports[`renders ./components/form/demo/register.vue correctly 1`] = `
   </div>
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>I have read the <a href="">agreement</a></span></label></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+      I have read the <a href="">
+        agreement
+      </a></span></label></span>
         <!---->
       </div>
     </div>
@@ -497,7 +526,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">China</span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
+      China
+    </span></span>
         <!---->
       </div>
     </div>
@@ -529,7 +560,9 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
     <div class="ant-col-14 ant-form-item-control-wrapper">
       <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><i class="ant-input-number-handler-up-inner anticon anticon-up"><svg viewBox="64 64 896 896" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 0 0 140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></i></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><i class="ant-input-number-handler-down-inner anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
       <div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" class="ant-input-number-input-wrap"><input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
-    </div><span class="ant-form-text"> machines</span></span>
+    </div><span class="ant-form-text">
+      machines
+    </span></span>
     <!---->
   </div>
   </div>
@@ -556,7 +589,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="radio-group" title="Radio.Group" class="">Radio.Group</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>item 1</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>item 2</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>item 3</span></label></div></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
       <!---->
     </div>
   </div>
@@ -564,7 +603,13 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="radio-button" title="Radio.Button" class="">Radio.Button</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>item 1</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>item 2</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>item 3</span></label></div></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
       <!---->
     </div>
   </div>
@@ -572,11 +617,21 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-6 ant-form-item-label"><label for="checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
     <div class="ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>A</span></label></div>
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>B</span></label></div>
+            A
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>C</span></label></div>
+          </span></label></div>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>D</span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
-      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>E</span></label></div>
+            B
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
+            C
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
+            D
+          </span></label></div>
+      <div class="ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
+            E
+          </span></label></div>
     </div>
   </div></span>
   <!---->
@@ -687,7 +742,11 @@ exports[`renders ./components/form/demo/validate-static.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
     <div class="ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option 1</div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="0" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="
+        Option 1
+      " class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+        Option 1
+      </div></div><span unselectable="on" class="ant-select-arrow"><i class="ant-select-arrow-icon anticon anticon-down"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" 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></span></div>
     </div><span class="ant-form-item-children-icon"><i class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></i></span></span>
     <!---->
   </div>

components/form/demo/advanced-search.vue

@@ -11,44 +11,65 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 </us>
 
 <template>
-  <div id='components-form-demo-advanced-search'>
+  <div id="components-form-demo-advanced-search">
     <a-form
-      class='ant-advanced-search-form'
+      class="ant-advanced-search-form"
-      @submit="handleSearch"
       :form="form"
+      @submit="handleSearch"
     >
       <a-row :gutter="24">
-        <a-col v-for="i in 10" :span="8" :key="i" :style="{ display: i < count ? 'block' : 'none' }">
+        <a-col
+          v-for="i in 10"
+          :key="i"
+          :span="8"
+          :style="{ display: i < count ? 'block' : 'none' }"
+        >
           <a-form-item :label="`Field ${i}`">
-              <a-input
+            <a-input
-                v-decorator="[
+              v-decorator="[
-                  `field-${i}`,
+                `field-${i}`,
-                  {
+                {
-                    rules: [{
+                  rules: [{
-                      required: true,
+                    required: true,
-                      message: 'Input something!',
+                    message: 'Input something!',
-                    }],
+                  }],
-                  }
+                }
-                ]"
+              ]"
-                placeholder='placeholder'
+              placeholder="placeholder"
-              />
+            />
           </a-form-item>
         </a-col>
       </a-row>
-        <a-row>
+      <a-row>
-          <a-col :span="24" :style="{ textAlign: 'right' }">
+        <a-col
-            <a-button type='primary' htmlType='submit'>Search</a-button>
+          :span="24"
-            <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
+          :style="{ textAlign: 'right' }"
-              Clear
+        >
-            </a-button>
+          <a-button
-            <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
+            type="primary"
-              Collapse <a-icon :type="expand ? 'up' : 'down'" />
+            html-type="submit"
-            </a>
+          >
-          </a-col>
+            Search
-        </a-row>
+          </a-button>
-      </a-form>
+          <a-button
-        <div class='search-result-list'>Search Result List</div>
+            :style="{ marginLeft: '8px' }"
-      </div>
+            @click="handleReset"
+          >
+            Clear
+          </a-button>
+          <a
+            :style="{ marginLeft: '8px', fontSize: '12px' }"
+            @click="toggle"
+          >
+            Collapse <a-icon :type="expand ? 'up' : 'down'" />
+          </a>
+        </a-col>
+      </a-row>
+    </a-form>
+    <div class="search-result-list">
+      Search Result List
+    </div>
+  </div>
 </template>
 <script>
 

components/form/demo/coordinated.vue

@@ -10,11 +10,14 @@ Use `setFieldsValue` to set other control's value programmaticly.
 
 
 <template>
-  <a-form @submit="handleSubmit" :form="form">
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
-      label='Note'
+      label="Note"
-      :labelCol="{ span: 5 }"
+      :label-col="{ span: 5 }"
-      :wrapperCol="{ span: 12 }"
+      :wrapper-col="{ span: 12 }"
     >
       <a-input
         v-decorator="[
@@ -24,26 +27,33 @@ Use `setFieldsValue` to set other control's value programmaticly.
       />
     </a-form-item>
     <a-form-item
-      label='Gender'
+      label="Gender"
-      :labelCol="{ span: 5 }"
+      :label-col="{ span: 5 }"
-      :wrapperCol="{ span: 12 }"
+      :wrapper-col="{ span: 12 }"
     >
       <a-select
         v-decorator="[
           'gender',
           {rules: [{ required: true, message: 'Please select your gender!' }]}
         ]"
-        placeholder='Select a option and change input text above'
+        placeholder="Select a option and change input text above"
-        @change="this.handleSelectChange"
+        @change="handleSelectChange"
       >
-        <a-select-option value='male'>male</a-select-option>
+        <a-select-option value="male">
-        <a-select-option value='female'>female</a-select-option>
+          male
+        </a-select-option>
+        <a-select-option value="female">
+          female
+        </a-select-option>
       </a-select>
     </a-form-item>
     <a-form-item
-      :wrapperCol="{ span: 12, offset: 5 }"
+      :wrapper-col="{ span: 12, offset: 5 }"
     >
-      <a-button type='primary' htmlType='submit'>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
         Submit
       </a-button>
     </a-form-item>

components/form/demo/customized-form-controls.vue

@@ -16,8 +16,12 @@ Customized or third-party form controls can be used in Form, too. Controls must
 
 
 <template>
-  <a-form layout='inline' @submit="handleSubmit" :form="form">
+  <a-form
-    <a-form-item label='Price'>
+    layout="inline"
+    :form="form"
+    @submit="handleSubmit"
+  >
+    <a-form-item label="Price">
       <price-input
         v-decorator="[
           'price',
@@ -29,7 +33,12 @@ Customized or third-party form controls can be used in Form, too. Controls must
       />
     </a-form-item>
     <a-form-item>
-      <a-button type='primary' htmlType='submit'>Submit</a-button>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
     </a-form-item>
   </a-form>
 </template>
@@ -98,6 +107,9 @@ const PriceInput = {
 };
 
 export default {
+  components: {
+    PriceInput,
+  },
   beforeCreate () {
     this.form = this.$form.createForm(this);
   },
@@ -118,9 +130,6 @@ export default {
       callback('Price must greater than zero!');
     },
   },
-  components: {
-    PriceInput,
-  },
 };
 
 </script>

components/form/demo/dynamic-form-item.vue

@@ -10,56 +10,64 @@ Add or remove form items dynamically.
 
 
 <template>
-<a-form @submit="handleSubmit" :form="form">
+  <a-form
-  <a-form-item
+    :form="form"
-    v-for="(k, index) in form.getFieldValue('keys')"
+    @submit="handleSubmit"
-    v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
-    :label="index === 0 ? 'Passengers' : ''"
-    :required="false"
-    :key="k"
   >
-    <a-input
+    <a-form-item
-      v-decorator="[
+      v-for="(k, index) in form.getFieldValue('keys')"
-        `names[${k}]`,
+      :key="k"
-        {
+      v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
-          validateTrigger: ['change', 'blur'],
+      :label="index === 0 ? 'Passengers' : ''"
-          preserve: true,
+      :required="false"
-          rules: [{
+    >
-            required: true,
+      <a-input
-            whitespace: true,
+        v-decorator="[
-            message: 'Please input passenger\'s name or delete this field.',
+          `names[${k}]`,
-          }],
+          {
-        }
+            validateTrigger: ['change', 'blur'],
-      ]"
+            preserve: true,
-      placeholder='passenger name'
+            rules: [{
-      style="width: 60%; margin-right: 8px"
+              required: true,
-    />
+              whitespace: true,
-    <a-icon
+              message: 'Please input passenger\'s name or delete this field.',
-      v-if="form.getFieldValue('keys').length > 1"
+            }],
-      class='dynamic-delete-button'
+          }
-      type='minus-circle-o'
+        ]"
-      :disabled="form.getFieldValue('keys').length === 1"
+        placeholder="passenger name"
-      @click="() => remove(k)"
+        style="width: 60%; margin-right: 8px"
-    />
+      />
-  </a-form-item>
+      <a-icon
-  <a-form-item v-bind="formItemLayoutWithOutLabel">
+        v-if="form.getFieldValue('keys').length > 1"
-    <a-button type='dashed' @click="add" style="width: 60%">
+        class="dynamic-delete-button"
-      <a-icon type='plus' /> Add field
+        type="minus-circle-o"
-    </a-button>
+        :disabled="form.getFieldValue('keys').length === 1"
-  </a-form-item>
+        @click="() => remove(k)"
-  <a-form-item v-bind="formItemLayoutWithOutLabel">
+      />
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
+    </a-form-item>
-  </a-form-item>
+    <a-form-item v-bind="formItemLayoutWithOutLabel">
-</a-form>
+      <a-button
+        type="dashed"
+        style="width: 60%"
+        @click="add"
+      >
+        <a-icon type="plus" /> Add field
+      </a-button>
+    </a-form-item>
+    <a-form-item v-bind="formItemLayoutWithOutLabel">
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 
 <script>
 let id = 0;
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
-  },
   data () {
     return {
       formItemLayout: {
@@ -80,6 +88,10 @@ export default {
       },
     };
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
+  },
   methods: {
     remove  (k) {
       const { form } = this;

components/form/demo/dynamic-rule.vue

@@ -12,34 +12,34 @@ Perform different check rules according to different situations.
 <template>
   <a-form :form="form">
     <a-form-item
-      :labelCol="formItemLayout.labelCol"
+      :label-col="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
+      :wrapper-col="formItemLayout.wrapperCol"
-      label='Name'
+      label="Name"
     >
       <a-input
         v-decorator="[
           'username',
           {rules: [{ required: true, message: 'Please input your name' }]}
         ]"
-       placeholder='Please input your name'
+        placeholder="Please input your name"
       />
     </a-form-item>
     <a-form-item
-      :labelCol="formItemLayout.labelCol"
+      :label-col="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
+      :wrapper-col="formItemLayout.wrapperCol"
-      label='Nickname'
+      label="Nickname"
     >
       <a-input
         v-decorator="[
           'nickname',
           {rules: [{ required: checkNick, message: 'Please input your nickname' }]}
         ]"
-        placeholder='Please input your nickname'
+        placeholder="Please input your nickname"
       />
     </a-form-item>
     <a-form-item
-      :labelCol="formTailLayout.labelCol"
+      :label-col="formTailLayout.labelCol"
-      :wrapperCol="formTailLayout.wrapperCol"
+      :wrapper-col="formTailLayout.wrapperCol"
     >
       <a-checkbox
         :checked="checkNick"
@@ -49,10 +49,15 @@ Perform different check rules according to different situations.
       </a-checkbox>
     </a-form-item>
     <a-form-item
-      :labelCol="formTailLayout.labelCol"
+      :label-col="formTailLayout.labelCol"
-      :wrapperCol="formTailLayout.wrapperCol"
+      :wrapper-col="formTailLayout.wrapperCol"
     >
-      <a-button type='primary' @click="check">Check</a-button>
+      <a-button
+        type="primary"
+        @click="check"
+      >
+        Check
+      </a-button>
     </a-form-item>
   </a-form>
 </template>

components/form/demo/form-in-modal.vue

@@ -10,7 +10,12 @@ When user visit a page with a list of items, and want to create a new item. The
 
 <template>
   <div>
-    <a-button type='primary' @click="showModal">New Collection</a-button>
+    <a-button
+      type="primary"
+      @click="showModal"
+    >
+      New Collection
+    </a-button>
     <collection-create-form
       ref="collectionForm"
       :visible="visible"
@@ -70,6 +75,7 @@ const CollectionCreateForm = {
 };
 
 export default {
+  components: { CollectionCreateForm },
   data () {
     return {
       visible: false,
@@ -94,7 +100,6 @@ export default {
       });
     },
   },
-  components: { CollectionCreateForm },
 };
 </script>
 

components/form/demo/global-state.vue

@@ -18,13 +18,13 @@ But if you use `this.$form.createForm`, You can use any data, not just the prope
 
 
 <template>
-  <div id='components-form-demo-global-state'>
+  <div id="components-form-demo-global-state">
     <customized-form
       :username="fields.username"
       @change="handleFormChange"
     />
-    <pre class='language-bash'>
+    <pre class="language-bash">
-      {{JSON.stringify(fields, null, 2)}}
+      {{ JSON.stringify(fields, null, 2) }}
     </pre>
   </div>
 </template>
@@ -77,6 +77,9 @@ const CustomizedForm = {
 };
 
 export default {
+  components: {
+    CustomizedForm,
+  },
   data () {
     return {
       fields: {
@@ -92,9 +95,6 @@ export default {
       this.fields = { ...this.fields, ...changedFields };
     },
   },
-  components: {
-    CustomizedForm,
-  },
 };
 </script>
 <style>

components/form/demo/horizontal-login.vue

@@ -10,46 +10,58 @@ Horizontal login form is often used in navigation bar.
 
 
 <template>
-<a-form layout='inline' @submit="handleSubmit" :form="form">
+  <a-form
-  <a-form-item
+    layout="inline"
-    :validateStatus="userNameError() ? 'error' : ''"
+    :form="form"
-    :help="userNameError() || ''"
+    @submit="handleSubmit"
   >
-    <a-input
+    <a-form-item
-      placeholder='Username'
+      :validate-status="userNameError() ? 'error' : ''"
-      v-decorator="[
+      :help="userNameError() || ''"
-        'userName',
-        {rules: [{ required: true, message: 'Please input your username!' }]}
-      ]"
     >
-      <a-icon slot="prefix" type='user' style="color:rgba(0,0,0,.25)"/>
+      <a-input
-    </a-input>
+        v-decorator="[
-  </a-form-item>
+          'userName',
-  <a-form-item
+          {rules: [{ required: true, message: 'Please input your username!' }]}
-    :validateStatus="passwordError() ? 'error' : ''"
+        ]"
-    :help="passwordError() || ''"
+        placeholder="Username"
-  >
+      >
-    <a-input
+        <a-icon
-      v-decorator="[
+          slot="prefix"
-        'password',
+          type="user"
-        {rules: [{ required: true, message: 'Please input your Password!' }]}
+          style="color:rgba(0,0,0,.25)"
-      ]"
+        />
-      type='password'
+      </a-input>
-      placeholder='Password'
+    </a-form-item>
+    <a-form-item
+      :validate-status="passwordError() ? 'error' : ''"
+      :help="passwordError() || ''"
     >
-      <a-icon slot="prefix" type='lock' style="color:rgba(0,0,0,.25)"/>
+      <a-input
-    </a-input>
+        v-decorator="[
-  </a-form-item>
+          'password',
-  <a-form-item>
+          {rules: [{ required: true, message: 'Please input your Password!' }]}
-    <a-button
+        ]"
-      type='primary'
+        type="password"
-      htmlType='submit'
+        placeholder="Password"
-      :disabled="hasErrors(form.getFieldsError())"
+      >
-    >
+        <a-icon
-      Log in
+          slot="prefix"
-    </a-button>
+          type="lock"
-  </a-form-item>
+          style="color:rgba(0,0,0,.25)"
-</a-form>
+        />
+      </a-input>
+    </a-form-item>
+    <a-form-item>
+      <a-button
+        type="primary"
+        html-type="submit"
+        :disabled="hasErrors(form.getFieldsError())"
+      >
+        Log in
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 
 <script>

components/form/demo/layout.vue

@@ -10,40 +10,51 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
 
 
 <template>
-<div>
+  <div>
-  <a-form :layout="formLayout">
+    <a-form :layout="formLayout">
-    <a-form-item
+      <a-form-item
-      label='Form Layout'
+        label="Form Layout"
-      :labelCol="formItemLayout.labelCol"
+        :label-col="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
+        :wrapper-col="formItemLayout.wrapperCol"
-    >
+      >
-      <a-radio-group defaultValue='horizontal' @change="handleFormLayoutChange">
+        <a-radio-group
-        <a-radio-button value='horizontal'>Horizontal</a-radio-button>
+          default-value="horizontal"
-        <a-radio-button value='vertical'>Vertical</a-radio-button>
+          @change="handleFormLayoutChange"
-        <a-radio-button value='inline'>Inline</a-radio-button>
+        >
-      </a-radio-group>
+          <a-radio-button value="horizontal">
-    </a-form-item>
+            Horizontal
-    <a-form-item
+          </a-radio-button>
-      label='Field A'
+          <a-radio-button value="vertical">
-      :labelCol="formItemLayout.labelCol"
+            Vertical
-      :wrapperCol="formItemLayout.wrapperCol"
+          </a-radio-button>
-    >
+          <a-radio-button value="inline">
-      <a-input placeholder='input placeholder' />
+            Inline
-    </a-form-item>
+          </a-radio-button>
-    <a-form-item
+        </a-radio-group>
-      label='Field B'
+      </a-form-item>
-      :labelCol="formItemLayout.labelCol"
+      <a-form-item
-      :wrapperCol="formItemLayout.wrapperCol"
+        label="Field A"
-    >
+        :label-col="formItemLayout.labelCol"
-      <a-input placeholder='input placeholder' />
+        :wrapper-col="formItemLayout.wrapperCol"
-    </a-form-item>
+      >
-    <a-form-item
+        <a-input placeholder="input placeholder" />
-      :wrapperCol="buttonItemLayout.wrapperCol"
+      </a-form-item>
-    >
+      <a-form-item
-      <a-button type='primary'>Submit</a-button>
+        label="Field B"
-    </a-form-item>
+        :label-col="formItemLayout.labelCol"
-  </a-form>
+        :wrapper-col="formItemLayout.wrapperCol"
-</div>
+      >
+        <a-input placeholder="input placeholder" />
+      </a-form-item>
+      <a-form-item
+        :wrapper-col="buttonItemLayout.wrapperCol"
+      >
+        <a-button type="primary">
+          Submit
+        </a-button>
+      </a-form-item>
+    </a-form>
+  </div>
 </template>
 
 <script>
@@ -53,11 +64,6 @@ export default {
       formLayout: 'horizontal',
     };
   },
-  methods: {
-    handleFormLayoutChange  (e) {
-      this.formLayout = e.target.value;
-    },
-  },
   computed: {
     formItemLayout () {
       const { formLayout } = this;
@@ -73,6 +79,11 @@ export default {
       } : {};
     },
   },
+  methods: {
+    handleFormLayoutChange  (e) {
+      this.formLayout = e.target.value;
+    },
+  },
 };
 </script>
 

components/form/demo/normal-login.vue

@@ -9,16 +9,25 @@ Normal login form which can contain more elements.
 </us>
 
 <template>
-  <a-form :form="form" id='components-form-demo-normal-login' @submit="handleSubmit" class='login-form'>
+  <a-form
+    id="components-form-demo-normal-login"
+    :form="form"
+    class="login-form"
+    @submit="handleSubmit"
+  >
     <a-form-item>
       <a-input
-        placeholder='Username'
         v-decorator="[
           'userName',
           { rules: [{ required: true, message: 'Please input your username!' }] }
         ]"
+        placeholder="Username"
       >
-        <a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
+        <a-icon
+          slot="prefix"
+          type="user"
+          style="color: rgba(0,0,0,.25)"
+        />
       </a-input>
     </a-form-item>
     <a-form-item>
@@ -27,10 +36,14 @@ Normal login form which can contain more elements.
           'password',
           { rules: [{ required: true, message: 'Please input your Password!' }] }
         ]"
-        type='password'
+        type="password"
-        placeholder='Password'
+        placeholder="Password"
       >
-        <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
+        <a-icon
+          slot="prefix"
+          type="lock"
+          style="color: rgba(0,0,0,.25)"
+        />
       </a-input>
     </a-form-item>
     <a-form-item>
@@ -45,11 +58,22 @@ Normal login form which can contain more elements.
       >
         Remember me
       </a-checkbox>
-      <a class='login-form-forgot' href=''>Forgot password</a>
+      <a
-      <a-button type='primary' htmlType='submit' class='login-form-button'>
+        class="login-form-forgot"
+        href=""
+      >
+        Forgot password
+      </a>
+      <a-button
+        type="primary"
+        html-type="submit"
+        class="login-form-button"
+      >
         Log in
       </a-button>
-      Or <a href=''>register now!</a>
+      Or <a href="">
+        register now!
+      </a>
     </a-form-item>
   </a-form>
 </template>

components/form/demo/register.vue

@@ -9,166 +9,187 @@ Fill in this form to create a new account for you.
 </us>
 
 <template>
-<a-form @submit="handleSubmit" :form="form">
+  <a-form
-  <a-form-item
+    :form="form"
-    v-bind="formItemLayout"
+    @submit="handleSubmit"
-    label='E-mail'
   >
-    <a-input
+    <a-form-item
-      v-decorator="[
+      v-bind="formItemLayout"
-        'email',
+      label="E-mail"
-        {
-          rules: [{
-            type: 'email', message: 'The input is not valid E-mail!',
-          }, {
-            required: true, message: 'Please input your E-mail!',
-          }]
-        }
-      ]"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Password'
-  >
-    <a-input
-      v-decorator="[
-        'password',
-        {
-          rules: [{
-            required: true, message: 'Please input your password!',
-          }, {
-            validator: this.validateToNextPassword,
-          }],
-        }
-      ]"
-      type='password'
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Confirm Password'
-  >
-    <a-input
-      v-decorator="[
-        'confirm',
-        {
-          rules: [{
-            required: true, message: 'Please confirm your password!',
-          }, {
-            validator: compareToFirstPassword,
-          }],
-        }
-      ]"
-      type='password'
-      @blur="handleConfirmBlur"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-  >
-    <span slot="label">
-      Nickname&nbsp;
-      <a-tooltip title='What do you want others to call you?'>
-        <a-icon type='question-circle-o' />
-      </a-tooltip>
-    </span>
-    <a-input
-      v-decorator="[
-        'nickname',
-        {
-          rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
-        }
-      ]"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Habitual Residence'
-  >
-    <a-cascader
-      v-decorator="[
-        'residence',
-        {
-          initialValue: ['zhejiang', 'hangzhou', 'xihu'],
-          rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
-        }
-      ]"
-      :options="residences"
-    />
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Phone Number'
-  >
-    <a-input
-      v-decorator="[
-        'phone',
-        {
-          rules: [{ required: true, message: 'Please input your phone number!' }],
-        }
-      ]"
-      style="width: 100%"
     >
-      <a-select
+      <a-input
         v-decorator="[
-          'prefix',
+          'email',
-          { initialValue: '86' }
+          {
+            rules: [{
+              type: 'email', message: 'The input is not valid E-mail!',
+            }, {
+              required: true, message: 'Please input your E-mail!',
+            }]
+          }
         ]"
-        slot="addonBefore"
+      />
-        style="width: 70px"
+    </a-form-item>
-      >
+    <a-form-item
-        <a-select-option value='86'>+86</a-select-option>
+      v-bind="formItemLayout"
-        <a-select-option value='87'>+87</a-select-option>
+      label="Password"
-      </a-select>
-    </a-input>
-  </a-form-item>
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Website'
-  >
-    <a-auto-complete
-      v-decorator="[
-        'website',
-        {rules: [{ required: true, message: 'Please input website!' }]}
-      ]"
-      @change="handleWebsiteChange"
-      placeholder='website'
     >
-      <template slot="dataSource">
+      <a-input
-        <a-select-option v-for="website in autoCompleteResult" :key="website">{{website}}</a-select-option>
+        v-decorator="[
-      </template>
+          'password',
-      <a-input />
+          {
-    </a-auto-complete>
+            rules: [{
-  </a-form-item>
+              required: true, message: 'Please input your password!',
-  <a-form-item
+            }, {
-    v-bind="formItemLayout"
+              validator: validateToNextPassword,
-    label='Captcha'
+            }],
-    extra='We must make sure that your are a human.'
+          }
-  >
+        ]"
-    <a-row :gutter="8">
+        type="password"
-      <a-col :span="12">
+      />
-        <a-input
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Confirm Password"
+    >
+      <a-input
+        v-decorator="[
+          'confirm',
+          {
+            rules: [{
+              required: true, message: 'Please confirm your password!',
+            }, {
+              validator: compareToFirstPassword,
+            }],
+          }
+        ]"
+        type="password"
+        @blur="handleConfirmBlur"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+    >
+      <span slot="label">
+        Nickname&nbsp;
+        <a-tooltip title="What do you want others to call you?">
+          <a-icon type="question-circle-o" />
+        </a-tooltip>
+      </span>
+      <a-input
+        v-decorator="[
+          'nickname',
+          {
+            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
+          }
+        ]"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Habitual Residence"
+    >
+      <a-cascader
+        v-decorator="[
+          'residence',
+          {
+            initialValue: ['zhejiang', 'hangzhou', 'xihu'],
+            rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
+          }
+        ]"
+        :options="residences"
+      />
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Phone Number"
+    >
+      <a-input
+        v-decorator="[
+          'phone',
+          {
+            rules: [{ required: true, message: 'Please input your phone number!' }],
+          }
+        ]"
+        style="width: 100%"
+      >
+        <a-select
+          slot="addonBefore"
           v-decorator="[
-            'captcha',
+            'prefix',
-            {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
+            { initialValue: '86' }
           ]"
-        />
+          style="width: 70px"
-      </a-col>
+        >
-      <a-col :span="12">
+          <a-select-option value="86">
-        <a-button>Get captcha</a-button>
+            +86
-      </a-col>
+          </a-select-option>
-    </a-row>
+          <a-select-option value="87">
-  </a-form-item>
+            +87
-  <a-form-item v-bind="tailFormItemLayout">
+          </a-select-option>
-    <a-checkbox
+        </a-select>
-      v-decorator="['agreement', {valuePropName: 'checked'}]"
+      </a-input>
-    >I have read the <a href=''>agreement</a></a-checkbox>
+    </a-form-item>
-  </a-form-item>
+    <a-form-item
-  <a-form-item v-bind="tailFormItemLayout">
+      v-bind="formItemLayout"
-    <a-button type='primary' htmlType='submit'>Register</a-button>
+      label="Website"
-  </a-form-item>
+    >
-</a-form>
+      <a-auto-complete
+        v-decorator="[
+          'website',
+          {rules: [{ required: true, message: 'Please input website!' }]}
+        ]"
+        placeholder="website"
+        @change="handleWebsiteChange"
+      >
+        <template slot="dataSource">
+          <a-select-option
+            v-for="website in autoCompleteResult"
+            :key="website"
+          >
+            {{ website }}
+          </a-select-option>
+        </template>
+        <a-input />
+      </a-auto-complete>
+    </a-form-item>
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Captcha"
+      extra="We must make sure that your are a human."
+    >
+      <a-row :gutter="8">
+        <a-col :span="12">
+          <a-input
+            v-decorator="[
+              'captcha',
+              {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
+            ]"
+          />
+        </a-col>
+        <a-col :span="12">
+          <a-button>Get captcha</a-button>
+        </a-col>
+      </a-row>
+    </a-form-item>
+    <a-form-item v-bind="tailFormItemLayout">
+      <a-checkbox
+        v-decorator="['agreement', {valuePropName: 'checked'}]"
+      >
+        I have read the <a href="">
+          agreement
+        </a>
+      </a-checkbox>
+    </a-form-item>
+    <a-form-item v-bind="tailFormItemLayout">
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Register
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 
 <script>
@@ -197,9 +218,6 @@ const residences = [{
 }];
 
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
   data () {
     return {
       confirmDirty: false,
@@ -229,6 +247,9 @@ export default {
       },
     };
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
   methods: {
     handleSubmit  (e) {
       e.preventDefault();

components/form/demo/time-related-controls.vue

@@ -9,58 +9,71 @@ The `value` of time-related components is a `moment` object, which we need to pr
 </us>
 
 <template>
-<a-form @submit="handleSubmit" :form="form">
+  <a-form
-  <a-form-item
+    :form="form"
-    v-bind="formItemLayout"
+    @submit="handleSubmit"
-    label='DatePicker'
   >
-    <a-date-picker v-decorator="['date-picker', config]"/>
+    <a-form-item
-  </a-form-item>
+      v-bind="formItemLayout"
-  <a-form-item
+      label="DatePicker"
-    v-bind="formItemLayout"
+    >
-    label='DatePicker[showTime]'
+      <a-date-picker v-decorator="['date-picker', config]" />
-  >
+    </a-form-item>
-    <a-date-picker v-decorator="['date-time-picker', config]" showTime format='YYYY-MM-DD HH:mm:ss' />
+    <a-form-item
-  </a-form-item>
+      v-bind="formItemLayout"
-  <a-form-item
+      label="DatePicker[showTime]"
-    v-bind="formItemLayout"
+    >
-    label='MonthPicker'
+      <a-date-picker
-  >
+        v-decorator="['date-time-picker', config]"
-    <a-monthPicker v-decorator="['month-picker', config]" />
+        show-time
-  </a-form-item>
+        format="YYYY-MM-DD HH:mm:ss"
-  <a-form-item
+      />
-    v-bind="formItemLayout"
+    </a-form-item>
-    label='RangePicker'
+    <a-form-item
-  >
+      v-bind="formItemLayout"
-    <a-range-picker v-decorator="['range-picker', rangeConfig]" />
+      label="MonthPicker"
-  </a-form-item>
+    >
-  <a-form-item
+      <a-monthPicker v-decorator="['month-picker', config]" />
-    v-bind="formItemLayout"
+    </a-form-item>
-    label='RangePicker[showTime]'
+    <a-form-item
-  >
+      v-bind="formItemLayout"
-    <a-range-picker v-decorator="['range-time-picker', rangeConfig]" showTime format='YYYY-MM-DD HH:mm:ss' />
+      label="RangePicker"
-  </a-form-item>
+    >
-  <a-form-item
+      <a-range-picker v-decorator="['range-picker', rangeConfig]" />
-    v-bind="formItemLayout"
+    </a-form-item>
-    label='TimePicker'
+    <a-form-item
-  >
+      v-bind="formItemLayout"
-    <a-time-picker v-decorator="['time-picker', config]" />
+      label="RangePicker[showTime]"
-  </a-form-item>
+    >
-  <a-form-item
+      <a-range-picker
-    :wrapperCol="{
+        v-decorator="['range-time-picker', rangeConfig]"
-      xs: { span: 24, offset: 0 },
+        show-time
-      sm: { span: 16, offset: 8 },
+        format="YYYY-MM-DD HH:mm:ss"
-    }"
+      />
-  >
+    </a-form-item>
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
+    <a-form-item
-  </a-form-item>
+      v-bind="formItemLayout"
-</a-form>
+      label="TimePicker"
+    >
+      <a-time-picker v-decorator="['time-picker', config]" />
+    </a-form-item>
+    <a-form-item
+      :wrapper-col="{
+        xs: { span: 24, offset: 0 },
+        sm: { span: 16, offset: 8 },
+      }"
+    >
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 <script>
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
   data () {
     return {
       formItemLayout: {
@@ -81,6 +94,9 @@ export default {
       },
     };
   },
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
   methods: {
     handleSubmit  (e) {
       e.preventDefault();

components/form/demo/validate-other.vue

@@ -10,175 +10,250 @@ Demostration for validataion configuration for form controls which are not show
 
 
 <template>
-<a-form id='components-form-demo-validate-other' @submit="handleSubmit" :form="form">
+  <a-form
-  <a-form-item
+    id="components-form-demo-validate-other"
-    v-bind="formItemLayout"
+    :form="form"
-    label='Plain Text'
+    @submit="handleSubmit"
   >
-    <span class='ant-form-text'>China</span>
+    <a-form-item
-  </a-form-item>
+      v-bind="formItemLayout"
-  <a-form-item
+      label="Plain Text"
-    v-bind="formItemLayout"
-    label='Select'
-    hasFeedback
-  >
-    <a-select
-      v-decorator="[
-        'select',
-        {rules: [{ required: true, message: 'Please select your country!' }]}
-      ]"
-      placeholder='Please select a country'
     >
-      <a-select-option value='china'>China</a-select-option>
+      <span class="ant-form-text">
-      <a-select-option value='usa'>U.S.A</a-select-option>
+        China
-    </a-select>
+      </span>
-  </a-form-item>
+    </a-form-item>
-
+    <a-form-item
-  <a-form-item
+      v-bind="formItemLayout"
-    v-bind="formItemLayout"
+      label="Select"
-    label='Select[multiple]'
+      has-feedback
-  >
-    <a-select
-      v-decorator="[
-        'select-multiple', {
-        rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
-      }]"
-      mode='multiple'
-      placeholder='Please select favourite colors'
     >
-      <a-select-option value='red'>Red</a-select-option>
+      <a-select
-      <a-select-option value='green'>Green</a-select-option>
+        v-decorator="[
-      <a-select-option value='blue'>Blue</a-select-option>
+          'select',
-    </a-select>
+          {rules: [{ required: true, message: 'Please select your country!' }]}
-  </a-form-item>
+        ]"
+        placeholder="Please select a country"
+      >
+        <a-select-option value="china">
+          China
+        </a-select-option>
+        <a-select-option value="usa">
+          U.S.A
+        </a-select-option>
+      </a-select>
+    </a-form-item>
 
-  <a-form-item
+    <a-form-item
-    v-bind="formItemLayout"
+      v-bind="formItemLayout"
-    label='InputNumber'
+      label="Select[multiple]"
-  >
-    <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
-    <span class='ant-form-text'> machines</span>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Switch'
-  >
-    <a-switch v-decorator="['switch', { valuePropName: 'checked' }]"/>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Slider'
-  >
-    <a-slider v-decorator="['slider']" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Radio.Group'
-  >
-    <a-radio-group v-decorator="['radio-group']">
-      <a-radio value='a'>item 1</a-radio>
-      <a-radio value='b'>item 2</a-radio>
-      <a-radio value='c'>item 3</a-radio>
-    </a-radio-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Radio.Button'
-  >
-    <a-radio-group v-decorator="['radio-button']">
-      <a-radio-button value='a'>item 1</a-radio-button>
-      <a-radio-button value='b'>item 2</a-radio-button>
-      <a-radio-button value='c'>item 3</a-radio-button>
-    </a-radio-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Checkbox.Group'
-  >
-    <a-checkbox-group style="width: 100%;" v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]">
-      <a-row>
-        <a-col :span="8"><a-checkbox value="A">A</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
-        <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
-      </a-row>
-    </a-checkbox-group>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Rate'
-  >
-    <a-rate allowHalf v-decorator="['rate', {initialValue: 3.5}]"/>
-  </a-form-item>
-
-  <a-form-item
-    v-bind="formItemLayout"
-    label='Upload'
-    extra='longgggggggggggggggggggggggggggggggggg'
-  >
-    <a-upload
-      v-decorator="['upload', {
-        valuePropName: 'fileList',
-        getValueFromEvent: normFile,
-      }]"
-      name='logo'
-      action='/upload.do'
-      listType='picture'
     >
-      <a-button>
+      <a-select
-        <a-icon type='upload' /> Click to upload
+        v-decorator="[
-      </a-button>
+          'select-multiple', {
-    </a-upload>
+            rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
-  </a-form-item>
+          }]"
+        mode="multiple"
+        placeholder="Please select favourite colors"
+      >
+        <a-select-option value="red">
+          Red
+        </a-select-option>
+        <a-select-option value="green">
+          Green
+        </a-select-option>
+        <a-select-option value="blue">
+          Blue
+        </a-select-option>
+      </a-select>
+    </a-form-item>
 
-  <a-form-item
+    <a-form-item
-    v-bind="formItemLayout"
+      v-bind="formItemLayout"
-    label='Dragger'
+      label="InputNumber"
-  >
+    >
-    <div class='dropbox'>
+      <a-input-number
-      <a-upload-dragger
+        v-decorator="['input-number', { initialValue: 3 }]"
-        v-decorator="['dragger', {
+        :min="1"
+        :max="10"
+      />
+      <span class="ant-form-text">
+        machines
+      </span>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Switch"
+    >
+      <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Slider"
+    >
+      <a-slider
+        v-decorator="['slider']"
+        :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
+      />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Radio.Group"
+    >
+      <a-radio-group v-decorator="['radio-group']">
+        <a-radio value="a">
+          item 1
+        </a-radio>
+        <a-radio value="b">
+          item 2
+        </a-radio>
+        <a-radio value="c">
+          item 3
+        </a-radio>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Radio.Button"
+    >
+      <a-radio-group v-decorator="['radio-button']">
+        <a-radio-button value="a">
+          item 1
+        </a-radio-button>
+        <a-radio-button value="b">
+          item 2
+        </a-radio-button>
+        <a-radio-button value="c">
+          item 3
+        </a-radio-button>
+      </a-radio-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Checkbox.Group"
+    >
+      <a-checkbox-group
+        v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]"
+        style="width: 100%;"
+      >
+        <a-row>
+          <a-col :span="8">
+            <a-checkbox value="A">
+              A
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox
+              disabled
+              value="B"
+            >
+              B
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="C">
+              C
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="D">
+              D
+            </a-checkbox>
+          </a-col>
+          <a-col :span="8">
+            <a-checkbox value="E">
+              E
+            </a-checkbox>
+          </a-col>
+        </a-row>
+      </a-checkbox-group>
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Rate"
+    >
+      <a-rate
+        v-decorator="['rate', {initialValue: 3.5}]"
+        allow-half
+      />
+    </a-form-item>
+
+    <a-form-item
+      v-bind="formItemLayout"
+      label="Upload"
+      extra="longgggggggggggggggggggggggggggggggggg"
+    >
+      <a-upload
+        v-decorator="['upload', {
           valuePropName: 'fileList',
           getValueFromEvent: normFile,
         }]"
-        name='files'
+        name="logo"
-        action='/upload.do'
+        action="/upload.do"
+        list-type="picture"
       >
-        <p class='ant-upload-drag-icon'>
+        <a-button>
-          <a-icon type='inbox' />
+          <a-icon type="upload" /> Click to upload
-        </p>
+        </a-button>
-        <p class='ant-upload-text'>Click or drag file to this area to upload</p>
+      </a-upload>
-        <p class='ant-upload-hint'>Support for a single or bulk upload.</p>
+    </a-form-item>
-      </a-upload-dragger>
-    </div>
-  </a-form-item>
 
-  <a-form-item
+    <a-form-item
-    :wrapperCol="{ span: 12, offset: 6 }"
+      v-bind="formItemLayout"
-  >
+      label="Dragger"
-    <a-button type='primary' htmlType='submit'>Submit</a-button>
+    >
-  </a-form-item>
+      <div class="dropbox">
-</a-form>
+        <a-upload-dragger
+          v-decorator="['dragger', {
+            valuePropName: 'fileList',
+            getValueFromEvent: normFile,
+          }]"
+          name="files"
+          action="/upload.do"
+        >
+          <p class="ant-upload-drag-icon">
+            <a-icon type="inbox" />
+          </p>
+          <p class="ant-upload-text">
+            Click or drag file to this area to upload
+          </p>
+          <p class="ant-upload-hint">
+            Support for a single or bulk upload.
+          </p>
+        </a-upload-dragger>
+      </div>
+    </a-form-item>
+
+    <a-form-item
+      :wrapper-col="{ span: 12, offset: 6 }"
+    >
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
 </template>
 
 <script>
 export default {
-  beforeCreate () {
-    this.form = this.$form.createForm(this);
-  },
   data: () => ({
     formItemLayout: {
       labelCol: { span: 6 },
       wrapperCol: { span: 14 },
     },
   }),
+  beforeCreate () {
+    this.form = this.$form.createForm(this);
+  },
   methods: {
     handleSubmit  (e) {
       e.preventDefault();

components/form/demo/validate-static.vue

@@ -18,138 +18,165 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 <template>
   <a-form>
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Fail'
+      label="Fail"
-      validateStatus='error'
+      validate-status="error"
-      help='Should be combination of numbers & alphabets'
+      help="Should be combination of numbers & alphabets"
     >
-      <a-input placeholder='unavailable choice' id='error' />
+      <a-input
+        id="error"
+        placeholder="unavailable choice"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Warning'
+      label="Warning"
-      validateStatus='warning'
+      validate-status="warning"
     >
-      <a-input placeholder='Warning' id='warning' />
+      <a-input
+        id="warning"
+        placeholder="Warning"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Validating'
+      label="Validating"
-      hasFeedback
+      has-feedback
-      validateStatus='validating'
+      validate-status="validating"
-      help='The information is being validated...'
+      help="The information is being validated..."
     >
-      <a-input placeholder="I'm the content is being validated" id='validating' />
+      <a-input
+        id="validating"
+        placeholder="I'm the content is being validated"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Success'
+      label="Success"
-      hasFeedback
+      has-feedback
-      validateStatus='success'
+      validate-status="success"
     >
-      <a-input placeholder="I'm the content" id='success' />
+      <a-input
+        id="success"
+        placeholder="I'm the content"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Warning'
+      label="Warning"
-      hasFeedback
+      has-feedback
-      validateStatus='warning'
+      validate-status="warning"
     >
-      <a-input placeholder='Warning' id='warning' />
+      <a-input
+        id="warning"
+        placeholder="Warning"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Fail'
+      label="Fail"
-      hasFeedback
+      has-feedback
-      validateStatus='error'
+      validate-status="error"
-      help='Should be combination of numbers & alphabets'
+      help="Should be combination of numbers & alphabets"
     >
-      <a-input placeholder='unavailable choice' id='error' />
+      <a-input
+        id="error"
+        placeholder="unavailable choice"
+      />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Success'
+      label="Success"
-      hasFeedback
+      has-feedback
-      validateStatus='success'
+      validate-status="success"
     >
       <a-date-picker style="width: 100%" />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Warning'
+      label="Warning"
-      hasFeedback
+      has-feedback
-      validateStatus='warning'
+      validate-status="warning"
     >
       <a-time-picker style="width: 100%" />
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Error'
+      label="Error"
-      hasFeedback
+      has-feedback
-      validateStatus='error'
+      validate-status="error"
     >
-      <a-select defaultValue='1'>
+      <a-select default-value="1">
-        <a-select-option value='1'>Option 1</a-select-option>
+        <a-select-option value="1">
-        <a-select-option value='2'>Option 2</a-select-option>
+          Option 1
-        <a-select-option value='3'>Option 3</a-select-option>
+        </a-select-option>
+        <a-select-option value="2">
+          Option 2
+        </a-select-option>
+        <a-select-option value="3">
+          Option 3
+        </a-select-option>
       </a-select>
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Validating'
+      label="Validating"
-      hasFeedback
+      has-feedback
-      validateStatus='validating'
+      validate-status="validating"
-      help='The information is being validated...'
+      help="The information is being validated..."
     >
-      <a-cascader :defaultValue="['1']" :options="[]" />
+      <a-cascader
+        :default-value="['1']"
+        :options="[]"
+      />
     </a-form-item>
 
     <a-form-item
-      label='inline'
+      label="inline"
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
       style="margin-bottom:0;"
     >
       <a-form-item
-        validateStatus='error'
+        validate-status="error"
-        help='Please select the correct date'
+        help="Please select the correct date"
         :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
       >
-        <a-date-picker style="width: 100%"/>
+        <a-date-picker style="width: 100%" />
       </a-form-item>
       <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
         -
       </span>
       <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
-        <a-date-picker style="width: 100%"/>
+        <a-date-picker style="width: 100%" />
       </a-form-item>
     </a-form-item>
 
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
-      label='Success'
+      label="Success"
-      hasFeedback
+      has-feedback
-      validateStatus='success'
+      validate-status="success"
     >
       <a-input-number style="width: 100%" />
     </a-form-item>

components/form/demo/without-form-create.vue

@@ -12,10 +12,10 @@
 <template>
   <a-form>
     <a-form-item
-      :labelCol="labelCol"
+      :label-col="labelCol"
-      :wrapperCol="wrapperCol"
+      :wrapper-col="wrapperCol"
       label="Prime between 8 & 12"
-      :validateStatus="number.validateStatus"
+      :validate-status="number.validateStatus"
       :help="number.errorMsg || tips"
     >
       <a-input-number

components/grid/Col.jsx

@@ -28,11 +28,11 @@ export const ColProps = {
 };
 
 export default {
-  props: ColProps,
   name: 'ACol',
+  props: ColProps,
   inject: {
     rowContext: {
-      default: null,
+      default: () => null,
     },
   },
   render() {

components/icon/__tests__/index.test.js

@@ -7,7 +7,7 @@ import { cloneElement } from '../../_util/vnode';
 describe('Icon', () => {
   it('should render to a <i class="xxx"><svg>...</svg></i>', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Icon type="message" class="my-icon-classname" />;
       },
     });
@@ -16,7 +16,7 @@ describe('Icon', () => {
 
   it('should support basic usage', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return (
           <div>
             <Icon type="home" />
@@ -33,7 +33,7 @@ describe('Icon', () => {
 
   it('should support older usage', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return (
           <div>
             <Icon type="home-o" />
@@ -49,7 +49,7 @@ describe('Icon', () => {
 
   it('should support two-tone icon', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Icon type="check-circle" theme="twoTone" twoToneColor="#f5222d" />;
       },
     });
@@ -61,7 +61,7 @@ describe('Icon', () => {
     Icon.setTwoToneColor('#1890ff');
     expect(Icon.getTwoToneColor()).toBe('#1890ff');
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Icon type="check-circle" theme="twoTone" />;
       },
     });
@@ -72,7 +72,7 @@ describe('Icon', () => {
 
   it('should support pass svg paths as children', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return (
           <Icon viewBox="0 0 24 24">
             <title>Cool Home</title>
@@ -86,7 +86,7 @@ describe('Icon', () => {
 
   it('should give warning and render <i>{null}</i>', () => {
     const wrapper = mount({
-      render(h) {
+      render() {
         return <Icon viewBox="0 0 24 24" />;
       },
     });

components/icon/index.en-US.md

@@ -80,25 +80,21 @@ See [iconfont.cn documents](http://iconfont.cn/help/detail?spm=a313x.7781069.199
 
 ### Custom SVG Icon
 
-You can import SVG icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
+You can import SVG icon as an vue component by using `vue cli 3` and [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader). `vue-svg-loader`'s `options` [reference](https://github.com/visualfanatic/vue-svg-loader).
 
 ```js
-// webpack.config.js
+// vue.config.js
-{
+module.exports = {
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+  chainWebpack: (config) => {
-  use: [
+    const svgRule = config.module.rule('svg');
-    {
+
-      loader: 'babel-loader',
+    svgRule.uses.clear();
-    },
+
-    {
+    svgRule
-      loader: '@svgr/webpack',
+      .use('vue-svg-loader')
-      options: {
+      .loader('vue-svg-loader');
-        babel: false,
+  },
-        icon: true,
+};
-      },
-    },
-  ],
-}
 ```
 
 ```jsx

components/icon/index.zh-CN.md

@@ -78,25 +78,21 @@ new Vue({
 
 ### 自定义 SVG 图标
 
-如果使用 `webpack`，可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
+如果使用 `vue cli 3`，可以通过配置 [vue-svg-loader](https://www.npmjs.com/package/vue-svg-loader) 来将 `svg` 图标作为 `Vue` 组件导入。更多`vue-svg-loader` 的使用方式请参阅 [文档](https://github.com/visualfanatic/vue-svg-loader)。
 
 ```js
-// webpack.config.js
+// vue.config.js
-{
+module.exports = {
-  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+  chainWebpack: (config) => {
-  use: [
+    const svgRule = config.module.rule('svg');
-    {
+
-      loader: 'babel-loader',
+    svgRule.uses.clear();
-    },
+
-    {
+    svgRule
-      loader: '@svgr/webpack',
+      .use('vue-svg-loader')
-      options: {
+      .loader('vue-svg-loader');
-        babel: false,
+  },
-        icon: true,
+};
-      },
-    },
-  ],
-}
 ```
 
 ```jsx
@@ -105,8 +101,10 @@ import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
 new Vue({
   el: '#app',
   template: '<a-icon :component="MessageSvg" />',
-  components: {
+  data() {
-    'my-icon': MyIcon,
+    return {
+      MessageSvg
+    }
   }
 })
 ```

components/input/Input.jsx

@@ -15,21 +15,26 @@ function fixControlledValue(value) {
 }
 
 export default {
-  inheritAttrs: false,
   name: 'AInput',
-  props: {
+  inheritAttrs: false,
-    ...inputProps,
-  },
   model: {
     prop: 'value',
     event: 'change.value',
   },
+  props: {
+    ...inputProps,
+  },
   data() {
     const { value, defaultValue } = this.$props;
     return {
       stateValue: fixControlledValue(!hasProp(this, 'value') ? defaultValue : value),
     };
   },
+  watch: {
+    value(val) {
+      this.stateValue = fixControlledValue(val);
+    },
+  },
   mounted() {
     this.$nextTick(() => {
       if (this.autoFocus) {
@@ -37,11 +42,6 @@ export default {
       }
     });
   },
-  watch: {
-    value(val) {
-      this.stateValue = fixControlledValue(val);
-    },
-  },
   methods: {
     handleKeyDown(e) {
       if (e.keyCode === 13) {

components/input/Search.jsx

@@ -9,6 +9,10 @@ import PropTypes from '../_util/vue-types';
 
 export default {
   name: 'AInputSearch',
+  model: {
+    prop: 'value',
+    event: 'change.value',
+  },
   props: {
     ...inputProps,
     prefixCls: {
@@ -21,10 +25,6 @@ export default {
     },
     enterButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.object]),
   },
-  model: {
-    prop: 'value',
-    event: 'change.value',
-  },
   methods: {
     onSearch(e) {
       this.$emit('search', this.$refs.input.stateValue, e);

components/input/TextArea.jsx

@@ -28,14 +28,14 @@ function noop() {}
 
 export default {
   name: 'ATextarea',
-  props: {
-    ...inputProps,
-    autosize: [Object, Boolean],
-  },
   model: {
     prop: 'value',
     event: 'change.value',
   },
+  props: {
+    ...inputProps,
+    autosize: [Object, Boolean],
+  },
   data() {
     const { value, defaultValue } = this.$props;
     return {

components/layout/Sider.jsx

@@ -71,6 +71,10 @@ export default {
   name: 'ALayoutSider',
   __ANT_LAYOUT_SIDER: true,
   mixins: [BaseMixin],
+  model: {
+    prop: 'collapsed',
+    event: 'collapse',
+  },
   props: initDefaultProps(SiderProps, {
     prefixCls: 'ant-layout-sider',
     collapsible: false,
@@ -108,7 +112,7 @@ export default {
     };
   },
   inject: {
-    siderHook: { default: {} },
+    siderHook: { default: () => ({}) },
   },
   // getChildContext() {
   //   return {
@@ -146,10 +150,6 @@ export default {
       this.siderHook.removeSider(this.uniqueId);
     }
   },
-  model: {
-    prop: 'collapsed',
-    event: 'collapse',
-  },
   methods: {
     responsiveHandler(mql) {
       this.setState({ below: mql.matches });

components/list/Item.jsx

@@ -53,7 +53,7 @@ export default {
   Meta,
   props: ListItemProps,
   inject: {
-    listContext: { default: {} },
+    listContext: { default: () => ({}) },
   },
 
   render() {

components/locale-provider/LocaleReceiver.jsx

@@ -8,7 +8,7 @@ export default {
     children: PropTypes.func,
   },
   inject: {
-    localeData: { default: {} },
+    localeData: { default: () => ({}) },
   },
   methods: {
     getLocale() {

components/locale-provider/__tests__/index.test.js

@@ -124,7 +124,7 @@ const columns = [
 ];
 
 const App = {
-  render(h) {
+  render() {
     return (
       <div>
         <Pagination defaultCurrent={1} total={50} showSizeChanger />

components/menu/MenuItem.jsx

@@ -3,9 +3,9 @@ import { getOptionProps } from '../_util/props-util';
 import Tooltip from '../tooltip';
 function noop() {}
 export default {
+  name: 'MenuItem',
   inheritAttrs: false,
   props: itemProps,
-  name: 'MenuItem',
   inject: {
     getInlineCollapsed: { default: () => noop },
   },
@@ -15,7 +15,7 @@ export default {
       this.$refs.menuItem.onKeyDown(e);
     },
   },
-  render(h) {
+  render() {
     const props = getOptionProps(this);
     const { level, title, rootPrefixCls } = props;
     const { getInlineCollapsed, $slots, $attrs: attrs, $listeners } = this;

components/menu/demo/SubMenu.vue

@@ -1,12 +1,29 @@
 <template functional>
-  <a-sub-menu v-on="listeners" :key="data.key">
+  <a-sub-menu
-    <span slot="title"><a-icon type="mail" /><span>{{data.attrs.menuInfo.title}}</span></span>
+    :key="data.key"
-    <template v-for="item in data.attrs.menuInfo.children">
+    v-on="listeners"
-      <a-menu-item v-if="!item.children" :key="item.key">
+  >
+    <span slot="title">
+      <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
+    </span>
+    <template v-for="item in props.menuInfo.children">
+      <a-menu-item
+        v-if="!item.children"
+        :key="item.key"
+      >
         <a-icon type="pie-chart" />
-        <span>{{item.title}}</span>
+        <span>{{ item.title }}</span>
       </a-menu-item>
-      <sub-menu v-else :menuInfo="item" :key="item.key"/>
+      <sub-menu
+        v-else
+        :key="item.key"
+        :menu-info="item"
+      />
     </template>
   </a-sub-menu>
 </template>
+<script>
+export default {
+  props: ['menuInfo'],
+};
+</script>

components/menu/demo/template.md

@@ -28,7 +28,7 @@ The properties of `a-sub-menu` are dynamically changed inside the component. If
           <a-icon type="pie-chart" />
           <span>{{item.title}}</span>
         </a-menu-item>
-        <sub-menu v-else :menuInfo="item" :key="item.key"/>
+        <sub-menu v-else :menu-info="item" :key="item.key"/>
       </template>
     </a-menu>
   </div>

components/menu/index.jsx

@@ -49,8 +49,8 @@ const Menu = {
   },
   mixins: [BaseMixin],
   inject: {
-    layoutSiderContext: { default: {} },
+    layoutSiderContext: { default: () => ({}) },
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   model: {
     prop: 'selectedKeys',

components/message/__tests__/index.test.js

@@ -128,7 +128,7 @@ describe('message', () => {
     }, 0);
   });
   it('should allow custom icon', async () => {
-    message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> });
+    message.open({ content: 'Message', icon: h => <Icon type="smile-o" /> }); // eslint-disable-line
     await asyncExpect(() => {
       expect(document.querySelectorAll('.anticon-smile-o').length).toBe(1);
     }, 0);

components/modal/Modal.jsx

@@ -68,6 +68,10 @@ const modalProps = (defaultProps = {}) => {
 
 export default {
   name: 'AModal',
+  model: {
+    prop: 'visible',
+    event: 'change',
+  },
   props: modalProps({
     prefixCls: 'ant-modal',
     width: 520,
@@ -79,9 +83,24 @@ export default {
     // okButtonDisabled: false,
     // cancelButtonDisabled: false,
   }),
-  model: {
+  mounted() {
-    prop: 'visible',
+    if (mousePositionEventBinded) {
-    event: 'change',
+      return;
+    }
+    // 只有点击事件支持从鼠标位置动画展开
+    addEventListener(document.documentElement, 'click', e => {
+      mousePosition = {
+        x: e.pageX,
+        y: e.pageY,
+      };
+      // 100ms 内发生过点击事件，则从点击位置动画展示
+      // 否则直接 zoom 展示
+      // 这样可以兼容非点击方式展开
+      setTimeout(() => {
+        mousePosition = null;
+      }, 100);
+    });
+    mousePositionEventBinded = true;
   },
   // static info: ModalFunc;
   // static success: ModalFunc;
@@ -124,25 +143,6 @@ export default {
       );
     },
   },
-  mounted() {
-    if (mousePositionEventBinded) {
-      return;
-    }
-    // 只有点击事件支持从鼠标位置动画展开
-    addEventListener(document.documentElement, 'click', e => {
-      mousePosition = {
-        x: e.pageX,
-        y: e.pageY,
-      };
-      // 100ms 内发生过点击事件，则从点击位置动画展示
-      // 否则直接 zoom 展示
-      // 这样可以兼容非点击方式展开
-      setTimeout(() => {
-        mousePosition = null;
-      }, 100);
-    });
-    mousePositionEventBinded = true;
-  },
 
   render() {
     const { visible, wrapClassName, centered, prefixCls, $listeners, $slots } = this;

components/notification/index.js

@@ -85,7 +85,7 @@ function getNotificationInstance(prefixCls, placement, callback) {
       class: `${prefixCls}-${placement}`,
       style: getPlacementStyle(placement),
       getContainer: defaultGetContainer,
-      closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />,
+      closeIcon: h => <Icon class={`${prefixCls}-close-icon`} type={'close'} />, // eslint-disable-line
     },
     notification => {
       notificationInstance[cacheKey] = notification;
@@ -128,7 +128,7 @@ function notice(args) {
     );
   } else if (type) {
     const iconType = typeToIcon[type];
-    iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />;
+    iconNode = h => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} type={iconType} />; // eslint-disable-line
   }
 
   getNotificationInstance(outerPrefixCls, placement || defaultPlacement, notification => {

components/pagination/Pagination.jsx

@@ -35,15 +35,15 @@ export const PaginationConfig = () => ({
 
 export default {
   name: 'APagination',
+  model: {
+    prop: 'current',
+    event: 'change.current',
+  },
   props: {
     ...PaginationProps(),
     prefixCls: PropTypes.string.def('ant-pagination'),
     selectPrefixCls: PropTypes.string.def('ant-select'),
   },
-  model: {
-    prop: 'current',
-    event: 'change.current',
-  },
   methods: {
     getIconsProps() {
       const { prefixCls } = this.$props;

components/popconfirm/index.jsx

@@ -118,7 +118,7 @@ const Popconfirm = {
       );
     },
   },
-  render(h) {
+  render() {
     const props = getOptionProps(this);
     const otherProps = omit(props, ['title', 'content', 'cancelText', 'okText']);
     const tooltipProps = {

components/popover/index.jsx

@@ -23,7 +23,7 @@ const Popover = {
     },
   },
 
-  render(h) {
+  render() {
     const { title, prefixCls, $slots } = this;
     const props = getOptionProps(this);
     delete props.title;

components/radio/Group.jsx

@@ -6,6 +6,9 @@ function noop() {}
 
 export default {
   name: 'ARadioGroup',
+  model: {
+    prop: 'value',
+  },
   props: {
     prefixCls: {
       default: 'ant-radio',
@@ -33,9 +36,6 @@ export default {
       stateValue: value === undefined ? defaultValue : value,
     };
   },
-  model: {
-    prop: 'value',
-  },
   provide() {
     return {
       radioGroupContext: this,
@@ -58,6 +58,11 @@ export default {
       };
     },
   },
+  watch: {
+    value(val) {
+      this.stateValue = val;
+    },
+  },
   methods: {
     onRadioChange(ev) {
       const lastValue = this.stateValue;
@@ -71,11 +76,6 @@ export default {
       }
     },
   },
-  watch: {
-    value(val) {
-      this.stateValue = val;
-    },
-  },
   render() {
     const { mouseenter = noop, mouseleave = noop } = this.$listeners;
     const props = getOptionProps(this);

components/radio/Radio.jsx

@@ -7,6 +7,9 @@ function noop() {}
 
 export default {
   name: 'ARadio',
+  model: {
+    prop: 'checked',
+  },
   props: {
     prefixCls: {
       default: 'ant-radio',
@@ -22,9 +25,6 @@ export default {
     autoFocus: Boolean,
     type: PropTypes.string.def('radio'),
   },
-  model: {
-    prop: 'checked',
-  },
   inject: {
     radioGroupContext: { default: undefined },
   },

components/select/index.jsx

@@ -107,7 +107,7 @@ const Select = {
     event: 'change',
   },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   created() {
     warning(

components/table/SelectionBox.jsx

@@ -5,8 +5,8 @@ import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps } from '../_util/props-util';
 
 export default {
-  mixins: [BaseMixin],
   name: 'SelectionBox',
+  mixins: [BaseMixin],
   props: SelectionBoxProps,
   data() {
     return {

components/table/SelectionCheckboxAll.jsx

@@ -7,9 +7,9 @@ import { SelectionCheckboxAllProps } from './interface';
 import BaseMixin from '../_util/BaseMixin';
 
 export default {
-  props: SelectionCheckboxAllProps,
   name: 'SelectionCheckboxAll',
   mixins: [BaseMixin],
+  props: SelectionCheckboxAllProps,
   data() {
     const { $props: props } = this;
     this.defaultSelections = props.hideDefaultSelections
@@ -33,10 +33,6 @@ export default {
     };
   },
 
-  mounted() {
-    this.subscribe();
-  },
-
   watch: {
     $props: {
       handler: function() {
@@ -46,6 +42,10 @@ export default {
     },
   },
 
+  mounted() {
+    this.subscribe();
+  },
+
   beforeDestroy() {
     if (this.unsubscribe) {
       this.unsubscribe();

components/table/Table.jsx

@@ -124,7 +124,7 @@ export default {
       },
       deep: true,
     },
-    dataSource(val) {
+    dataSource() {
       this.store.setState({
         selectionDirty: false,
       });

components/table/demo/EditableCell.vue

@@ -1,21 +1,31 @@
 <template>
-<div class='editable-cell'>
+  <div class="editable-cell">
-  <div v-if="editable" class='editable-cell-input-wrapper'>
+    <div
-    <a-input
+      v-if="editable"
-      :value="value"
+      class="editable-cell-input-wrapper"
-      @change="handleChange"
+    >
-      @pressEnter="check"
+      <a-input
-    /><a-icon
+        :value="value"
-      type='check'
+        @change="handleChange"
-      class='editable-cell-icon-check'
+        @pressEnter="check"
-      @click="check"
+      /><a-icon
-    />
+        type="check"
+        class="editable-cell-icon-check"
+        @click="check"
+      />
+    </div>
+    <div
+      v-else
+      class="editable-cell-text-wrapper"
+    >
+      {{ value || ' ' }}
+      <a-icon
+        type="edit"
+        class="editable-cell-icon"
+        @click="edit"
+      />
+    </div>
   </div>
-  <div v-else class='editable-cell-text-wrapper'>
-    {{value || ' '}}
-    <a-icon type='edit' class='editable-cell-icon' @click="edit" />
-  </div>
-</div>
 </template>
 <script>
 export default {

components/table/filterDropdown.jsx

@@ -17,8 +17,8 @@ function stopPropagation(e) {
 }
 
 export default {
-  mixins: [BaseMixin],
   name: 'FilterMenu',
+  mixins: [BaseMixin],
   props: initDefaultProps(FilterMenuProps, {
     handleFilter() {},
     column: {},
@@ -34,13 +34,6 @@ export default {
       sVisible: visible,
     };
   },
-
-  mounted() {
-    const { column } = this;
-    this.$nextTick(() => {
-      this.setNeverShown(column);
-    });
-  },
   watch: {
     _propsSymbol() {
       const nextProps = getOptionProps(this);
@@ -81,6 +74,13 @@ export default {
     //   this.sSelectedKeys = val
     // },
   },
+
+  mounted() {
+    const { column } = this;
+    this.$nextTick(() => {
+      this.setNeverShown(column);
+    });
+  },
   methods: {
     getDropdownVisible() {
       return this.neverShown ? false : this.sVisible;

components/tabs/tabs.jsx

@@ -10,6 +10,10 @@ import TabBar from './TabBar';
 export default {
   TabPane,
   name: 'ATabs',
+  model: {
+    prop: 'activeKey',
+    event: 'change',
+  },
   props: {
     prefixCls: PropTypes.string.def('ant-tabs'),
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -25,9 +29,12 @@ export default {
     tabBarGutter: PropTypes.number,
     renderTabBar: PropTypes.func,
   },
-  model: {
+  mounted() {
-    prop: 'activeKey',
+    const NO_FLEX = ' no-flex';
-    event: 'change',
+    const tabNode = this.$el;
+    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
+      tabNode.className += NO_FLEX;
+    }
   },
   methods: {
     removeTab(targetKey, e) {
@@ -54,14 +61,6 @@ export default {
     },
   },
 
-  mounted() {
-    const NO_FLEX = ' no-flex';
-    const tabNode = this.$el;
-    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
-      tabNode.className += NO_FLEX;
-    }
-  },
-
   render() {
     const props = getOptionProps(this);
     const {

components/tag/Tag.jsx

@@ -9,6 +9,10 @@ import BaseMixin from '../_util/BaseMixin';
 export default {
   name: 'ATag',
   mixins: [BaseMixin],
+  model: {
+    prop: 'visible',
+    event: 'close.visible',
+  },
   props: {
     prefixCls: PropTypes.string.def('ant-tag'),
     color: PropTypes.string,
@@ -16,10 +20,6 @@ export default {
     visible: PropTypes.bool,
     afterClose: PropTypes.func,
   },
-  model: {
-    prop: 'visible',
-    event: 'close.visible',
-  },
   data() {
     let _visible = true;
     if (hasProp(this, 'visible')) {

components/time-picker/index.jsx

@@ -87,7 +87,7 @@ const TimePicker = {
     event: 'change',
   },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   data() {
     const value = this.value || this.defaultValue;

components/tooltip/Tooltip.jsx

@@ -25,16 +25,16 @@ const splitObject = (obj, keys) => {
 const props = abstractTooltipProps();
 export default {
   name: 'ATooltip',
-  props: {
-    ...props,
-    title: PropTypes.any,
-  },
   model: {
     prop: 'visible',
     event: 'visibleChange',
   },
+  props: {
+    ...props,
+    title: PropTypes.any,
+  },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   data() {
     return {
@@ -156,7 +156,7 @@ export default {
     },
   },
 
-  render(h) {
+  render() {
     const { $props, $data, $slots, $listeners } = this;
     const { prefixCls, openClassName, getPopupContainer } = $props;
     const { getPopupContainer: getContextPopupContainer } = this.configProvider;

components/transfer/item.jsx

@@ -6,6 +6,7 @@ import Checkbox from '../checkbox';
 function noop() {}
 
 export default {
+  name: 'Item',
   props: {
     renderedText: PropTypes.any,
     renderedEl: PropTypes.any,
@@ -15,7 +16,6 @@ export default {
     prefixCls: PropTypes.string,
     disabled: PropTypes.bool,
   },
-  name: 'Item',
   render() {
     const { renderedText, renderedEl, item, lazy, checked, disabled, prefixCls } = this.$props;
 

components/tree-select/index.jsx

@@ -34,7 +34,7 @@ const TreeSelect = {
     event: 'change',
   },
   inject: {
-    configProvider: { default: {} },
+    configProvider: { default: () => ({}) },
   },
   created() {
     warning(

components/tree/DirectoryTree.jsx

@@ -28,8 +28,8 @@ function getIcon(props, h) {
 }
 
 export default {
-  mixins: [BaseMixin],
   name: 'ADirectoryTree',
+  mixins: [BaseMixin],
   model: {
     prop: 'checkedKeys',
     event: 'check',

components/upload/Upload.jsx

@@ -13,10 +13,10 @@ import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './u
 export { UploadProps };
 
 export default {
-  inheritAttrs: false,
   name: 'AUpload',
-  Dragger: Dragger,
   mixins: [BaseMixin],
+  inheritAttrs: false,
+  Dragger: Dragger,
   props: initDefaultProps(UploadProps, {
     prefixCls: 'ant-upload',
     type: 'select',
@@ -38,14 +38,14 @@ export default {
       dragState: 'drop',
     };
   },
-  beforeDestroy() {
-    this.clearProgressTimer();
-  },
   watch: {
     fileList(val) {
       this.sFileList = val;
     },
   },
+  beforeDestroy() {
+    this.clearProgressTimer();
+  },
   methods: {
     onStart(file) {
       const targetItem = fileToObject(file);

components/vc-calendar/demo/antd-calendar.vue

@@ -1,5 +1,5 @@
 <script>
-/* eslint react/no-multi-comp:0, no-console:0 */
+/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */
 
 import '../assets/index.less';
 import PropTypes from '@/components/_util/vue-types';
@@ -17,7 +17,6 @@ import 'moment/locale/en-gb';
 
 const format = 'YYYY-MM-DD HH:mm:ss';
 const cn = window.location.search.indexOf('cn') !== -1;
-
 const now = moment();
 if (cn) {
   now.locale('zh-cn').utcOffset(8);

components/vc-calendar/demo/antd-range-calendar.vue

@@ -1,5 +1,5 @@
 <script>
-/* eslint react/no-multi-comp:0, no-console:0 */
+/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */
 
 import '../assets/index.less';
 import '@/components/vc-time-picker/assets/index.less';

components/vc-calendar/src/RangeCalendar.jsx

@@ -126,7 +126,7 @@ const RangeCalendar = {
     };
   },
   watch: {
-    value(val) {
+    value() {
       const newState = {};
       newState.sValue = normalizeAnchor(this.$props, 0);
       this.setState(newState);

components/vc-cascader/Cascader.jsx

@@ -45,6 +45,11 @@ const BUILT_IN_PLACEMENTS = {
 };
 
 export default {
+  mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   props: {
     value: PropTypes.array,
     defaultValue: PropTypes.array,
@@ -69,11 +74,6 @@ export default {
     loadingIcon: PropTypes.any,
     getPopupContainer: PropTypes.func,
   },
-  mixins: [BaseMixin],
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
   data() {
     let initialValue = [];
     const { value, defaultValue, popupVisible } = this;

components/vc-cascader/Menus.jsx

@@ -24,11 +24,6 @@ export default {
     this.menuItems = {};
     return {};
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.scrollActiveItemToView();
-    });
-  },
   watch: {
     visible(val) {
       if (val) {
@@ -38,6 +33,11 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.scrollActiveItemToView();
+    });
+  },
   methods: {
     getFieldName(name) {
       const { fieldNames, defaultFieldNames } = this.$props;

components/vc-checkbox/src/Checkbox.jsx

@@ -7,6 +7,10 @@ export default {
   name: 'Checkbox',
   mixins: [BaseMixin],
   inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
   props: initDefaultProps(
     {
       prefixCls: PropTypes.string,
@@ -31,10 +35,6 @@ export default {
       defaultChecked: false,
     },
   ),
-  model: {
-    prop: 'checked',
-    event: 'change',
-  },
   data() {
     const checked = hasProp(this, 'checked') ? this.checked : this.defaultChecked;
     return {

components/vc-collapse/src/Collapse.jsx

@@ -36,6 +36,18 @@ export default {
       stateActiveKey: _toArray(currentActiveKey),
     };
   },
+  watch: {
+    activeKey(val) {
+      this.setState({
+        stateActiveKey: _toArray(val),
+      });
+    },
+    openAnimation(val) {
+      this.setState({
+        currentOpenAnimations: val,
+      });
+    },
+  },
   methods: {
     onClickItem(key) {
       let activeKey = this.stateActiveKey;
@@ -103,18 +115,6 @@ export default {
       this.$emit('change', this.accordion ? activeKey[0] : activeKey);
     },
   },
-  watch: {
-    activeKey(val) {
-      this.setState({
-        stateActiveKey: _toArray(val),
-      });
-    },
-    openAnimation(val) {
-      this.setState({
-        currentOpenAnimations: val,
-      });
-    },
-  },
   render() {
     const { prefixCls, accordion } = this.$props;
     const collapseClassName = {

components/vc-dialog/Dialog.jsx

@@ -69,6 +69,17 @@ export default {
     };
   },
 
+  watch: {
+    visible(val) {
+      if (val) {
+        this.destroyPopup = false;
+      }
+      this.$nextTick(() => {
+        this.updatedCallback(!val);
+      });
+    },
+  },
+
   // private inTransition: boolean;
   // private titleId: string;
   // private openTime: number;
@@ -88,17 +99,6 @@ export default {
       this.updatedCallback(false);
     });
   },
-
-  watch: {
-    visible(val) {
-      if (val) {
-        this.destroyPopup = false;
-      }
-      this.$nextTick(() => {
-        this.updatedCallback(!val);
-      });
-    },
-  },
   beforeDestroy() {
     if (this.visible || this.inTransition) {
       this.removeScrollingEffect();