Merge branch 'master' into feat-1.4.0

.eslintrc

@@ -1,5 +1,5 @@
 {
-  "root": true,
+    "root": true,
     "env": {
         "browser": true,
         "node": true,
@@ -8,7 +8,7 @@
         "es6": true
     },
     "parserOptions": {
-      "parser": "babel-eslint"
+        "parser": "babel-eslint"
     },
     "extends": ["plugin:vue/recommended", "prettier"],
     "rules": {
@@ -19,6 +19,7 @@
         "semi": ["error", "always"],
         "vue/require-prop-types": "off",
         "vue/require-default-prop": "off",
-        "vue/no-reserved-keys": "off"
+        "vue/no-reserved-keys": "off",
+        "vue/prop-name-casing": "off"
     }
-}
+}

components/form/__tests__/demo.test.js

@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('form', { suffix: 'vue', skip: ['index.vue'] });
+demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });

components/form/demo/index.vue

@@ -13,6 +13,8 @@ import FormInModal from './form-in-modal';
 import FormInModalString from '!raw-loader!./form-in-modal';
 import GlobalState from './global-state';
 import GlobalStateString from '!raw-loader!./global-state';
+import VuexState from './vuex';
+import VuexStateString from '!raw-loader!./vuex';
 import HorizontalLogin from './horizontal-login';
 import HorizontalLoginString from '!raw-loader!./horizontal-login';
 import Layout from './layout';
@@ -130,6 +132,9 @@ export default {
         <demo-container code={GlobalStateString}>
           <GlobalState />
         </demo-container>
+        <demo-container code={VuexStateString}>
+          <VuexState />
+        </demo-container>
         <demo-container code={NormalLoginString}>
           <NormalLogin />
         </demo-container>

components/form/demo/vuex.vue

@@ -0,0 +1,98 @@
+<cn>
+#### 表单数据存储于 Vuex Store 中
+通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到 Vuex 中。
+**注意：**
+`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。
+</cn>
+
+<us>
+#### Store Form Data into Vuex Store
+We can store form data into Vuex Store.
+**Note:**
+You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
+</us>
+
+
+<template>
+  <div id="components-form-demo-vuex">
+    <a-form
+      :form="form"
+      @submit="handleSubmit"
+    >
+      <a-form-item label="Username">
+        <a-input
+          v-decorator="[
+            'username',
+            {
+              rules: [{ required: true, message: 'Username is required!' }],
+            }
+          ]"
+        />
+      </a-form-item>
+      <a-button
+        type="primary"
+        html-type="submit"
+      >
+        Submit
+      </a-button>
+    </a-form>
+  </div>
+</template>
+
+<script>
+export default  {
+  computed: {
+    username () {
+      return this.$store.state.username;
+    },
+  },
+  watch: {
+    username (val) {
+      console.log('this.$store.state.username: ', val);
+      this.form.setFieldsValue({username: val});
+    },
+  },
+  created () {
+    this.form = this.$form.createForm(this, {
+      onFieldsChange: (_, changedFields) => {
+        this.$emit('change', changedFields);
+      },
+      mapPropsToFields: () => {
+        return {
+          username: this.$form.createFormField({
+            value: this.username,
+          }),
+        };
+      },
+      onValuesChange: (_, values) =>{
+        console.log(values);
+        // Synchronize to vuex store in real time 
+        // this.$store.commit('update', values)
+      },
+    });
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault();
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values);
+          this.$store.commit('update', values);
+        }
+      });
+    },
+  },
+};
+</script>
+<style>
+#components-form-demo-vuex .language-bash {
+  max-width: 400px;
+  border-radius: 6px;
+  margin-top: 24px;
+}
+</style>
+
+
+
+
+

components/style/core/base.less

@@ -238,7 +238,7 @@ a {
 
   &:focus {
     text-decoration: underline;
-    text-decoration-skip: ink;
+    text-decoration-skip-ink: auto;
   }
 
   &:hover {

components/tabs/index.en-US.md

@@ -5,7 +5,7 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| activeKey | Current TabPane's key | string | - |
+| activeKey(v-model) | Current TabPane's key | string | - |
 | animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
 | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |

components/tabs/index.zh-CN.md

@@ -5,7 +5,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string | 无 |
+| activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 |
 | animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |

components/vc-tabs/src/Tabs.jsx

@@ -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);

docs/vue/introduce.en-US.md

@@ -71,9 +71,9 @@ We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-desi
 ## Usage
 
 ```jsx
-import Vue from 'vue'
+import Vue from 'vue';
 import { DatePicker } from 'ant-design-vue';
-Vue.component(DatePicker.name, DatePicker)
+Vue.use(DatePicker);
 ```
 
 And import stylesheets manually:

docs/vue/introduce.zh-CN.md

@@ -71,9 +71,9 @@ $ yarn add ant-design-vue
 ## 示例
 
 ```jsx
-import Vue from 'vue'
+import Vue from 'vue';
 import { DatePicker } from 'ant-design-vue';
-Vue.component(DatePicker.name, DatePicker)
+Vue.use(DatePicker);
 ```
 
 引入样式：

package.json

@@ -165,6 +165,7 @@
     "vue-server-renderer": "^2.5.16",
     "vue-template-compiler": "^2.5.16",
     "vue-virtual-scroller": "^0.12.0",
+    "vuex": "^3.1.0",
     "webpack": "^4.28.4",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14",

site/dev.js

@@ -3,6 +3,7 @@ import '../components/style.js';
 import './index.less';
 import 'highlight.js/styles/solarized-light.css';
 import Vue from 'vue';
+import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import VueClipboard from 'vue-clipboard2';
@@ -11,9 +12,10 @@ import Api from './components/api';
 import './components';
 import demoBox from './components/demoBox';
 import demoContainer from './components/demoContainer';
-import Test from '../components/test/index.vue';
+import Test from '../components/form/demo/index.vue';
 import zhCN from './theme/zh-CN';
 import enUS from './theme/en-US';
+Vue.use(Vuex);
 Vue.use(VueClipboard);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
@@ -34,8 +36,20 @@ const router = new VueRouter({
   mode: 'history',
   routes: [{ path: '/*', component: Test }],
 });
+
+const store = new Vuex.Store({
+  state: {
+    username: 'zeka',
+  },
+  mutations: {
+    update(state, payload) {
+      state.username = payload.username;
+    },
+  },
+});
 new Vue({
   el: '#app',
   i18n,
   router,
+  store,
 });

site/index.js

@@ -4,6 +4,7 @@ import './index.less';
 import 'nprogress/nprogress.css';
 import 'highlight.js/styles/solarized-light.css';
 import Vue from 'vue';
+import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import VueClipboard from 'vue-clipboard2';
@@ -28,6 +29,7 @@ const mountedCallback = {
   },
 };
 
+Vue.use(Vuex);
 Vue.use(mountedCallback);
 Vue.use(VueClipboard);
 Vue.use(VueRouter);
@@ -56,8 +58,21 @@ router.beforeEach((to, from, next) => {
   }
   next();
 });
+
+const store = new Vuex.Store({
+  state: {
+    username: 'zeka',
+  },
+  mutations: {
+    update(state, payload) {
+      state.username = payload.username;
+    },
+  },
+});
+
 new Vue({
   el: '#app',
   i18n,
   router,
+  store,
 });

site/theme/static/common.less

@@ -18,7 +18,7 @@ a {
   transition: color 0.3s ease;
   &:focus {
     text-decoration: underline;
-    text-decoration-skip: ink;
+    text-decoration-skip-ink: auto;
   }
 }