feat: merge master

.github/FUNDING.yml

@@ -1,8 +1,8 @@
 # These are supported funding model platforms
 
-github: [tangjinzhou]
+github: # [tangjinzhou]
-patreon: # Replace with a single Patreon username
 open_collective: ant-design-vue
+patreon: tangjinzhou
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 custom: # Replace with a single custom sponsorship URL

CHANGELOG.en-US.md

@@ -10,6 +10,31 @@
 
 ---
 
+## 1.3.13
+`2019-07-22`
+- 🐞 Fix `dist` missing `antd.less` file problem [#995](https://github.com/vueComponent/ant-design-vue/issues/995)
+
+## 1.3.12
+`2019-07-22`
+- 🐞 `package.json` `files` add `scripts`
+
+## 1.3.11
+`2019-07-22`
+
+- Dropdown
+  - 🐞 Uodate disable style [#912](https://github.com/vueComponent/ant-design-vue/pull/912) [#921](https://github.com/vueComponent/ant-design-vue/pull/921)
+  - 🐞 Fix `SubMenu` flashing problem [#975](https://github.com/vueComponent/ant-design-vue/issues/970)
+- 🌟 `AutoComplete` `Cascader` `DatePicker` `DropDown` `Select` `TimePicker` add an instance of the popup reference `popupRef`  [f9373e](https://github.com/vueComponent/ant-design-vue/commit/f9373e44ce229ab0ba94ababbd686e6ad6e9f10f)
+- 🐞 Fix `DatePicker` can not open when placeholder is chinese at ie 10 and 11 [#865](https://github.com/vueComponent/ant-design-vue/issues/865)
+- 🌟 `DatePicker` add custom render trigger [#957](https://github.com/vueComponent/ant-design-vue/pull/957)
+- 🌟 `@ant-design/icons-vue` update to `^2.0.0`
+- 🌟 `Icon` add `focusable="false"` [#924](https://github.com/vueComponent/ant-design-vue/issues/924)
+- 🐞 Fix custom `Form` prompts for custom components. `warning` problem [#915](https://github.com/vueComponent/ant-design-vue/issues/915)
+- 🐞 Fix `FormItem` `v-decorator` error [#930](https://github.com/vueComponent/ant-design-vue/issues/930)
+- 🐞 Fixed an issue where the `Upload` component reported an error in `form.resetFields()` [#929](https://github.com/vueComponent/ant-design-vue/pull/929)
+- 🐞 Fix `Select` shows bounce problem [#970](https://github.com/vueComponent/ant-design-vue/issues/970)
+- 🐞 Fix TypeScript type definitions.
+
 ## 1.3.10
 `2019-06-11`
 - 🐞 Remove useless `module.export` of package. [#850](https://github.com/vueComponent/ant-design-vue/issues/850)

CHANGELOG.zh-CN.md

@@ -10,6 +10,31 @@
 
 ---
 
+## 1.3.13
+`2019-07-22`
+- 🐞 修复 dist 缺少 antd.less 文件问题 [#995](https://github.com/vueComponent/ant-design-vue/issues/995)
+
+## 1.3.12
+`2019-07-22`
+- 🐞 `package.json` `files` 添加 `scripts`
+
+## 1.3.11
+`2019-07-22`
+
+- Dropdown
+  - 🐞修复 `disable` 时的样式问题 [#912](https://github.com/vueComponent/ant-design-vue/pull/912) [#921](https://github.com/vueComponent/ant-design-vue/pull/921)
+  - 🐞修复 `SubMenu` 闪动问题 [#975](https://github.com/vueComponent/ant-design-vue/issues/970)
+- 🌟 `AutoComplete` `Cascader` `DatePicker` `DropDown` `Select` `TimePicker` 添加弹出内容的实例引用 `popupRef` [f9373e](https://github.com/vueComponent/ant-design-vue/commit/f9373e44ce229ab0ba94ababbd686e6ad6e9f10f)
+- 🐞 修复 `DatePicker` 在ie 10 11下 placeholder 为中文时不能打开的问题 [#865](https://github.com/vueComponent/ant-design-vue/issues/865)
+- 🌟 `DatePicker` 添加自定义渲染触发器功能  [#957](https://github.com/vueComponent/ant-design-vue/pull/957)
+- 🌟 `@ant-design/icons-vue` 升级为 `^2.0.0`
+- 🌟 `Icon` 添加属性 `focusable="false"` [#924](https://github.com/vueComponent/ant-design-vue/issues/924)
+- 🐞 修复自定义 `Form` 校验自定义组件时提示 `warning` 问题 [#915](https://github.com/vueComponent/ant-design-vue/issues/915)
+- 🐞 修复 `FormItem` `v-decorator` 指令报错问题 [#930](https://github.com/vueComponent/ant-design-vue/issues/930)
+- 🐞 修复 `Upload` 组件在 `form.resetFields()` 时报错问题 [#929](https://github.com/vueComponent/ant-design-vue/pull/929)
+- 🐞 修复 `Select` 显示跳动问题 [#970](https://github.com/vueComponent/ant-design-vue/issues/970)
+- 🐞 修复 TypeScript 类型定义。
+
 ## 1.3.10
 `2019-06-11`
 - 🐞 移除打包后多余的 `module.export` [#850](https://github.com/vueComponent/ant-design-vue/issues/850)

README-zh_CN.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://vue.ant.design/">
-    <img width="200" src="https://cdn.nlark.com/yuque/0/2019/png/87084/1550242938266-assets/web-upload/6011a606-2f3e-4a7a-b58d-28116e39de04.png">
+    <img width="200" src="http://pvrd7go2h.bkt.clouddn.com/logo.png">
   </a>
 </p>
 
@@ -91,7 +91,7 @@ ant-design-vue是MIT协议的开源项目。为了项目能够更好的持续的
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)
+- [支付宝或微信](http://pvrd7go2h.bkt.clouddn.com/alipay-and-wechat.png)
 
 ## Backers
 

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://vue.ant.design/">
-    <img width="200" src="https://cdn.nlark.com/yuque/0/2019/png/87084/1550242938266-assets/web-upload/6011a606-2f3e-4a7a-b58d-28116e39de04.png">
+    <img width="200" src="http://pvrd7go2h.bkt.clouddn.com/logo.png">
   </a>
 </p>
 
@@ -86,7 +86,7 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
 - [Patreon](https://www.patreon.com/tangjinzhou)
 - [opencollective](https://opencollective.com/ant-design-vue)
 - [paypal](https://www.paypal.me/tangjinzhou)
-- [支付宝或微信](https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png)
+- [支付宝或微信](http://pvrd7go2h.bkt.clouddn.com/alipay-and-wechat.png)
 
 ## Backers
 

antd-tools/cli/run.js

@@ -13,6 +13,28 @@ program.on('--help', () => {
 
 program.parse(process.argv);
 
+function runTask(toRun) {
+  const metadata = { task: toRun };
+  // Gulp >= 4.0.0 (doesn't support events)
+  const taskInstance = gulp.task(toRun);
+  if (taskInstance === undefined) {
+    gulp.emit('task_not_found', metadata);
+    return;
+  }
+  const start = process.hrtime();
+  gulp.emit('task_start', metadata);
+  try {
+    taskInstance.apply(gulp);
+    metadata.hrDuration = process.hrtime(start);
+    gulp.emit('task_stop', metadata);
+    gulp.emit('stop');
+  } catch (err) {
+    err.hrDuration = process.hrtime(start);
+    err.task = metadata.task;
+    gulp.emit('task_err', err);
+  }
+}
+
 const task = program.args[0];
 
 if (!task) {
@@ -22,5 +44,5 @@ if (!task) {
 
   require('../gulpfile');
 
-  gulp.start(task);
+  runTask(task);
 }

antd-tools/gulpfile.js

@@ -204,24 +204,30 @@ function githubRelease(done) {
     });
 }
 
-gulp.task('tag', done => {
+gulp.task(
-  tag();
+  'tag',
-  githubRelease(done);
+  gulp.series(done => {
-});
+    tag();
+    githubRelease(done);
+  }),
+);
 
-gulp.task('check-git', done => {
+gulp.task(
-  runCmd('git', ['status', '--porcelain'], (code, result) => {
+  'check-git',
-    if (/^\?\?/m.test(result)) {
+  gulp.series(done => {
-      return done(`There are untracked files in the working tree.\n${result}
+    runCmd('git', ['status', '--porcelain'], (code, result) => {
+      if (/^\?\?/m.test(result)) {
+        return done(`There are untracked files in the working tree.\n${result}
       `);
-    }
+      }
-    if (/^([ADRM]| [ADRM])/m.test(result)) {
+      if (/^([ADRM]| [ADRM])/m.test(result)) {
-      return done(`There are uncommitted changes in the working tree.\n${result}
+        return done(`There are uncommitted changes in the working tree.\n${result}
       `);
-    }
+      }
-    return done();
+      return done();
-  });
+    });
-});
+  }),
+);
 
 function publish(tagString, done) {
   let args = ['publish', '--with-antd-tools'];
@@ -265,86 +271,104 @@ function pub(done) {
   });
 }
 
-gulp.task('dist', ['compile'], done => {
+gulp.task(
-  dist(done);
+  'compile-with-es',
-});
+  gulp.series(done => {
-gulp.task('compile', ['compile-with-es'], done => {
+    compile(false).on('finish', function() {
-  compile().on('finish', function() {
+      done();
-    done();
-  });
-});
-gulp.task('compile-with-es', done => {
-  compile(false).on('finish', function() {
-    done();
-  });
-});
-
-gulp.task('pub', ['check-git', 'compile'], done => {
-  if (!process.env.GITHUB_TOKEN) {
-    console.log('no GitHub token found, skip');
-  } else {
-    pub(done);
-  }
-});
-
-gulp.task('pub-with-ci', done => {
-  if (!process.env.NPM_TOKEN) {
-    console.log('no NPM token found, skip');
-  } else {
-    const github = new GitHub();
-    github.authenticate({
-      type: 'oauth',
-      token: process.env.GITHUB_TOKEN,
     });
-    const [_, owner, repo] = execSync('git remote get-url origin') // eslint-disable-line
+  }),
-      .toString()
+);
-      .match(/github.com[:/](.+)\/(.+)\.git/);
-    const getLatestRelease = github.repos.getLatestRelease({
-      owner,
-      repo,
-    });
-    const getCommits = github.repos.getCommits({
-      owner,
-      repo,
-      per_page: 1,
-    });
-    Promise.all([getLatestRelease, getCommits]).then(([latestRelease, commits]) => {
-      const preVersion = latestRelease.data.tag_name;
-      const { version } = packageJson;
-      const [_, newVersion] = commits.data[0].commit.message.trim().match(/bump (.+)/) || []; // eslint-disable-line
-      if (
-        compareVersions(version, preVersion) === 1 &&
-        newVersion &&
-        newVersion.trim() === version
-      ) {
-        gulp.run('pub', err => {
-          err && console.log('err', err);
-          done();
-        });
-      } else {
-        console.log('donot need publish' + version);
-      }
-    });
-  }
-});
 
-function reportError() {
+gulp.task(
-  console.log(chalk.bgRed('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'));
+  'compile',
-  console.log(chalk.bgRed('!! `npm publish` is forbidden for this package. !!'));
+  gulp.series('compile-with-es', done => {
-  console.log(chalk.bgRed('!! Use `npm run pub` instead.        !!'));
+    compile().on('finish', function() {
-  console.log(chalk.bgRed('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'));
+      done();
-}
+    });
+  }),
+);
 
-gulp.task('guard', done => {
+gulp.task(
-  const npmArgs = getNpmArgs();
+  'dist',
-  if (npmArgs) {
+  gulp.series('compile', done => {
-    for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
+    dist(done);
-      if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
+  }),
-        reportError();
+);
-        done(1);
+
-        return;
+gulp.task(
+  'pub',
+  gulp.series('check-git', 'compile', done => {
+    if (!process.env.GITHUB_TOKEN) {
+      console.log('no GitHub token found, skip');
+    } else {
+      pub(done);
+    }
+  }),
+);
+
+gulp.task(
+  'pub-with-ci',
+  gulp.series(done => {
+    if (!process.env.NPM_TOKEN) {
+      console.log('no NPM token found, skip');
+    } else {
+      const github = new GitHub();
+      github.authenticate({
+        type: 'oauth',
+        token: process.env.GITHUB_TOKEN,
+      });
+      const [_, owner, repo] = execSync('git remote get-url origin') // eslint-disable-line
+        .toString()
+        .match(/github.com[:/](.+)\/(.+)\.git/);
+      const getLatestRelease = github.repos.getLatestRelease({
+        owner,
+        repo,
+      });
+      const listCommits = github.repos.listCommits({
+        owner,
+        repo,
+        per_page: 1,
+      });
+      Promise.all([getLatestRelease, listCommits]).then(([latestRelease, commits]) => {
+        const preVersion = latestRelease.data.tag_name;
+        const { version } = packageJson;
+        const [_, newVersion] = commits.data[0].commit.message.trim().match(/bump (.+)/) || []; // eslint-disable-line
+        if (
+          compareVersions(version, preVersion) === 1 &&
+          newVersion &&
+          newVersion.trim() === version
+        ) {
+          runCmd('npm', ['pub'], code => {
+            done();
+          });
+        } else {
+          console.log('donot need publish' + version);
+        }
+      });
+    }
+  }),
+);
+
+gulp.task(
+  'guard',
+  gulp.series(done => {
+    function reportError() {
+      console.log(chalk.bgRed('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'));
+      console.log(chalk.bgRed('!! `npm publish` is forbidden for this package. !!'));
+      console.log(chalk.bgRed('!! Use `npm run pub` instead.        !!'));
+      console.log(chalk.bgRed('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'));
+    }
+    const npmArgs = getNpmArgs();
+    if (npmArgs) {
+      for (let arg = npmArgs.shift(); arg; arg = npmArgs.shift()) {
+        if (/^pu(b(l(i(sh?)?)?)?)?$/.test(arg) && npmArgs.indexOf('--with-antd-tools') < 0) {
+          reportError();
+          done(1);
+          return;
+        }
       }
     }
-  }
+    done();
-  done();
+  }),
-});
+);

components/_util/props-util.js

@@ -44,6 +44,11 @@ const filterProps = (props, propsData = {}) => {
   });
   return res;
 };
+
+const getScopedSlots = ele => {
+  return (ele.data && ele.data.scopedSlots) || {};
+};
+
 const getSlots = ele => {
   let componentOptions = ele.componentOptions || {};
   if (ele.$vnode) {
@@ -58,7 +63,7 @@ const getSlots = ele => {
       slots[name].push(child);
     }
   });
-  return slots;
+  return { ...slots, ...getScopedSlots(ele) };
 };
 const getSlot = (self, name = 'default', options = {}) => {
   return (
@@ -67,6 +72,7 @@ const getSlot = (self, name = 'default', options = {}) => {
     []
   );
 };
+
 const getAllChildren = ele => {
   let componentOptions = ele.componentOptions || {};
   if (ele.$vnode) {

components/_util/vnode.js

@@ -1,4 +1,6 @@
 import { filterEmpty, parseStyleText } from './props-util';
+import classNames from 'classnames';
+
 export function cloneVNode(vnode, deep) {
   const componentOptions = vnode.componentOptions;
   const data = vnode.data;
@@ -88,6 +90,12 @@ export function cloneElement(n, nodeProps = {}, deep) {
     data.class.split(' ').forEach(c => {
       cls[c.trim()] = true;
     });
+  } else if (Array.isArray(data.class)) {
+    classNames(data.class)
+      .split(' ')
+      .forEach(c => {
+        cls[c.trim()] = true;
+      });
   } else {
     cls = { ...data.class, ...cls };
   }

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
-<div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
@@ -17,7 +17,7 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
 <div class="certain-category-search-wrapper" style="width: 250px;">
-  <div class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
+  <div tabindex="-1" class="certain-category-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
@@ -33,7 +33,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
 `;
 
 exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
-<div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
       <ul>
@@ -47,7 +47,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
 `;
 
 exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly 1`] = `
-<div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
@@ -62,7 +62,7 @@ exports[`renders ./components/auto-complete/demo/non-case-sensitive.md correctly
 `;
 
 exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
-<div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>
@@ -78,7 +78,7 @@ exports[`renders ./components/auto-complete/demo/options.md correctly 1`] = `
 
 exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly 1`] = `
 <div class="global-search-wrapper" style="width: 300px;">
-  <div class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
+  <div tabindex="-1" class="global-search ant-select ant-select-combobox ant-select-enabled ant-select-lg ant-select-lg ant-select-show-search ant-select-auto-complete" style="width: 100%;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input here</div>

components/auto-complete/index.jsx

@@ -59,7 +59,15 @@ const AutoComplete = {
   inject: {
     configProvider: { default: () => ({}) },
   },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     getInputElement() {
       const { $slots } = this;
       const children = filterEmpty($slots.default);
@@ -136,8 +144,8 @@ const AutoComplete = {
       on: $listeners,
     };
     return <Select {...selectProps}>{options}</Select>;
-  },
+  }
-};
+}
 
 /* istanbul ignore next */
 AutoComplete.install = function(Vue) {

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

@@ -3,14 +3,14 @@
 exports[`renders ./components/calendar/demo/basic.md correctly 1`] = `
 <div class=" ant-fullcalendar-fullscreen">
   <div class="ant-fullcalendar-header">
-    <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
       <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="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
         </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-    <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
       <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="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
@@ -309,14 +309,14 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 <div style="width: 300px; border: 1px solid #d9d9d9; border-radius: 4px;">
   <div class="">
     <div class="ant-fullcalendar-header">
-      <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
+      <div tabindex="-1" class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
         <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="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
           </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-      <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
+      <div tabindex="-1" class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
         <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="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
@@ -615,14 +615,14 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
 exports[`renders ./components/calendar/demo/notice-calendar.md correctly 1`] = `
 <div class=" ant-fullcalendar-fullscreen">
   <div class="ant-fullcalendar-header">
-    <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
       <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="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
         </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-    <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
       <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="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
@@ -1028,14 +1028,14 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
   <div style="display: inline-block; width: 500px; border: 1px solid #d9d9d9; border-radius: 4px;">
     <div class=" ant-fullcalendar-fullscreen">
       <div class="ant-fullcalendar-header">
-        <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+        <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
           <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="2017" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2017</div>
             </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-        <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+        <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
           <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="Jan" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Jan</div>
@@ -1332,14 +1332,14 @@ exports[`renders ./components/calendar/demo/select.md correctly 1`] = `
   <div style="display: inline-block; width: 500px; margin-left: 20px; border: 1px solid #d9d9d9; border-radius: 4px;">
     <div class=" ant-fullcalendar-fullscreen">
       <div class="ant-fullcalendar-header">
-        <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+        <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
           <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="2017" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2017</div>
             </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-        <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+        <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
           <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="Jan" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Jan</div>

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

@@ -3,14 +3,14 @@
 exports[`Calendar Calendar should support locale 1`] = `
 <div class=" ant-fullcalendar-fullscreen">
   <div class="ant-fullcalendar-header">
-    <div class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
       <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="2018年" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2018年</div>
         </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-    <div class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
       <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="Oct" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Oct</div>

components/cascader/index.jsx

@@ -142,6 +142,11 @@ const Cascader = {
     prop: 'value',
     event: 'change',
   },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
   inject: {
     configProvider: { default: () => ({}) },
     localeData: { default: () => ({}) },
@@ -178,6 +183,9 @@ const Cascader = {
     },
   },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     highlightKeyword(str, keyword, prefixCls) {
       return str
         .split(keyword)

components/date-picker/RangePicker.jsx

@@ -426,6 +426,7 @@ export default {
           openChange: this.handleOpenChange,
         },
         style: popupStyle,
+        scopedSlots: { default: input, ...$scopedSlots },
       },
     );
     return (
@@ -439,7 +440,7 @@ export default {
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >
-        <VcDatePicker {...vcDatePickerProps}>{input}</VcDatePicker>
+        <VcDatePicker {...vcDatePickerProps} />
       </span>
     );
   },

components/date-picker/__tests__/WeekPicker.test.js

@@ -5,7 +5,7 @@ import focusTest from '../../../tests/shared/focusTest';
 
 const { WeekPicker } = DatePicker;
 
-describe('WeekPicker', async () => {
+describe('WeekPicker', () => {
   focusTest(WeekPicker);
 
   it('should support style prop', async () => {

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

@@ -70,6 +70,12 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
     </svg></i></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i slot="suffixIcon" aria-label="icon: smile" class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon">ab</span></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></span></span></div>
 `;
 
+exports[`renders ./components/date-picker/demo/text.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><span class="">SelectTime</span></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="">
+    请选择
+    </span></span></div>
+`;
+
 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
 <div><span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Select Time" class="ant-calendar-picker-input ant-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start Time" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End Time" tabindex="-1" class="ant-calendar-range-picker-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
       <path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path>

components/date-picker/__tests__/showTime.test.js

@@ -137,7 +137,7 @@ describe('DatePicker with showTime', () => {
   });
 });
 
-describe('RangePicker with showTime', async () => {
+describe('RangePicker with showTime', () => {
   it('should trigger onChange when select value', async () => {
     const onChangeFn = jest.fn();
     const onOpenChangeFn = jest.fn();

components/date-picker/createPicker.js

@@ -255,6 +255,7 @@ export default function createPicker(TheCalendar, props) {
           onOpenChange: this.handleOpenChange,
         },
         style: props.popupStyle,
+        scopedSlots: { default: input, ...$scopedSlots },
       };
       return (
         <span
@@ -266,7 +267,7 @@ export default function createPicker(TheCalendar, props) {
           onMouseenter={this.onMouseEnter}
           onMouseleave={this.onMouseLeave}
         >
-          <VcDatePicker {...vcDatePickerProps}>{input}</VcDatePicker>
+          <VcDatePicker {...vcDatePickerProps} />
         </span>
       );
     },

components/date-picker/demo/index.vue

@@ -11,6 +11,7 @@ import Size from './size';
 import StartEnd from './start-end';
 import Time from './time';
 import Suffix from './suffix';
+import Text from './text';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 const md = {
@@ -47,6 +48,7 @@ export default {
         <Size/>
         <StartEnd/>
         <Time/>
+        <Text />
         <Suffix />
         <api>
           <CN slot='cn' />

components/date-picker/demo/text.md

@@ -0,0 +1,55 @@
+
+<cn>
+#### 自定义渲染
+增加自定义渲染功能，在默认 `slot` 中，你可以设置任何你想渲染的组件。
+</cn>
+
+<us>
+#### Custum Time
+Added custom rendering function, in the default `slot', you can set any component you want to render..
+</us>
+
+```html
+<template>
+  <div>
+    <a-date-picker
+      placeholder="Select Time"
+      v-model="time1"
+      @change="onChange"
+      @ok="onOk"
+    >
+      <span>{{time1?time1:'SelectTime'}}</span>
+    </a-date-picker>
+    <br />
+    <a-range-picker v-model="time2">
+      <span>
+      {{time2?time2:'请选择'}}
+      </span>
+    </a-range-picker>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+    data(){
+        return {
+            time1:undefined,
+            time2:undefined
+        }
+    },
+  methods: {
+    onChange(value, dateString) {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    },
+    onOk(value) {
+      console.log('onOk: ', value);
+    },
+    clearTime(){
+      this.time1 = undefined
+    }
+  }
+}
+</script>
+```
+

components/date-picker/wrapPicker.js

@@ -52,6 +52,11 @@ export default function wrapPicker(Picker, props, pickerType) {
     inject: {
       configProvider: { default: () => ({}) },
     },
+    provide() {
+      return {
+        savePopupRef: this.savePopupRef,
+      };
+    },
     mounted() {
       const { autoFocus, disabled } = this;
       if (autoFocus && !disabled) {
@@ -61,6 +66,9 @@ export default function wrapPicker(Picker, props, pickerType) {
       }
     },
     methods: {
+      savePopupRef(ref) {
+        this.popupRef = ref;
+      },
       handleOpenChange(open) {
         this.$emit('openChange', open);
       },

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

@@ -14,7 +14,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
   <div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div>
-  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+  <div class="ant-btn-group ant-dropdown-button" style="margin-left: 8px;"><button disabled="disabled" type="button" class="ant-btn ant-btn-default"><span>Dropdown</span></button><button disabled="disabled" type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
           <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
         </svg></i></button></div> <button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger" style="margin-left: 8px;"><span>Button</span><i aria-label="icon: down" class="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>

components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownButton should support href like Button 1`] = `
-<div class="ant-btn-group ant-dropdown-button"><a href="https://ant.design" class="ant-btn ant-btn-default"></a><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+<div class="ant-btn-group ant-dropdown-button"><button type="button" class="ant-btn ant-btn-default"></button><button type="button" class="ant-btn ant-btn-default ant-dropdown-trigger"><i aria-label="icon: ellipsis" class="anticon anticon-ellipsis"><svg viewBox="64 64 896 896" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
         <path d="M176 511a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm280 0a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"></path>
       </svg></i></button></div>
 `;

components/dropdown/dropdown-button.jsx

@@ -13,6 +13,7 @@ const DropdownButtonProps = {
   ...ButtonGroupProps,
   ...DropdownProps,
   type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'danger', 'default']).def('default'),
+  size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
   htmlType: ButtonTypesProps.htmlType,
   href: PropTypes.string,
   disabled: PropTypes.bool,
@@ -27,7 +28,18 @@ export default {
     event: 'visibleChange',
   },
   props: DropdownButtonProps,
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     onClick(e) {
       this.$emit('click', e);
     },
@@ -35,9 +47,6 @@ export default {
       this.$emit('visibleChange', val);
     },
   },
-  inject: {
-    configProvider: { default: () => ({}) },
-  },
   render() {
     const {
       type,
@@ -71,20 +80,21 @@ export default {
       dropdownProps.props.visible = visible;
     }
 
+    const buttonGroupProps = {
+      props: {
+        ...restProps,
+      },
+      class: prefixCls,
+    };
+
     return (
-      <ButtonGroup {...restProps} class={prefixCls}>
+      <ButtonGroup {...buttonGroupProps}>
-        <Button
+        <Button type={type} disabled={disabled} onClick={this.onClick} htmlType={htmlType}>
-          type={type}
-          disabled={disabled}
-          onClick={this.onClick}
-          htmlType={htmlType}
-          href={href}
-        >
           {this.$slots.default}
         </Button>
         <Dropdown {...dropdownProps}>
           <template slot="overlay">{getComponentFromProp(this, 'overlay')}</template>
-          <Button type={type} icon="ellipsis" />
+          <Button type={type} disabled={disabled} icon="ellipsis" />
         </Dropdown>
       </ButtonGroup>
     );

components/dropdown/dropdown.jsx

@@ -21,10 +21,18 @@ const Dropdown = {
     prop: 'visible',
     event: 'visibleChange',
   },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
   inject: {
     configProvider: { default: () => ({}) },
   },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     getTransitionName() {
       const { placement = '', transitionName } = this.$props;
       if (transitionName !== undefined) {

components/dropdown/getDropdownProps.js

@@ -22,4 +22,5 @@ export default () => ({
   mouseEnterDelay: PropTypes.number,
   mouseLeaveDelay: PropTypes.number,
   openClassName: PropTypes.string,
+  minOverlayWidthMatchTrigger: PropTypes.bool,
 });

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

@@ -12,7 +12,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
   <div class="ant-divider ant-divider-horizontal"></div>
   <div class="config-provider">
     <h3>Select</h3>
-    <div class="ant-select ant-select-enabled" style="width: 200px;">
+    <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
       <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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>

components/form/FormItem.jsx

@@ -430,9 +430,9 @@ export default {
         const directive = find(vnode.data.directives, ['name', 'decorator']);
         warning(
           !directive || (directive && Array.isArray(directive.value)),
-          `Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof directive.value}. At ${
+          `Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive
-            vnode.tag
+            ? directive.value
-          }.`,
+            : directive)}. At ${vnode.tag}.`,
         );
         return directive ? directive.value : null;
       } else {

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

@@ -131,7 +131,7 @@ exports[`renders ./components/form/demo/coordinated.vue correctly 1`] = `
   <div class="ant-row ant-form-item">
     <div class="ant-col-5 ant-form-item-label"><label for="coordinated_gender" title="Gender" class="ant-form-item-required">Gender</label></div>
     <div class="ant-col-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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"><div tabindex="-1" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
     <!---->
   </div>
@@ -153,7 +153,7 @@ exports[`renders ./components/form/demo/customized-form-controls.vue correctly 1
     <div class="ant-form-item-label"><label for="customized_form_controls_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"><span data-__meta="[object Object]" data-__field="[object Object]" id="customized_form_controls_price" class=""><span class="ant-input-affix-wrapper" style="width: 63%; margin-right: 2%;"><input type="text" class="ant-input"></span>
-        <div class="ant-select ant-select-enabled" style="width: 32%;">
+        <div tabindex="-1" 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>
@@ -411,7 +411,7 @@ 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="register_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="register_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;">
+      <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 tabindex="-1" class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="register_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" style="user-select: none;"><i aria-label="icon: down" 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 class="ant-input-affix-wrapper"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_phone" class="ant-input"></span></span></span></span>
@@ -422,7 +422,7 @@ 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="register_website" title="Website" class="ant-form-item-required">Website</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"><div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">website</div><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">website</div><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><span class="ant-input-affix-wrapper ant-select-search__field" value=""><input type="text" value="" class="ant-input"></span><span class="ant-select-search__field__mirror">&nbsp;</span></div>
       </li>
       </ul>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
@@ -542,7 +542,7 @@ 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="validate_other_select" title="Select" class="ant-form-item-required">Select</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-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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"><div tabindex="-1" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
     <!---->
   </div>
@@ -551,7 +551,7 @@ 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="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</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-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
       </li>
     </div>
   </div>
@@ -748,7 +748,7 @@ 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;">
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div tabindex="-1" 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" style="user-select: none;"><i aria-label="icon: down" 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 aria-label="icon: close-circle" 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>

components/form/index.en-US.md

@@ -69,7 +69,7 @@ If the form has been decorated by `Form.create` then it has `this.form` property
 | isFieldValidating | Check if the specified field is being validated. | Function(name) |
 | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
 | setFields | Set value and error state of fields. | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
-| setFieldsValue | Set the value of a field. | Function({ [fieldName]&#x3A; value } |
+| setFieldsValue | Set the value of a field. | Function({ [fieldName]&#x3A; value }) |
 | validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void |
 | validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
 

components/form/index.zh-CN.md

@@ -67,7 +67,7 @@ export default {
 | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
 | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
 | setFields | 设置一组输入控件的值与错误状态。 | Function({ [fieldName]: { value: any, errors: [Error] } }) |
-| setFieldsValue | 设置一组输入控件的值 | Function({ [fieldName]: value } |
+| setFieldsValue | 设置一组输入控件的值 | Function({ [fieldName]: value }) |
 | validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
 | validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
 

components/icon/index.js

@@ -161,6 +161,84 @@ const Icon = {
         scopedSlots={{ default: locale => renderIcon(h, locale, context) }}
       />
     );
+
+    const classString = classNames({
+      ...getClass(context),
+      [`anticon`]: true,
+      [`anticon-${type}`]: !!type,
+    });
+
+    const svgClassString = classNames({
+      [`anticon-spin`]: !!spin || type === 'loading',
+    });
+
+    let innerNode;
+
+    // component > children > type
+    if (Component) {
+      const innerSvgProps = {
+        attrs: {
+          ...svgBaseProps,
+          viewBox,
+        },
+        class: svgClassString,
+      };
+      if (!viewBox) {
+        delete innerSvgProps.attrs.viewBox;
+      }
+
+      innerNode = <Component {...innerSvgProps}>{children}</Component>;
+    }
+    if (children) {
+      warning(
+        Boolean(viewBox) || (children.length === 1 && children[0].tag === 'use'),
+        'Make sure that you provide correct `viewBox`' +
+          ' prop (default `0 0 1024 1024`) to the icon.',
+      );
+      const innerSvgProps = {
+        attrs: {
+          ...svgBaseProps,
+        },
+        class: svgClassString,
+      };
+      innerNode = (
+        <svg {...innerSvgProps} viewBox={viewBox}>
+          {children}
+        </svg>
+      );
+    }
+
+    if (typeof type === 'string') {
+      let computedType = type;
+      if (theme) {
+        const themeInName = getThemeFromTypeName(type);
+        warning(
+          !themeInName || theme === themeInName,
+          `The icon name '${type}' already specify a theme '${themeInName}',` +
+            ` the 'theme' prop '${theme}' will be ignored.`,
+        );
+      }
+      computedType = withThemeSuffix(
+        removeTypeTheme(alias(computedType)),
+        dangerousTheme || theme || defaultTheme,
+      );
+      innerNode = (
+        <VueIcon
+          focusable="false"
+          class={svgClassString}
+          type={computedType}
+          primaryColor={twoToneColor}
+        />
+      );
+    }
+    // functional component not support nativeOn，https://github.com/vuejs/vue/issues/7526
+    const iProps = {
+      ...data,
+      on: { ...listeners, ...data.nativeOn },
+      class: classString,
+      staticClass: '',
+    };
+    return <i {...iProps}>{innerNode}</i>;
   },
 };
 

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

@@ -3,8 +3,8 @@
 exports[`renders ./components/input/demo/addon.md correctly 1`] = `
 <div>
   <div style="margin-bottom: 16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon">Http://</span><span class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span><span class="ant-input-group-addon">.com</span></span></span></div>
-  <div style="margin-bottom: 16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 90px;"><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="Http://" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Http://</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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 style="margin-bottom: 16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div tabindex="-1" class="ant-select ant-select-enabled" style="width: 90px;"><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="Http://" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Http://</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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 class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span><span class="ant-input-group-addon"><div class="ant-select ant-select-enabled" style="width: 80px;"><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=".com" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">.com</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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 class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span><span class="ant-input-group-addon"><div tabindex="-1" class="ant-select ant-select-enabled" style="width: 80px;"><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=".com" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">.com</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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></span></div>
 <div style="margin-bottom: 16px;"><span class="ant-input-group-wrapper"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span><span class="ant-input-group-addon"><i slot="addonAfter" aria-label="icon: setting" class="anticon anticon-setting"><svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></i></span></span></span></div>
 </div>
@@ -22,21 +22,21 @@ exports[`renders ./components/input/demo/basic.md correctly 1`] = `<span class="
 exports[`renders ./components/input/demo/group.md correctly 1`] = `
 <div><span class="ant-input-group ant-input-group-lg"><div class="ant-row" style="margin-left: -4px; margin-right: -4px;"><div class="ant-col-5" style="padding-left: 4px; padding-right: 4px;"><span class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span></div>
 <div class="ant-col-8" style="padding-left: 4px; padding-right: 4px;"><span class="ant-input-affix-wrapper"><input type="text" class="ant-input"></span></div>
-</div></span> <br> <span class="ant-input-group ant-input-group-compact"><span class="ant-input-affix-wrapper" style="width: 20%;"><input type="text" class="ant-input"></span><span class="ant-input-affix-wrapper" style="width: 30%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><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="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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> <br> <span class="ant-input-group ant-input-group-compact"><span class="ant-input-affix-wrapper" style="width: 20%;"><input type="text" class="ant-input"></span><span class="ant-input-affix-wrapper" style="width: 30%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" 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="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><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="Option1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" 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="Option1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><span class="ant-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span><span class="ant-calendar-picker" style="width: 50%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><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="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><span class="ant-input-affix-wrapper" style="width: 50%;"><input type="text" class="ant-input"></span><span class="ant-calendar-picker" style="width: 50%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><i aria-label="icon: calendar" class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></i></div></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" 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="Option1-1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option1-1</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-<div class="ant-select ant-select-enabled">
+<div tabindex="-1" 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="Option2-2" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Option2-2</div>
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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> <br> <span class="ant-input-group ant-input-group-compact"><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="Between" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Between</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
+</span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" 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="Between" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Between</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 100px; text-align: center;"><input placeholder="Minimum" type="text" class="ant-input"></span><span class="ant-input-affix-wrapper" style="width: 30px; border-left: 0; pointer-events: none; background-color: rgb(255, 255, 255);"><input placeholder="~" type="text" disabled="disabled" class="ant-input ant-input-disabled"></span><span class="ant-input-affix-wrapper" style="width: 100px; text-align: center; border-left: 0;"><input placeholder="Maximum" type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><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="Sign Up" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Sign Up</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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-input-affix-wrapper" style="width: 100px; text-align: center;"><input placeholder="Minimum" type="text" class="ant-input"></span><span class="ant-input-affix-wrapper" style="width: 30px; border-left: 0; pointer-events: none; background-color: rgb(255, 255, 255);"><input placeholder="~" type="text" disabled="disabled" class="ant-input ant-input-disabled"></span><span class="ant-input-affix-wrapper" style="width: 100px; text-align: center; border-left: 0;"><input placeholder="Maximum" type="text" class="ant-input"></span></span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" 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="Sign Up" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Sign Up</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-<div class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" style="width: 200px;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Email</div>
@@ -48,7 +48,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
     </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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> <br> <span class="ant-input-group ant-input-group-compact"><div class="ant-select ant-select-enabled" style="width: 30%;"><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="Home" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Home</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
+</span> <br> <span class="ant-input-group ant-input-group-compact"><div tabindex="-1" class="ant-select ant-select-enabled" style="width: 30%;"><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="Home" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Home</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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 tabindex="0" class="ant-cascader-picker" style="width: 70%;"><span class="ant-input-affix-wrapper ant-cascader-input "><input placeholder="Select Address" type="text" readonly="true" class="ant-input"></span><span class="ant-cascader-picker-label"></span><i aria-label="icon: down" class="ant-cascader-picker-arrow 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></span></div>

components/input/__tests__/index.test.js

@@ -43,7 +43,7 @@ describe('TextArea', () => {
 
     await asyncExpect(() => {
       expect(mockFunc).toHaveBeenCalledTimes(2);
-    }, 0);
+    }, 100);
   });
 
   it('should support disabled', async () => {

components/locale-provider/__tests__/__snapshots__/demo.test.js.snap

@@ -20,7 +20,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
                 <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
               </svg></i></a></li>
         <li class="ant-pagination-options">
-          <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+          <div tabindex="-1" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
             <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="10 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 / page</div>
@@ -31,7 +31,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
       </ul>
     </div>
     <div class="example">
-      <div class="ant-select ant-select-enabled" style="width: 200px;">
+      <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
         <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 class="ant-select-search ant-select-search--inline" style="display: none;">
@@ -84,14 +84,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
     <div style="width: 319px; border: 1px solid #d9d9d9; border-radius: 4px;">
       <div class="">
         <div class="ant-fullcalendar-header">
-          <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
+          <div tabindex="-1" class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-year-select">
             <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="2016" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2016</div>
               </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-          <div class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
+          <div tabindex="-1" class="ant-select ant-select-enabled ant-select-sm ant-fullcalendar-month-select">
             <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="Nov" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Nov</div>
@@ -404,7 +404,7 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
           <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
         </svg></i></a></li>
   <li class="ant-pagination-options">
-    <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
       <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="10 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 / page</div>

components/modal/ConfirmDialog.jsx

@@ -92,9 +92,13 @@ export default {
       >
         <div class={`${contentPrefixCls}-body-wrapper`}>
           <div class={`${contentPrefixCls}-body`}>
-            {iconNode}
+            <Icon type={iconType} />
-            <span class={`${contentPrefixCls}-title`}>{props.title}</span>
+            <span class={`${contentPrefixCls}-title`}>
-            <div class={`${contentPrefixCls}-content`}>{props.content}</div>
+              {typeof props.title === 'function' ? props.title(h) : props.title}
+            </span>
+            <div class={`${contentPrefixCls}-content`}>
+              {typeof props.content === 'function' ? props.content(h) : props.content}
+            </div>
           </div>
           <div class={`${contentPrefixCls}-btns`}>
             {cancelButton}

components/modal/demo/confirm.md

@@ -29,7 +29,7 @@ export default {
     showConfirm() {
       this.$confirm({
         title: 'Do you Want to delete these items?',
-        content: 'Some descriptions',
+        content: h => <div style="color:red;">Some descriptions</div>,
         onOk() {
           console.log('OK');
         },

components/modal/index.en-US.md

@@ -56,9 +56,8 @@ The properties of the object are follows:
 | centered | Centered Modal | Boolean | `false` |
 | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` |
 | class | class of container | string | - |
-| content | Content | string\|vNode | - |
+| content | Content | string\|vNode \|function(h) | - |
-| icon | custom icon (`Added in 1.40.0`) | string\|slot | `<Icon type="question-circle">` |
+| iconType | Icon `type` of the Icon component | string | `question-circle` |
-| iconType | Icon `type` of the Icon component (deperated after `1.40.0`) | string | `question-circle` |
 | keyboard | Whether support press esc to close | Boolean | true |
 | mask | Whether show mask or not. | Boolean | true |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
@@ -66,7 +65,7 @@ The properties of the object are follows:
 | okType | Button `type` of the OK button | string | `primary` |
 | okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
 | cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
-| title | Title | string\|vNode | - |
+| title | Title | string\|vNode \|function(h) | - |
 | width | Width of the modal dialog | string\|number | 416 |
 | zIndex | The `z-index` of the Modal | Number | 1000 |
 | onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |

components/modal/index.zh-CN.md

@@ -55,17 +55,15 @@
 | centered | 垂直居中展示 Modal | Boolean | `false` |
 | closable | 是否显示右上角的关闭按钮 | boolean | `false` |
 | class | 容器类名 | string | - |
-| content | 内容 | string\|vNode | 无 |
+| content | 内容 | string \|vNode \|function(h) | 无 |
-| icon | 自定义图标（1.40.0 新增） | string\|slot | `<Icon type="question-circle">` |
+| iconType | 图标 Icon 类型 | string | question-circle |
-| iconType | 图标类型（1.40.0 后废弃，请使用 `icon`） | string | `question-circle` |
-| mask | 是否展示遮罩 | Boolean | true |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
 | keyboard | 是否支持键盘esc关闭 | boolean | true |
 | okText | 确认按钮文字 | string | 确定 |
 | okType | 确认按钮类型 | string | primary |
 | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
 | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
-| title | 标题 | string\|vNode | 无 |
+| title | 标题 | string\|vNode \|function(h) | 无 |
 | width | 宽度 | string\|number | 416 |
 | zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
 | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |

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

@@ -10,7 +10,7 @@ exports[`renders ./components/notification/demo/duration.md correctly 1`] = `<bu
 
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
 <div>
-  <div class="ant-select ant-select-enabled" style="width: 120px; margin-right: 10px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px; margin-right: 10px;">
     <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="topRight" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">topRight</div>

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

@@ -38,7 +38,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
             <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
           </svg></i></a></li>
     <li class="ant-pagination-options">
-      <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+      <div tabindex="-1" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
         <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="10 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 / page</div>
@@ -67,7 +67,7 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
             <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
           </svg></i></a></li>
     <li class="ant-pagination-options">
-      <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+      <div tabindex="-1" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
         <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="20 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">20 / page</div>
@@ -110,7 +110,7 @@ exports[`renders ./components/pagination/demo/custom-changer.md correctly 1`] =
           <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
         </svg></i></a></li>
   <li class="ant-pagination-options">
-    <div class="ant-select ant-select-enabled ant-pagination-options-size-changer">
+    <div tabindex="-1" class="ant-select ant-select-enabled ant-pagination-options-size-changer">
       <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="" class="ant-select-selection-selected-value" style="display: block; opacity: 1;"><span>10条/页</span>
@@ -196,7 +196,7 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
             <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
           </svg></i></a></li>
     <li class="ant-pagination-options">
-      <div class="ant-select ant-select-enabled ant-select-sm ant-pagination-options-size-changer">
+      <div tabindex="-1" class="ant-select ant-select-enabled ant-select-sm ant-pagination-options-size-changer">
         <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="10 / page" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">10 / page</div>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 100%;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
     <div class="ant-select-selection__rendered">
       <div>
@@ -16,21 +16,21 @@ exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`
 
 exports[`renders ./components/select/demo/basic.md correctly 1`] = `
 <div>
-  <div class="ant-select ant-select-enabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
     <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="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-disabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-disabled" style="width: 120px;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="-1" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
         <div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-enabled ant-select-loading" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled ant-select-loading" style="width: 120px;">
     <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="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
@@ -42,14 +42,14 @@ exports[`renders ./components/select/demo/basic.md correctly 1`] = `
 
 exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
 <div>
-  <div class="ant-select ant-select-enabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
     <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="Zhejiang" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Zhejiang</div>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-enabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
     <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="Hangzhou" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Hangzhou</div>
@@ -60,7 +60,7 @@ exports[`renders ./components/select/demo/coordinate.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 120px;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
   <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="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
@@ -70,7 +70,7 @@ exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`]
 `;
 
 exports[`renders ./components/select/demo/hide-selected.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 100%;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Inserted are removed</div>
@@ -85,7 +85,7 @@ exports[`renders ./components/select/demo/hide-selected.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 120px;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
   <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="Lucy (101)" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy (101)</div>
@@ -95,7 +95,7 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 100%;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@@ -116,7 +116,7 @@ exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
   <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="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
@@ -126,7 +126,7 @@ exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/options.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 120px;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
   <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="北京 010" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">北京</div>
@@ -136,7 +136,7 @@ exports[`renders ./components/select/demo/options.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/search.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
   <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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a person</div>
@@ -149,7 +149,7 @@ exports[`renders ./components/select/demo/search.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
-<div class="ant-select ant-select-enabled ant-select-no-arrow" style="width: 200px;">
+<div tabindex="-1" class="ant-select ant-select-enabled ant-select-no-arrow" style="width: 200px;">
   <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 unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">input search text</div>
@@ -162,7 +162,7 @@ exports[`renders ./components/select/demo/search-box.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 100%;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select users</div>
@@ -179,7 +179,7 @@ exports[`renders ./components/select/demo/select-users.md correctly 1`] = `
 exports[`renders ./components/select/demo/size.md correctly 1`] = `
 <div>
   <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="large"><span class="ant-radio-button-inner"></span></span><span>Large</span></label><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="default"><span class="ant-radio-button-inner"></span></span><span>Default</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="small"><span class="ant-radio-button-inner"></span></span><span>Small</span></label></div> <br><br>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <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="a1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
@@ -188,7 +188,7 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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> <br>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
       <div class="ant-select-selection__rendered">
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@@ -210,7 +210,7 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
       </div>
     </div>
   </div> <br>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
       <div class="ant-select-selection__rendered">
         <div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Please select</div>
@@ -237,14 +237,14 @@ exports[`renders ./components/select/demo/size.md correctly 1`] = `
 
 exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
 <div>
-  <div class="ant-select ant-select-enabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 120px;">
     <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="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
       </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i slot="suffixIcon" aria-label="icon: smile" class="anticon anticon-smile ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span>
     </div>
   </div>
-  <div class="ant-select ant-select-disabled" style="width: 120px;">
+  <div tabindex="-1" class="ant-select ant-select-disabled" style="width: 120px;">
     <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" tabindex="-1" class="ant-select-selection ant-select-selection--single">
       <div class="ant-select-selection__rendered">
         <div title="Lucy" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Lucy</div>
@@ -255,7 +255,7 @@ exports[`renders ./components/select/demo/suffix.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/tags.md correctly 1`] = `
-<div class="ant-select ant-select-enabled" style="width: 100%;">
+<div tabindex="-1" class="ant-select ant-select-enabled" style="width: 100%;">
   <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple">
     <div class="ant-select-selection__rendered">
       <div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Tags Mode</div>

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select Select Custom Icons should support customized icons 1`] = `
-<div class="ant-select ant-select-enabled">
+<div tabindex="-1" 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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>

components/select/index.jsx

@@ -105,6 +105,11 @@ const Select = {
     prop: 'value',
     event: 'change',
   },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
   inject: {
     configProvider: { default: () => ({}) },
   },
@@ -117,6 +122,9 @@ const Select = {
     );
   },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     focus() {
       this.$refs.vcSelect.focus();
     },

components/table/Table.jsx

@@ -1,12 +1,6 @@
 import VcTable from '../vc-table';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
-import Pagination from '../pagination';
-import Icon from '../icon';
-import Spin from '../spin';
-import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import defaultLocale from '../locale-provider/default';
-import warning from '../_util/warning';
 import FilterDropdown from './filterDropdown';
 import createStore from './createStore';
 import SelectionBox from './SelectionBox';
@@ -26,6 +20,12 @@ import {
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
 import { TableProps } from './interface';
+import Pagination from '../pagination';
+import Icon from '../icon';
+import Spin, { SpinProps } from '../spin';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import defaultLocale from '../locale-provider/default';
+import warning from '../_util/warning';
 
 function noop() {}
 
@@ -796,7 +796,7 @@ export default {
         let filterDropdown;
         let sortButton;
         let customHeaderCell = column.customHeaderCell;
-        // const sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle;
+        const title = this.renderColumnTitle(column.title);
         const isSortColumn = this.isSortColumn(column);
         if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
           const colFilters = key in filters ? filters[key] : [];
@@ -859,7 +859,6 @@ export default {
             return colProps;
           };
         }
-        // const sortTitleString = sortButton && typeof sortTitle === 'string' ? sortTitle : undefined;
         return {
           ...column,
           className: classNames(column.className, {
@@ -869,8 +868,11 @@ export default {
             [`${prefixCls}-column-sort`]: isSortColumn && sortOrder,
           }),
           title: [
-            <div key="title" class={sortButton ? `${prefixCls}-column-sorters` : undefined}>
+            <div
-              {this.renderColumnTitle(column.title)}
+              key="title"
+              class={sortButton ? `${prefixCls}-column-sorters` : undefined}
+            >
+              {title}
               {sortButton}
             </div>,
             filterDropdown,
@@ -891,34 +893,6 @@ export default {
       return title;
     },
 
-    // getColumnTitle(title, parentNode) {
-    //   if (!title) {
-    //     return;
-    //   }
-    //   if (isValidElement(title)) {
-    //     const props = title.componentOptions;
-    //     let children = null;
-    //     if (props && props.children) {
-    //       // for component
-    //       children = filterEmpty(props.children);
-    //     } else if (title.children) {
-    //       // for dom
-    //       children = filterEmpty(title.children);
-    //     }
-    //     if (children && children.length === 1) {
-    //       children = children[0];
-    //       const attrs = getAllProps(title);
-    //       if (!children.tag && children.text) {
-    //         // for textNode
-    //         children = children.text;
-    //       }
-    //       return this.getColumnTitle(children, attrs);
-    //     }
-    //   } else {
-    //     return parentNode.title || title;
-    //   }
-    // },
-
     handleShowSizeChange(current, pageSize) {
       const pagination = this.sPagination;
       pagination.onShowSizeChange(current, pageSize);

components/table/__tests__/Table.test.js

@@ -5,22 +5,22 @@ import Vue from 'vue';
 const { Column, ColumnGroup } = Table;
 
 describe('Table', () => {
-  it('renders JSX correctly', done => {
+  const data = [
-    const data = [
+    {
-      {
+      key: '1',
-        key: '1',
+      firstName: 'John',
-        firstName: 'John',
+      lastName: 'Brown',
-        lastName: 'Brown',
+      age: 32,
-        age: 32,
+    },
-      },
+    {
-      {
+      key: '2',
-        key: '2',
+      firstName: 'Jim',
-        firstName: 'Jim',
+      lastName: 'Green',
-        lastName: 'Green',
+      age: 42,
-        age: 42,
+    },
-      },
+  ];
-    ];
 
+  it('renders JSX correctly', done => {
     const wrapper = mount(
       {
         render() {
@@ -96,4 +96,34 @@ describe('Table', () => {
       done();
     });
   });
+
+  it('align column should not override cell style', () => {
+    const columns = [
+      { title: 'Name', dataIndex: 'name', key: 'name' },
+      {
+        title: 'Age',
+        dataIndex: 'age',
+        key: 'age',
+        align: 'center',
+        customCell: (record, rowIndex) => {
+          return {
+            style: {
+              color: 'red',
+            },
+          };
+        },
+      },
+    ];
+    const wrapper = mount(Table, {
+      propsData: {
+        columns,
+        dataSource: data,
+      },
+      sync: false,
+    });
+    Vue.nextTick(() => {
+      expect(wrapper.html()).toMatchSnapshot();
+      done();
+    });
+  });
 });

components/table/__tests__/__snapshots__/Table.test.js.snap

@@ -1,5 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Table align column should not override cell style 1`] = `
+<div class="ant-table-wrapper">
+  <div class="ant-spin-nested-loading">
+    <div class="ant-spin-container">
+      <div class="ant-table ant-table-scroll-position-left ant-table-default">
+        <div class="ant-table-content">
+          <!---->
+          <div class="ant-table-body">
+            <table class="">
+              <colgroup>
+                <col>
+                <col>
+              </colgroup>
+              <thead class="ant-table-thead">
+                <tr>
+                  <th key="name" class="">
+                    <div>Name</div>
+                  </th>
+                  <th key="age" class="ant-table-align-center" style="text-align: center;">
+                    <div>Age</div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="ant-table-tbody">
+                <tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
+                  <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+                    <!---->
+                  </td>
+                  <td style="color: red; text-align: center;">32</td>
+                </tr>
+                <tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
+                  <td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
+                    <!---->
+                  </td>
+                  <td style="color: red; text-align: center;">42</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <ul unselectable="unselectable" class="ant-pagination ant-table-pagination">
+        <li title="Previous Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-prev"><a class="ant-pagination-item-link"><i aria-label="icon: left" class="anticon anticon-left"><svg viewBox="64 64 896 896" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+                <path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
+              </svg></i></a></li>
+        <li title="1" tabindex="0" class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"><a>1</a></li>
+        <li title="Next Page" aria-disabled="true" class="ant-pagination-disabled ant-pagination-next"><a class="ant-pagination-item-link"><i aria-label="icon: right" class="anticon anticon-right"><svg viewBox="64 64 896 896" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
+              </svg></i></a></li>
+        <!---->
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Table renders JSX correctly 1`] = `
 <div class="ant-table-wrapper">
   <div class="ant-spin-nested-loading">

components/table/index.en-US.md

@@ -52,11 +52,11 @@ const columns = [{
 | locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' |
 | pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object |  |
 | rowClassName | Row's className | Function(record, index):string | - |
-| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
+| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record, index):string | `key` |
 | rowSelection | Row selection [config](#rowSelection) | object | null |
 | scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for `x`, if you want to set it to `true`, you need to add style `.ant-table td { white-space: nowrap; }`. | { x: number \| true, y: number } | - |
 | showHeader | Whether to show table header | boolean | `true` |
-| size | Size of table | `default` \| `middle` \| `small` | `default` |
+| size | Size of table | `default` \| `middle` \| `small` \| `large` | `default` |
 | title | Table title renderer | Function(currentPageData)\|slot-scope |  |
 | customHeaderRow | Set props on per header row | Function(column, index) | - |
 | customRow | Set props on per row | Function(record, index) | - |

components/table/index.jsx

@@ -39,7 +39,7 @@ const Table = {
           column.key = key;
         }
         if (getSlotOptions(element).__ANT_TABLE_COLUMN_GROUP) {
-          column.children = this.normalize(children);
+          column.children = this.normalize(typeof children === 'function' ? children() : children);
         } else {
           const customRender =
             element.data && element.data.scopedSlots && element.data.scopedSlots.default;

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

@@ -311,22 +311,22 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
 
 exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
 <div>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>
-  <div class="ant-select ant-select-enabled" style="width: 200px;">
+  <div tabindex="-1" class="ant-select ant-select-enabled" style="width: 200px;">
     <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><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><i aria-label="icon: down" 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>

components/time-picker/index.jsx

@@ -90,6 +90,11 @@ const TimePicker = {
     prop: 'value',
     event: 'change',
   },
+  provide() {
+    return {
+      savePopupRef: this.savePopupRef,
+    };
+  },
   inject: {
     configProvider: { default: () => ({}) },
   },
@@ -112,6 +117,9 @@ const TimePicker = {
     },
   },
   methods: {
+    savePopupRef(ref) {
+      this.popupRef = ref;
+    },
     handleChange(value) {
       if (!hasProp(this, 'value')) {
         this.setState({ sValue: value });

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

@@ -117,7 +117,7 @@ exports[`renders ./components/timeline/demo/custom.md correctly 1`] = `
   </li>
   <li class="ant-timeline-item">
     <div class="ant-timeline-item-tail"></div>
-    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red"><i slot="dot" aria-label="icon: clock-circle-o" class="anticon anticon-clock-circle-o" style="font-size: '16px';"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+    <div class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-red"><i slot="dot" aria-label="icon: clock-circle-o" class="anticon anticon-clock-circle-o" style="font-size: 16px;"><svg viewBox="64 64 896 896" data-icon="clock-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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
           <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
         </svg></i></div>

components/timeline/demo/custom.md

@@ -14,7 +14,7 @@ Set a node as an icon or other custom element.
     <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
     <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
     <a-timeline-item color="red">
-      <a-icon slot="dot" type="clock-circle-o" style="fontSize: '16px'" />
+      <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
       Technical testing 2015-09-01
     </a-timeline-item>
     <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>

components/tooltip/abstractTooltipProps.js

@@ -30,4 +30,5 @@ export default () => ({
   autoAdjustOverflow: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(true),
   destroyTooltipOnHide: PropTypes.bool.def(false),
   align: PropTypes.object.def({}),
+  builtinPlacements: PropTypes.object,
 });

components/tree/util.js

@@ -15,7 +15,7 @@ function traverseNodesKey(rootChildren, callback) {
     const { key } = node;
     const children = getSlots(node).default;
     if (callback(key) !== false) {
-      traverseNodesKey(children, callback);
+      traverseNodesKey(typeof children === 'function' ? children() : children, callback);
     }
   }
 

components/upload/Upload.jsx

@@ -44,7 +44,7 @@ export default {
   },
   watch: {
     fileList(val) {
-      this.sFileList = val;
+      this.sFileList = val || [];
     },
   },
   beforeDestroy() {

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

@@ -8,6 +8,7 @@ import KeyCode from '../../../_util/KeyCode';
 let cachedSelectionStart;
 let cachedSelectionEnd;
 let dateInputInstance;
+import { isIE, isIE9 } from '../../../_util/env';
 
 const DateInput = {
   mixins: [BaseMixin],
@@ -82,6 +83,10 @@ const DateInput = {
     },
     onInputChange(event) {
       const str = event.target.value;
+      // https://github.com/vueComponent/ant-design-vue/issues/92
+      if (isIE && !isIE9 && this.str === str) {
+        return;
+      }
       const { disabledDate, format, selectedValue } = this.$props;
 
       // 没有内容，合法并直接退出

components/vc-form/src/createBaseForm.jsx

@@ -6,7 +6,7 @@ import omit from 'lodash/omit';
 import createFieldsStore from './createFieldsStore';
 import { cloneElement } from '../../_util/vnode';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, getEvents } from '../../_util/props-util';
+import { getOptionProps, getEvents, slotHasProp, getComponentName } from '../../_util/props-util';
 import PropTypes from '../../_util/vue-types';
 
 import {
@@ -184,16 +184,27 @@ function createBaseForm(option = {}, mixins = []) {
             if (process.env.NODE_ENV !== 'production') {
               const valuePropName = fieldMeta.valuePropName;
               warning(
-                !(valuePropName in originalProps),
+                !slotHasProp(fieldElem, valuePropName),
                 `\`getFieldDecorator\` will override \`${valuePropName}\`, ` +
                   `so please don't set \`${valuePropName} and v-model\` directly ` +
                   `and use \`setFieldsValue\` to set it.`,
               );
+              warning(
+                !(
+                  !slotHasProp(fieldElem, valuePropName) &&
+                  valuePropName in originalProps &&
+                  !(fieldOption && fieldOption.initialValue)
+                ),
+                `${getComponentName(
+                  fieldElem.componentOptions,
+                )} \`default value\` can not collect, ` +
+                  ` please use \`option.initialValue\` to set default value.`,
+              );
               const defaultValuePropName = `default${valuePropName[0].toUpperCase()}${valuePropName.slice(
                 1,
               )}`;
               warning(
-                !(defaultValuePropName in originalProps),
+                !slotHasProp(fieldElem, defaultValuePropName),
                 `\`${defaultValuePropName}\` is invalid ` +
                   `for \`getFieldDecorator\` will set \`${valuePropName}\`,` +
                   ` please use \`option.initialValue\` instead.`,

components/vc-select/DropdownMenu.jsx

@@ -107,7 +107,6 @@ export default {
         const menuProps = {
           props: {
             multiple,
-            defaultActiveFirst: defaultActiveFirstOption,
             itemIcon: multiple ? menuItemSelectedIcon : null,
             selectedKeys,
             prefixCls: `${prefixCls}-menu`,
@@ -134,8 +133,7 @@ export default {
         let clonedMenuItems = menuItems;
         if (selectedKeys.length || firstActiveValue) {
           if (props.visible && !this.lastVisible) {
-            activeKeyProps.activeKey =
+            activeKeyProps.activeKey = selectedKeys[0] || firstActiveValue;
-              selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue;
           } else if (!visible) {
             // Do not trigger auto active since we already have selectedKeys
             if (selectedKeys[0]) {

components/vc-select/Select.jsx

@@ -636,9 +636,20 @@ const Select = {
         this._focused = false;
       }
     },
-    inputBlur() {
+    inputBlur(e) {
+      if (
+        e.relatedTarget &&
+        this.selectTriggerRef &&
+        this.selectTriggerRef.getInnerMenu() &&
+        this.selectTriggerRef.getInnerMenu().$el === e.relatedTarget
+      ) {
+        e.target.focus();
+        e.preventDefault();
+        return;
+      }
       this.clearBlurTime();
       if (this.disabled) {
+        e.preventDefault();
         return;
       }
       this.blurTimer = setTimeout(() => {
@@ -1148,7 +1159,8 @@ const Select = {
           } else if (!label && key) {
             label = key;
           }
-          const childChildren = getSlots(child).default;
+          let childChildren = getSlots(child).default;
+          childChildren = typeof childChildren === 'function' ? childChildren() : childChildren;
           // Match option group label
           if (inputValue && this._filterOption(inputValue, child)) {
             const innerItems = childChildren.map(subChild => {
@@ -1460,31 +1472,36 @@ const Select = {
     },
 
     selectionRefClick(e) {
-      e.stopPropagation();
+      //e.stopPropagation();
       if (!this.disabled) {
         const input = this.getInputDOMNode();
         if (this._focused && this.$data._open) {
-          this._focused = false;
+          // this._focused = false;
           this.setOpenState(false, false);
           input && input.blur();
         } else {
           this.clearBlurTime();
-          this._focused = true;
+          //this._focused = true;
           this.setOpenState(true, true);
           input && input.focus();
         }
       }
     },
-    selectionRefFocus() {
+    selectionRefFocus(e) {
-      if (this._focused || this.disabled) {
+      if (this._focused || this.disabled || isMultipleOrTagsOrCombobox(this.$props)) {
+        e.preventDefault();
         return;
       }
       this._focused = true;
       this.updateFocusClassName();
       this.$emit('focus');
     },
-    selectionRefBlur() {
+    selectionRefBlur(e) {
-      this.inputBlur();
+      if (isMultipleOrTagsOrCombobox(this.$props)) {
+        e.preventDefault();
+        return;
+      }
+      this.inputBlur(e);
     },
   },
 
@@ -1517,21 +1534,21 @@ const Select = {
         'aria-controls': this.$data._ariaId,
       },
       on: {
-        click: this.selectionRefClick,
+        // click: this.selectionRefClick,
       },
       class: `${prefixCls}-selection ${prefixCls}-selection--${multiple ? 'multiple' : 'single'}`,
-      directives: [
+      // directives: [
-        {
+      //   {
-          name: 'ant-ref',
+      //     name: 'ant-ref',
-          value: this.saveSelectionRef,
+      //     value: this.saveSelectionRef,
-        },
+      //   },
-      ],
+      // ],
       key: 'selection',
     };
     if (!isMultipleOrTagsOrCombobox(props)) {
       selectionProps.on.keydown = this.onKeyDown;
-      selectionProps.on.focus = this.selectionRefFocus;
+      // selectionProps.on.focus = this.selectionRefFocus;
-      selectionProps.on.blur = this.selectionRefBlur;
+      // selectionProps.on.blur = this.selectionRefBlur;
       selectionProps.attrs.tabIndex = props.disabled ? -1 : props.tabIndex;
     }
     const rootCls = {
@@ -1593,7 +1610,7 @@ const Select = {
             directives: [
               {
                 name: 'ant-ref',
-                value: this.saveRootRef,
+                value: chaining(this.saveRootRef, this.saveSelectionRef),
               },
             ],
           }}
@@ -1602,9 +1619,10 @@ const Select = {
           onMousedown={this.markMouseDown}
           onMouseup={this.markMouseLeave}
           onMouseout={this.markMouseLeave}
-          // tabindex='-1'
+          tabindex="-1"
-          // onBlur={this.onOuterBlur}
+          onBlur={this.selectionRefBlur}
-          // onFocus={this.onOuterFocus}
+          onFocus={this.selectionRefFocus}
+          onClick={this.selectionRefClick}
         >
           <div {...selectionProps}>
             {ctrlNode}

components/vc-table/index.js

@@ -40,7 +40,7 @@ const Table = {
           column.key = key;
         }
         if (getSlotOptions(element).isTableColumnGroup) {
-          column.children = this.normalize(children);
+          column.children = this.normalize(typeof children === 'function' ? children() : children);
         } else {
           const customRender =
             element.data && element.data.scopedSlots && element.data.scopedSlots.default;

components/vc-table/src/TableCell.jsx

@@ -97,7 +97,7 @@ export default {
       return null;
     }
     if (column.align) {
-      tdProps.style = { textAlign: column.align };
+      tdProps.style = { ...tdProps.style, textAlign: column.align };
     }
 
     return (

components/vc-time-picker/Header.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import moment from 'moment';
 import { getComponentFromProp } from '../_util/props-util';
+import { isIE, isIE9 } from '../_util/env';
 
 const Header = {
   mixins: [BaseMixin],
@@ -64,6 +65,11 @@ const Header = {
   methods: {
     onInputChange(event) {
       const str = event.target.value;
+      // https://github.com/vueComponent/ant-design-vue/issues/92
+      if (isIE && !isIE9 && this.str === str) {
+        return;
+      }
+
       this.showStr = true;
       this.setState({
         str,

components/vc-tree-select/src/SelectNode.jsx

@@ -10,25 +10,23 @@ export default {
   isTreeNode: true,
   props: TreeNode.props,
   render(h, context) {
-    const { props, slots, listeners, data } = context;
+    const { props, slots, listeners, data, scopedSlots } = context;
-    const $slots = slots();
+    const $slots = slots() || {};
     const children = $slots.default;
-    delete $slots.default;
+    const slotsKey = Object.keys($slots);
+    const scopedSlotsTemp = {}; // for vue 2.5.x
+    slotsKey.forEach(name => {
+      scopedSlotsTemp[name] = () => $slots[name];
+    });
     const treeNodeProps = {
       ...data,
       on: { ...listeners, ...data.nativeOn },
       props,
+      scopedSlots: {
+        ...scopedSlotsTemp,
+        ...scopedSlots,
+      },
     };
-    const slotsKey = Object.keys($slots);
+    return <TreeNode {...treeNodeProps}>{children}</TreeNode>;
-    return (
-      <TreeNode {...treeNodeProps}>
-        {children}
-        {slotsKey.length
-          ? slotsKey.map(name => {
-              return <template slot={name}>{$slots[name]}</template>;
-            })
-          : null}
-      </TreeNode>
-    );
   },
 };

components/vc-tree-select/src/util.js

@@ -7,7 +7,7 @@ import {
 } from '../../vc-tree/src/util';
 import SelectNode from './SelectNode';
 import { SHOW_CHILD, SHOW_PARENT } from './strategies';
-import { getSlots, getPropsData } from '../../_util/props-util';
+import { getSlots, getPropsData, isEmptyElement } from '../../_util/props-util';
 
 let warnDeprecatedLabel = false;
 
@@ -196,29 +196,20 @@ export function getFilterTree(h, treeNodes, searchValue, filterFunc, valueEntiti
   }
 
   function mapFilteredNodeToData(node) {
-    if (!node) return null;
+    if (!node || isEmptyElement(node)) return null;
 
     let match = false;
     if (filterFunc(searchValue, node)) {
       match = true;
     }
-    const $slots = getSlots(node);
+    let children = getSlots(node).default;
-    const children = $slots.default.map(mapFilteredNodeToData).filter(n => n);
+    children = ((typeof children === 'function' ? children() : children) || [])
-    delete $slots.default;
+      .map(mapFilteredNodeToData)
-    const slotsKey = Object.keys($slots);
+      .filter(n => n);
     if (children.length || match) {
       return (
         <SelectNode {...node.data} key={valueEntities[getPropsData(node).value].key}>
           {children}
-          {slotsKey.length
-            ? slotsKey.map(name => {
-                return (
-                  <template slot={name}>
-                    {$slots[name][0].tag === 'template' ? $slots[name][0].children : $slots[name]}
-                  </template>
-                );
-              })
-            : null}
         </SelectNode>
       );
     }

components/vc-tree/src/Tree.jsx

@@ -253,7 +253,10 @@ const Tree = {
       this.dragNode = node;
 
       this.setState({
-        _dragNodesKeys: getDragNodesKeys(children, node),
+        _dragNodesKeys: getDragNodesKeys(
+          typeof children === 'function' ? children() : children,
+          node,
+        ),
         _expandedKeys: arrDel(_expandedKeys, eventKey),
       });
       this.__emit('dragstart', { event, node });

components/vc-trigger/Trigger.jsx

@@ -77,6 +77,7 @@ export default {
   },
   inject: {
     vcTriggerContext: { default: () => ({}) },
+    savePopupRef: { default: () => noop },
   },
   data() {
     const props = this.$props;
@@ -100,7 +101,7 @@ export default {
     sPopupVisible(val) {
       this.$nextTick(() => {
         this.renderComponent(null, () => {
-          this.afterPopupVisibleChange(val);
+          this.afterPopupVisibleChange(this.sPopupVisible);
         });
       });
     },
@@ -236,10 +237,12 @@ export default {
     },
 
     onBlur(e) {
-      this.fireEvents('blur', e);
+      if (!contains(e.target, e.relatedTarget)) {
-      this.clearDelayTimer();
+        this.fireEvents('blur', e);
-      if (this.isBlurToHide()) {
+        this.clearDelayTimer();
-        this.delaySetPopupVisible(false, this.$props.blurDelay);
+        if (this.isBlurToHide()) {
+          this.delaySetPopupVisible(false, this.$props.blurDelay);
+        }
       }
     },
 
@@ -350,6 +353,7 @@ export default {
     },
     savePopup(node) {
       this._component = node;
+      this.savePopupRef(node);
     },
     getComponent() {
       const self = this;

docs/vue/sponsor.en-US.md

@@ -8,7 +8,7 @@ We accept donations through these channels:
 <div>
 <a href="https://www.paypal.me/tangjinzhou" target="_blank">PayPal</a>
 <br/>
-<a href="https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png" target="_blank">Alipay or WeChat</a>
+<a href="http://pvrd7go2h.bkt.clouddn.com/alipay-and-wechat.png" target="_blank">Alipay or WeChat</a>
 </div>
 
 ## Recurring Pledges

docs/vue/sponsor.zh-CN.md

@@ -8,7 +8,7 @@ ant-design-vue 是采用 MIT 许可的开源项目，使用完全免费。 但
 <div>
 <a href="https://www.paypal.me/tangjinzhou" target="_blank">PayPal</a>
 <br/>
-<a href="https://cdn.nlark.com/yuque/0/2019/png/87084/1548485701785-assets/web-upload/648ca181-a52f-4382-957c-97c5dbb3e1cc.png" target="_blank">支付宝或微信</a>
+<a href="http://pvrd7go2h.bkt.clouddn.com/alipay-and-wechat.png" target="_blank">支付宝或微信</a>
 </div>
 
 ## 周期性赞助

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-vue",
-  "version": "1.3.10",
+  "version": "1.3.13",
   "title": "Ant Design Vue",
   "description": "An enterprise-class UI design language and Vue-based implementation",
   "keywords": [
@@ -22,7 +22,8 @@
     "dist",
     "lib",
     "es",
-    "types"
+    "types",
+    "scripts"
   ],
   "scripts": {
     "dev": "cross-env NODE_ENV=development ENTRY_INDEX=dev ./node_modules/.bin/webpack-dev-server --open --hot --port 3001",
@@ -40,7 +41,8 @@
     "lint:style": "stylelint \"{site,components}/**/*.less\" --syntax less",
     "commitmsg": "commitlint -x @commitlint/config-conventional -e $GIT_PARAMS",
     "codecov": "codecov",
-    "prettier": "node ./scripts/prettier.js"
+    "prettier": "node ./scripts/prettier.js",
+    "postinstall": "node scripts/postinstall || echo \"ignore\""
   },
   "repository": {
     "type": "git",
@@ -109,7 +111,7 @@
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^7.0.0",
     "glob": "^7.1.2",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.1",
     "gulp-babel": "^7.0.0",
     "gulp-strip-code": "^0.1.4",
     "highlight.js": "^9.12.0",
@@ -173,8 +175,8 @@
     "webpackbar": "^3.1.5"
   },
   "dependencies": {
-    "@ant-design/icons": "^1.1.15",
+    "@ant-design/icons": "^2.1.1",
-    "@ant-design/icons-vue": "^1.0.1",
+    "@ant-design/icons-vue": "^2.0.0",
     "add-dom-event-listener": "^1.0.2",
     "array-tree-filter": "^2.1.0",
     "async-validator": "^1.8.2",
@@ -193,6 +195,7 @@
     "lodash": "^4.17.5",
     "moment": "^2.21.0",
     "mutationobserver-shim": "^0.3.2",
+    "node-emoji": "^1.10.0",
     "omit.js": "^1.0.0",
     "raf": "^3.4.0",
     "resize-observer-polyfill": "^1.5.1",

scripts/gulpfile.js

@@ -110,12 +110,18 @@ function copyHtml() {
   );
 }
 
-gulp.task('_site', done => {
+gulp.task(
-  dist(() => {
+  '_site',
+  gulp.series(done => {
+    dist(() => {
+      copyHtml();
+      done();
+    });
+  }),
+);
+gulp.task(
+  'copy-html',
+  gulp.series(() => {
     copyHtml();
-    done();
+  }),
-  });
+);
-});
-gulp.task('copy-html', () => {
-  copyHtml();
-});

scripts/postinstall.js

@@ -0,0 +1,37 @@
+/* eslint-disable max-len */
+const emoji = require('node-emoji');
+
+const env = process.env;
+const ADBLOCK = is(env.ADBLOCK);
+const CI = is(env.CI);
+const COLOR = is(env.npm_config_color);
+const DISABLE_OPENCOLLECTIVE = is(env.DISABLE_OPENCOLLECTIVE);
+const SILENT = !!~['silent', 'error', 'warn'].indexOf(env.npm_config_loglevel);
+
+function is(it) {
+  return !!it && it !== '0' && it !== 'false';
+}
+
+function log(it) {
+  // eslint-disable-next-line no-console,no-control-regex
+  console.log(COLOR ? it : it.replace(/\u001B\[\d+m/g, ''));
+}
+
+if (!ADBLOCK && !CI && !DISABLE_OPENCOLLECTIVE && !SILENT) {
+  log(
+    '\u001B[96mThank you for using ant-design-vue (\u001B[94m https://github.com/vueComponent/ant-design-vue \u001B[96m)!\u001B[0m\n',
+  );
+  log(
+    '\u001B[96mThe project needs your help! Please consider supporting of ant-design-vue on Open Collective or Patreon: ' +
+      emoji.get('pray') +
+      '\u001B[0m',
+  );
+  log('\u001B[96m>\u001B[94m https://opencollective.com/ant-design-vue \u001B[0m');
+  log('\u001B[96m>\u001B[94m https://www.patreon.com/tangjinzhou \u001B[0m\n');
+  log(
+    '\u001B[96mFor china, 更多赞助方式(支付宝、微信)请查看如下链接: ' +
+      emoji.get('pray') +
+      '\u001B[0m',
+  );
+  log('\u001B[96m>\u001B[94m https://ant-design-vue.gitee.io/docs/vue/sponsor-cn \u001B[0m\n');
+}

scripts/run.js

@@ -13,6 +13,28 @@ program.on('--help', () => {
 
 program.parse(process.argv);
 
+function runTask(toRun) {
+  const metadata = { task: toRun };
+  // Gulp >= 4.0.0 (doesn't support events)
+  const taskInstance = gulp.task(toRun);
+  if (taskInstance === undefined) {
+    gulp.emit('task_not_found', metadata);
+    return;
+  }
+  const start = process.hrtime();
+  gulp.emit('task_start', metadata);
+  try {
+    taskInstance.apply(gulp);
+    metadata.hrDuration = process.hrtime(start);
+    gulp.emit('task_stop', metadata);
+    gulp.emit('stop');
+  } catch (err) {
+    err.hrDuration = process.hrtime(start);
+    err.task = metadata.task;
+    gulp.emit('task_err', err);
+  }
+}
+
 const task = program.args[0];
 
 if (!task) {
@@ -22,5 +44,5 @@ if (!task) {
 
   require('./gulpfile');
 
-  gulp.start(task);
+  runTask(task);
 }

site/404.html

@@ -10,7 +10,7 @@
     <meta http-equiv="Expires" content="0">
     <meta name="description" content="An enterprise-class UI components based on Ant Design and Vue">
     <title>Ant Design Vue</title>
-    <link rel="icon" type="image/x-icon" href="https://cdn.nlark.com/yuque/0/2019/png/87084/1550242977163-assets/web-upload/5bdc08bb-58a1-4312-8380-d43b1590154c.png">
+    <link rel="icon" type="image/x-icon" href="http://pvrd7go2h.bkt.clouddn.com/logo-icon.png">
     <style id="nprogress-style">
         #page-404 {
             background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');

site/components/CarbonAds.vue

@@ -59,16 +59,14 @@ export default {
 </script>
 <style lang="less">
  #carbon-ads {
-  width: 280px;
+  width: 266px;
-  float: right;
+  position: fixed;
-  position: relative;
+  left: 0;
-  right: 0;
+  bottom: 0px;
-  bottom: 0;
   padding: 0;
   overflow: hidden;
   z-index: 9;
   background-color: #fff;
-  border-radius: 3px;
   font-size: 13px;
   background: #f5f5f5;
   font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
@@ -86,7 +84,7 @@ export default {
 }
 #carbon-ads img {
   float: left;
-  margin-right: 10px;
+  padding-right: 10px;
 }
 #carbon-ads .carbon-img,
 #carbon-ads .carbon-text {
@@ -113,6 +111,7 @@ export default {
   right: 0;
   bottom: 0;
   padding: 0;
+  margin-bottom: 15px;
   .carbon-img {
     float: left;
     margin-right: 10px;

site/components/geektime.vue

@@ -1,29 +1,53 @@
 <template>
-  <div id="geektime">
+  <div
+    v-show="visible"
+    id="geektime"
+  >
     <a
       href="https://time.geekbang.org/course/intro/163?code=KHKYcoBU6vZa8nMglg7AWfDxxi3BWrz9INAzAY3umPk%3D"
       target="_blank"
     >
       <img
-        width="150"
+        width="170"
         alt="Vue 实战教程"
-        src="https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1554903088531-assets/web-upload/c496a156-aabc-4a9b-8cb6-a7a6617706ce.jpeg"
+        src="http://pvrd7go2h.bkt.clouddn.com/geektime-vue.jpeg"
       >
     </a>
+    <div
+      v-if="isMobile"
+      class="close"
+      @click="visible=false"
+    >
+      <a-icon type="close" />
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: ['isMobile'],
+  data() {
+    return {
+      visible: true,
+    };
+  },
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
   #geektime {
     position: fixed;
     bottom: 15px;
     right: 15px;
+    .close {
+      position: absolute;
+      text-align: center;
+      top: -8px;
+      right: -8px;
+      font-size: 16px;
+      padding: 15px;
+      color: #6e3041;
+    }
   }
 </style>
 

site/components/geektime_ads.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="isEffective(effectiveTime)"
+    id="geektime-ads"
+    :class="isMobile ? 'geektime-ads-mobile':''"
+  >
+    <a
+      href="https://time.geekbang.org/column/intro/216?utm_term=zeusH8E0I&utm_source=website&utm_medium=tangjinzhou"
+      target="_blank"
+    >
+      <img
+        height="100"
+        alt="浏览器工作原理与实践"
+        src="http://pvrd7go2h.bkt.clouddn.com/geektime-browser.jpeg"
+      >
+    </a>
+  </div>
+</template>
+
+<script>
+import moment from 'moment';
+export default {
+  props: ['isMobile'],
+  data() {
+    return {
+      visible: true,
+      effectiveTime: {
+        start: '2019-08-05 17:00:00',
+        end: '2019-09-05 17:00:00',
+      },
+    };
+  },
+  methods: {
+    isEffective({ start, end }) {
+      return moment().isBetween(start, end);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+#geektime-ads {
+  max-width: 280px;
+  height: 100px;
+  float: right;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  overflow: hidden;
+  z-index: 9;
+  background-color: #fff;
+  border-radius: 3px;
+  font-size: 13px;
+  background: #f5f5f5;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+}
+#geektime-ads.geektime-ads-mobile {
+  width: 100%;
+  position: relative;
+  right: 0;
+  bottom: 0;
+  padding: 0;
+  margin-bottom: 15px;
+}
+</style>
+

site/components/header.vue

@@ -104,7 +104,7 @@ export default {
                         width='160'
                         height='160'
                         alt='wechat'
-                        src='https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1550303926433-assets/web-upload/3bf5b121-fea2-44bb-9ef9-0d61616c85e3.jpeg'
+                        src='http://pvrd7go2h.bkt.clouddn.com/wechat.jpeg'
                       />
                     </template>
                     <a>
@@ -119,7 +119,7 @@ export default {
                         width='160'
                         height='160'
                         alt='qq'
-                        src='https://cdn.nlark.com/yuque/0/2019/png/87084/1548484520571-assets/web-upload/ca2259e1-6600-461b-8c5b-31018e8bcc07.png'
+                        src='http://pvrd7go2h.bkt.clouddn.com/qq.png'
                       />
                     </template>
                     <a>

site/components/layout.vue

@@ -5,6 +5,7 @@ import Header from './header';
 import Footer from './footer';
 import CarbonAds from './CarbonAds';
 import Geektime from './geektime';
+import GeektimeAds from './geektime_ads';
 import Sponsors from './sponsors';
 import zhCN from 'antd/locale-provider/zh_CN';
 import enUS from 'antd/locale-provider/default';
@@ -268,7 +269,8 @@ export default {
               }
               <a-col xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
                 <section class='main-container main-container-component'>
-                  <CarbonAds isMobile={isMobile}/>
+                  <CarbonAds isMobile={isMobile} />
+                  <GeektimeAds isMobile={isMobile} />
                   {!isMobile ? <div class='toc-affix' style='width: 150px;'>
                     {this.getSubMenu(isCN)}
                   </div> : null}
@@ -304,7 +306,7 @@ export default {
           </div>
         </a-locale-provider>
         { name.indexOf('back-top') === -1 ? <a-back-top /> : null }
-        { isCN && <Geektime /> }
+        { isCN && <Geektime isMobile={isMobile} /> }
       </div>
     );
   },

site/components/sponsors.vue

@@ -27,7 +27,7 @@
           >
             <img
               height="66"
-              src="https://cdn.nlark.com/yuque/0/2019/jpeg/87084/1554903046813-assets/web-upload/2dfca1bb-6927-4044-841d-2b0c9f908295.jpeg"
+              src="http://pvrd7go2h.bkt.clouddn.com/youkeda.jpeg"
               alt="bmatch"
             >
           </a>

site/index.html

@@ -10,7 +10,7 @@
     <meta http-equiv="Expires" content="0">
     <meta name="description" content="An enterprise-class UI components based on Ant Design and Vue">
     <title>Ant Design Vue</title>
-    <link rel="icon" type="image/x-icon" href="https://cdn.nlark.com/yuque/0/2019/png/87084/1550242977163-assets/web-upload/5bdc08bb-58a1-4312-8380-d43b1590154c.png">
+    <link rel="icon" type="image/x-icon" href="http://pvrd7go2h.bkt.clouddn.com/logo-icon.png">
     <style id="nprogress-style">
         #nprogress {
             display: none;
@@ -41,18 +41,20 @@
     <!-- Hotjar Tracking Code for http://vue.ant.design -->
     <script>
         (function(h, o, t, j, a, r) {
-            h.hj = h.hj || function() {
+            if (location.href.indexOf('iframe') === -1 && (location.host === 'ant-design-vue.gitee.io' || location.host === 'vue.ant.design')) {
-                (h.hj.q = h.hj.q || []).push(arguments)
+                h.hj = h.hj || function() {
-            };
+                    (h.hj.q = h.hj.q || []).push(arguments)
-            h._hjSettings = {
+                };
-                hjid: 1359441,
+                h._hjSettings = {
-                hjsv: 6
+                    hjid: 1359441,
-            };
+                    hjsv: 6
-            a = o.getElementsByTagName('head')[0];
+                };
-            r = o.createElement('script');
+                a = o.getElementsByTagName('head')[0];
-            r.async = 1;
+                r = o.createElement('script');
-            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+                r.async = 1;
-            a.appendChild(r);
+                r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+                a.appendChild(r);
+            }
         })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
     </script>
 </body>

site/theme/static/common.less

@@ -51,7 +51,7 @@ a {
 }
 
 .aside-container {
-  padding-bottom: 48px;
+  padding-bottom: 120px;
   font-family: Avenir, @font-family;
 
   &.ant-menu-inline .ant-menu-submenu-title h4,

types/modal.d.ts

@@ -37,9 +37,9 @@ export interface ModalOptions {
 
   /**
    * Modal content
-   * @type string | VNode
+   * @type string | VNode | (h) => VNode
    */
-  content?: string | VNode;
+  content?: any;
 
   /**
    * Icon type of the Icon component
@@ -90,9 +90,9 @@ export interface ModalOptions {
 
   /**
    * Title
-   * @type string | VNode
+   * @type string | VNode | (h) => VNode
    */
-  title?: string | VNode;
+  title?: any;
 
   /**
    * Width of the modal dialog

types/pagination.d.ts

@@ -11,84 +11,84 @@ export declare class Pagination extends AntdComponent {
    * @default 0
    * @type number
    */
-  total: number;
+  total?: number;
 
   /**
    * default initial page number
    * @default 1
    * @type number
    */
-  defaultCurrent: number;
+  defaultCurrent?: number;
 
   /**
    * current page number
    * @type number
    */
-  current: number;
+  current?: number;
 
   /**
    * default number of data items per page
    * @default 10
    * @type number
    */
-  defaultPageSize: number;
+  defaultPageSize?: number;
 
   /**
    * number of data items per page
    * @type number
    */
-  pageSize: number;
+  pageSize?: number;
 
   /**
    * Whether to hide pager on single page
    * @default false
    * @type boolean
    */
-  hideOnSinglePage: boolean;
+  hideOnSinglePage?: boolean;
 
   /**
    * determine whether pageSize can be changed
    * @default false
    * @type boolean
    */
-  showSizeChanger: boolean;
+  showSizeChanger?: boolean;
 
   /**
    * specify the sizeChanger options
    * @default ['10', '20', '30', '40']
    * @type string[]
    */
-  pageSizeOptions: string[];
+  pageSizeOptions?: string[];
 
   /**
    * determine whether you can jump to pages directly
    * @default false
    * @type boolean
    */
-  showQuickJumper: boolean;
+  showQuickJumper?: boolean;
 
   /**
    * to display the total number and range
    * @type Function
    */
-  showTotal: (total: number, range: [number, number]) => any;
+  showTotal?: (total: number, range: [number, number]) => any;
 
   /**
    * specify the size of Pagination, can be set to small
    * @default ''
    * @type string
    */
-  size: string;
+  size?: string;
 
   /**
    * whether to use simple mode
    * @type boolean
    */
-  simple: boolean;
+  simple?: boolean;
 
   /**
    * to customize item innerHTML
    * @type Function
    */
-  itemRender: (page: number, type: 'page' | 'prev' | 'next', originalElement: any) => VNode;
+  itemRender?: (page: number, type: 'page' | 'prev' | 'next', originalElement: any) => VNode;
 }

types/table/column.d.ts

@@ -20,119 +20,119 @@ export declare class Column extends AntdComponent {
    * @default 'left'
    * @type string
    */
-  align: 'left' | 'right' | 'center';
+  align?: 'left' | 'right' | 'center';
 
   /**
    * Span of this column's title
    * @type number
    */
-  colSpan: number;
+  colSpan?: number;
 
   /**
    * Display field of the data record, could be set like a.b.c
    * @type string
    */
-  dataIndex: string;
+  dataIndex?: string;
 
   /**
    * Default order of sorted values: 'ascend' 'descend' null
    * @type string
    */
-  defaultSortOrder: SortOrder;
+  defaultSortOrder?: SortOrder;
 
   /**
    * Customized filter overlay
    * @type any (slot)
    */
-  filterDropdown: any;
+  filterDropdown?: any;
 
   /**
    * Whether filterDropdown is visible
    * @type boolean
    */
-  filterDropdownVisible: boolean;
+  filterDropdownVisible?: boolean;
 
   /**
    * Whether the dataSource is filtered
    * @default false
    * @type boolean
    */
-  filtered: boolean;
+  filtered?: boolean;
 
   /**
    * Controlled filtered value, filter icon will highlight
    * @type string[]
    */
-  filteredValue: string[];
+  filteredValue?: string[];
 
   /**
    * Customized filter icon
    * @default false
    * @type any
    */
-  filterIcon: any;
+  filterIcon?: any;
 
   /**
    * Whether multiple filters can be selected
    * @default true
    * @type boolean
    */
-  filterMultiple: boolean;
+  filterMultiple?: boolean;
 
   /**
    * Filter menu config
    * @type object[]
    */
-  filters: ColumnFilterItem[];
+  filters?: ColumnFilterItem[];
 
   /**
    * Set column to be fixed: true(same as left) 'left' 'right'
    * @default false
    * @type boolean | string
    */
-  fixed: boolean | 'left' | 'right';
+  fixed?: boolean | 'left' | 'right';
 
   /**
    * Unique key of this column, you can ignore this prop if you've set a unique dataIndex
    * @type string
    */
-  key: string;
+  key?: string;
 
   /**
    * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
    * @type Function | ScopedSlot
    */
-  customRender: Function | ScopedSlot;
+  customRender?: Function | ScopedSlot;
 
   /**
    * Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true
    * @type boolean | Function
    */
-  sorter: boolean | Function;
+  sorter?: boolean | Function;
 
   /**
    * Order of sorted values: 'ascend' 'descend' false
    * @type boolean | string
    */
-  sortOrder: boolean | SortOrder;
+  sortOrder?: boolean | SortOrder;
 
   /**
    * Title of this column
    * @type any (string | slot)
    */
-  title: any;
+  title?: any;
 
   /**
    * Width of this column
    * @type string | number
    */
-  width: string | number;
+  width?: string | number;
 
   /**
    * Set props on per cell
    * @type Function
    */
-  customCell: (
+  customCell?: (
     record: any,
     rowIndex: number,
   ) => {
@@ -148,7 +148,7 @@ export declare class Column extends AntdComponent {
    * Set props on per header cell
    * @type
    */
-  customHeaderCell: (
+  customHeaderCell?: (
     column: any,
   ) => {
     props: object;
@@ -163,25 +163,25 @@ export declare class Column extends AntdComponent {
    * Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx
    * @type Function
    */
-  onFilter: Function;
+  onFilter?: Function;
 
   /**
    * Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx
    * @type Function
    */
-  onFilterDropdownVisibleChange: (visible: boolean) => void;
+  onFilterDropdownVisibleChange?: (visible: boolean) => void;
 
   /**
    * When using columns, you can use this property to configure the properties that support the slot,
    * such as slots: { filterIcon: 'XXX'}
    * @type object
    */
-  slots: object;
+  slots?: object;
 
   /**
    * When using columns, you can use this property to configure the properties that support the slot-scope,
    * such as scopedSlots: { customRender: 'XXX'}
    * @type object
    */
-  scopedSlots: object;
+  scopedSlots?: object;
 }