Changelog: update for 2.0.0-alpha.1 (#7303)

* minor updates & fixes

* Changelog: update for 2.0.0-alpha.1

* update zh installation doc

* update demo block scroll

CHANGELOG.en-US.md

@@ -1,5 +1,122 @@
 ## Changelog
 
+### 2.0.0-alpha.1
+
+*2017-09-30*
+
+#### New features
+- General
+  - A new theme: `theme-chalk`
+  - Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
+  - Layout components: Container, Header, Aside, Main, Footer
+- Button
+  - Added `round` attribute. It's used for round-cornered Buttons #6643
+- TimeSelect
+  - Now can be navigated by `Up` and `Down`, and hitting `Enter` selects the time #6023
+- TimePicker
+  - Now can be navigated by arrow keys, and hitting `Enter` selects the time #6050
+  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
+- Tree
+  - Now child nodes don't render before the first expand #6257
+  - Added `check-descendants` attribute. It determines if child nodes are checked when checking their parent node
+in `lazy` mode #6235
+- Tag
+  - Added `size` attribute #7203
+- Datepicker
+  - Now `timeFormat` can format the TimePicker when type is set to `datetimerange` #6052
+  - Added `start-placeholder` and `end-placeholder`. They're placeholders for the two input boxes in range mode #7169
+- MessageBox
+  - Added `closeOnHashChange` attribute #6043
+  - Added `center` attribute so that the content can be centered #7029
+  - Added `roundButton` attribute to display round Buttons #7029
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6043
+- Dialog
+  - Added `width`、`fullscreen`、`append-to-body` attributes. Now Dialog can be nested
+  - Added `center` attribute so that the content can be centered #7042
+  - Added `focus-after-closed`、`focus-after-open` to improve accessibility #6511
+- ColorPicker
+  - Now you can type colors in the input box #6167
+  - Added `size` and `disabled` attributes #7026
+- Message
+  - Now color of the icons can be overridden by CSS #6207
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6207
+  - Added `center` attribute so that the content can be centered #6875
+- Notification
+  - Added `position` attribute to configure where Notification pops up #6231
+  - Added `dangerouslyUseHTMLString` attribute. When set to `true`, `message` will be parsed as HTML string<sup>*</sup> #6231
+  - Added `showClose` attribute to hide the close button #6402
+- Rate
+  - Added `show-score` attribute to determine if current score is displayed #6295
+- Tabs
+  - Added `tab-position` attribute #6096
+- Radio
+  - Improved accessibility #6101
+  - Added `border` and `size` attributes #6690
+- Checkbox
+  - Added `border` and `size` attributes #6690
+- Alert
+  - Added `center` attribute so that the content can be centered #6876
+- Menu
+  - Added `background-color`, `text-color` and `active-text-color` attributes #7064
+- Form
+  - Added `inline-message` attribute to determine if the validation message is displayed in inline style #7032
+  - Added `status-icon` attribute to display a feedback icon when validated #7032
+- Input
+  - Added `suffix` and `prefix` named slots, `suffixIcon` and `prefixIcon` attributes to add contents inside the input box #7032
+- Breadcrumb
+  - Added `separator-class` attribute to support icons as item separators #7203
+- Steps
+  - Added `simple` attribute to activate simple-styled Steps #7274
+
+#### Bug fixes
+- DatePicker
+  - Fixed `v-model` returning the second day of the selected week in week mode #6038
+  - Fixed the first input being cleared in `daterange` type #6021
+- DateTimePicker
+  - Fixed DateTimePicker and TimePicker affecting each other when picked #6090
+  - Fixed hour and second can be beyond limit when selecting time #6076
+- TimePicker
+  - Fixed `v-model` not update correctly when blurred #6023
+- Dialog
+  - Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
+- Select
+  - Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
+
+#### Breaking changes
+- General
+  - Removed `theme-default`
+  - `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
+  - `size` attribute of Button and form components can no longer be set to `large`. Now they accept `medium`, `small` and `mini`
+  - To facilitate the use of third-party icons, `icon` attribute of Button and Steps, `prefix-icon` and `suffix-icon` attributes of Input now require a full class name
+- Dialog
+  - Removed `size` attribute. Now the size of Dialog can be configured by `width` and `fullscreen`
+  - Now the visibility of Dialog cannot be controlled by `v-model`
+- Rate
+  - `text-template` is renamed to `score-template`
+- Dropdown
+  - `menu-align` is renamed to `placement`. Now it supports more positions
+- Transfer
+  - `footer-format` is renamed to `format`
+- Switch
+  - `on-text` and `off-text` attributes now don't have default values
+- Tag
+  - `type` attribute now accepts `success`, `info`, `warning` and `danger`
+- Menu
+  - Removed `theme` attribute. The color of Menu can be configured using `background-color`, `text-color` and `active-text-color`
+- Input
+  - Removed `icon` attribute. Now the suffix icon can be configured using `suffix-icon` attribute or `suffix` named slot
+  - Removed `on-icon-click` attribute and `click` event. Now to add click handler on icons, please use named slots
+- Autocomplete
+  - Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
+- Table
+  - Removed support for customizing column template using `inline-template`
+- Steps
+  - Removed `center` attribute
+  - Now the Steps will fill its parent container by default
+
+##
+<i><sup>*</sup> Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). So when `dangerouslyUseHTMLString` is on, please make sure the content of `message` is trusted, and **never** assign `message` to user-provided content.</i>
+
 ### 1.4.6
 
 *2017-09-27*

CHANGELOG.zh-CN.md

@@ -1,5 +1,120 @@
 ## 更新日志
 
+### 2.0.0-alpha.1
+*2017-09-30*
+
+#### 新特性
+- 综合
+  - 新增 `theme-chalk` 主题
+  - 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload
+  - 新增布局组件 Container、Header、Aside、Main 和 Footer
+- Button
+  - 新增 `round` 属性，用于圆角按钮 #6643
+- TimeSelect
+  - 可以用 `Up`、`Down` 导航，用 `Enter` 选中时间 #6023
+- TimePicker
+  - 可以用方向键导航，用 `Enter` 选中时间 #6050
+  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
+- Tree
+  - 子节点在首次被展开之前不进行渲染 #6257
+  - 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235
+- Tag
+  - 新增 `size` 属性 #7203
+- Datepicker
+  - type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052
+  - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
+- MessageBox
+  - 新增 `closeOnHashChange` 属性 #6043
+  - 新增 `center` 属性，提供居中布局 #7029
+  - 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043
+- Dialog
+  - 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用
+  - 新增 `center` 属性，提供居中布局 #7042
+  - 新增 `focus-after-closed`、`focus-after-open`属性，支持无障碍访问 #6511
+- ColorPicker
+  - 增加手动输入色值的支持 #6167
+  - 新增 `size` 属性，用于控制组件的大小 #7026
+  - 新增 `disabled` 属性，用于禁用组件 #7026
+- Message
+  - 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207
+  - 新增 `center` 属性，提供居中布局 #6875
+- Notification
+  - 新增 `position` 属性，用于配置 Notification 出现的位置 #6231
+  - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6231
+  - 新增 `showClose` 属性，用于隐藏关闭按钮 #6402
+- Rate
+  - 新增 `show-score` 属性，控制是否在右侧显示当前分数 #6295
+- Tabs
+  - 新增 `tab-position` 属性，控制选项面板内容显示的上、下、左、右四个方向 #6096
+- Radio
+  - 增加 `border` 属性和 `size` 属性 #6690
+- Checkbox
+  - 增加 `border` 属性和 `size` 属性 #6690
+- Alert
+  - 新增 `center` 属性，提供居中布局 #6876
+- Menu
+  - 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064
+- Form
+  - 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032
+  - 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032
+- Input
+  - 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032
+- Breadcrumb
+  - 新增 `separator-class` 属性，可使用图标作为分隔符 #7203
+- Steps
+  - 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274
+
+#### 修复
+- DatePicker
+  - 选择周数时，`v-model` 结果返回该周第二天的问题 #6038
+  - 在 `daterange` 类型中，第一次的输入会被清空的问题 #6021
+- DateTimePicker
+  - 和 TimePicker 相互影响的问题 #6090
+  - 选择时间小时和秒可超出限制的问题 #6076
+- TimePicker
+  - 失去焦点时无法正确改变 `v-model` 值的问题 #6023
+- Dialog
+  - 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088
+- Select
+  - 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
+
+#### 非兼容性更新
+- 综合
+  - 移除 `theme-default`
+  - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互
+  - Button 和表单组件的 `size` 属性不再接受 `large` 值，可接受 `medium`、`small` 和 `mini`
+  - 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名
+- Dialog
+  - 移除 `size` 属性。现在 Dialog 的尺寸由 `width` 和 `fullscreen` 控制
+  - 移除通过 `v-model` 控制 Dialog 显示和隐藏的功能
+- Rate
+  - `text-template` 属性更名为 `score-template`
+- Dropdown
+  - `menu-align` 属性变更为 `placement`，增加更多方位属性
+- Transfer
+  - `footer-format` 属性更名为 `format`
+- Switch
+  - `on-text` 和 `off-text` 属性不再有默认值
+- Tag
+  - `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值
+- Menu
+  - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义
+- Input
+  - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
+  - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
+- Autocomplete
+  - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
+- Table
+  - 移除通过 `inline-template` 自定义列模板的功能
+- Steps
+  - 移除 `center` 属性
+  - 现在步骤条将默认充满父容器
+
+##
+<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>
+
 ### 1.4.6
 *2017-09-27*
 

examples/app.vue

@@ -28,6 +28,10 @@
         left: 0;
         top: 0;
         z-index: 1500;
+        
+        .container {
+          padding: 0;
+        }
       }
     }
   }

examples/components/demo-block.vue

@@ -182,7 +182,8 @@
       return {
         hovering: false,
         isExpanded: false,
-        fixedControl: false
+        fixedControl: false,
+        scrollParent: null
       };
     },
 
@@ -239,7 +240,7 @@
       },
 
       removeScrollHandler() {
-        document.removeEventListener('scroll', this.scrollHandler);
+        this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
       }
     },
 
@@ -287,7 +288,8 @@
           return;
         }
         setTimeout(() => {
-          document.addEventListener('scroll', this.scrollHandler);
+          this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
+          this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
           this.scrollHandler();
         }, 200);
       }

examples/components/footer.vue

@@ -2,7 +2,7 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-main">
-        <p class="footer-main-title">Element {{ version }} Boron</p>
+        <p class="footer-main-title">Element {{ version && version.slice(0, 3) }} Carbon</p>
         <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
         <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
         <a :href="`https://eleme.github.io/element-react/#/${ lang }/quick-start`" class="footer-main-link" target="_blank">Element-React</a>

examples/components/side-nav.vue

@@ -65,7 +65,7 @@
     }
 
     #code-sponsor-widget {
-      margin: 50px 0 0 -20px;
+      margin: 0 0 0 -20px;
     }
   }
   .nav-dropdown-list {

examples/docs/en-US/installation.md

@@ -18,7 +18,7 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui@
 ```
 
 ### Hello world
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/)
 
 ```html
 <!DOCTYPE html>
@@ -31,7 +31,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
 <body>
   <div id="app">
     <el-button @click="visible = true">Button</el-button>
-    <el-dialog v-model="visible" title="Hello world">
+    <el-dialog :visible.sync="visible" title="Hello world">
       <p>Try Element</p>
     </el-dialog>
   </div>

examples/docs/zh-CN/installation.md

@@ -18,7 +18,7 @@ npm i element-ui@next -S
 ```
 
 ### Hello world
-通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/)
+通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/leopoldthecuber/hzfpyvg6/1/)
 
 ```html
 <!DOCTYPE html>
@@ -31,7 +31,7 @@ npm i element-ui@next -S
 <body>
   <div id="app">
     <el-button @click="visible = true">按钮</el-button>
-    <el-dialog v-model="visible" title="Hello world">
+    <el-dialog :visible.sync="visible" title="Hello world">
       <p>欢迎使用 Element</p>
     </el-dialog>
   </div>

examples/pages/template/changelog.tpl

@@ -86,6 +86,11 @@
           vertical-align: middle;
         }
       }
+  
+      i {
+        padding: 0 20px;
+        display: inline-block;
+      }
 
       h3 {
         margin:0;

packages/date-picker/src/basic/time-spinner.vue

@@ -50,7 +50,6 @@
 <script type="text/babel">
   import { getRangeHours } from '../util';
   import ElScrollbar from 'element-ui/packages/scrollbar';
-  import debounce from 'throttle-debounce/debounce';
 
   export default {
     components: { ElScrollbar },
@@ -131,10 +130,6 @@
       };
     },
 
-    created() {
-      this.debounceAdjustElTop = debounce(200, type => this.adjustElTop(type, this[`${type}s`]));
-    },
-
     mounted() {
       this.$nextTick(() => {
         this.bindScrollEvent();
@@ -155,10 +150,16 @@
       emitSelectRange(type) {
         if (type === 'hours') {
           this.$emit('select-range', 0, 2);
+          this.adjustElTop('minute', this.minutes);
+          this.adjustElTop('second', this.seconds);
         } else if (type === 'minutes') {
           this.$emit('select-range', 3, 5);
+          this.adjustElTop('hour', this.hours);
+          this.adjustElTop('second', this.seconds);
         } else if (type === 'seconds') {
           this.$emit('select-range', 6, 8);
+          this.adjustElTop('minute', this.minutes);
+          this.adjustElTop('hour', this.hours);
         }
         this.currentScrollbar = type;
       },
@@ -177,7 +178,6 @@
       handleScroll(type) {
         const adjust = {};
         adjust[`${type}s`] = Math.min(Math.floor((this[`${type}El`].scrollTop - 80) / 32 + 3), (`${type}` === 'hour' ? 23 : 59));
-        this.debounceAdjustElTop(type);
         this.$emit('change', adjust);
       },
 
@@ -188,6 +188,7 @@
       },
 
       adjustElTop(type, value) {
+        if (!this[`${type}El`]) return;
         this[`${type}El`].scrollTop = Math.max(0, (value - 2.5) * 32 + 80);
       },
 

packages/theme-chalk/src/menu.scss

@@ -185,6 +185,9 @@
   }
   @include when(active) {
     color: $--color-primary;
+    i {
+      color: inherit;
+    }
   }
 }
   

packages/theme-chalk/src/transfer.scss

@@ -169,8 +169,8 @@
         font-weight: normal;
 
         span {
-          float: right;
-          margin-right: 15px;
+          position: absolute;
+          right: 15px;
           color: $--color-text-secondary;
           font-size: 12px;
           font-weight: normal;