Changelog: update for 2.0.0-beta.1

2017-10-20 16:03:53 +08:00 · 2017-10-20 16:03:53 +08:00 · 1786ac75e2
parent 1310bdee26
commit 1786ac75e2
5 changed files with 110 additions and 27 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -1,5 +1,48 @@
 ## Changelog

+### 2.0.0-beta.1
+
+*2017-10-20*
+
+#### New features
+- General
+  - Added TypeScript typings
+  - All existing icons are redesigned. Some new icons are added.
+  - To help you migrate from Element 1.x, we added some console warnings against deprecated APIs. When you use a
+  removed or renamed attribute or event in your project, you'll get a warning like this:
+  ```
+  [Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
+  ```
+  - Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
+- Layout
+  - Added a new breakpoint `xl` for viewport wider than 1920px
+- Table
+  - Added `span-method` attribute for merging cells
+  - Added `clearSort` method to clear sorting programmatically
+  - Added `clearFilter` method to clear filter programmatically
+  - For expandable rows, when a row is expanded, a `.expanded` class will be added to its class list, so that you can customize its styles
+- DatePicker
+  - Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
+- Select
+  - Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
+
+#### Fixes
+- Table
+  - Now `header-align` of TableColumn works properly
+  - Fixed a bug that Table remains hiding when its parent element appears from `display: none`
+  - Fixed Table expanding its width when its parent element has `display: flex`
+  - Fixed a bug that fixed columns of a Table with `append` slot would disappear when data is dynamically fetched
+  - Fixed `expand-row-keys` attribute not working with initial value
+  - Fixed filter failing when `data` updates
+  - Fixed a calculation error of fixed columns layout with grouped headers
+
+#### Breaking changes
+- Switch
+  - Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not
+able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This changes affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
+- Table
+  - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
+
 ### 2.0.0-alpha.3

 *2017-10-16*
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -1,5 +1,45 @@
 ## 更新日志

+### 2.0.0-beta.1
+*2017-10-20*
+
+#### 新特性
+- 综合
+  - 新增 TypeScript 类型声明
+  - 重绘了全部图标，并新增了部分图标
+  - 为部分非兼容性更新增加控制台警告，方便迁移项目。当你在项目中使用了被移除或更名了的属性或事件时，控制台会出现一条警告，例如：
+  ```
+  [Element Migrating][ElSwitch][Attribute]: on-color is renamed to active-color.
+  ```
+  - 新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素
+- Layout
+  - 新增断点 `xl`，适用于宽度大于 1920px 的视口
+- Table
+  - 新增 `span-method` 属性，用于合并行或列
+  - 新增 `clearSort` 方法，用于清空排序状态
+  - 新增 `clearFilter` 方法，用于清空过滤状态
+  - 对于可展开行，当该行展开时会获得一个 `.expanded` 类名，方便自定义样式
+- DatePicker
+  - 新增 `unlink-panels` 属性，用于在选择日期范围时取消两个日期面板之间的联动
+- Select
+  - 新增 `reserve-keyword` 属性，用于在选择某个选项后保留当前的搜索关键词
+
+#### 修复
+- Table
+  - 修复 TableColumn 的 `header-align` 属性失效的问题
+  - 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题
+  - 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题
+  - 修复 `append` 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题
+  - 修复 `expand-row-keys` 属性初始化无效的问题
+  - 修复 `data` 改变时过滤条件失效的问题
+  - 修复多级表头时固定列隐藏情况计算错误的问题
+
+#### 非兼容性更新
+- Switch
+  - 由于 `on-*` 属性在 JSX 中会被识别为事件，导致 Switch 所有 `on-*` 属性在 JSX 中无法正常工作，所以 `on-*` 属性更名为 `active-*`，对应地，`off-*` 属性更名为 `inactive-*`。受到影响的属性有：`on-icon-class`、`off-icon-class`、`on-text`、`off-text`、`on-color`、`off-color`、`on-value`、`off-value`
+- Table
+  - `sort-method` 现在和 `Array.sort` 保持一致的逻辑，要求返回一个数字。
+
 ### 2.0.0-alpha.3
 *2017-10-16*

--- a/examples/docs/en-US/table.md
+++ b/examples/docs/en-US/table.md
@ -1707,10 +1707,10 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 ```
 :::

-### 合并行或列
+### Rowspan and colspan

-多行或多列共用一个数据时，可以合并行或列。
-:::demo 通过给`table`传入`span-method`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowsapn`和`colspan`的对象。
+Configuring rowspan and colspan allows you to merge cells
+:::demo Use the `span-method` attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row `row`, current column `column`, current row index `rowIndex` and current column index `columnIndex`. The method should return an array of two numbers, the first number being `rowspan` and second `colspan`. It can also return an object with `rowsapn` and `colspan` props.

 ```html
 <template>
@ -1727,22 +1727,22 @@ For table of numbers, you can add an extra row at the table footer displaying ea
      </el-table-column>
      <el-table-column
        prop="name"
-        label="姓名">
+        label="Name">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
-        label="数值 1">
+        label="Amount 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
-        label="数值 2">
+        label="Amount 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
-        label="数值 3">
+        label="Amount 3">
      </el-table-column>
    </el-table>

@ -1750,7 +1750,6 @@ For table of numbers, you can add an extra row at the table footer displaying ea
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
-      height="200"
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
@ -1759,19 +1758,19 @@ For table of numbers, you can add an extra row at the table footer displaying ea
      </el-table-column>
      <el-table-column
        prop="name"
-        label="姓名">
+        label="Name">
      </el-table-column>
      <el-table-column
        prop="amount1"
-        label="数值 1（元）">
+        label="Amount 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
-        label="数值 2（元）">
+        label="Amount 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
-        label="数值 3（元）">
+        label="Amount 3">
      </el-table-column>
    </el-table>
  </div>
@ -1783,31 +1782,31 @@ For table of numbers, you can add an extra row at the table footer displaying ea
      return {
        tableData6: [{
          id: '12987122',
-          name: '王小虎',
+          name: 'Tom',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
-          name: '王小虎',
+          name: 'Tom',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
-          name: '王小虎',
+          name: 'Tom',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
-          name: '王小虎',
+          name: 'Tom',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
-          name: '王小虎',
+          name: 'Tom',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
@ -1869,7 +1868,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | show-summary | whether to display a summary row | Boolean | — | false |
 | sum-text | displayed text for the first column of summary row | String | — | Sum |
 | summary-method | custom summary method | Function({ columns, data }) | — | — |
-| span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |
+| span-method | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |

 ### Table Events
 | Event Name | Description | Parameters |
@ -1897,8 +1896,8 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
-| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | - |
-| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | - |
+| clearSort | clear sorting, restore data to the original order | - |
+| clearFilter | clear filter | - |

 ### Table Slot
 | Name | Description |
@ -1917,7 +1916,7 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | fixed | whether column is fixed at left/right. Will be fixed at left if `true` | string/boolean | true/left/right | — |
 | render-header | render function for table header of this column | Function(h, { column, $index }) | — | — |
 | sortable | whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table | boolean, string | true, false, custom | false |
-| sort-method | sorting method, works when `sortable` is `true`. 和 Array#sort 表现一致 | Function(a, b) | — | — |
+| sort-method | sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort | Function(a, b) | — | — |
 | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false |
 | formatter | function that formats cell content | Function(row, column, cellValue) | — | — |
 | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false |
--- a/examples/docs/zh-CN/table.md
+++ b/examples/docs/zh-CN/table.md
@ -1813,7 +1813,6 @@
      :data="tableData6"
      :span-method="objectSpanMethod"
      border
-      height="200"
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="id"
@ -1980,7 +1979,7 @@
 | fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | — |
 | render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
 | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
-| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，和 Array#sort 表现一致 | Function(a, b) | — | — |
+| sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 | Function(a, b) | — | — |
 | resizable | 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） | boolean | — | true |
 | formatter | 用来格式化内容 | Function(row, column, cellValue) | — | — |
 | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false |
--- a/yarn.lock
+++ b/yarn.lock
@ -318,9 +318,11 @@ async-foreach@^0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"

-async-validator@1.6.9:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.6.9.tgz#a8309daa8b83421cdbd4628e026d6abb25192d34"
+async-validator@~1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-1.8.1.tgz#6665788ca39269af770e5ee02f0e557f2438d2ca"
+  dependencies:
+    babel-runtime "6.x"

 async@1.5.2, async@1.x, async@^1.4.0, async@^1.5.0, async@^1.5.2:
  version "1.5.2"
@ -792,7 +794,7 @@ babel-register@^6.18.0:
    mkdirp "^0.5.1"
    source-map-support "^0.4.2"

-babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.9.0:
+babel-runtime@6.x, babel-runtime@^6.0.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.9.0:
  version "6.20.0"
  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.20.0.tgz#87300bdcf4cd770f09bf0048c64204e17806d16f"
  dependencies: