github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Changelog: update for 2.0.0

pull/7793/head
Leopoldthecoder 2017-10-27 11:30:04 +08:00 committed by 杨奕
parent d2efebcbeb
commit f3aa9b30ad
11 changed files with 270 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

360
CHANGELOG.en-US.md
View File

@ -1,15 +1,100 @@
## Changelog ## Changelog
### 2.0.0-rc.1 ### 2.0.0
*2017-10-25* *2017-10-27*
#### New features #### New features
- Form - General
- Added `clearValidate` method for clearing validating results for all form items, #7623 - 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
- Added TypeScript typings
- All existing icons are redesigned. Some new icons are added
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Added layout components: Container, Header, Aside, Main, Footer
- Now you can configure component sizes globally. When importing Element, you can add a global config object with a `size` prop to configure default sizes for all components.
- 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
- Added `arrow-control` attribute to spin the time with arrows #7438
- 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
- Added `value-format` attribute to customize the format of the binding value, #7367
- Added `unlink-panels` attribute to unlink the two date panels when selecting a date range
- MessageBox - 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
- Added `inputType` attribute to assign type for the inner input box, #7651 - Added `inputType` attribute to assign type for the inner input box, #7651
- 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
- Added `popper-class` attribute #7351
- 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
- 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
- Added `open` and `close` methods to open and close SubMenu programmatically, #7412
- 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
- Form and FormItem now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
- `validate` method will now return a promise if the callback is omitted, #7405
- Added `clearValidate` method for clearing validating results for all form items, #7623
- 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
- Pagination
- Added `prev-text` and `next-text` attributes to customize texts of previous page and next page #7005
- Loading
- Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
- Autocomplete
- Added `debounce` attribute, #7413
- Upload
- Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
- DateTimePicker
- Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
- Layout
- Added a new breakpoint `xl` for viewport wider than 1920px
- Table - 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 style
- Added `size` attribute - Added `size` attribute
- Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically - Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically
- Added `cell-class-name` attribute to assign class name for cells - Added `cell-class-name` attribute to assign class name for cells
@ -20,237 +105,74 @@
- Added `header-cell-style` attribute to style header cells - Added `header-cell-style` attribute to style header cells
- TableColumn's `prop` attribute now accepts `object[key]` notations - TableColumn's `prop` attribute now accepts `object[key]` notations
- Added `index` attribute for TableColumn to customize row indices - Added `index` attribute for TableColumn to customize row indices
#### Fixes
- Table
- Fixed a dynamic `max-height` bug
- Fixed some style calculation errors
#### Breaking changes
- Autocomplete
- Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion
object for display
- Table
- `append` slot is moved outside the `tbody` element to avoid multiple rendering
- `expand` event is renamed to `expand-change`
- The params of `row-class-name` and `row-style` method is now an object
### 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 - Select
- Added `reserve-keyword` attribute for reserving current search keyword after selecting an option - Added `reserve-keyword` attribute for reserving current search keyword after selecting an option
#### Fixes #### 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
- Table - Table
- Now `header-align` of TableColumn works properly
- Fixed a bug that Table remains hiding when its parent element appears from `display: none` - 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 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 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 `expand-row-keys` attribute not working with initial value
- Fixed filter failing when `data` updates - Fixed filter failing when `data` updates
- Fixed a calculation error of fixed columns layout with grouped headers - Fixed a calculation error of fixed columns layout with grouped headers
- Fixed a dynamic `max-height` bug
- Fixed some style calculation errors
#### Breaking changes #### Breaking changes
- General
- Removed `theme-default`
- Compatible with Vue 2.5.2+ and IE 10+
- `change` event of form components and `current-change` event of Pagination now only trigger on user interaction
- `size` attribute of Button and form components now 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 - Switch
- Attributes starting with `on-*` will be parsed to events in JSX, making all `on-*` attributes of Switch not - 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 change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value` able to work in JSX. So `on-*` attributes are renamed to `active-*`, and accordingly `off-*` attributes are renamed to `inactive-*`. This change affects the following attributes: `on-icon-class`, `off-icon-class`, `on-text`, `off-text`, `on-color`, `off-color`, `on-value`, `off-value`
- `active-text` and `inactive-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
- `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.
- Autocomplete
- Removed `custom-item` attribute. Now the template of input suggestions can be customized using `scoped slot`
- Removed `props` attribute. Now you can use `value-key` attribute to designate key name of the input suggestion object for display
- Steps
- Removed `center` attribute
- Now the Steps will fill its parent container by default
- DatePicker
- The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`
- Table - Table
- Removed support for customizing column template using `inline-template`
- `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean - `sort-method` now aligns with `Array.sort`. It should return a number instead of a boolean
- `append` slot is moved outside the `tbody` element to avoid multiple rendering
### 2.0.0-alpha.3 - `expand` event is renamed to `expand-change`
- The params of `row-class-name` and `row-style` method is now an object
*2017-10-16*
#### New features
- General
- Configure component sizes globally. Now when you import Element, you can add a global config object with a `size` prop to configure default sizes for all components. For fully import:
```JS
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, { size: 'small' })
```
For partial import:
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button)
```
With the above config, the default size of all components that have `size` attribute will be 'small'.
- Loading
- Now you can customize spinner icon and background color with `spinner` and `background` prop, #7390
- Autocomplete
- Added `debounce` attribute, #7413
- Upload
- Added `limit` and `on-exceed` attributes to limit the amount of files, #7405
- Menu
- Added `open` and `close` methods to open and close SubMenu programmatically, #7412
- DatePicker
- Added `value-format` attribute to customize the format of the binding value, #7367
- TimePicker
- Added `arrow-control` attribute to spin the time with arrows #7438
- DateTimePicker
- Added `time-arrow-control` attribute to activate `arrow-control` of the nesting TimePicker, #7438
- Form
- Form and Form-item now have a `size` attribute. Inner components will inherit this size if not specified on themselves, #7428
- `validate` method will now return a promise if the callback is omitted, #7405
#### Fixes
- Fixed the console warning `Injection "elFormItem" not found` of some components
#### Breaking changes
- The params of DatePicker's `change` event is now the binding value itself. Its format is controlled by `value-format`
- Input's `change` event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can use `input` event.
- Only compatible with Vue 2.5.2 and beyond
### 2.0.0-alpha.2
*2017-10-05*
- Updated the primary color of `theme-chalk`, #7351
- Fixed console error when using Dropdown, #7322
- Fixed console error when using Menu, #7321
- Added `popper-class` attribute for ColorPicker, #7351
- Now Button's `disabled` attribute works correctly, #7352
### 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
- Pagination
- Added `prev-text` and `next-text` attributes to customize texts of prev page and next page #7005
#### 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`
- `close-transition` is renamed to `disable-transitions`
- 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 `icon` and `on-icon-click` attributes. Now the icons can be configured using `prefix` or `suffix` named slot
- 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> <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>

197
CHANGELOG.zh-CN.md
View File

@ -1,140 +1,18 @@
## 更新日志 ## 更新日志
### 2.0.0-rc.1 ### 2.0.0
*2017-10-25*
#### 新特性 *2017-10-27*
- Form
- 新增 `clearValidate` 方法，用于清空所有表单项的验证信息，#7623
- MessageBox
- 新增 `inputType` 属性，用户指定内部输入框的类型，#7651
- Table
- 新增 `size` 属性，用于控制表格尺寸
- 新增 `toggleRowExpansion` 方法，用于手动展开或关闭行
- 新增 `cell-class-name` 属性，用于指定单元格的类名
- 新增 `cell-style` 属性，用于指定单元格的样式
- 新增 `header-row-class-name` 属性，用于指定表头行的类名
- 新增 `header-row-style` 属性，用于指定表头行的样式
- 新增 `header-cell-class-name` 属性，用于指定表头单元格的类名
- 新增 `header-cell-style` 属性，用于指定表头单元格的样式
- TableColumn 的 `prop` 属性支持 `object[key]` 格式
- TableColumn 新增 `index` 属性，用于自定义索引值
#### 修复
- Table
- 修复 `max-height` 变更后无法恢复的问题
- 修复一些样式上的计算错误
#### 非兼容性更新
- Autocomplete
- 移除 `props` 属性，现在使用 `value-key` 属性指定输入建议对象中用于显示的键名
- Table
- 将 `append` slot 移至 `tbody` 元素以外，以保证其只被渲染一次
- `expand` 事件更名为 `expand-change`，以保证 API 的命名一致性
- `row-class-name` 和 `row-style` 的函数参数改为对象，以保证 API 的一致性
### 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*
#### 新特性
- 综合
- 新增全局配置组件尺寸的功能：在引入 Element 时，配置 `size` 字段可以改变所有组件的默认尺寸。当完整引入 Element 时：
```JS
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element, { size: 'small' })
```
当按需引入 Element 时：
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' }
Vue.use(Button)
```
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
- Loading
- 配置对象新增 `spinner` 和 `background` 字段，支持自定义加载图标和背景色，#7390
- Autocomplete
- 新增 `debounce` 属性，#7413
- Upload
- 新增 `limit` 和 `on-exceed` 属性，支持对上传文件的个数进行限制，#7405
- Menu
- 新增 `open` 和 `close` 方法，支持手动打开和关闭 SubMenu，#7412
- DatePicker
- 新增 `value-format` 属性，支持对绑定值的格式进行自定义，#7367
- TimePicker
- 新增 `arrow-control` 属性，提供另一种交互形式，#7438
- DateTimePicker
- 新增 `time-arrow-control` 属性，用于开启时间选择器的 `arrow-control`，#7438
- Form
- Form 和 Form-item 新增 `size` 属性，用于控制表单内组件的尺寸，#7428
- `validate` 方法在不传入 callback 的情况下返回 promise，#7405
#### 修复
- 修复部分组件的 `Injection "elFormItem" not found` 报错
#### 非兼容性更新
- DatePicker 的 `change` 事件参数现在为组件的绑定值，格式由 `value-format` 控制
- Input 组件的 `change` 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 `input` 事件
- 最低兼容 Vue 2.5.2 版本
### 2.0.0-alpha.2
*2017-10-05*
- 修正 `theme-chalk` 的主色，#7351
- 修复使用 Dropdown 时控制台报错的问题，#7322
- 修复使用 Menu 时控制台报错的问题，#7321
- ColorPicker 新增 `popper-class` 属性，#7351
- 修复 Button 的 `disabled` 属性无效的问题，#7352
### 2.0.0-alpha.1
*2017-09-30*
#### 新特性 #### 新特性
- 综合 - 综合
- 新增 `theme-chalk` 主题 - 新增 `theme-chalk` 主题
- 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload - 增强以下组件的可访问性：Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload
- 新增布局组件 Container、Header、Aside、Main 和 Footer - 新增布局组件 Container、Header、Aside、Main 和 Footer
- 新增 TypeScript 类型声明
- 重绘了全部图标，并新增了部分图标
- 新增了一系列基于断点的工具类，用于当视口尺寸满足一定条件时隐藏元素
- 新增全局配置组件尺寸的功能。在引入 Element 时，配置 `size` 字段可以改变所有组件的默认尺寸
- Button - Button
- 新增 `round` 属性，用于圆角按钮 #6643 - 新增 `round` 属性，用于圆角按钮 #6643
- TimeSelect - TimeSelect
@ -142,6 +20,7 @@
- TimePicker - TimePicker
- 可以用方向键导航，用 `Enter` 选中时间 #6050 - 可以用方向键导航，用 `Enter` 选中时间 #6050
- 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169 - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
- 新增 `arrow-control` 属性，提供另一种交互形式，#7438
- Tree - Tree
- 子节点在首次被展开之前不进行渲染 #6257 - 子节点在首次被展开之前不进行渲染 #6257
- 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235 - 新增 `check-descendants` 属性，设置 `lazy` 模式下勾选节点时，是否完全展开整个子树 #6235
@ -150,11 +29,14 @@
- Datepicker - Datepicker
- type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052 - type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052
- 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169 - 新增 `start-placeholder` 和 `end-placeholder`，用于设置范围选择时两个输入框的占位符 #7169
- 新增 `value-format` 属性，支持对绑定值的格式进行自定义，#7367
- 新增 `unlink-panels` 属性，用于在选择日期范围时取消两个日期面板之间的联动
- MessageBox - MessageBox
- 新增 `closeOnHashChange` 属性 #6043 - 新增 `closeOnHashChange` 属性 #6043
- 新增 `center` 属性，提供居中布局 #7029 - 新增 `center` 属性，提供居中布局 #7029
- 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029 - 新增 `roundButton` 属性，使得内部按钮为圆角按钮 #7029
- 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043 - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 支持传入 HTML 字符串<sup>*</sup> #6043
- 新增 `inputType` 属性，用户指定内部输入框的类型，#7651
- Dialog - Dialog
- 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用 - 新增 `width`、`fullscreen`、`append-to-body` 属性，支持嵌套使用
- 新增 `center` 属性，提供居中布局 #7042 - 新增 `center` 属性，提供居中布局 #7042
@ -163,6 +45,7 @@
- 增加手动输入色值的支持 #6167 - 增加手动输入色值的支持 #6167
- 新增 `size` 属性，用于控制组件的大小 #7026 - 新增 `size` 属性，用于控制组件的大小 #7026
- 新增 `disabled` 属性，用于禁用组件 #7026 - 新增 `disabled` 属性，用于禁用组件 #7026
- 新增 `popper-class` 属性，#7351
- Message - Message
- 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207 - 图标部分使用 icon 代替图片，从而支持通过 CSS 修改图标背景色 #6207
- 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207 - 新增 `dangerouslyUseHTMLString` 属性，使得 `message` 属性支持传入 HTML 字符串<sup>*</sup> #6207
@ -183,9 +66,13 @@
- 新增 `center` 属性，提供居中布局 #6876 - 新增 `center` 属性，提供居中布局 #6876
- Menu - Menu
- 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064 - 新增 `background-color`、`text-color` 和 `active-text-color` 属性，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064
- 新增 `open` 和 `close` 方法，支持手动打开和关闭 SubMenu，#7412
- Form - Form
- 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032 - 新增 `inline-message` 属性，设置后校验信息会以行内样式显示 #7032
- 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032 - 新增 `status-icon` 属性，用于在输入框中显示校验结果反馈图标 #7032
- Form 和 FormItem 新增 `size` 属性，用于控制表单内组件的尺寸，#7428
- `validate` 方法在不传入 callback 的情况下返回 promise，#7405
- 新增 `clearValidate` 方法，用于清空所有表单项的验证信息，#7623
- Input - Input
- 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032 - 新增 `suffix`、`prefix` 的 slot，以及 `suffixIcon`、`prefixIcon` 属性，用于给输入框内部增加前置和后置内容 #7032
- Breadcrumb - Breadcrumb
@ -194,6 +81,33 @@
- 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274 - 新增 `simple` 属性，用于开启简洁风格的步骤条 #7274
- Pagination - Pagination
- 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005 - 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005
- Loading
- 配置对象新增 `spinner` 和 `background` 字段，支持自定义加载图标和背景色，#7390
- Autocomplete
- 新增 `debounce` 属性，#7413
- Upload
- 新增 `limit` 和 `on-exceed` 属性，支持对上传文件的个数进行限制，#7405
- DateTimePicker
- 新增 `time-arrow-control` 属性，用于开启时间选择器的 `arrow-control`，#7438
- Layout
- 新增断点 `xl`，适用于宽度大于 1920px 的视口
- Table
- 新增 `span-method` 属性，用于合并行或列
- 新增 `clearSort` 方法，用于清空排序状态
- 新增 `clearFilter` 方法，用于清空过滤状态
- 对于可展开行，当该行展开时会获得一个 `.expanded` 类名，方便自定义样式
- 新增 `size` 属性，用于控制表格尺寸
- 新增 `toggleRowExpansion` 方法，用于手动展开或关闭行
- 新增 `cell-class-name` 属性，用于指定单元格的类名
- 新增 `cell-style` 属性，用于指定单元格的样式
- 新增 `header-row-class-name` 属性，用于指定表头行的类名
- 新增 `header-row-style` 属性，用于指定表头行的样式
- 新增 `header-cell-class-name` 属性，用于指定表头单元格的类名
- 新增 `header-cell-style` 属性，用于指定表头单元格的样式
- TableColumn 的 `prop` 属性支持 `object[key]` 格式
- TableColumn 新增 `index` 属性，用于自定义索引值
- Select
- 新增 `reserve-keyword` 属性，用于在选择某个选项后保留当前的搜索关键词
#### 修复 #### 修复
- DatePicker - DatePicker
@ -208,10 +122,20 @@
- 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088 - 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088
- Select - Select
- 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151 - 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
- Table
- 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题
- 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题
- 修复 `append` 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题
- 修复 `expand-row-keys` 属性初始化无效的问题
- 修复 `data` 改变时过滤条件失效的问题
- 修复多级表头时固定列隐藏情况计算错误的问题
- 修复 `max-height` 变更后无法恢复的问题
- 修复一些样式上的计算错误
#### 非兼容性更新 #### 非兼容性更新
- 综合 - 综合
- 移除 `theme-default` - 移除 `theme-default`
- 最低兼容 Vue 2.5.2 和 IE 10
- 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互 - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互
- Button 和表单组件的 `size` 属性不再接受 `large` 值，可接受 `medium`、`small` 和 `mini` - Button 和表单组件的 `size` 属性不再接受 `large` 值，可接受 `medium`、`small` 和 `mini`
- 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名 - 为了方便使用第三方图标，Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名
@ -225,23 +149,30 @@
- Transfer - Transfer
- `footer-format` 属性更名为 `format` - `footer-format` 属性更名为 `format`
- Switch - Switch
- `on-text` 和 `off-text` 属性不再有默认值 - 由于 `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`
- `active-text` 和 `inactive-text` 属性不再有默认值
- Tag - Tag
- `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值 - `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值
- `close-transition` 属性更名为 `disable-transitions`
- Menu - Menu
- 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义 - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义
- Input - Input
- 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标 - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
- 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标 - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
- `change` 事件现在仅在输入框失去焦点或用户按下回车时触发，与原生 input 元素一致。如果需要实时响应用户的输入，可以使用 `input` 事件
- Autocomplete - Autocomplete
- 移除 `icon` 和 `on-icon-click` 属性。现在通过 `prefix` 和 `suffix` 具名 slot 来加入图标
- 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容 - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
- Table - 移除 `props` 属性，现在使用 `value-key` 属性指定输入建议对象中用于显示的键名
- 移除通过 `inline-template` 自定义列模板的功能
- Steps - Steps
- 移除 `center` 属性 - 移除 `center` 属性
- 现在步骤条将默认充满父容器 - 现在步骤条将默认充满父容器
- DatePicker
- `change` 事件参数现在为组件的绑定值，格式由 `value-format` 控制
- Table
- 移除通过 `inline-template` 自定义列模板的功能
- `sort-method` 现在和 `Array.sort` 保持一致的逻辑，要求返回一个数字
- 将 `append` slot 移至 `tbody` 元素以外，以保证其只被渲染一次
- `expand` 事件更名为 `expand-change`，以保证 API 的命名一致性
- `row-class-name` 和 `row-style` 的函数参数改为对象，以保证 API 的一致性
## ##
<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i> <i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>

2
README.md
View File

@ -67,7 +67,7 @@ Vue.component(Button.name, Button)
For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation. For more information, please refer to [Quick Start](http://element.eleme.io/#/en-US/component/quickstart) in our documentation.
## Browser Support ## Browser Support
Modern browsers and Internet Explorer 9+. Modern browsers and Internet Explorer 10+.
## Development ## Development
Skip this part if you just want to use Element. Skip this part if you just want to use Element.

29
examples/app.vue
View File

@ -215,6 +215,35 @@
mounted() { mounted() {
this.localize(); this.localize();
setTimeout(() => {
const notified = localStorage.getItem('RELEASE_NOTIFIED');
if (!notified) {
const h = this.$createElement;
const title = this.lang === 'zh-CN'
? '2.0 正式发布'
: '2.0 available now';
const messages = this.lang === 'zh-CN'
? ['点击', '这里', '查看详情']
: ['Click ', 'here', ' to learn more'];
this.$notify({
title,
duration: 0,
message: h('span', [
messages[0],
h('a', {
attrs: {
target: '_blank',
href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7755' : '7756' }`
}
}, messages[1]),
messages[2]
]),
onClose() {
localStorage.setItem('RELEASE_NOTIFIED', 1);
}
});
}
}, 3500);
} }
}; };
</script> </script>

6
examples/docs/en-US/quickstart.md
View File

@ -4,11 +4,13 @@ This part walks you through the process of using Element in a webpack project.
### Use Starter Kit ### Use Starter Kit
Under construction. We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For Laravel users, we also have a [template](https://github.com/ElementUI/element-in-laravel-starter). You can download and use them directly.
If you prefer not to use them, please read the following.
### Use vue-cli ### Use vue-cli
It is recommended to start a project using [vue-cli](https://github.com/vuejs/vue-cli): We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
```shell ```shell
> npm i -g vue-cli > npm i -g vue-cli

6
examples/docs/zh-CN/quickstart.md
View File

@ -4,11 +4,13 @@
### 使用 Starter Kit ### 使用 Starter Kit
整理中。 我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于 Laravel 用户，我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter)，同样可以直接下载使用。
如果不希望使用我们提供的模板，请继续阅读。
### 使用 vue-cli ### 使用 vue-cli
我们推荐使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目，命令如下： 我们还可以使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目，命令如下：
```shell ```shell
> npm i -g vue-cli > npm i -g vue-cli

4
examples/i18n/page.json
View File

@ -5,7 +5,7 @@
"index": { "index": {
"lang": "zh-CN", "lang": "zh-CN",
"titleSize": "34", "titleSize": "34",
"paraSize": "20", "paraSize": "18",
"1": "网站快速成型工具", "1": "网站快速成型工具",
"2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库", "2": "Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库",
"3": "指南", "3": "指南",
@ -97,7 +97,7 @@
"index": { "index": {
"lang": "en-US", "lang": "en-US",
"titleSize": "34", "titleSize": "34",
"paraSize": "20", "paraSize": "18",
"theatreParam": "{ maxSpeed: 100 }", "theatreParam": "{ maxSpeed: 100 }",
"typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)", "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)", "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)",

2
examples/pages/template/index.tpl
View File

@ -16,7 +16,7 @@
font-size: <%= paraSize >px; font-size: <%= paraSize >px;
line-height: 28px; line-height: 28px;
color: #888; color: #888;
margin: 15px 0 0; margin: 10px 0 5px;
} }
} }
.jumbotron { .jumbotron {

15
packages/collapse/src/collapse-item.vue
View File

@ -14,7 +14,7 @@
tabindex="0" tabindex="0"
@keyup.space.enter.stop="handleEnterClick" @keyup.space.enter.stop="handleEnterClick"
:class="{'focusing': focusing}" :class="{'focusing': focusing}"
@focus="focusing = true" @focus="handleFocus"
@blur="focusing = false" @blur="focusing = false"
> >
<i class="el-collapse-item__arrow el-icon-arrow-right"></i> <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
@ -58,7 +58,8 @@
display: 'block' display: 'block'
}, },
contentHeight: 0, contentHeight: 0,
focusing: false focusing: false,
isClick: false
}; };
}, },
@ -84,9 +85,19 @@
}, },
methods: { methods: {
handleFocus() {
setTimeout(() => {
if (!this.isClick) {
this.focusing = true;
} else {
this.isClick = false;
}
}, 50);
},
handleHeaderClick() { handleHeaderClick() {
this.dispatch('ElCollapse', 'item-click', this); this.dispatch('ElCollapse', 'item-click', this);
this.focusing = false; this.focusing = false;
this.isClick = true;
}, },
handleEnterClick() { handleEnterClick() {
this.dispatch('ElCollapse', 'item-click', this); this.dispatch('ElCollapse', 'item-click', this);

6
packages/tabs/src/tab-bar.vue
View File

@ -33,10 +33,16 @@
return true; return true;
} else { } else {
tabSize = $el[`client${firstUpperCase(sizeName)}`]; tabSize = $el[`client${firstUpperCase(sizeName)}`];
if (sizeName === 'width') {
tabSize -= index === 0 ? 20 : 40;
}
return false; return false;
} }
}); });
if (sizeName === 'width' && offset !== 0) {
offset += 20;
}
const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`; const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`;
style[sizeName] = tabSize + 'px'; style[sizeName] = tabSize + 'px';
style.transform = transform; style.transform = transform;

5
packages/theme-chalk/src/tabs.scss
View File

@ -224,6 +224,11 @@
} }
} }
} }
@include m((top, bottom)) {
&:not(.el-tabs--border-card):not(.el-tabs--card) .el-tabs__item:nth-child(2) {
padding-left: 0;
}
}
@include m(bottom) { @include m(bottom) {
.el-tabs__header { .el-tabs__header {
margin-bottom: 0; margin-bottom: 0;