Merge branch 'carbon-1' into carbon

2024-11-30 03:07:36 +08:00 · 2017-09-01 10:56:25 +08:00 · 2017-09-01 10:56:25 +08:00 · ef61460688
commit ef61460688
parent 512543e35b 6ff168fd57
46 changed files with 241 additions and 102 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -1,5 +1,18 @@
 ## Changelog

+### 1.4.3
+
+*2017-08-25*
+
+- Fixed style bug when Progress's `percentage` is `0`, #6551 @Kingwl
+- Fixed Carousel items flashing when switching, #6394
+- Fixed disabled Button not prevent event propagation when clicked on its text area, #6421
+- Fixed disabled dates calculation in DatePicker's month view, #6363
+- Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng
+- Fixed `amPm` not supported in DatePicker i18n, #6574
+- Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593
+- Fixed Alert using small icons when its `description` is passed via default slot, #6612 @leezng
+
 ### 1.4.2

 *2017-08-09*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -1,5 +1,17 @@
 ## 更新日志

+### 1.4.3
+*2017-08-25*
+
+- 修复 Progress 百分比为 `0` 时的样式问题，#6551 @Kingwl
+- 修复 Carousel 在切换时幻灯片闪烁的问题，#6394
+- 修复禁用的 Button 在点击文字部分时未阻止事件传播的问题，#6421
+- 修复 DatePicker 的月视图错误计算禁用日期的问题，#6363
+- 修复 Autocomplete 键盘回车被阻止传播的问题，#6499 @leezng
+- 修复 DatePicker 的 i18n 不支持 `amPm` 的问题，#6574
+- 修复 Slider 由隐藏变为可见时交互错误的问题，#6593
+- 修复通过默认 slot 传递 `description` 的 Alert 错误地使用小图标的问题，#6612 @leezng
+
 ### 1.4.2
 *2017-08-09*

--- a/FAQ.md
+++ b/FAQ.md
@ -22,7 +22,7 @@
 使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可：
 ```html
 <el-table-column label="操作">
-  <template scoped="props">
+  <template scope="props">
    <el-button @click.native="showDetail(props.row)">查看详情</el-button>
  </template>
 </el-table-column>
@ -115,7 +115,7 @@ For other components, the `.native` modifier is still mandatory.
 Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots):
 ```html
 <el-table-column label="Operations">
-  <template scoped="props">
+  <template scope="props">
    <el-button @click.native="showDetail(props.row)">Details</el-button>
  </template>
 </el-table-column>
--- a/examples/docs/en-US/icon.md
+++ b/examples/docs/en-US/icon.md
@ -12,7 +12,6 @@

 <style>
  .demo-icon .source > i {
-    font-size: 24px;
    color: #8492a6;
    margin: 0 20px;
    font-size: 1.5em;
@ -94,4 +93,35 @@ Just assign the class name to `el-icon-iconName`.
      {{'el-icon-' + name}}
    </span>
  </li>
-</ul>
+</ul>
+
+### Third-party icons
+
+Some of Element's components has an `icon` attribute, e.g. Input. If you want to use a third-party icon in the `icon` attribute, here's what you need to do:
+<p>
+  <span>1.</span> Modify the class name prefix of the third-party library
+</p>
+
+Please read third-party icon library documentation on how to do it. For example, if you're using [iconfont.cn](http://iconfont.cn/), you can find prefix editor in the "Edit Project" dialog. If you're using [Font Awesome](http://fontawesome.io/), you can refer to [this demo](https://github.com/ElementUI/element-font-awesome).
+
+<p>
+  <span>2.</span> Add some CSS:
+</p>
+
+```CSS
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+font-family:"your-font-family" !important;
+
+/* The following is based on original CSS rules of third-party library */
+font-size: inherit;
+font-style:normal;
+-webkit-font-smoothing: antialiased;
+-moz-osx-font-smoothing: grayscale;
+}
+```
+
+Now you can use them as you do with Element built-in icons. For example, in el-input:
+
+```html
+<el-input icon="my-xxx" />
+```
--- a/examples/docs/en-US/layout.md
+++ b/examples/docs/en-US/layout.md
@ -353,7 +353,7 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ### Col Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| span | number of column the grid spans | number | — | — |
+| span | number of column the grid spans | number | — | 24 |
 | offset | number of spacing on the left side of the grid | number | — | 0 |
 | push |  number of columns that grid moves to the right | number | — | 0 |
 | pull |  number of columns that grid moves to the left | number | — | 0 |
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@ -391,7 +391,7 @@ multiple | whether uploading multiple files is permitted | boolean | — | —
 data | additions options of request | object | — | —
 name | key name for uploaded file | string | — | file
 with-credentials | whether cookies are sent | boolean | — |false
-show-upload-list | whether to show the uploaded file list | boolean | — | true
+show-file-list | whether to show the uploaded file list | boolean | — | true
 drag | whether to activate drag and drop mode | boolean | — | false
 accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode` is `true` | string | — | —
 on-preview | hook function when clicking the uploaded files | function(file) | — | —
--- a/examples/docs/zh-CN/icon.md
+++ b/examples/docs/zh-CN/icon.md
@ -11,7 +11,6 @@
 </script>
 <style>
  .demo-icon .source > i {
-    font-size: 24px;
    color: #8492a6;
    margin: 0 20px;
    font-size: 1.5em;
@ -92,3 +91,33 @@
    </span>
  </li>
 </ul>
+
+### 第三方图标库
+
+Element 的一些组件提供了 `icon` 属性（如 Input），如果希望传入第三方图标库中的图标，需要进行如下操作：
+<p>
+  <span>1.</span> 修改第三方图标库的前缀（见下方说明）
+</p>
+<p>
+  <span>2.</span> 添加以下 CSS：
+</p>
+
+```CSS
+[class^="el-icon-my"], [class*=" el-icon-my"] {
+  font-family:"your-font-family" !important;
+  
+  /* 以下内容参照第三方图标库本身的规则 */
+  font-size: inherit;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+之后就可以像使用 Element 内置图标一样使用第三方图标。比如在 el-input 中：
+
+```html
+<el-input icon="my-xxx" />
+```
+
+关于如何修改第三方图标库的前缀，请参阅第三方图标库的文档。比如，如果使用 [iconfont.cn](http://iconfont.cn/)，则可以在「编辑项目」弹框中修改；如果使用 [Font Awesome](http://fontawesome.io/)，可以参考[这个示例](https://github.com/ElementUI/element-font-awesome)。
--- a/examples/docs/zh-CN/layout.md
+++ b/examples/docs/zh-CN/layout.md
@ -352,7 +352,7 @@
 ### Col Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| span | 栅格占据的列数 | number | — | — |
+| span | 栅格占据的列数 | number | — | 24 |
 | offset | 栅格左侧的间隔格数 | number | — | 0 |
 | push |  栅格向右移动格数 | number | — | 0 |
 | pull |  栅格向左移动格数 | number | — | 0 |
--- a/examples/play/component.vue
+++ b/examples/play/component.vue
@ -1,27 +0,0 @@
-<template>
-  <div>
-    <el-button @click="value = '#fff'">Change Value</el-button>
-    <div>Value: {{ value }}</div>
-    <el-color-picker v-model="value"></el-color-picker>
-
-    <div>Value2: {{ value2 }}</div>
-    <el-color-picker v-model="value2" show-alpha></el-color-picker>
-  </div>
-</template>
-
-<style scoped>
-</style>
-
-<script type="text/ecmascript-6">
-  export default {
-    methods: {
-    },
-
-    data() {
-      return {
-        value: '#bfcbd9',
-        value2: null
-      };
-    }
-  };
-</script>
--- a/examples/play/index.vue
+++ b/examples/play/index.vue
@ -1,14 +1,8 @@
 <template>
  <div style="margin: 20px;">
-    <!-- Write your component in component.vue -->
-    <play-component></play-component>
  </div>
 </template>
 <script>
-  import PlayComponent from './component.vue';
  export default {
-    components: {
-      PlayComponent
-    }
  };
 </script>
--- a/examples/versions.json
+++ b/examples/versions.json
@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.2":"1.4"}
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.7":"1.3","1.4.3":"1.4"}
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "element-ui",
-  "version": "1.4.2",
+  "version": "1.4.3",
  "description": "A Component Library for Vue.js.",
  "main": "lib/element-ui.common.js",
  "files": [
--- a/packages/alert/src/main.vue
+++ b/packages/alert/src/main.vue
@ -78,11 +78,11 @@
      },

      isBigIcon() {
-        return this.description ? 'is-big' : '';
+        return this.description || this.$slots.default ? 'is-big' : '';
      },

      isBoldTitle() {
-        return this.description ? 'is-bold' : '';
+        return this.description || this.$slots.default ? 'is-bold' : '';
      }
    }
  };
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@ -11,7 +11,7 @@
      @blur="handleBlur"
      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
-      @keydown.enter.native.prevent="handleKeyEnter"
+      @keydown.enter.native="handleKeyEnter"
      @keydown.native.tab="close"
    >
      <template slot="prepend" v-if="$slots.prepend">
@ -138,8 +138,9 @@
      close(e) {
        this.activated = false;
      },
-      handleKeyEnter() {
+      handleKeyEnter(e) {
        if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
+          e.preventDefault();
          this.select(this.suggestions[this.highlightedIndex]);
        }
      },
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@ -15,9 +15,9 @@
      }
    ]"
  >
-    <i class="el-icon-loading" v-if="loading"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
-    <span v-if="$slots.default"><slot></slot></span>
+    <i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
+    <i :class="'el-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
+    <span v-if="$slots.default" @click="handleInnerClick"><slot></slot></span>
  </button>
 </template>
 <script>
@ -48,6 +48,11 @@
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
+      },
+      handleInnerClick(evt) {
+        if (this.disabled) {
+          evt.stopPropagation();
+        }
      }
    }
  };
--- a/packages/carousel/src/item.vue
+++ b/packages/carousel/src/item.vue
@ -6,7 +6,8 @@
      'is-active': active,
      'el-carousel__item--card': $parent.type === 'card',
      'is-in-stage': inStage,
-      'is-hover': hover
+      'is-hover': hover,
+      'is-animating': animating
    }"
    @click="handleItemClick"
    :style="{
@ -43,7 +44,8 @@
        scale: 1,
        active: false,
        ready: false,
-        inStage: false
+        inStage: false,
+        animating: false
      };
    },

@ -71,9 +73,12 @@
        }
      },

-      translateItem(index, activeIndex) {
+      translateItem(index, activeIndex, oldIndex) {
        const parentWidth = this.$parent.$el.offsetWidth;
        const length = this.$parent.items.length;
+        if (this.$parent.type !== 'card' && oldIndex !== undefined) {
+          this.animating = index === activeIndex || index === oldIndex;
+        }
        if (index !== activeIndex && length > 2) {
          index = this.processIndex(index, activeIndex, length);
        }
--- a/packages/carousel/src/main.vue
+++ b/packages/carousel/src/main.vue
@ -106,7 +106,7 @@ export default {
    },

    activeIndex(val, oldVal) {
-      this.resetItemPosition();
+      this.resetItemPosition(oldVal);
      this.$emit('change', val, oldVal);
    },

@ -156,9 +156,9 @@ export default {
      this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');
    },

-    resetItemPosition() {
+    resetItemPosition(oldIndex) {
      this.items.forEach((item, index) => {
-        item.translateItem(index, this.activeIndex);
+        item.translateItem(index, this.activeIndex, oldIndex);
      });
    },

--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@ -2,6 +2,26 @@
  import { isDef } from 'element-ui/src/utils/shared';
  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';

+  const copyArray = (arr, props) => {
+    if (!arr || !Array.isArray(arr) || !props) return arr;
+    const result = [];
+    const configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
+    const childrenProp = props.children || 'children';
+    arr.forEach(item => {
+      const itemCopy = {};
+      configurableProps.forEach(prop => {
+        const propName = props[prop] || prop;
+        const value = item[propName];
+        if (value !== undefined) itemCopy[propName] = value;
+      });
+      if (Array.isArray(item[childrenProp])) {
+        itemCopy[childrenProp] = copyArray(item[childrenProp], props);
+      }
+      result.push(itemCopy);
+    });
+    return result;
+  };
+
  export default {
    name: 'ElCascaderMenu',

@ -45,7 +65,7 @@
              if (option.__IS__FLAT__OPTIONS) return;
              configurableProps.forEach(prop => {
                const value = option[this.props[prop] || prop];
-                if (value) option[prop] = value;
+                if (value !== undefined) option[prop] = value;
              });
              if (Array.isArray(option.children)) {
                formatOptions(option.children);
@ -66,8 +86,9 @@
            return activeOptions;
          };

-          formatOptions(this.options);
-          return loadActiveOptions(this.options);
+          const optionsCopy = copyArray(this.options, this.props);
+          formatOptions(optionsCopy);
+          return loadActiveOptions(optionsCopy);
        }
      }
    },
--- a/packages/date-picker/src/basic/month-table.vue
+++ b/packages/date-picker/src/basic/month-table.vue
@ -82,7 +82,14 @@
              break;
            }
          }
-          if ((date - nextMonth) === 0) flag = true;
+          // There is a bug of Chrome.
+          // For example:
+          // var date = new Date('1988-04-01 00:00:00') Fri Apr 01 1988 00:00:00 GMT+0800 (CST)
+          // date.setMonth(4) Sun May 01 1988 00:00:00 GMT+0900 (CDT)
+          // Sometimes the time zone will change.
+          if (date - nextMonth < 8.64e7) {
+            flag = true;
+          }
        }

        style.disabled = flag;
--- a/packages/date-picker/src/basic/time-spinner.vue
+++ b/packages/date-picker/src/basic/time-spinner.vue
@ -177,7 +177,7 @@

      handleScroll(type) {
        const ajust = {};
-        ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), 59);
+        ajust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
        this.debounceAjustElTop(type);
        this.$emit('change', ajust);
      },
--- a/packages/date-picker/src/util/index.js
+++ b/packages/date-picker/src/util/index.js
@ -8,7 +8,8 @@ const getI18nSettings = () => {
    dayNamesShort: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
    dayNames: weeks.map(week => t(`el.datepicker.weeks.${ week }`)),
    monthNamesShort: months.map(month => t(`el.datepicker.months.${ month }`)),
-    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`))
+    monthNames: months.map((month, index) => t(`el.datepicker.month${ index + 1 }`)),
+    amPm: ['am', 'pm']
  };
 };

--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@ -83,6 +83,7 @@
          ? this.$refs.trigger.$el
          : this.$slots.default[0].elm;

+        if (triggerElm.disabled) return;
        if (trigger === 'hover') {
          triggerElm.addEventListener('mouseenter', show);
          triggerElm.addEventListener('mouseleave', hide);
--- a/packages/input/src/calcTextareaHeight.js
+++ b/packages/input/src/calcTextareaHeight.js
@ -28,8 +28,8 @@ const CONTEXT_STYLE = [
  'box-sizing'
 ];

-function calculateNodeStyling(node) {
-  const style = window.getComputedStyle(node);
+function calculateNodeStyling(targetElement) {
+  const style = window.getComputedStyle(targetElement);

  const boxSizing = style.getPropertyValue('box-sizing');

@ -51,7 +51,7 @@ function calculateNodeStyling(node) {
 }

 export default function calcTextareaHeight(
-  targetNode,
+  targetElement,
  minRows = null,
  maxRows = null
 ) {
@ -65,10 +65,10 @@ export default function calcTextareaHeight(
    borderSize,
    boxSizing,
    contextStyle
-  } = calculateNodeStyling(targetNode);
+  } = calculateNodeStyling(targetElement);

  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
+  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';

  let height = hiddenTextarea.scrollHeight;

--- a/packages/loading/src/directive.js
+++ b/packages/loading/src/directive.js
@ -8,8 +8,8 @@ exports.install = Vue => {
    if (binding.value) {
      Vue.nextTick(() => {
        if (binding.modifiers.fullscreen) {
-          el.originalPosition = document.body.style.position;
-          el.originalOverflow = document.body.style.overflow;
+          el.originalPosition = getStyle(document.body, 'position');
+          el.originalOverflow = getStyle(document.body, 'overflow');

          addClass(el.mask, 'is-fullscreen');
          insertDom(document.body, el, binding);
@ -17,7 +17,7 @@ exports.install = Vue => {
          removeClass(el.mask, 'is-fullscreen');

          if (binding.modifiers.body) {
-            el.originalPosition = document.body.style.position;
+            el.originalPosition = getStyle(document.body, 'position');

            ['top', 'left'].forEach(property => {
              let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
@ -29,7 +29,7 @@ exports.install = Vue => {

            insertDom(document.body, el, binding);
          } else {
-            el.originalPosition = el.style.position;
+            el.originalPosition = getStyle(el, 'position');
            insertDom(el, el, binding);
          }
        }
@ -57,7 +57,7 @@ exports.install = Vue => {
        el.mask.style[property] = el.maskStyle[property];
      });

-      if (el.originalPosition !== 'absolute') {
+      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
        parent.style.position = 'relative';
      }
      if (binding.modifiers.fullscreen && binding.modifiers.lock) {
--- a/packages/loading/src/index.js
+++ b/packages/loading/src/index.js
@ -1,5 +1,6 @@
 import Vue from 'vue';
 import loadingVue from './loading.vue';
+import { getStyle } from 'element-ui/src/utils/dom';
 import merge from 'element-ui/src/utils/merge';

 const LoadingConstructor = Vue.extend(loadingVue);
@ -41,10 +42,10 @@ LoadingConstructor.prototype.close = function() {
 const addStyle = (options, parent, instance) => {
  let maskStyle = {};
  if (options.fullscreen) {
-    instance.originalPosition = document.body.style.position;
-    instance.originalOverflow = document.body.style.overflow;
+    instance.originalPosition = getStyle(document.body, 'position');
+    instance.originalOverflow = getStyle(document.body, 'overflow');
  } else if (options.body) {
-    instance.originalPosition = document.body.style.position;
+    instance.originalPosition = getStyle(document.body, 'position');
    ['top', 'left'].forEach(property => {
      let scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
      maskStyle[property] = options.target.getBoundingClientRect()[property] +
@ -56,7 +57,7 @@ const addStyle = (options, parent, instance) => {
      maskStyle[property] = options.target.getBoundingClientRect()[property] + 'px';
    });
  } else {
-    instance.originalPosition = parent.style.position;
+    instance.originalPosition = getStyle(parent, 'position');
  }
  Object.keys(maskStyle).forEach(property => {
    instance.$el.style[property] = maskStyle[property];
@ -86,7 +87,7 @@ const Loading = (options = {}) => {
  });

  addStyle(options, parent, instance);
-  if (instance.originalPosition !== 'absolute') {
+  if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') {
    parent.style.position = 'relative';
  }
  if (options.fullscreen && options.lock) {
--- a/packages/menu/src/menu-item.vue
+++ b/packages/menu/src/menu-item.vue
@ -48,7 +48,7 @@
    },
    computed: {
      active() {
-        return this.index === this.rootMenu.activedIndex;
+        return this.index === this.rootMenu.activeIndex;
      }
    },
    methods: {
--- a/packages/menu/src/menu.vue
+++ b/packages/menu/src/menu.vue
@ -116,7 +116,7 @@
    },
    data() {
      return {
-        activedIndex: this.defaultActive,
+        activeIndex: this.defaultActive,
        openedMenus: this.defaultOpeneds ? this.defaultOpeneds.slice(0) : [],
        items: {},
        submenus: {}
@ -126,10 +126,10 @@
      defaultActive(value) {
        const item = this.items[value];
        if (item) {
-          this.activedIndex = item.index;
+          this.activeIndex = item.index;
          this.initOpenedMenu();
        } else {
-          this.activedIndex = '';
+          this.activeIndex = '';
        }

      },
@ -164,7 +164,7 @@
        }
        this.openedMenus.push(index);
      },
-      closeMenu(index, indexPath) {
+      closeMenu(index) {
        this.openedMenus.splice(this.openedMenus.indexOf(index), 1);
      },
      handleSubmenuClick(submenu) {
@ -172,7 +172,7 @@
        let isOpened = this.openedMenus.indexOf(index) !== -1;

        if (isOpened) {
-          this.closeMenu(index, indexPath);
+          this.closeMenu(index);
          this.$emit('close', index, indexPath);
        } else {
          this.openMenu(index, indexPath);
@ -181,7 +181,7 @@
      },
      handleItemClick(item) {
        let { index, indexPath } = item;
-        this.activedIndex = item.index;
+        this.activeIndex = item.index;
        this.$emit('select', index, indexPath, item);

        if (this.mode === 'horizontal' || this.collapse) {
@ -194,7 +194,7 @@
      },
      // 初始化展开菜单
      initOpenedMenu() {
-        const index = this.activedIndex;
+        const index = this.activeIndex;
        const activeItem = this.items[index];
        if (!activeItem || this.mode === 'horizontal' || this.collapse) return;

--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@ -132,7 +132,7 @@
        }
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
-          this.rootMenu.closeMenu(this.index, this.indexPath);
+          this.rootMenu.closeMenu(this.index);
        }, 300);
      }
    },
--- a/packages/message-box/src/main.js
+++ b/packages/message-box/src/main.js
@ -157,6 +157,8 @@ MessageBox.alert = (message, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
+  } else if (title === undefined) {
+    title = '';
  }
  return MessageBox(merge({
    title: title,
@ -171,6 +173,8 @@ MessageBox.confirm = (message, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
+  } else if (title === undefined) {
+    title = '';
  }
  return MessageBox(merge({
    title: title,
@ -184,6 +188,8 @@ MessageBox.prompt = (message, title, options) => {
  if (typeof title === 'object') {
    options = title;
    title = '';
+  } else if (title === undefined) {
+    title = '';
  }
  return MessageBox(merge({
    title: title,
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@ -3,7 +3,7 @@
    <div class="el-message-box__wrapper" tabindex="-1" v-show="visible" @click.self="handleWrapperClick">
      <div class="el-message-box" :class="customClass">
        <div class="el-message-box__header" v-if="title !== undefined">
-          <div class="el-message-box__title">{{ title || t('el.messagebox.title') }}</div>
+          <div class="el-message-box__title">{{ title }}</div>
          <button type="button" class="el-message-box__headerbtn" aria-label="Close" 
                  v-if="showClose" @click="handleAction('cancel')">
            <i class="el-message-box__close el-icon-close"></i>
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@ -141,6 +141,7 @@
        if (this.dragging) {
          this.isClick = false;
          this.displayTooltip();
+          this.$parent.resetSize();
          let diff = 0;
          if (this.vertical) {
            this.currentY = event.clientY;
--- a/packages/slider/src/main.vue
+++ b/packages/slider/src/main.vue
@ -220,6 +220,7 @@

      onSliderClick(event) {
        if (this.disabled || this.dragging) return;
+        this.resetSize();
        if (this.vertical) {
          const sliderOffsetBottom = this.$refs.slider.getBoundingClientRect().bottom;
          this.setPosition((sliderOffsetBottom - event.clientY) / this.sliderSize * 100);
--- a/packages/table/src/table-body.js
+++ b/packages/table/src/table-body.js
@ -220,7 +220,7 @@ export default {

        this.tooltipContent = cell.innerText;
        tooltip.referenceElm = cell;
-        tooltip.$refs.popper.style.display = 'none';
+        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
        tooltip.doDestroy();
        tooltip.setExpectedState(true);
        this.activateTooltip(tooltip);
--- a/packages/table/src/table-footer.js
+++ b/packages/table/src/table-footer.js
@ -23,7 +23,7 @@ export default {
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
-            return parseFloat((prev + curr).toFixed(precision));
+            return parseFloat((prev + curr).toFixed(Math.min(precision, 20)));
          } else {
            return prev;
          }
--- a/packages/table/src/table.vue
+++ b/packages/table/src/table.vue
@ -257,11 +257,13 @@
        });

        const scrollBodyWrapper = event => {
-          const deltaX = event.deltaX;
+          const { deltaX, deltaY } = event;
+
+          if (Math.abs(deltaX) < Math.abs(deltaY)) return;

          if (deltaX > 0) {
            this.bodyWrapper.scrollLeft += 10;
-          } else {
+          } else if (deltaX < 0) {
            this.bodyWrapper.scrollLeft -= 10;
          }
        };
--- a/packages/theme-default/package.json
+++ b/packages/theme-default/package.json
@ -1,6 +1,6 @@
 {
  "name": "element-theme-default",
-  "version": "1.4.2",
+  "version": "1.4.3",
  "description": "Element component default theme.",
  "main": "lib/index.css",
  "style": "lib/index.css",
--- a/packages/theme-default/src/carousel-item.css
+++ b/packages/theme-default/src/carousel-item.css
@ -11,15 +11,20 @@
      width: 100%;
      height: 100%;
      display: inline-block;
-      transition: .4s ease-in-out;
      overflow: hidden;
      z-index: calc(var(--index-normal) - 1);
+
      @when active {
        z-index: calc(var(--index-normal) + 1);
      }

+      @when animating {
+        transition: transform .4s ease-in-out;
+      }
+
      @modifier card {
        width: 50%;
+        transition: transform .4s ease-in-out;
        &.is-in-stage {
          cursor: pointer;
          z-index: var(--index-normal);
--- a/packages/theme-default/src/dialog.css
+++ b/packages/theme-default/src/dialog.css
@ -29,6 +29,7 @@

    @e header {
      padding: 20px 20px 0;
+      @utils-clearfix;
    }

    @e headerbtn {
@ -38,6 +39,7 @@
      outline: none;
      padding: 0;
      cursor: pointer;
+      font-size: 16px;

      .el-dialog__close {
        color: var(--dialog-close-color);
--- a/packages/theme-default/src/input-number.css
+++ b/packages/theme-default/src/input-number.css
@ -7,6 +7,7 @@
    display: inline-block;
    width: 180px;
    position: relative;
+    line-height: normal;
    
    & .el-input {
      display: block;
--- a/packages/theme-default/src/menu.css
+++ b/packages/theme-default/src/menu.css
@ -142,10 +142,11 @@

      > .el-menu-item,
      > .el-submenu > .el-submenu__title {
-        text-align: center;
        [class^="el-icon-"] {
          margin: 0;
          vertical-align: middle;
+          width: 24px;
+          text-align: center;
        }
        .el-submenu__icon-arrow {
          display: none;
@ -181,8 +182,12 @@
    @extend menu-item;
    
    & [class^="el-icon-"] {
-      vertical-align: baseline;
-      margin-right: 10px;
+      margin-right: 5px;
+      width: 24px;
+      text-align: center;
+    }
+    & * {
+      vertical-align: middle;
    }
    &:first-child {
      margin-left: 0;
@ -206,6 +211,10 @@
      &:hover {
        background-color: var(--color-base-gray);
      }
+
+      & * {
+        vertical-align: middle;
+      }
    }
    & .el-menu {
      background-color: var(--color-light-gray);
@ -239,8 +248,10 @@
      }
    }
    [class^="el-icon-"] {
-      vertical-align: baseline;
-      margin-right: 10px;
+      vertical-align: middle;
+      margin-right: 5px;
+      width: 24px;
+      text-align: center;
    }
  }

@ -257,3 +268,8 @@
    }
  }
 }
+
+.horizontal-collapse-transition .el-submenu__title .el-submenu__icon-arrow {
+  transition: .2s;
+  opacity: 0;
+}
--- a/packages/theme-default/src/pagination.css
+++ b/packages/theme-default/src/pagination.css
@ -131,6 +131,7 @@
      margin: 0 6px;
      box-sizing: border-box;
      transition: border .3s;
+      -moz-appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
--- a/packages/theme-default/src/progress.css
+++ b/packages/theme-default/src/progress.css
@ -96,6 +96,7 @@
      text-align: right;
      border-radius: 100px;
      line-height: 1;
+      white-space: nowrap;

      @utils-vertical-center;
    }
--- a/src/index.js
+++ b/src/index.js
@ -168,7 +168,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };

 module.exports = {
-  version: '1.4.2',
+  version: '1.4.3',
  locale: locale.use,
  i18n: locale.i18n,
  install,
--- a/src/locale/lang/tk.js
+++ b/src/locale/lang/tk.js
@ -5,7 +5,7 @@ export default {
      clear: 'Arassala'
    },
    datepicker: {
-      now: 'Ýaňy',
+      now: 'Şuwagt',
      today: 'Şügün',
      cancel: 'Bes et',
      clear: 'Arassala',
@ -97,7 +97,7 @@ export default {
      noData: 'Hiçzat ýok',
      titles: ['Sanaw 1', 'Sanaw 2'],
      filterPlaceholder: 'Gözleg sözlerini giriziň',
-      noCheckedFormat: '{total} element',
+      noCheckedFormat: '{total} sany',
      hasCheckedFormat: '{checked}/{total} saýlanan'
    }
  }
--- a/src/utils/popup/index.js
+++ b/src/utils/popup/index.js
@ -2,6 +2,7 @@ import Vue from 'vue';
 import merge from 'element-ui/src/utils/merge';
 import PopupManager from 'element-ui/src/utils/popup/popup-manager';
 import getScrollBarWidth from '../scrollbar-width';
+import { getStyle } from '../dom';

 let idSeed = 1;
 const transitions = [];
@ -191,7 +192,8 @@ export default {
          }
          scrollBarWidth = getScrollBarWidth();
          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-          if (scrollBarWidth > 0 && bodyHasOverflow) {
+          let bodyOverflowY = getStyle(document.body, 'overflowY');
+          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll')) {
            document.body.style.paddingRight = scrollBarWidth + 'px';
          }
          document.body.style.overflow = 'hidden';
--- a/test/unit/specs/progress.spec.js
+++ b/test/unit/specs/progress.spec.js
@ -87,4 +87,12 @@ describe('Progress', () => {
    expect(vm.$el.querySelector('.el-progress-circle').style.height).to.be.equal('120px');
    expect(vm.$el.querySelector('.el-progress-circle').style.width).to.be.equal('120px');
  });
+  it('should work with stroke-width', () => {
+    vm = createVue({
+      template: `
+        <el-progress :text-inside="true" :stroke-width="36" :percentage="0"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.querySelector('.el-progress-bar__innerText').offsetTop).to.be.equal(12);
+  });
 });