Merge branch 'master' into feat-1.5.0

CHANGELOG.en-US.md

@@ -10,6 +10,31 @@
 
 ---
 
+## 1.4.12
+
+`2020-03-03`
+
+- 🐞 Fix ts type error of `Modal` component [#1809](https://github.com/vueComponent/ant-design-vue/issues/1809)
+
+## 1.4.11
+
+`2020-02-12`
+
+- 🌟 DirectoryTree adds custom switcherIcon function [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743)
+- 🌟 Add draggable table column width [example](https://www.antdv.com/components/table/#components-table-demo-resizable-column)
+- 🌟 Replace `this.$listeners` of all components to avoid repeated rendering of components [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705)
+- 🐞 Fix ConfigProvider component error report error [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049)
+- 🐞 Fix placeholder does not disappear when custom input box of AutoComplete component [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761)
+- 🐞 Fix Statistic.Countdown does not trigger finish event [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731)
+- 🐞 Fix upload component preview image not refreshing [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef)
+- 🐞 Fix TimePicker id is not unique [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566)
+- 🐞 Fix Pagination pagination without animation [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540)
+- 🐞 Fix drop-down list does not show empty elements when Cascader's option is empty array [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540)
+- 🐞 Fix spellcheck rendering incorrect for Input component [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707)
+- 🐞 Fix Tree component cannot customize icon [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712)
+- 🐞 Fix SubMenu forceSubMenuRender property is invalid [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668)
+- 🐞 Fix style of upload button is misaligned [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742)
+
 ## 1.4.10
 
 `2019-12-11`

CHANGELOG.zh-CN.md

@@ -10,6 +10,31 @@
 
 ---
 
+## 1.4.12
+
+`2020-03-03`
+
+- 🐞 修复 `Modal` 组件 ts 类型报错问题 [#1809](https://github.com/vueComponent/ant-design-vue/issues/1809)
+
+## 1.4.11
+
+`2020-02-12`
+
+- 🌟 DirectoryTree 新增自定义 switcherIcon 功能 [#1743](https://github.com/vueComponent/ant-design-vue/issues/1743)
+- 🌟 新增可拖拽调整表格列宽[示例](https://www.antdv.com/components/table/#components-table-demo-resizable-column)
+- 🌟 替换所有组件的 `this.$listeners` 避免组件重复渲染 [#1705](https://github.com/vueComponent/ant-design-vue/issues/1705)
+- 🐞 修复 ConfigProvider 组件更改属性时，报错问题 [7a4003](https://github.com/vueComponent/ant-design-vue/commit/7a40031955d520487dcaf9054a1280ae72230049)
+- 🐞 修复 AutoComplete 组件自定义输入框时，placeholder 不消失问题 [#1761](https://github.com/vueComponent/ant-design-vue/issues/1761)
+- 🐞 修复 Statistic.Countdown 不触发 finish 事件的问题 [#1731](https://github.com/vueComponent/ant-design-vue/pull/1731)
+- 🐞 修复 Upload 组件预览图片不刷新问题 [f74469](https://github.com/vueComponent/ant-design-vue/commit/f744690e929d9d6da03c5c513b3ac5497c6490ef)
+- 🐞 修复 TimePicker id 不唯一问题 [#1566](https://github.com/vueComponent/ant-design-vue/pull/1566)
+- 🐞 修复 Pagination 分页无动画问题 [#1540](https://github.com/vueComponent/ant-design-vue/issues/1540)
+- 🐞 修复 Cascader 的 option 为空数组时,下拉列表不展示空元素问题 [#1701](https://github.com/vueComponent/ant-design-vue/issues/1540)
+- 🐞 修复 Input 组件的 spellcheck 渲染不正确问题 [#1707](https://github.com/vueComponent/ant-design-vue/issues/1707)
+- 🐞 修复 Tree 组件无法自定义 icon 问题 [#1712](https://github.com/vueComponent/ant-design-vue/pull/1712)
+- 🐞 修复 SubMenu forceSubMenuRender 属性失效问题 [#1668](https://github.com/vueComponent/ant-design-vue/issues/1668)
+- 🐞 修复 Upload 按钮样式错位问题 [#1742](https://github.com/vueComponent/ant-design-vue/pull/1742)
+
 ## 1.4.10
 
 `2019-12-11`

components/timeline/demo/index.vue

@@ -12,15 +12,13 @@ const md = {
   cn: `# 时间轴
   垂直展示的时间流信息。
   ## 何时使用
-  在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
-
   - 当有一系列信息需按时间排列时，可正序和倒序。
-  - 需要有一条时间轴进行视觉上的串联时。。
+  - 需要有一条时间轴进行视觉上的串联时。
         ## 代码演示`,
   us: `# Timeline
   Vertical display timeline.
   ## When To Use
-  - When a series of information needs to be ordered by time (ascend or descend).
+  - When a series of information needs to be ordered by time (ascending or descending).
   - When you need a timeline to make a visual connection.
   ## Examples
   `,

components/vc-checkbox/src/Checkbox.jsx

@@ -77,6 +77,7 @@ export default {
         this.sChecked = e.target.checked;
       }
       this.$forceUpdate(); // change前，维持现有状态
+      e.shiftKey = this.eventShiftKey;
       this.__emit('change', {
         target: {
           ...props,
@@ -88,7 +89,7 @@ export default {
         preventDefault() {
           e.preventDefault();
         },
-        nativeEvent: { ...e, shiftKey: this.eventShiftKey },
+        nativeEvent: e,
       });
       this.eventShiftKey = false;
     },

docs/vue/faq.en-US.md

@@ -22,7 +22,7 @@ Second, if you don't use the form's automatic check/collection feature, ie you d
 
 ### How to modify the default theme of Ant Design Vue?
 
-See [Customize Theme](/docs/vue/customize-theme/)。
+See [Customize Theme](/docs/vue/customize-theme/).
 
 ### How to optimize momentjs bundle size with webpack?
 
@@ -42,8 +42,17 @@ Yes, ant-design-vue is designed to develop a complete background application, we
 
 Or, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
 
+### `ant-design-vue` makes only poor user experience on mobile.
+
+`ant-design-vue` is not designed for mobile.
+
 ### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore?
 
 In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.
 
 That is because `<DatePicker mode="year" />` do not equal to `YearPicker`, `<RangePicker mode="month" />` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190), which simply control the displayed panel and won't change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).
+
+##### Solution
+
+The following articles are the implementation articles of the react version, the ideas are the same.
+In [one article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [another article](https://www.cnblogs.com/zyl-Tara/p/10197177.html) approach, using methods `mode` and `panelChange` to encapsulate a component such as `YearPicker`. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.

docs/vue/introduce.en-US.md

@@ -127,6 +127,14 @@ If you'd like to help us improve antd, just create a [Pull Request](https://gith
 
 > If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you!
 
+## About ant-design-vue
+
+As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design.
+
+The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible.
+
+Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience.
+
 ## THANK YOU
 
 [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)

docs/vue/use-with-vue-cli.en-US.md

@@ -70,12 +70,9 @@ Vue.component(Button.name, Button);
 
 Vue.config.productionTip = false;
 
-/* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  render: h => h(App),
-  components: { App },
+}).$mount('#app');
-  template: '<App/>',
-});
 ```
 
 Modify `src/App.vue`。
@@ -161,12 +158,9 @@ Remove the `import 'ant-design-vue/dist/antd.css';` statement added before becau
 
   Vue.config.productionTip = false
 
-  /* eslint-disable no-new */
   new Vue({
-    el: '#app',
+    render: h => h(App)
-    components: { App },
+  }).$mount('#app')
-    template: '<App/>'
-  })
 ```
 
 Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/vue/getting-started/#Import-on-Demand).

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ant-design-vue",
-    "version": "1.4.10",
+    "version": "1.4.12",
     "title": "Ant Design Vue",
     "description": "An enterprise-class UI design language and Vue-based implementation",
     "keywords": [

scripts/postinstall.js

@@ -29,9 +29,11 @@ if (!ADBLOCK && !CI && !DISABLE_OPENCOLLECTIVE && !SILENT) {
   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, 更多赞助方式(支付宝、微信)请查看如下链接: ' +
+    '\u001B[96m更多赞助方式(支付宝、微信、Paypal)请查看如下链接: ' +
       emoji.get('pray') +
       '\u001B[0m',
   );
   log('\u001B[96m>\u001B[94m https://www.antdv.com/docs/vue/sponsor-cn \u001B[0m\n');
+  log('\u001B[96mAnt Design Vue 官方网站: \u001B[0m');
+  log('\u001B[96m>\u001B[94m https://www.antdv.com/ \u001B[0m\n');
 }

site/components/demoBox.vue

@@ -13,29 +13,9 @@
     <section class="code-box-meta markdown">
       <slot v-if="isZhCN" name="description" />
       <slot v-else name="us-description" />
-      <a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
+      <div class="code-box-actions">
-        <span class="code-expand-icon">
-          <img
-            width="16"
-            alt="expand code"
-            src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
-            :class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
-            @click="handleCodeExpand"
-          />
-          <img
-            width="16"
-            alt="expand code"
-            src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
-            :class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"
-            @click="handleCodeExpand"
-          />
-        </span>
-      </a-tooltip>
-    </section>
-    <transition appear :css="false" @enter="enter" @leave="leave">
-      <section v-show="codeExpand" class="highlight-wrapper" style="position: relative;">
         <a-tooltip
-          :title="copied ? '复制成功' : '复制代码'"
+          :title="copied ? 'Copied!' : 'Copy code'"
           :visible="copyTooltipVisible"
           @visibleChange="onCopyTooltipVisibleChange"
         >
@@ -46,6 +26,28 @@
             class="code-box-code-copy"
           />
         </a-tooltip>
+        <a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
+          <span class="code-expand-icon">
+            <img
+              width="16"
+              alt="expand code"
+              src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
+              :class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
+              @click="handleCodeExpand"
+            />
+            <img
+              width="16"
+              alt="expand code"
+              src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
+              :class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"
+              @click="handleCodeExpand"
+            />
+          </span>
+        </a-tooltip>
+      </div>
+    </section>
+    <transition appear :css="false" @enter="enter" @leave="leave">
+      <section v-show="codeExpand" class="highlight-wrapper" style="position: relative;">
         <slot name="code" />
       </section>
     </transition>

site/index.less

@@ -56,19 +56,14 @@ pre > code[class*='language-'] {
   position: absolute;
   top: -14px;
   padding: 1px 8px;
-  margin-left: -8px;
+  margin-left: 16px;
   color: #777;
   border-radius: 2px 2px 0 0;
   background: #fff;
   font-size: 14px;
   width: auto;
 }
-.code-box-code-copy {
+
-  opacity: 1;
-  position: absolute;
-  right: 15px;
-  top: 10px;
-}
 #search-box {
   .ant-select-focused,
   .ant-select-selection,

site/theme/static/demo.less

@@ -73,11 +73,10 @@
   &-meta {
     &.markdown {
       position: relative;
-      padding: 18px 32px;
-      border-radius: 0 0 @border-radius-sm @border-radius-sm;
-      transition: background-color 0.4s;
       width: 100%;
       font-size: @font-size-base;
+      border-radius: 0 0 @border-radius-sm @border-radius-sm;
+      transition: background-color 0.4s;
     }
 
     blockquote {
@@ -93,7 +92,7 @@
     > p {
       font-size: 12px;
       margin: 0.5em 0;
-      padding-right: 25px;
+      padding: 18px 24px 12px;
       width: 100%;
       word-break: break-word;
     }
@@ -105,28 +104,20 @@
   }
 
   .code-expand-icon {
-    position: absolute;
-    right: 16px;
-    bottom: 23px;
     cursor: pointer;
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    text-align: center;
   }
 
   .code-expand-icon-show,
   .code-expand-icon-hide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    box-shadow: none;
     transition: all 0.4s;
     user-select: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    margin: 0;
-    max-width: 100%;
-    width: 100%;
-    vertical-align: baseline;
-    box-shadow: none;
   }
 
   .code-expand-icon-show {
@@ -169,29 +160,57 @@
   }
 
   &-actions {
-    position: absolute;
+    padding-top: 12px;
-    top: 10px;
+    text-align: center;
-    right: 12px;
+    border-top: 1px dashed @site-border-color-split;
-    text-align: right;
+    opacity: 0.7;
+    transition: opacity 0.3s;
+
+    &:hover {
+      opacity: 1;
+    }
+
     > i,
-    > form {
+    > form,
+    > span {
+      position: relative;
       display: inline-block;
-      margin-left: 8px;
+      width: 16px;
+      height: 16px;
+      margin-left: 16px;
+      vertical-align: top;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    > form {
+      top: -2px;
     }
   }
 
-  &-code-copy {
+  &-code-action {
-    font-size: 14px;
-    cursor: pointer;
-    color: @site-text-color-secondary;
-    transition: all 0.24s;
-    background: #fff;
     width: 20px;
     height: 20px;
+    color: @site-text-color-secondary;
+    font-size: 16px;
+    line-height: 18px;
+    cursor: pointer;
+    transition: all 0.24s;
+  }
+
+  &-code-copy {
+    width: 20px;
+    height: 20px;
+    color: @site-text-color-secondary;
+    font-size: 14px;
     line-height: 20px;
     text-align: center;
+    background: #fff;
     border-radius: 20px;
-    opacity: 0;
+    cursor: pointer;
+    transition: all 0.24s;
 
     &:hover {
       color: @site-text-color-secondary;

types/modal.d.ts

@@ -128,7 +128,7 @@ export interface ModalOptions {
    */
   onOk?: () => any;
 
-  parentContext: Object;
+  parentContext?: object;
 }
 
 export interface ModalConfirm {