style: update lint and format code

.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',

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/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/AnchorLink.jsx

@@ -18,6 +18,12 @@ export default {
     antAnchor: { default: () => ({}) },
     antAnchorContext: { default: () => ({}) },
   },
+  watch: {
+    href(val, oldVal) {
+      this.antAnchor.unregisterLink(oldVal);
+      this.antAnchor.registerLink(val);
+    },
+  },
 
   mounted() {
     this.antAnchor.registerLink(this.href);
@@ -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/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/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/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,9 +26,6 @@ export default {
     type: PropTypes.string.def('checkbox'),
     autoFocus: Boolean,
   },
-  model: {
-    prop: 'checked',
-  },
   inject: {
     checkboxGroupContext: { default: () => null },
   },

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/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

@@ -7,8 +7,13 @@
     >
       {{ title }}
     </p>
-      <template v-if="content">{{content}}</template>
+    <template v-if="content">
-      <slot name="content" v-else></slot>
+      {{ content }}
+    </template>
+    <slot
+      v-else
+      name="content"
+    />
   </div>
 </template>
 <script>

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,10 +33,6 @@ export default {
       this.$emit('visibleChange', val);
     },
   },
-  model: {
-    prop: 'visible',
-    event: 'visibleChange',
-  },
   inject: {
     configProvider: { default: () => ({}) },
   },

components/form/FormItem.jsx

@@ -66,12 +66,12 @@ export default {
     decoratorFormProps: { default: () => ({}) },
     collectFormItemContext: { default: () => noop },
   },
-  created() {
-    this.collectContext();
-  },
   data() {
     return { helpShow: false };
   },
+  created() {
+    this.collectContext();
+  },
   beforeUpdate() {
     if (process.env.NODE_ENV !== 'production') {
       this.collectContext();

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,7 +152,8 @@ 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>
@@ -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,14 +11,19 @@ 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
               v-decorator="[
@@ -30,24 +35,40 @@ Because the width of label is not fixed, you may need to adjust it by customizin
                   }],
                 }
               ]"
-                placeholder='placeholder'
+              placeholder="placeholder"
             />
           </a-form-item>
         </a-col>
       </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' }"
+        >
+          <a-button
+            type="primary"
+            html-type="submit"
+          >
+            Search
+          </a-button>
+          <a-button
+            :style="{ marginLeft: '8px' }"
+            @click="handleReset"
+          >
             Clear
           </a-button>
-            <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
+          <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 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"
+        html-type="submit"
       >
-      <a-button type='primary' htmlType='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,13 +10,16 @@ Add or remove form items dynamically.
 
 
 <template>
-<a-form @submit="handleSubmit" :form="form">
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
       v-for="(k, index) in form.getFieldValue('keys')"
+      :key="k"
       v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
       :label="index === 0 ? 'Passengers' : ''"
       :required="false"
-    :key="k"
     >
       <a-input
         v-decorator="[
@@ -31,24 +34,33 @@ Add or remove form items dynamically.
             }],
           }
         ]"
-      placeholder='passenger name'
+        placeholder="passenger name"
         style="width: 60%; margin-right: 8px"
       />
       <a-icon
         v-if="form.getFieldValue('keys').length > 1"
-      class='dynamic-delete-button'
+        class="dynamic-delete-button"
-      type='minus-circle-o'
+        type="minus-circle-o"
         :disabled="form.getFieldValue('keys').length === 1"
         @click="() => remove(k)"
       />
     </a-form-item>
     <a-form-item v-bind="formItemLayoutWithOutLabel">
-    <a-button type='dashed' @click="add" style="width: 60%">
+      <a-button
-      <a-icon type='plus' /> Add field
+        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' htmlType='submit'>Submit</a-button>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
     </a-form-item>
   </a-form>
 </template>
@@ -56,10 +68,6 @@ Add or remove form items dynamically.
 <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,12 +18,12 @@ 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) }}
     </pre>
   </div>
@@ -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,23 +10,31 @@ Horizontal login form is often used in navigation bar.
 
 
 <template>
-<a-form layout='inline' @submit="handleSubmit" :form="form">
+  <a-form
+    layout="inline"
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
-    :validateStatus="userNameError() ? 'error' : ''"
+      :validate-status="userNameError() ? 'error' : ''"
       :help="userNameError() || ''"
     >
       <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
-    :validateStatus="passwordError() ? 'error' : ''"
+      :validate-status="passwordError() ? 'error' : ''"
       :help="passwordError() || ''"
     >
       <a-input
@@ -34,16 +42,20 @@ Horizontal login form is often used in navigation bar.
           '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>
       <a-button
-      type='primary'
+        type="primary"
-      htmlType='submit'
+        html-type="submit"
         :disabled="hasErrors(form.getFieldsError())"
       >
         Log in

components/form/demo/layout.vue

@@ -13,34 +13,45 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
   <div>
     <a-form :layout="formLayout">
       <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-button value="horizontal">
+            Horizontal
+          </a-radio-button>
+          <a-radio-button value="vertical">
+            Vertical
+          </a-radio-button>
+          <a-radio-button value="inline">
+            Inline
+          </a-radio-button>
         </a-radio-group>
       </a-form-item>
       <a-form-item
-      label='Field A'
+        label="Field A"
-      :labelCol="formItemLayout.labelCol"
+        :label-col="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
+        :wrapper-col="formItemLayout.wrapperCol"
       >
-      <a-input placeholder='input placeholder' />
+        <a-input placeholder="input placeholder" />
       </a-form-item>
       <a-form-item
-      label='Field B'
+        label="Field B"
-      :labelCol="formItemLayout.labelCol"
+        :label-col="formItemLayout.labelCol"
-      :wrapperCol="formItemLayout.wrapperCol"
+        :wrapper-col="formItemLayout.wrapperCol"
       >
-      <a-input placeholder='input placeholder' />
+        <a-input placeholder="input placeholder" />
       </a-form-item>
       <a-form-item
-      :wrapperCol="buttonItemLayout.wrapperCol"
+        :wrapper-col="buttonItemLayout.wrapperCol"
       >
-      <a-button type='primary'>Submit</a-button>
+        <a-button type="primary">
+          Submit
+        </a-button>
       </a-form-item>
     </a-form>
   </div>
@@ -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,10 +9,13 @@ Fill in this form to create a new account for you.
 </us>
 
 <template>
-<a-form @submit="handleSubmit" :form="form">
+  <a-form
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
       v-bind="formItemLayout"
-    label='E-mail'
+      label="E-mail"
     >
       <a-input
         v-decorator="[
@@ -29,7 +32,7 @@ Fill in this form to create a new account for you.
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Password'
+      label="Password"
     >
       <a-input
         v-decorator="[
@@ -38,16 +41,16 @@ Fill in this form to create a new account for you.
             rules: [{
               required: true, message: 'Please input your password!',
             }, {
-            validator: this.validateToNextPassword,
+              validator: validateToNextPassword,
             }],
           }
         ]"
-      type='password'
+        type="password"
       />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Confirm Password'
+      label="Confirm Password"
     >
       <a-input
         v-decorator="[
@@ -60,7 +63,7 @@ Fill in this form to create a new account for you.
             }],
           }
         ]"
-      type='password'
+        type="password"
         @blur="handleConfirmBlur"
       />
     </a-form-item>
@@ -69,8 +72,8 @@ Fill in this form to create a new account for you.
     >
       <span slot="label">
         Nickname&nbsp;
-      <a-tooltip title='What do you want others to call you?'>
+        <a-tooltip title="What do you want others to call you?">
-        <a-icon type='question-circle-o' />
+          <a-icon type="question-circle-o" />
         </a-tooltip>
       </span>
       <a-input
@@ -84,7 +87,7 @@ Fill in this form to create a new account for you.
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Habitual Residence'
+      label="Habitual Residence"
     >
       <a-cascader
         v-decorator="[
@@ -99,7 +102,7 @@ Fill in this form to create a new account for you.
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Phone Number'
+      label="Phone Number"
     >
       <a-input
         v-decorator="[
@@ -111,40 +114,49 @@ Fill in this form to create a new account for you.
         style="width: 100%"
       >
         <a-select
+          slot="addonBefore"
           v-decorator="[
             'prefix',
             { initialValue: '86' }
           ]"
-        slot="addonBefore"
           style="width: 70px"
         >
-        <a-select-option value='86'>+86</a-select-option>
+          <a-select-option value="86">
-        <a-select-option value='87'>+87</a-select-option>
+            +86
+          </a-select-option>
+          <a-select-option value="87">
+            +87
+          </a-select-option>
         </a-select>
       </a-input>
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Website'
+      label="Website"
     >
       <a-auto-complete
         v-decorator="[
           'website',
           {rules: [{ required: true, message: 'Please input website!' }]}
         ]"
+        placeholder="website"
         @change="handleWebsiteChange"
-      placeholder='website'
       >
         <template slot="dataSource">
-        <a-select-option v-for="website in autoCompleteResult" :key="website">{{website}}</a-select-option>
+          <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'
+      label="Captcha"
-    extra='We must make sure that your are a human.'
+      extra="We must make sure that your are a human."
     >
       <a-row :gutter="8">
         <a-col :span="12">
@@ -163,10 +175,19 @@ Fill in this form to create a new account for you.
     <a-form-item v-bind="tailFormItemLayout">
       <a-checkbox
         v-decorator="['agreement', {valuePropName: 'checked'}]"
-    >I have read the <a href=''>agreement</a></a-checkbox>
+      >
+        I have read the <a href="">
+          agreement
+        </a>
+      </a-checkbox>
     </a-form-item>
     <a-form-item v-bind="tailFormItemLayout">
-    <a-button type='primary' htmlType='submit'>Register</a-button>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Register
+      </a-button>
     </a-form-item>
   </a-form>
 </template>
@@ -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
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
       v-bind="formItemLayout"
-    label='DatePicker'
+      label="DatePicker"
     >
       <a-date-picker v-decorator="['date-picker', config]" />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='DatePicker[showTime]'
+      label="DatePicker[showTime]"
     >
-    <a-date-picker v-decorator="['date-time-picker', config]" showTime format='YYYY-MM-DD HH:mm:ss' />
+      <a-date-picker
+        v-decorator="['date-time-picker', config]"
+        show-time
+        format="YYYY-MM-DD HH:mm:ss"
+      />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='MonthPicker'
+      label="MonthPicker"
     >
       <a-monthPicker v-decorator="['month-picker', config]" />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='RangePicker'
+      label="RangePicker"
     >
       <a-range-picker v-decorator="['range-picker', rangeConfig]" />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='RangePicker[showTime]'
+      label="RangePicker[showTime]"
     >
-    <a-range-picker v-decorator="['range-time-picker', rangeConfig]" showTime format='YYYY-MM-DD HH:mm:ss' />
+      <a-range-picker
+        v-decorator="['range-time-picker', rangeConfig]"
+        show-time
+        format="YYYY-MM-DD HH:mm:ss"
+      />
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='TimePicker'
+      label="TimePicker"
     >
       <a-time-picker v-decorator="['time-picker', config]" />
     </a-form-item>
     <a-form-item
-    :wrapperCol="{
+      :wrapper-col="{
         xs: { span: 24, offset: 0 },
         sm: { span: 16, offset: 8 },
       }"
     >
-    <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>
 <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
+    id="components-form-demo-validate-other"
+    :form="form"
+    @submit="handleSubmit"
+  >
     <a-form-item
       v-bind="formItemLayout"
-    label='Plain Text'
+      label="Plain Text"
     >
-    <span class='ant-form-text'>China</span>
+      <span class="ant-form-text">
+        China
+      </span>
     </a-form-item>
     <a-form-item
       v-bind="formItemLayout"
-    label='Select'
+      label="Select"
-    hasFeedback
+      has-feedback
     >
       <a-select
         v-decorator="[
           'select',
           {rules: [{ required: true, message: 'Please select your country!' }]}
         ]"
-      placeholder='Please select a country'
+        placeholder="Please select a country"
       >
-      <a-select-option value='china'>China</a-select-option>
+        <a-select-option value="china">
-      <a-select-option value='usa'>U.S.A</a-select-option>
+          China
+        </a-select-option>
+        <a-select-option value="usa">
+          U.S.A
+        </a-select-option>
       </a-select>
     </a-form-item>
 
     <a-form-item
       v-bind="formItemLayout"
-    label='Select[multiple]'
+      label="Select[multiple]"
     >
       <a-select
         v-decorator="[
           'select-multiple', {
             rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
           }]"
-      mode='multiple'
+        mode="multiple"
-      placeholder='Please select favourite colors'
+        placeholder="Please select favourite colors"
       >
-      <a-select-option value='red'>Red</a-select-option>
+        <a-select-option value="red">
-      <a-select-option value='green'>Green</a-select-option>
+          Red
-      <a-select-option value='blue'>Blue</a-select-option>
+        </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
       v-bind="formItemLayout"
-    label='InputNumber'
+      label="InputNumber"
     >
-    <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
+      <a-input-number
-    <span class='ant-form-text'> machines</span>
+        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'
+      label="Switch"
     >
       <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
     </a-form-item>
 
     <a-form-item
       v-bind="formItemLayout"
-    label='Slider'
+      label="Slider"
     >
-    <a-slider v-decorator="['slider']" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
+      <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'
+      label="Radio.Group"
     >
       <a-radio-group v-decorator="['radio-group']">
-      <a-radio value='a'>item 1</a-radio>
+        <a-radio value="a">
-      <a-radio value='b'>item 2</a-radio>
+          item 1
-      <a-radio value='c'>item 3</a-radio>
+        </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'
+      label="Radio.Button"
     >
       <a-radio-group v-decorator="['radio-button']">
-      <a-radio-button value='a'>item 1</a-radio-button>
+        <a-radio-button value="a">
-      <a-radio-button value='b'>item 2</a-radio-button>
+          item 1
-      <a-radio-button value='c'>item 3</a-radio-button>
+        </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'
+      label="Checkbox.Group"
+    >
+      <a-checkbox-group
+        v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]"
+        style="width: 100%;"
       >
-    <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-col :span="8"><a-checkbox disabled value="B">B</a-checkbox></a-col>
+            <a-checkbox value="A">
-        <a-col :span="8"><a-checkbox value="C">C</a-checkbox></a-col>
+              A
-        <a-col :span="8"><a-checkbox value="D">D</a-checkbox></a-col>
+            </a-checkbox>
-        <a-col :span="8"><a-checkbox value="E">E</a-checkbox></a-col>
+          </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'
+      label="Rate"
     >
-    <a-rate allowHalf v-decorator="['rate', {initialValue: 3.5}]"/>
+      <a-rate
+        v-decorator="['rate', {initialValue: 3.5}]"
+        allow-half
+      />
     </a-form-item>
 
     <a-form-item
       v-bind="formItemLayout"
-    label='Upload'
+      label="Upload"
-    extra='longgggggggggggggggggggggggggggggggggg'
+      extra="longgggggggggggggggggggggggggggggggggg"
     >
       <a-upload
         v-decorator="['upload', {
           valuePropName: 'fileList',
           getValueFromEvent: normFile,
         }]"
-      name='logo'
+        name="logo"
-      action='/upload.do'
+        action="/upload.do"
-      listType='picture'
+        list-type="picture"
       >
         <a-button>
-        <a-icon type='upload' /> Click to upload
+          <a-icon type="upload" /> Click to upload
         </a-button>
       </a-upload>
     </a-form-item>
 
     <a-form-item
       v-bind="formItemLayout"
-    label='Dragger'
+      label="Dragger"
     >
-    <div class='dropbox'>
+      <div class="dropbox">
         <a-upload-dragger
           v-decorator="['dragger', {
             valuePropName: 'fileList',
             getValueFromEvent: normFile,
           }]"
-        name='files'
+          name="files"
-        action='/upload.do'
+          action="/upload.do"
         >
-        <p class='ant-upload-drag-icon'>
+          <p class="ant-upload-drag-icon">
-          <a-icon type='inbox' />
+            <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>
-        <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
-    :wrapperCol="{ span: 12, offset: 6 }"
+      :wrapper-col="{ span: 12, offset: 6 }"
     >
-    <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>
 
 <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,120 +18,147 @@ 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%" />
@@ -145,11 +172,11 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
     </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,8 +28,8 @@ export const ColProps = {
 };
 
 export default {
-  props: ColProps,
   name: 'ACol',
+  props: ColProps,
   inject: {
     rowContext: {
       default: () => null,

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/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,
@@ -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/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>
       </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/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/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,19 +1,29 @@
 <template>
-<div class='editable-cell'>
+  <div class="editable-cell">
-  <div v-if="editable" class='editable-cell-input-wrapper'>
+    <div
+      v-if="editable"
+      class="editable-cell-input-wrapper"
+    >
       <a-input
         :value="value"
         @change="handleChange"
         @pressEnter="check"
       /><a-icon
-      type='check'
+        type="check"
-      class='editable-cell-icon-check'
+        class="editable-cell-icon-check"
         @click="check"
       />
     </div>
-  <div v-else class='editable-cell-text-wrapper'>
+    <div
+      v-else
+      class="editable-cell-text-wrapper"
+    >
       {{ value || ' ' }}
-    <a-icon type='edit' class='editable-cell-icon' @click="edit" />
+      <a-icon
+        type="edit"
+        class="editable-cell-icon"
+        @click="edit"
+      />
     </div>
   </div>
 </template>

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/tooltip/Tooltip.jsx

@@ -25,14 +25,14 @@ 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: () => ({}) },
   },
@@ -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/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

@@ -125,7 +125,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();

components/vc-dialog/demo/ant-design.vue

@@ -46,7 +46,7 @@ export default {
       };
     },
 
-    onClose (e) {
+    onClose () {
     // console.log(e);
       this.visible = false;
     },
@@ -55,7 +55,7 @@ export default {
       this.destroyOnClose = e.target.checked;
     },
 
-    changeWidth (e) {
+    changeWidth () {
       this.width = this.width === 600 ? 800 : 600;
     },
 

components/vc-lazy-load/src/LazyLoad.jsx

@@ -52,6 +52,13 @@ export default {
       visible: false,
     };
   },
+  watch: {
+    _propsSymbol() {
+      if (!this.visible) {
+        this.lazyLoadHandler();
+      }
+    },
+  },
   mounted() {
     this.$nextTick(() => {
       this._mounted = true;
@@ -66,13 +73,6 @@ export default {
       this.scrollHander = addEventListener(eventNode, 'scroll', this.lazyLoadHandler);
     });
   },
-  watch: {
-    _propsSymbol(val) {
-      if (!this.visible) {
-        this.lazyLoadHandler();
-      }
-    },
-  },
   beforeDestroy() {
     this._mounted = false;
     if (this.lazyLoadHandler.cancel) {

components/vc-menu/SubMenu.jsx

@@ -415,7 +415,7 @@ const SubMenu = {
     },
   },
 
-  render(h) {
+  render() {
     const props = this.$props;
     const { rootPrefixCls, parentMenu, $listeners = {} } = this;
     const isOpen = props.isOpen;

components/vc-notification/Notice.jsx

@@ -13,6 +13,11 @@ export default {
     update: PropTypes.bool,
     closeIcon: PropTypes.any,
   },
+  watch: {
+    duration() {
+      this.restartCloseTimer();
+    },
+  },
 
   mounted() {
     this.startCloseTimer();
@@ -27,11 +32,6 @@ export default {
     this.clearCloseTimer();
     this.willDestroy = true; // beforeDestroy调用后依然会触发onMouseleave事件
   },
-  watch: {
-    duration() {
-      this.restartCloseTimer();
-    },
-  },
   methods: {
     close() {
       this.clearCloseTimer();

components/vc-notification/demo/simple.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+/* eslint-disable no-console, no-unused-vars */
 import '../assets/index.less';
 import Notification from '../index';
 let notification = null;
@@ -13,7 +13,7 @@ Notification.newInstance(
 
 function simpleFn() {
   notification.notice({
-    content: h => {
+    content: () => {
       return <span>simple show</span>;
     },
     onClose() {

components/vc-pagination/Pagination.jsx

@@ -28,6 +28,10 @@ function calculatePage(p, state, props) {
 export default {
   name: 'Pagination',
   mixins: [BaseMixin],
+  model: {
+    prop: 'current',
+    event: 'change.current',
+  },
   props: {
     prefixCls: PropTypes.string.def('rc-pagination'),
     selectPrefixCls: PropTypes.string.def('rc-select'),
@@ -55,10 +59,6 @@ export default {
     jumpPrevIcon: PropTypes.any,
     jumpNextIcon: PropTypes.any,
   },
-  model: {
-    prop: 'current',
-    event: 'change.current',
-  },
   data() {
     const hasOnChange = this.onChange !== noop;
     const hasCurrent = hasProp(this, 'current');

components/vc-rate/src/Rate.jsx

@@ -29,6 +29,10 @@ function noop() {}
 export default {
   name: 'Rate',
   mixins: [BaseMixin],
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
   props: initDefaultProps(rateProps, {
     defaultValue: 0,
     count: 5,
@@ -38,10 +42,6 @@ export default {
     tabIndex: 0,
     character: '★',
   }),
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
   data() {
     let value = this.value;
     if (!hasProp(this, 'value')) {
@@ -54,13 +54,6 @@ export default {
       hoverValue: undefined,
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.autoFocus && !this.disabled) {
-        this.focus();
-      }
-    });
-  },
   watch: {
     value(val) {
       this.setState({
@@ -68,6 +61,13 @@ export default {
       });
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.autoFocus && !this.disabled) {
+        this.focus();
+      }
+    });
+  },
   methods: {
     onHover(event, index) {
       const hoverValue = this.getStarValue(index, event.pageX);

components/vc-select/DropdownMenu.jsx

@@ -28,6 +28,13 @@ export default {
     firstActiveValue: PropTypes.string,
     menuItemSelectedIcon: PropTypes.any,
   },
+  watch: {
+    visible(val) {
+      if (!val) {
+        this.lastVisible = val;
+      }
+    },
+  },
 
   created() {
     this.rafInstance = { cancel: () => null };
@@ -41,13 +48,6 @@ export default {
     });
     this.lastVisible = this.$props.visible;
   },
-  watch: {
-    visible(val) {
-      if (!val) {
-        this.lastVisible = val;
-      }
-    },
-  },
   updated() {
     const props = this.$props;
     if (!this.prevVisible && props.visible) {

components/vc-select/Select.jsx

@@ -452,7 +452,7 @@ const Select = {
       }
     },
 
-    onPlaceholderClick(e) {
+    onPlaceholderClick() {
       if (this.getInputDOMNode() && this.getInputDOMNode()) {
         this.getInputDOMNode().focus();
       }
@@ -618,7 +618,7 @@ const Select = {
         this._focused = false;
       }
     },
-    inputBlur(e) {
+    inputBlur() {
       this.clearBlurTime();
       if (this.disabled) {
         return;
@@ -1448,7 +1448,7 @@ const Select = {
         }
       }
     },
-    selectionRefFocus(e) {
+    selectionRefFocus() {
       if (this._focused || this.disabled) {
         return;
       }
@@ -1456,7 +1456,7 @@ const Select = {
       this.updateFocusClassName();
       this.$emit('focus');
     },
-    selectionRefBlur(e) {
+    selectionRefBlur() {
       this._focused = false;
       this.updateFocusClassName();
       this.$emit('blur');

components/vc-select/SelectTrigger.jsx

@@ -57,15 +57,15 @@ export default {
     dropdownRender: PropTypes.func,
     ariaId: PropTypes.string,
   },
-  created() {
-    this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
-    this.saveTriggerRef = saveRef(this, 'triggerRef');
-  },
   data() {
     return {
       dropdownWidth: 0,
     };
   },
+  created() {
+    this.saveDropdownMenuRef = saveRef(this, 'dropdownMenuRef');
+    this.saveTriggerRef = saveRef(this, 'triggerRef');
+  },
 
   mounted() {
     this.$nextTick(() => {

components/vc-select/demo/optionFilterProp.vue

@@ -4,7 +4,7 @@ import '../assets/index.less';
 
 export default {
   methods: {
-    onChange (value, options) {
+    onChange (value) {
       console.log(`selected ${value}`);
     },
   },

components/vc-select/demo/optionLabelProp.vue

@@ -4,7 +4,7 @@ import '../assets/index.less';
 
 export default {
   methods: {
-    onChange (value, options) {
+    onChange (value) {
       console.log(`selected ${value}`);
     },
   },

components/vc-select/demo/suggest.vue

@@ -35,7 +35,7 @@ export default {
     },
   },
 
-  render (h) {
+  render () {
     const data = this.data;
     const options = data.map((d) => {
       return <Option key={d.value}>{d.text}</Option>;

components/vc-slick/demo/AppendDots.jsx

@@ -2,7 +2,7 @@ import '../assets/index.less';
 import Slider from '../src/slider';
 
 export default {
-  render(h) {
+  render() {
     const settings = {
       props: {
         dots: true,

components/vc-slick/demo/CustomArrows.jsx

@@ -2,7 +2,7 @@ import '../assets/index.less';
 import Slider from '../src/slider';
 
 export default {
-  render(h) {
+  render() {
     const settings = {
       props: {
         dots: true,

components/vc-slick/src/track.js

@@ -116,7 +116,7 @@ const renderSlides = function(spec, children, createElement) {
           class: classnames(slideClasses, slideClass),
           style: { outline: 'none', ...(getStyle(child.context) || {}), ...childStyle },
           on: {
-            click: e => {
+            click: () => {
               // child.props && child.props.onClick && child.props.onClick(e)
               if (spec.focusOnSelect) {
                 spec.focusOnSelect(childOnClickOptions);
@@ -148,7 +148,7 @@ const renderSlides = function(spec, children, createElement) {
             },
             style: { ...(getStyle(child.context) || {}), ...childStyle },
             on: {
-              click: e => {
+              click: () => {
                 // child.props && child.props.onClick && child.props.onClick(e)
                 if (spec.focusOnSelect) {
                   spec.focusOnSelect(childOnClickOptions);
@@ -176,7 +176,7 @@ const renderSlides = function(spec, children, createElement) {
             class: classnames(slideClasses, slideClass),
             style: { ...(getStyle(child.context) || {}), ...childStyle },
             on: {
-              click: e => {
+              click: () => {
                 // child.props && child.props.onClick && child.props.onClick(e)
                 if (spec.focusOnSelect) {
                   spec.focusOnSelect(childOnClickOptions);

components/vc-switch/Switch.jsx

@@ -5,7 +5,7 @@ import { hasProp, getOptionProps, getComponentFromProp } from '../_util/props-ut
 // function noop () {
 // }
 export default {
-  name: 'vc-switch',
+  name: 'VcSwitch',
   mixins: [BaseMixin],
   model: {
     prop: 'checked',
@@ -28,6 +28,11 @@ export default {
       stateChecked: checked,
     };
   },
+  watch: {
+    checked(val) {
+      this.stateChecked = val;
+    },
+  },
   mounted() {
     this.$nextTick(() => {
       const { autoFocus, disabled } = this;
@@ -36,11 +41,6 @@ export default {
       }
     });
   },
-  watch: {
-    checked(val) {
-      this.stateChecked = val;
-    },
-  },
   methods: {
     setChecked(checked) {
       if (this.disabled) {

components/vc-table/src/ExpandIcon.jsx

@@ -1,8 +1,8 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
 export default {
-  mixins: [BaseMixin],
   name: 'ExpandIcon',
+  mixins: [BaseMixin],
   props: {
     record: PropTypes.object,
     prefixCls: PropTypes.string,

components/vc-table/src/Table.jsx

@@ -79,6 +79,60 @@ export default {
       customHeaderRow: () => {},
     },
   ),
+  data() {
+    this.preData = [...this.data];
+    return {
+      columnManager: new ColumnManager(this.columns),
+      sComponents: merge(
+        {
+          table: 'table',
+          header: {
+            wrapper: 'thead',
+            row: 'tr',
+            cell: 'th',
+          },
+          body: {
+            wrapper: 'tbody',
+            row: 'tr',
+            cell: 'td',
+          },
+        },
+        this.components,
+      ),
+    };
+  },
+  watch: {
+    components() {
+      this._components = merge(
+        {
+          table: 'table',
+          header: {
+            wrapper: 'thead',
+            row: 'tr',
+            cell: 'th',
+          },
+          body: {
+            wrapper: 'tbody',
+            row: 'tr',
+            cell: 'td',
+          },
+        },
+        this.components,
+      );
+    },
+    columns(val) {
+      if (val) {
+        this.columnManager.reset(val);
+      }
+    },
+    data(val) {
+      if (val.length === 0 && this.hasScrollX()) {
+        this.$nextTick(() => {
+          this.resetScrollX();
+        });
+      }
+    },
+  },
 
   // static childContextTypes = {
   //   table: PropTypes.any,
@@ -112,65 +166,11 @@ export default {
 
     this.debouncedWindowResize = debounce(this.handleWindowResize, 150);
   },
-  data() {
-    this.preData = [...this.data];
-    return {
-      columnManager: new ColumnManager(this.columns),
-      sComponents: merge(
-        {
-          table: 'table',
-          header: {
-            wrapper: 'thead',
-            row: 'tr',
-            cell: 'th',
-          },
-          body: {
-            wrapper: 'tbody',
-            row: 'tr',
-            cell: 'td',
-          },
-        },
-        this.components,
-      ),
-    };
-  },
   provide() {
     return {
       table: this,
     };
   },
-  watch: {
-    components(val) {
-      this._components = merge(
-        {
-          table: 'table',
-          header: {
-            wrapper: 'thead',
-            row: 'tr',
-            cell: 'th',
-          },
-          body: {
-            wrapper: 'tbody',
-            row: 'tr',
-            cell: 'td',
-          },
-        },
-        this.components,
-      );
-    },
-    columns(val) {
-      if (val) {
-        this.columnManager.reset(val);
-      }
-    },
-    data(val) {
-      if (val.length === 0 && this.hasScrollX()) {
-        this.$nextTick(() => {
-          this.resetScrollX();
-        });
-      }
-    },
-  },
 
   mounted() {
     this.$nextTick(() => {
@@ -188,7 +188,7 @@ export default {
     });
   },
 
-  updated(prevProps) {
+  updated() {
     this.$nextTick(() => {
       if (this.columnManager.isAnyColumnsFixed()) {
         this.handleWindowResize();

components/vc-table/src/TableCell.jsx

@@ -32,7 +32,7 @@ export default {
     },
   },
 
-  render(h) {
+  render() {
     const {
       record,
       indentSize,

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -29,6 +29,14 @@ export default {
       prev: false,
     };
   },
+  watch: {
+    tabBarPosition() {
+      this.tabBarPositionChange = true;
+      this.$nextTick(() => {
+        this.setOffset(0);
+      });
+    },
+  },
 
   mounted() {
     this.$nextTick(() => {
@@ -56,14 +64,6 @@ export default {
       this.debouncedResize.cancel();
     }
   },
-  watch: {
-    tabBarPosition(val) {
-      this.tabBarPositionChange = true;
-      this.$nextTick(() => {
-        this.setOffset(0);
-      });
-    },
-  },
   methods: {
     updatedCal(prevProps) {
       const props = this.$props;
@@ -260,7 +260,7 @@ export default {
       this.setOffset(offset + navWrapNodeWH);
     },
 
-    nextClick(e) {
+    nextClick() {
       // this.__emit('nextClick', e)
       const navWrapNode = this.$props.getRef('navWrap');
       const navWrapNodeWH = this.getOffsetWH(navWrapNode);

components/vc-tabs/src/TabBar.jsx

@@ -11,7 +11,7 @@ export default {
     const listeners = this.$listeners;
     return (
       <SaveRef
-        children={(saveRef, getRef) => (
+        children={saveRef => (
           <TabBarRootNode saveRef={saveRef} {...{ props, on: listeners }}>
             <TabBarTabsNode saveRef={saveRef} {...{ props, on: listeners }} />
           </TabBarRootNode>

components/vc-tabs/src/Tabs.jsx

@@ -26,11 +26,11 @@ function activeKeyIsValid(props, key) {
 
 export default {
   name: 'Tabs',
+  mixins: [BaseMixin],
   model: {
     prop: 'activeKey',
     event: 'change',
   },
-  mixins: [BaseMixin],
   props: {
     destroyInactiveTabPane: PropTypes.bool,
     renderTabBar: PropTypes.func.isRequired,
@@ -41,7 +41,7 @@ export default {
     tabBarPosition: PropTypes.string.def('top'),
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    __propsSymbol__: PropTypes.any,
+    propsSymbol: PropTypes.any,
   },
   data() {
     const props = getOptionProps(this);

components/vc-time-picker/Select.jsx

@@ -46,7 +46,7 @@ const Select = {
     });
   },
   watch: {
-    selectedIndex(val) {
+    selectedIndex() {
       this.$nextTick(() => {
         // smooth scroll to selected option
         this.scrollToSelected(120);

components/vc-time-picker/TimePicker.jsx

@@ -9,8 +9,8 @@ import { initDefaultProps, hasProp, getComponentFromProp } from '../_util/props-
 function noop() {}
 
 export default {
-  mixins: [BaseMixin],
   name: 'VcTimePicker',
+  mixins: [BaseMixin],
   props: initDefaultProps(
     {
       prefixCls: PropTypes.string,
@@ -89,13 +89,6 @@ export default {
       sValue: value,
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.autoFocus) {
-        this.focus();
-      }
-    });
-  },
 
   watch: {
     value(val) {
@@ -111,6 +104,13 @@ export default {
       }
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.autoFocus) {
+        this.focus();
+      }
+    });
+  },
   methods: {
     onPanelChange(value) {
       this.setValue(value);