Popper: workaround for #3952 (#4062)

* Popper: workaround for #3952

* Changelog: update for 1.2.8

CHANGELOG.en-US.md

@@ -1,5 +1,18 @@
 ## Changelog
 
+### 1.2.8
+
+*2017-04-07*
+
+- Fixed `resetFields` of Form reassigning form items, #3840 (by @pengchongfu)
+- Added `max` and `min` attributes for CheckboxGroup, #3700 (by @mdartic)
+- Fixed DatePicker adding one to picked month in some specific days, #3935
+- Added `closeAll` method for Message, #3966 (by @pengchongfu)
+- Added `format-tooltip` attribute for Slider, #3657 (by @liyanlong)
+- Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)
+- Fixed single Select unable to create new items in Vue 2.2.x, #3984
+- Fixed Row disappearing in all breakpoints if its `span` is set to 0 in some breakpoints, #4053
+
 ### 1.2.7
 
 *2017-03-29*

CHANGELOG.zh-CN.md

@@ -1,5 +1,17 @@
 ## 更新日志
 
+### 1.2.8
+*2017-04-07*
+
+- 修复 Form 的 `resetFields` 会给表单项重新赋值的问题，#3840（by @pengchongfu）
+- 新增 CheckboxGroup 的 `max` 和 `min` 属性，#3700（by @mdartic）
+- 修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935
+- 新增 Message 的 `closeAll` 方法，#3966（by @pengchongfu）
+- 新增 Slider 的 `format-tooltip` 属性，#3657（by @liyanlong）
+- 修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）
+- 修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984
+- 修复某些断点下 `span` 为 0 的 Row 在其他断点下也会消失的问题，#4053
+
 ### 1.2.7
 *2017-03-29*
 

examples/docs/en-US/checkbox.md

@@ -172,10 +172,6 @@ The `min` and `max` properties can help you to limit the number of checked items
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
-  let handlerLimitExceeded = (event) => {
-    currentEvent = event;
-    console.log(event);
-  }
   export default {
     data() {
       return {

examples/docs/en-US/tree.md

@@ -504,7 +504,7 @@ Tree nodes can be initially expanded or checked
 ### Custom node content
 The content of tree nodes can be customized, so you can add icons or buttons as you will
 
-::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions.
+::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
 <el-tree
   :data="data2"

examples/docs/zh-CN/checkbox.md

@@ -164,9 +164,9 @@
 ```
 :::
 
-### Minimum / Maximum items checked (to be translated)
+### 可选项目数量的限制
 
-The `min` and `max` properties can help you to limit the number of checked items.
+使用 `min` 和 `max` 属性能够限制可以被勾选的项目的数量。
 
 :::demo
 
@@ -181,10 +181,6 @@ The `min` and `max` properties can help you to limit the number of checked items
 </template>
 <script>
   const cityOptions = ['上海', '北京', '广州', '深圳'];
-  let handlerLimitExceeded = (event) => {
-    currentEvent = event;
-    console.log(event);
-  }
   export default {
     data() {
       return {
@@ -207,11 +203,11 @@ The `min` and `max` properties can help you to limit the number of checked items
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
-### Checkbox-group Attributes (to be translated)
-| Attribute      | Description         | Type    | Options                         | Default|
+### Checkbox-group Attributes
+| 参数       | 说明        | 类型    | 可选值                         | 默认值 |
 |---------- |-------- |---------- |-------------  |-------- |
-| min     | minimum number of checkbox checked   | number    |       —        |     —    |
-| max     | maximum number of checkbox checked   | number    |       —        |     —    |
+| min     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
+| max     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 
 
 ### Checkbox-group Events

examples/docs/zh-CN/tree.md

@@ -526,7 +526,7 @@
 ### 自定义节点内容
 节点的内容支持自定义，可以在节点区添加按钮或图标等内容
 
-::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。
+::: demo 使用`render-content`指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
 ```html
 <el-tree
   :data="data2"

examples/index.tpl

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
+    <link rel='mask-icon' href="//fuss10.elemecdn.com/9/92/3a6e19a64a8ed173a4677ec0e412bsvg.svg" color="#20a0ff">
     <title>Element</title>
   </head>
   <body>

packages/dialog/src/component.vue

@@ -25,11 +25,13 @@
 
 <script>
   import Popup from 'element-ui/src/utils/popup';
+  import throttle from 'throttle-debounce/throttle';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElDialog',
 
-    mixins: [Popup],
+    mixins: [Popup, emitter],
 
     props: {
       title: {
@@ -96,10 +98,12 @@
         this.$emit('input', val);
         if (val) {
           this.$emit('open');
+          this.$el.addEventListener('scroll', this.throttledUpdatePopper);
           this.$nextTick(() => {
             this.$refs.dialog.scrollTop = 0;
           });
         } else {
+          this.$el.removeEventListener('scroll', this.throttledUpdatePopper);
           this.$emit('close');
         }
       }
@@ -119,9 +123,17 @@
         if (this.closeOnClickModal) {
           this.close();
         }
+      },
+      updatePopper() {
+        this.broadcast('ElSelectDropdown', 'updatePopper');
+        this.broadcast('ElDropdownMenu', 'updatePopper');
       }
     },
 
+    created() {
+      this.throttledUpdatePopper = throttle(100, this.updatePopper);
+    },
+
     mounted() {
       if (this.value) {
         this.rendered = true;

packages/dropdown/src/dropdown-menu.vue

@@ -16,6 +16,7 @@
     mixins: [Popper],
 
     created() {
+      this.$on('updatePopper', this.updatePopper);
       this.$on('visible', val => {
         this.showPopper = val;
       });