diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index ba08690f2..2bb90d2b0 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,15 +1,100 @@ ## Changelog -### 2.0.0-rc.1 +### 2.0.0 -*2017-10-25* +*2017-10-27* #### New features -- Form - - Added `clearValidate` method for clearing validating results for all form items, #7623 +- 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 + - 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 + - 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* #6043 - 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* #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* #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 + - 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 `toggleRowExpansion` method to expand or collapse expandable rows programmatically - Added `cell-class-name` attribute to assign class name for cells @@ -20,237 +105,74 @@ - Added `header-cell-style` attribute to style header cells - TableColumn's `prop` attribute now accepts `object[key]` notations - 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 - 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 - - 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 + - Fixed a dynamic `max-height` bug + - Fixed some style calculation errors #### 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 - 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 + - 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 - -### 2.0.0-alpha.3 - -*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* #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* #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* #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 + - `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 ## * 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. \ No newline at end of file diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 90f94bb75..a50ebe439 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,140 +1,18 @@ ## 更新日志 -### 2.0.0-rc.1 -*2017-10-25* +### 2.0.0 -#### 新特性 -- 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* +*2017-10-27* #### 新特性 - 综合 - 新增 `theme-chalk` 主题 - 增强以下组件的可访问性:Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload - 新增布局组件 Container、Header、Aside、Main 和 Footer + - 新增 TypeScript 类型声明 + - 重绘了全部图标,并新增了部分图标 + - 新增了一系列基于断点的工具类,用于当视口尺寸满足一定条件时隐藏元素 + - 新增全局配置组件尺寸的功能。在引入 Element 时,配置 `size` 字段可以改变所有组件的默认尺寸 - Button - 新增 `round` 属性,用于圆角按钮 #6643 - TimeSelect @@ -142,6 +20,7 @@ - TimePicker - 可以用方向键导航,用 `Enter` 选中时间 #6050 - 新增 `start-placeholder` 和 `end-placeholder`,用于设置范围选择时两个输入框的占位符 #7169 + - 新增 `arrow-control` 属性,提供另一种交互形式,#7438 - Tree - 子节点在首次被展开之前不进行渲染 #6257 - 新增 `check-descendants` 属性,设置 `lazy` 模式下勾选节点时,是否完全展开整个子树 #6235 @@ -150,11 +29,14 @@ - Datepicker - type 为 `datetimerange` 时可以使用 `timeFormat` 格式化时间选择器 #6052 - 新增 `start-placeholder` 和 `end-placeholder`,用于设置范围选择时两个输入框的占位符 #7169 + - 新增 `value-format` 属性,支持对绑定值的格式进行自定义,#7367 + - 新增 `unlink-panels` 属性,用于在选择日期范围时取消两个日期面板之间的联动 - MessageBox - 新增 `closeOnHashChange` 属性 #6043 - 新增 `center` 属性,提供居中布局 #7029 - 新增 `roundButton` 属性,使得内部按钮为圆角按钮 #7029 - 新增 `dangerouslyUseHTMLString` 属性,使得 `message` 支持传入 HTML 字符串* #6043 + - 新增 `inputType` 属性,用户指定内部输入框的类型,#7651 - Dialog - 新增 `width`、`fullscreen`、`append-to-body` 属性,支持嵌套使用 - 新增 `center` 属性,提供居中布局 #7042 @@ -163,6 +45,7 @@ - 增加手动输入色值的支持 #6167 - 新增 `size` 属性,用于控制组件的大小 #7026 - 新增 `disabled` 属性,用于禁用组件 #7026 + - 新增 `popper-class` 属性,#7351 - Message - 图标部分使用 icon 代替图片,从而支持通过 CSS 修改图标背景色 #6207 - 新增 `dangerouslyUseHTMLString` 属性,使得 `message` 属性支持传入 HTML 字符串* #6207 @@ -183,9 +66,13 @@ - 新增 `center` 属性,提供居中布局 #6876 - Menu - 新增 `background-color`、`text-color` 和 `active-text-color` 属性,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色 #7064 + - 新增 `open` 和 `close` 方法,支持手动打开和关闭 SubMenu,#7412 - Form - 新增 `inline-message` 属性,设置后校验信息会以行内样式显示 #7032 - 新增 `status-icon` 属性,用于在输入框中显示校验结果反馈图标 #7032 + - Form 和 FormItem 新增 `size` 属性,用于控制表单内组件的尺寸,#7428 + - `validate` 方法在不传入 callback 的情况下返回 promise,#7405 + - 新增 `clearValidate` 方法,用于清空所有表单项的验证信息,#7623 - Input - 新增 `suffix`、`prefix` 的 slot,以及 `suffixIcon`、`prefixIcon` 属性,用于给输入框内部增加前置和后置内容 #7032 - Breadcrumb @@ -194,6 +81,33 @@ - 新增 `simple` 属性,用于开启简洁风格的步骤条 #7274 - Pagination - 新增 `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 @@ -208,10 +122,20 @@ - 当含有下拉框时,下拉框的打开和关闭会造成文字虚晃的问题 #6088 - Select - 提升性能,修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151 +- Table + - 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题 + - 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题 + - 修复 `append` 具名 slot 和固定列并存时,动态获取表格数据会导致固定列消失的问题 + - 修复 `expand-row-keys` 属性初始化无效的问题 + - 修复 `data` 改变时过滤条件失效的问题 + - 修复多级表头时固定列隐藏情况计算错误的问题 + - 修复 `max-height` 变更后无法恢复的问题 + - 修复一些样式上的计算错误 #### 非兼容性更新 - 综合 - 移除 `theme-default` + - 最低兼容 Vue 2.5.2 和 IE 10 - 表单组件的 `change` 事件和 Pagination 的 `current-change` 事件现在仅响应用户交互 - Button 和表单组件的 `size` 属性不再接受 `large` 值,可接受 `medium`、`small` 和 `mini` - 为了方便使用第三方图标,Button 的 `icon` 属性、Input 的 `prefix-icon` 和 `suffix-icon` 属性、Steps 的 `icon` 属性现在需要传入完整的图标类名 @@ -225,23 +149,30 @@ - Transfer - `footer-format` 属性更名为 `format` - 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 - `type` 属性现在支持 `success`、`info`、`warning` 和 `danger` 四个值 - - `close-transition` 属性更名为 `disable-transitions` - Menu - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义 - Input - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标 - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件,请以具名 slot 的方式添加图标 + - `change` 事件现在仅在输入框失去焦点或用户按下回车时触发,与原生 input 元素一致。如果需要实时响应用户的输入,可以使用 `input` 事件 - Autocomplete - - 移除 `icon` 和 `on-icon-click` 属性。现在通过 `prefix` 和 `suffix` 具名 slot 来加入图标 - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容 -- Table - - 移除通过 `inline-template` 自定义列模板的功能 + - 移除 `props` 属性,现在使用 `value-key` 属性指定输入建议对象中用于显示的键名 - Steps - 移除 `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 的一致性 ## * 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下,确保 `message` 的内容是可信的,**永远不要**将用户提交的内容赋值给 `message` 属性。 \ No newline at end of file diff --git a/README.md b/README.md index a00ef83fd..7a2133fc5 100644 --- a/README.md +++ b/README.md @@ -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. ## Browser Support -Modern browsers and Internet Explorer 9+. +Modern browsers and Internet Explorer 10+. ## Development Skip this part if you just want to use Element. diff --git a/examples/app.vue b/examples/app.vue index c8532ef28..6a4fcc57a 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -215,6 +215,35 @@ mounted() { 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); } }; diff --git a/examples/docs/en-US/quickstart.md b/examples/docs/en-US/quickstart.md index f8fa30b5d..6797f54f2 100644 --- a/examples/docs/en-US/quickstart.md +++ b/examples/docs/en-US/quickstart.md @@ -4,11 +4,13 @@ This part walks you through the process of using Element in a webpack project. ### 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 -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 > npm i -g vue-cli diff --git a/examples/docs/zh-CN/quickstart.md b/examples/docs/zh-CN/quickstart.md index 5cc2cdd65..63b34da5d 100644 --- a/examples/docs/zh-CN/quickstart.md +++ b/examples/docs/zh-CN/quickstart.md @@ -4,11 +4,13 @@ ### 使用 Starter Kit -整理中。 +我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter),你可以直接使用。对于 Laravel 用户,我们也准备了相应的[模板](https://github.com/ElementUI/element-in-laravel-starter),同样可以直接下载使用。 + +如果不希望使用我们提供的模板,请继续阅读。 ### 使用 vue-cli -我们推荐使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目,命令如下: +我们还可以使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目,命令如下: ```shell > npm i -g vue-cli diff --git a/examples/i18n/page.json b/examples/i18n/page.json index a273e482b..d9321a056 100644 --- a/examples/i18n/page.json +++ b/examples/i18n/page.json @@ -5,7 +5,7 @@ "index": { "lang": "zh-CN", "titleSize": "34", - "paraSize": "20", + "paraSize": "18", "1": "网站快速成型工具", "2": "Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库", "3": "指南", @@ -97,7 +97,7 @@ "index": { "lang": "en-US", "titleSize": "34", - "paraSize": "20", + "paraSize": "18", "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)", "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)", diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl index 758eaf8f9..6584b4049 100644 --- a/examples/pages/template/index.tpl +++ b/examples/pages/template/index.tpl @@ -16,7 +16,7 @@ font-size: <%= paraSize >px; line-height: 28px; color: #888; - margin: 15px 0 0; + margin: 10px 0 5px; } } .jumbotron { diff --git a/packages/collapse/src/collapse-item.vue b/packages/collapse/src/collapse-item.vue index 58aec35e9..2cd28fbc4 100644 --- a/packages/collapse/src/collapse-item.vue +++ b/packages/collapse/src/collapse-item.vue @@ -14,7 +14,7 @@ tabindex="0" @keyup.space.enter.stop="handleEnterClick" :class="{'focusing': focusing}" - @focus="focusing = true" + @focus="handleFocus" @blur="focusing = false" > @@ -58,7 +58,8 @@ display: 'block' }, contentHeight: 0, - focusing: false + focusing: false, + isClick: false }; }, @@ -84,9 +85,19 @@ }, methods: { + handleFocus() { + setTimeout(() => { + if (!this.isClick) { + this.focusing = true; + } else { + this.isClick = false; + } + }, 50); + }, handleHeaderClick() { this.dispatch('ElCollapse', 'item-click', this); this.focusing = false; + this.isClick = true; }, handleEnterClick() { this.dispatch('ElCollapse', 'item-click', this); diff --git a/packages/tabs/src/tab-bar.vue b/packages/tabs/src/tab-bar.vue index 3e1eb4d16..3b4c354c7 100644 --- a/packages/tabs/src/tab-bar.vue +++ b/packages/tabs/src/tab-bar.vue @@ -33,10 +33,16 @@ return true; } else { tabSize = $el[`client${firstUpperCase(sizeName)}`]; + if (sizeName === 'width') { + tabSize -= index === 0 ? 20 : 40; + } return false; } }); + if (sizeName === 'width' && offset !== 0) { + offset += 20; + } const transform = `translate${firstUpperCase(sizeDir)}(${offset}px)`; style[sizeName] = tabSize + 'px'; style.transform = transform; diff --git a/packages/theme-chalk/src/tabs.scss b/packages/theme-chalk/src/tabs.scss index 8c51d9001..8f5a119dc 100644 --- a/packages/theme-chalk/src/tabs.scss +++ b/packages/theme-chalk/src/tabs.scss @@ -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) { .el-tabs__header { margin-bottom: 0;