Merge branch 'carbon-1' into carbon

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*

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*
 

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>

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" />
+```

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 |

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) | — | —

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)。

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 |

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>

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>

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"}

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": [

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' : '';
       }
     }
   };

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]);
         }
       },

packages/button/src/button.vue

@@ -15,9 +15,9 @@
       }
     ]"
   >
-    <i class="el-icon-loading" v-if="loading"></i>
+    <i class="el-icon-loading" v-if="loading" @click="handleInnerClick"></i>
-    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
+    <i :class="'el-icon-' + icon" v-if="icon && !loading" @click="handleInnerClick"></i>
-    <span v-if="$slots.default"><slot></slot></span>
+    <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();
+        }
       }
     }
   };

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

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);
       });
     },
 

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);
+          const optionsCopy = copyArray(this.options, this.props);
-          return loadActiveOptions(this.options);
+          formatOptions(optionsCopy);
+          return loadActiveOptions(optionsCopy);
         }
       }
     },

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;

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);
       },

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']
   };
 };
 

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

packages/input/src/calcTextareaHeight.js

@@ -28,8 +28,8 @@ const CONTEXT_STYLE = [
   'box-sizing'
 ];
 
-function calculateNodeStyling(node) {
+function calculateNodeStyling(targetElement) {
-  const style = window.getComputedStyle(node);
+  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;
 

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.originalPosition = getStyle(document.body, 'position');
-          el.originalOverflow = document.body.style.overflow;
+          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) {

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.originalPosition = getStyle(document.body, 'position');
-    instance.originalOverflow = document.body.style.overflow;
+    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) {

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: {

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;
 

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);
       }
     },

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,

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>

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;

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

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

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;
           }

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;
           }
         };

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",

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

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

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;

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: 5px;
-      margin-right: 10px;
+      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;
+      vertical-align: middle;
-      margin-right: 10px;
+      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;
+}

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 {

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;
     }

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,

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'
     }
   }

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';

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);
+  });
 });