Merge pull request #7750 from ElemeFE/carbon

Carbon

.travis.yml

@@ -2,6 +2,9 @@ sudo: false
 language: node_js
 node_js: stable
 before_install:
+- export CHROME_BIN=chromium-browser
+- export DISPLAY=:99.0
+- sh -e /etc/init.d/xvfb start
 - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
 - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
 - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"

CHANGELOG.en-US.md

@@ -1,682 +1,256 @@
 ## Changelog
 
-### 1.4.8
+### 2.0.0-rc.1
 
-*2017-10-24*
+*2017-10-25*
 
-- Fixed SubMenu retracting when moving the mouse rapidly on the SubMenu of collapsed Menu, #7579
-- Fixed hidden last shortcut of DateTimePicker when the shortcut menu is long, #7567 (by @DuLinRain)
-- Added `show-timeout` and `hide-timeout` attributes for Dropdown, #7621 (by @phongkt-dev)
-
-### 1.4.7
-
-*2017-10-16*
-
-- Fixed compatibility of Autocomplete and Vue 2.5.x, #6942 (by @rennai)
-- Added `allow-focus` attribute for Switch, #7494 (by @breadadams)
-
-### 1.4.6
-
-*2017-09-27*
-
-- Fixed Slider's button jumping to previous position when clicked, #7190
-- Fixed Tooltip `disabled` regression, #7198
-- Fixed Cascader not correctly filter options when `props` is set, #7225
-- Fixed an error when range typed DatePicker has an initial value of `[]`, #7233
-
-### 1.4.5
-
-*2017-09-24*
-
-- Rate's `colors` attribute now supports dynamic updates, #6872 @lukaszb
-- Fixed Tree not highlighting tree node whose value of `node-key` is 0, #6917
-- Fixed initially disabled Dropdown not showing menu when it's enabled, #6969
-- Added `hide-after` attribute for Tooltip, #6401 @ryatziv
-- Fixed cancel button of TimePicker not cancel picked value when clicked, #7028
-- Added `selectWhenUnmatched` attribute for Autocomplete, #6428 @ryatziv
-- Fixed when `beforeUpload` of a file returns false, other files are aborted by Upload, #7077
-- Fixed disabled dates of DatePicker in month view and year view not displayed correctly in the west hemisphere, #7114
-- `default-value` of DatePicker now supports daterange type, #7073 @wacky6
-
-### 1.4.4
-
-*2017-09-05*
-
-- Fixed all months disabled in DatePicker month view when `disabledDate` is set, #6768 @qingdengyue
-- Added `debounce` attribute for Slider, #6820 @langgo
-- Fixed value of Pagination jumper can be bigger than the total page count, #6842 @huguangju
-- Fixed TimePicker's focus slipping away when selecting hour to 23 with mouse scroll, #6719 @qingdengyue
-
-### 1.4.3
-
-*2017-08-25*
-
-- Fixed style bug when Progress's `percentage` is `0`, #6551 @Kingwl
-- Fixed Carousel items flashing when switching, #6394
-- Fixed disabled Button not prevent event propagation when clicked on its text area, #6421
-- Fixed disabled dates calculation in DatePicker's month view, #6363
-- Fixed key enter event being stopped propagation in Autocomplete, #6499 @leezng
-- Fixed `amPm` not supported in DatePicker i18n, #6574
-- Fixed clicking or dragging error of Slider when it switches from invisible to visible, #6593
-- Fixed Alert using small icons when its `description` is passed via default slot, #6612 @leezng
-
-### 1.4.2
-
-*2017-08-09*
-
-- Fixed Select marking option of `value` equal to `0` as selected when the initial value is null and bound to an object-typed value, #6143
-- Fixed Step style issue when `status` is `error`, #6155 @wacky6
-- Fixed Cascader selecting parent item when moving mouse quickly after clicking a leaf item, #6199
-- Fixed Menu not hiding submenus when collapsed, #6200
-- Fixed status of the inner native input of Switch not syncing with the component, #6205 @wacky6
-- Fixed wrong button positioning of Slider after window is resized, #6263
-- Fixed Autocomplete not hiding dropdown menu on blur, #6256
-- Fixed hitting enter on jumper of Pagination not trigger page change event in IE, #6306 @qingdengyue
-- Fixed InputNumber style issue when its `size` is `large` or `small`, #6310 @JeremyWuuuuu
-- Fixed i18n failure for some texts in DatePicker, #6328
-- Fixed Slider value changing to minimum when its button is clicked, #6359
-
-### 1.4.1
+#### New features
+- Form
+  - Added `clearValidate` method for clearing validating results for all form items, #7623
+- MessageBox
+  - Added `inputType` attribute to assign type for the inner input box, #7651
+- Table
+  - Added `size` attribute
+  - Added `toggleRowExpansion` method to expand or collapse expandable rows programmatically
+  - Added `cell-class-name` attribute to assign class name for cells
+  - Added `cell-style` attribute to style cells
+  - Added `header-row-class-name` attribute to assign class name for header rows
+  - Added `header-row-style` attribute to style header rows
+  - Added `header-cell-class-name` attribute to assign class name for header cells
+  - 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
 
-*2017-07-28*
+#### 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
 
-- Fixed child nodes expanding when checking parent node in Tree, #6029
-- Fixed checking behavior error of Tree, #6034
-- Fixed FormItem not inheriting `label-width` as a Form's direct child, #6044
-- Fixed Menu incorrectly showing SubMenu in collapse mode, #6111
-- Fixed render order error of `v-if` controlled dynamic TabPanes, #6066
-- Fixed Popover still popping up after mouse leaves within `open-delay`, #6058 (by @laobubu)
-- Fixed delete buttons still rendered in file list of disabled Upload, #6091
-- Fixed background color error on hover of striped Table, #6024 (by @xtongs)
+#### 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 change 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
 
-### 1.4.0 Boron
+### 2.0.0-alpha.3
 
-*2017-07-21*
+*2017-10-16*
 
-#### New features:
-- Message
-  - `message` attribute now supports VNode, #5463 (by @egyptik)
-- ColorPicker
-  - Added `active-change` event, #5775
-- Popover
-  - Added `open-delay` attribute, #5842 (by @kaungmyatlwin)
-- Table
-  - A third parameter `value` is passed to `formatter`, #5709 (by @haledeng)
-- Tree
-  - Added `disabled` attribute, #5937
+#### 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 `collapse` attribute, #5941
-- Select
-  - Added `value-key` attribute, #5897
-
-#### Fixes:
+- Added `open` and `close` methods to open and close SubMenu programmatically, #7412
 - DatePicker
-  - i18n failure for some texts, #5485
-  - returning a non-zero millisecond value when initial value is empty, #5663
-  - `disabledDate` affecting undesired date, #4946 (by @liyangworld)
-- Steps
-  - style problems when a step is dynamically added or removed, #5456 (by @elfman)
-- Table
-  - highlight row misplaced when an expandable Table has fixed table columns, #5471 (by @elfman)
-  - `classList` not supported in some browsers, #5613 (by @flynntsc)
-- Select
-  - single Select unable to scroll to the selected item when the dropdown menu pops up, #5564（by @wacky6）
-- Radio
-  - border radius lost in RadioGroups with only one Radio, #5646 (by @YYvanYang)
-- Upload
-  - unable to reselect previously deleted file when `auto-upload` is false, #5706
-  - delete button still visible and functioning when `disabled`, #5841
-  - compatibility issue with Vue 2.4 `key`, #5872
+- 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
-  - clicking cancel buttons getting resolved when not invoked as a `confirm` or `prompt`, #5658
+- 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
-  - active icons not reflecting decimal part of initial value, #5785
-- Pagination
-  - compatibility issue of total page display with vue-i18n@6.x, #5796 (by @mario56)
-  - apostrophe incorrectly showing up when current page is one page less than total page, #5861 (by @openks)
-- Loading
-  - style problems when bound to invisible elements, #5649 (by @xiongzixiao)
-- Cascader
-  - text in the input box not vertically aligned, #5819 (by @jianzhi92)
-- Tree
-  - `setCheckedKeys` and `setCheckedNodes` in lazy mode, #5937
-  - loading all descendent nodes when a parent node is checked in lazy mode, #5963
+- 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
-  - label named slot not working when `label` is not assigned on FormItem, #5921
-- Tooltip
-  - not working in Vue 2.4.x when the triggering element is a custom component, #5916
+- 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
 
-#### Breaking changes:
+#### 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
-  - when value is an object, `value-key` is required as its unique identity key, #5897
-
-### 1.3.7
-
-*2017-06-18*
-
-- Fixed Table with async data not showing summary row, #5318
-- Fixed Pagination's jumper value not sync with current page, #5377
-- Fixed DatePicker's shortcut panel overflow issue, #5297 (by @alashow)
-- Fixed clicking Switch not responding when some text on the page is selected, #5411
-- The red wildcard indicating required field of Form is now responsive, #5403
-- Fixed initial-index of Carousel not working, #5334
-- Fixed Popover enable to be focused when nested in a Dialog, #5336
-
-### 1.3.6
-
-*2017-06-09*
-
-- Fixed inconsistency of ColorPicker's default value and panel value, #5183 (by @Kingwl)
-- Fixed ColorPicker not able to change hue in the panel when its default value is white, #5184 (by @Kingwl)
-- Fixed Select's dropdown taking multiple clicks to expand when nested in a Dialog after scrolling, #5226
-- Added `props` property for Autocomplete, #5282
-- Fixed dropdown of DatePicker not hiding when Tab key is pressed after manual input, #5149 (by @ChuckFields)
-
-### 1.3.5
-
-*2017-06-03*
-
-- Fixed `default-first-option` of Select not working in remote filtering, #5084
-- Fixed InputNumber not aligning with other form components, #5127
-- Fixed inline FormItem having no effect on mixed Input, #5151
-- Fixed height of FormItem being different in Firefox from other browsers, #5152
-- Fixed items with a `value` of 0 in Cascader can not be expanded, #5172 (by @Kingwl)
-- Fixed Autocomplete not triggering native `keydown` and `keyup` events, #5129
-- Added `clear` event for Select, #5112
-- Fixed Cascader's dropdown menu not updating its position in some situations, #5064
-- Better accessibility for Dialog and MessageBox, #4786
-
-### 1.3.4
-
-*2017-05-23*
-
-- Fixed highlight and stripe effects of Table with expandable rows, #4871 (by @mu-yu)
-- Added `default-first-option` for Select, #4838 (by @wacky6)
-- Fixed Select with no options not displaying "No data" text when `allow-create` is true, #4977
-
-### 1.3.3
-
-*2017-05-14*
-
-- Added `visible-change` event for Dropdown, #4818 (by @luciy)
-- Added `tag` attribute for Col and Row, #4799
-- Fixed Cascader search functionality regression, #4812
-- Fixed DatePicker triggering watch when `type` is range, #4837 (by @wacky6)
-- Fixed numbers in TimePicker not align vertically, #4847 (by @pengchongfu)
-- Fixed Dialog not triggering `before-close` hook when ESC is pressed, #4819 (by @patriciussanctus)
-- Fixed multiple MessageBox not rendering content correctly when some of the `message` is a VNode
-- Fixed Checkbox not focused when navigating with tab
-
-### 1.3.2
-
-*2017-05-10*
-
-- Fixed undefined custom component `el-collapse-transition` error when importing some components on demand, #4728
-- Fixed vertical alignment issue of Pagination in FireFox, #4756
-- Fixed dropdown panel view not updating after binding value of DatePicker is programmatically changed when `type` is week, #4739
-- Fixed height calculation errors of Table with summary rows, #4736
-- Added `before-filter` attribute for Cascader, #4774
-- Added `debounce` attribute for InputNumber, #4712（by @pengchongfu）
-
-### 1.3.1
-
-*2017-05-06*
-
-- Fixed Autocomplete clearing input box when typing Chinese, #4718
-- Fixed async Table's summary row not scroll with Table, #4717
-- Fixed Dialog not closing correctly after pressing ESC when `close-on-press-esc` is true, #4706
-- Fixed wrong parameter in `change` event of Switch when `on-value` and `off-value` are assigned, #4675
-
-### 1.3.0 Beryllium
-
-*2017-05-05*
-
-#### New features:
-- New component: Transfer
-- Now you can use our pre-defined transitions
-- Vertical mode for Slider, can be activated by the `vertical` attribute, #4410 (by @devange)
-- Button style for CheckboxGroup, #3697 (by @mdartic)
-- Table
-  - Added `setCurrentRow` method, #4390
-  - Added summary row, with three attributes: `show-summary`, `sum-text` and `summary-method`, #4484
-  - Added `filter-placement` attribute for TableColumn, #4491
+- 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
-  - Added a `before-close` hook, #4432
-  - Added `visible` attribute, which supports the `.sync` modifier, #4539
-- Upload
-  - Added `disabled` attribute, #4473
-  - `on-change` now also triggers when a file is added, #4447
-  - Added `abort` method
-- Switch now supports `on-value` and `off-value`, so that you can customize its values, #4403
-- DatePicker
-  - Added `default-value` attribute for initially displayed date in the dropdown, #4222 (by @wacky6)
-  - `type` now supports dynamic updates, #4417 (by @coffeedeveloper)
-  - Added `label` attribute for CarouselItem, #4317 (by @paul-blundell)
-- `message` of MessageBox now supports VNode, #4550
-- `current-page` of Pagination `current-page` now supports `.sync`, #4539
-- Added `label` slot for Form, so you can customize label's content, #4634
-
-#### Fixes:
-- Compatibility issues of Select and Table with Vue 2.3.x, #4518
-- `disabledDate` of DatePicker having no effect on typed value in the input box, #4309
-- An issue when the key of a Tree node is number 0, #4415
-- TimePicker number not align when picked, #4425 (by @pengchongfu)
-- Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)
-- Upload
-  - not able to select the same file multiple times, #4461
-  - not displaying preview image when is `auto-upload` false, #4572
-  - some style errors, #4643
-- Style bug of RadioGroup when nested in a FormItem, #4336
-- ColorPicker not clear the color panel when bound value is emptied, #4668 (by @pengchongfu)
-- `show-overflow-tooltip` of Table not working in Safari, #4157 (by @renxia)
-
-#### Breaking changes:
-- Only compatible with Vue 2.3.0+
-
-### 1.2.9
-
-*2017-04-19*
-
-- Fixed RadioButton not working properly when some texts on the page are selected, #4217
-- Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)
-- Fixed Cascader clear button not working, #4167 (by @pengchongfu)
-- Fixed router switching error when the page has a Table with Tooltips, #4085
-- Fixed Upload not able to remove selected files, #4233
-- Added `onClick` attribute for Notification, #4221 (by @amouillard)
-- Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)
-- Fixed style error of ColorPicker when nested in a FormItem, #4303
-- Added `enterable` attribute for Tooltip, #4210
-
-### 1.2.8
-
-*2017-04-07*
-
-- Fixed `resetFields` of Form reassigning form items, #3840 (by @pengchongfu)
-- Added `max` and `min` attributes for CheckboxGroup, #3700 (by @mdartic)
-- Fixed DatePicker adding one to picked month in some specific days, #3935
-- Added `closeAll` method for Message, #3966 (by @pengchongfu)
-- Added `format-tooltip` attribute for Slider, #3657 (by @liyanlong)
-- Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)
-- Fixed single Select unable to create new items in Vue 2.2.x, #3984
-- Fixed Row disappearing in all breakpoints if its `span` is set to 0 in some breakpoints, #4053
-
-### 1.2.7
-
-*2017-03-29*
-
-- Fixed Select not compatible with Vue 2.2.6, #3797
-- Improve performance for rendering tooltip in Table, #3478
-- Add `tooltip-effect` property for Table
-
-### 1.2.6
-
-*2017-03-28*
-
-- Fixed Switch compatible with SSR, #3752
-- Fixed the time of TimePicker calculating incorrectly, #3479
-- Fixed the week of DatePicker formatting incorrectly, #2774
-- Fixed the week of DatePicker initializing incorrectly, #3058
-- Fixed the events of Popover destroying incorrectly, #3555
-- Fixed InputNumber setInterval, #3514 (by @pengchongfu)
-- Fixed RadioButton css files, #3276
-- Fixed hover style on striped Table, #3696 (by @nicoeg)
-- Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)
-- Added `delete-tag` event for Select, #3663 (by @pengchongfu)
-- Added `onPick` option for DatePicker, #2921
-- Added `status` for Step, #3722
-- Added full example for on-demand importing, #3302
-
-### 1.2.5
-
-*2017-03-19*
-
-- Added `show-tooltip` property for Slider, #3430 (by @gabrielboliveira)
-- Fixed Slider precision not updating when `step` is updated, #3475 (by @gabrielboliveira)
-- Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549
-- Fixed Table automatically shrinking vertically in some conditions, #3539
-- Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)
-- Now Col will hide itself if its `xs`, `sm`, `md` or `lg` is set to 0, #3564
-
-### 1.2.4
-
-*2017-03-09*
-
-- Fixed Carousel not responding to dynamic data updates, #3159
-- Fixed `cell-dblclick` of Table not firing issue, #3305
-- Fixed disabled Cascader not displaying initial value, #3297
-- Fixed Slider not correctly displaying initial value when `show-input` is true, #3281
-- Fixed Tooltip error in server-side rendering, #3214
-- Fixed `range-separator` of DatePicker not working issue, #3378
-- Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)
-- Added `http-request` attribute for Upload, #3387
-- Added support for hiding col if its `span` is 0, #3313
-
-### 1.2.3
-*2017-03-01*
-- Fixed Tooltip, #3152
-
-
-### 1.2.2
-
-*2017-02-28*
-
-- Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097
-- Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035
-- Fixed incorrect parameter of `change` event of Cascader, #3014
-- Add `change` event for ColorPicker, #3049 (by @nicoeg)
-- Fixed `setCheckedKeys` method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)
-- Fixed Tooltip not compatible with `router-link`, #3143
-
-### 1.2.1
-
-*2017-02-23*
-
-- Fixed SSR regression in version 1.2.0, #2982
-- Fixed horizontal scroll buttons not showing in Tabs, #2974
-- Fixed wrong calculation of height after the `height` attribute is updated dynamically in Table, #2979
-- Added `cell-dblclick` and `header-dragend` events for Table, #2983 #2988
-- Fixed form items showing a left padding inside an inline Form with a specified `label-width`, #2990
-- Fixed Cascader's dropdown misplaces in some conditions, #2992
-
-### 1.2.0 Lithium
-
-*2017-02-22*
-
-#### New features:
-- Two brand new components: Cascader and ColorPicker
-- New attributes `editable` and `addable`, and new events `tab-add` and `edit` for Tabs
-- Language config files in UMD format
-- New events `node-expand` and `node-collapse` for Tree, #2507 (by @masterzhang)
-- New attribute `indent` for Tree, #2713
-- Dialog's title now supports named slot, #2657
-- New attribute `range` for Slider, #2751
-- Upload
-  - Attribute `auto-upload` that controls if files are uploaded immediately after selecting, and its default value is `true`
-  - Event `on-change` that fires when file status changes
-  - Attribute `list-type` that configures the appearance of file list
-- Scroll bars in Autocomplete are made prettier
-
-#### Fixes:
-- Carousel not responding to contents' update, #2775
-- Numbers in TimePicker not align in some conditions, #2948
-- TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)
-- Tabs' display order error when tab-pane is dynamically changed, #2898
-- Menu highlighting menu-item when `default-active` is assigned to an non-existent item
-- Collapse's style issue when nested
-
-#### Breaking changes:
-- Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459
-- The backdrop of Dialog now inserts to body element by default, #2556
-- Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567
-- Upload is refactored
-  - `default-file-list` renamed to `file-list`, and `show-upload-list` renamed to `show-file-list`
-  - `thumbnail-mode` removed
-
-### 1.1.6
-
-*2017-01-23*
-
-- Fixed `customClass` of MessageBox affecting follow-up instances, #2472
-- Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466
-- Fixed style missing issue for some components when imported on demand
-- Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540
-- Restored returning to original sorting in sortable Table columns, #2491
-- Added `reset.css` in `theme-default`, #2378
-- Added `range-separator` attribute for DatePicker, #2579
-- Published individual component packages: Table, DatePicker, Loading, Upload and Carousel
-- Add Finnish (@groenroos)
-
-### 1.1.5
-
-*2017-01-17*
-
-- Fixed Menu not activating corresponding menu item after router switching in router mode, #2451
-- Fixed `value` attribute of Collapse not supporting `Number` typed value, #2455
-
-### 1.1.4
-
-*2017-01-16*
-
-- Fixed Input Number triggering `change` event when bound value is changed programmatically, #2329
-- Fixed Menu not responding to `$router` changing in router mode, #2391
-- Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354
-- Fixed `change` event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically
-- Added `on-icon-click` attribute for Input, #2414
-- Added `disabled` attribute for Radio Group, #2411
-- Added `accordion` attribute for Tree, #2408
-- Added `show-message` attribute for Form, #2356
-- Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)
-- Fixed `firstDayOfWeek` not working in ranged typed of DatePicker, #2353
-- Fixed DatePicker displaying 1970 when initial value is null, #2388
-- Fixed `filteredValue` attribute for Table, #2348
-- Fixed scrollable Table's style with empty data, #2396
-- Added `beforeClose` attribute for MessageBox, #2204
-- Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389
-
-Breaking change
-- The `default-sort-prop` and `default-sort-order` attributes added in 1.1.3 are now merged into an object-typed attribute
-
-### 1.1.3
-
-*2017-01-09*
-
-- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167
-- Fixed DatePicker year calculating error when choosing the next year, #2152
-- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang)
-- Fixed filterable Select filtering other options with initial value, #2196
-- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129
-- Added `resize` attribute for Input, #2263 (by @Kingwl)
-- Fixed Autocomplete not hiding dropdown when blurred, #2247
-- Fixed style issues with nested Tabs, #2212 (by @Kingwl)
-- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192
-
-### 1.1.2
-
-*2016-12-30*
-
-- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+
-- Fixed Input Number not resetting on blur when input with illegal values, #2098
-- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100
-- Fixed range selection in TimePicker not working issue
-- Fixed Tabs' active tab switching when a non-active tab is removed, #2106
-- Fixed console error reporting when navigating Select with arrow keys, #2120
-- Fixed incorrect validation timing of filterable Select in Form, #2120
-
-### 1.1.1
-
-*2016-12-29*
-
-- Fixed compatibility issue with latest Vue due to compilation
-
-### 1.1.0 Helium
-
-*2016-12-29*
-
-#### New features:
-- Two brand new components: Carousel and Collapse
-- SSR supported
-- Scrollbars' style inside components is upgraded
-- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future
-- Table now supports expandable rows
-- DatePicker now supports specifying the first day of week
-- TimeSelect now supports `maxTime`
-- Autocomplete now supports `popper-class`
-- To customize template of Tab-Pane, now you can use the `slot` named `label`
-
-#### Fixes:
-- `change` event of DatePicker incorrectly triggering multiple times, #2070
-- Width shaking of tab-pane while initializing, #1883
-
-#### Breaking changes:
-- Only compatible with Vue 2.1.6 and beyond
-- Parameters of Form validateField() methods are updated
-- Alert's render-content attribute is removed, and now you can pass your custom template via default slot
-- The box models of Input and Select are updated from `block` to `inline-block`
-- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed
-- The dropdown of Autocomplete now inserts directly to `<body>`, not `<el-autocomplete>` any more
-
-### 1.0.9
-
-*2016-12-27*
-
-- Fixed DatePicker incorrectly triggering input event, #1834
-- Fixed Tree reporting `event is undefined` error in Firefox, #1945
-- Added `change` event for DatePicker, whose parameter is the formatted value, #1841
-- Added `header-align` attribute for Table, #1424
-- Fixed single select Table's highlight style not removing when data is removed, #1890
-- Fixed filterable Select lagging issue with more options, #1933
-- Fixed multiple disabled Select not disabling removing selected options issue, #2001
-- Fixed Col style not working in `xs`, #2011
-- Added `value` attribute for Tab, #2008
-- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999
-- Added `clearable` attribute for DatePicker, #1994
-- Fixed Form always passing validation in async mode, #1936
-
-### 1.0.8
-
-*2016-12-20*
-
-- Fixed nested Popup from event bubbling, #1677
-- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758
-- Fixed `change` event not firing correctly of Slider, #1809
-- Fixed Loading's spinner splitting while animating in some conditions, #1786
-- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849
-- Added `popper-class` property for DatePicker, Select and Tooltip, #1806
-- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807
-- Added the third parameter `column` for Table's `row-click` event, #1808
-- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860
-- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857
-- Added infinite submenus support for NavMenu in vertical mode, #1851
-- Updated Checkbox so that it works without a binding value, #1818
-- Added `onProgress` hook for Progress, #1782
-- Fixed Tab not updating active bar with dynamic label, #1761
-- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876
-- Added `hide-on-click` property for Dropdown, #1879
-
-### 1.0.7
-
-*2016-12-14*
-
-- Fixed DatePicker dropdown appears when hovering on the clear button
-- Fixed DatePicker displays a wrong date when its initial value is null
-- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674
-- Added `customClass` attribute for MessageBox, #1707
-- Added `iconClass` and `customClass` attributes for Message and Notification, #1671
-- Added empty slot for Table, #1737
-- Added old value as a second parameter in change event for InputNumber
-
-### 1.0.6
-
-*2016-12-09*
-
-- Added `disabled` attribute for Tabs, #1620
-- Added `size` attribute for DatePicker input, #1440
-- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129
-- Fixed DatePicker display error when switching year, #1607
-- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604
-- Fixed TimePicker not refreshing value after clicking the clear button, #1583
-- Fixed remote filterable Select display error when its value is an object, #1593
-- Fixed Select's clear button still working bug when it's `disabled`, #1619
-- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627
-- Fixed some style bugs of Table
-
-### 1.0.5
-
-*2016-12-06*
-
-- Fixed Select with async options and binding value displaying value instead of label, #1537
-- Fixed Select reports an error when initial binding value is an empty object, #1533
-- Fixed remote filtering Select not showing dropdown in some conditions, #1531
-- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546
-- Fixed Steps style in IE9, #1543
-- Added Upload generating URL for all file types, #1530
-- Fixed TimeSelect style, removed flexbox, #1335
-
-### 1.0.4
-
-*2016-12-02*
-
-- Added `controls` attribute for Input Number, #1473
-- Fixed Checkbox Group and Radio Group async issue, #1511 #1514
-- Added `offset` attribute for Notification, #1419
-- Fixed Slider's value not accurate issue when dragging rapidly, #1458
-- Fixed Slider incorrectly showing multiple decimal digits issue, #1450
-- Fixed Select's binding value and displayed value not in sync in some conditions
-- Added `multiple-limit` and `allow-create` attributes for Select
-- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438
-- Fixed Tree's view not updating issue after fetching child nodes' data, #1439
-- Fixed some Table's style issues in windows system, #1464 #1507
-- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451
-- Added `row-dblclick` event for Table, #1362
-
-### 1.0.3
-
-*2016-11-28*
-
-- Fixed `currentPage` of Pagination not working in some cases, #1336
-- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158
-- Fixed `readonly` DatePicker clear button not disabled issue, #1238
-- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282
-- Added multi-header for Table, #1312
-- Added `rowStyle` for Table, #1348
-- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314
-- Added `filter-node-method` attribute and `filter` method for Tree, #1257
-- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254
-- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152
-- Fixed Popper not triggering destroy issue when keep-alive, #1359
-- Added object deep validation for Form, #1363
-- Added `append` and `prepend` for Autocomplete, #1369
-- Added dynamic `pageSizes` support for Pagination, #1372
-- Added custom style API for checked buttons in Radio Button, #1380
-- Added assigning title via slot for Menu Group, #1382
-- Fixed DatePicker year switching bug, #1385
-- Added uploaded file list API for Upload, #1393
-- Added multi-type support for `label` attribute of Checkbox, #1400
-- Added `setChecked` method for Tree, #1422
-
-### 1.0.2
-
-*2016-11-18*
-
-- Added `context` for Table to specify which context to access inside of table columns, #1161
-- Added multiple languages
-- Fixed language's dynamic switching issue, #1160
-- Added `render-content` for Alert, #568
-- Added styles for focused Button, #982
-- Fixed `change` triggering timing in Switch, #1162
-- Fixed TimeSelect being disabled when start time is set to `00:00`, #676
-- Added `show-header` attribute and `header-click` method for Table, #1195
-- Improved `height` attribute for Table when set to a string, #1195
-- Fixed `selection-change` of Table not triggering in some cases, #1198
-- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182
-
-### 1.0.1
-
-*2016-11-16*
-
-- Fixed Pagination improperly triggering multiple `current-change` events
-- Fixed Switch style when nested in a Form, #967
-- Fixed Loading locks scroll of `body` in specific scenarios, #968
-- `span` of Col is no longer a required attribute, and its default value is `24` if omitted
-- Added `disabled` and `editable` attribute for DatePicker, #976
-- Fixed DatePicker readonly with native behavior, #976
-- Added `close` method for Message and Notification to manually close an instance
-- Added clear value feature for DatePicker, #759
-- Fixed Form reports an error when resetting a Date typed field, #937
-- Fixed Table render error using vue-loader 9.9.0
-- Added `align-center` attribute for Step, #994
-- Fixed Upload missing Progress component, #1013
-- Layout now supports responsive layout
-- Added `show-close` for Dialog
-- Fixed an error when `vue-i18n` is imported but not configured, #973
-- Fixed DatePicker not refresh view with an initial value, #1050
-- Fixed DiatePicker not refresh year when switched in month picker, #1070
-- Added $loading service
-- Added `manual` trigger in Popover
-- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree
-
-### 1.0.0
-
-*2016-11-9*
+- 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
 
-Element 1.0.0 released.
+##
+<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>

CHANGELOG.zh-CN.md

@@ -1,814 +1,247 @@
 ## 更新日志
 
-### 1.4.8
-*2017-10-24*
+### 2.0.0-rc.1
+*2017-10-25*
 
-- 修复鼠标在折叠的 Menu 子菜单中快速移动时会将菜单收起的问题，#7579
-- 修复 DateTimePicker 的快捷菜单过长时，最后一项会被隐藏的问题，#7567（by @DuLinRain）
-- 新增 Dropdown 的 `show-timeout` 和 `hide-timeout` 属性，#7621（by @phongkt-dev）
-
-### 1.4.7
-*2017-10-16*
-
-- 修复 Autocomplete 与 Vue 2.5.x 不兼容的问题，#6942（by @rennai）
-- Switch 新增 `allow-focus` 属性，#7494（by @breadadams）
-
-### 1.4.6
-*2017-09-27*
-
-- 修复点击 Slider 的按钮会使其返回上一个位置的问题，#7190
-- 修复 Tooltip 无法正确切换 `disabled` 的问题，#7198
-- 修复 Cascader 的过滤功能在配置了 `props` 的情况下的异常问题，#7225
-- 修复 DatePicker 的范围选择在初始值为空数组时会报错的问题，#7233
-
-### 1.4.5
-*2017-09-24*
-
-- Rate 的 `colors` 属性现在可以动态更新了，#6872 @lukaszb
-- 修复 Tree 无法高亮 `node-key` 值为 0 的节点的问题，#6917
-- 修复初始状态被禁用的 Dropdown 在取消禁用后无法弹出下拉菜单的问题，#6969
-- Tooltip 新增 `hide-after` 属性，#6401 @ryatziv
-- 修复 TimePicker 取消按钮无法正确取消所选值的问题，#7028
-- Autocomplete 新增 `selectWhenUnmatched` 属性，#6428 @ryatziv
-- 修复 Upload 中某个文件的 `beforeUpload` 返回 `false` 时会错误地取消其他文件上传的问题，#7077
-- 修复 DatePicker 在西半球使用时月视图和年视图禁用日期显示错误的问题，#7114
-- DatePicker 的 `default-value` 属性支持 daterange 模式，#7073 @wacky6
-
-### 1.4.4
-*2017-09-05*
-
-- 修复设置了 `disabledDate` 的 DatePicker 在月视图下全部不可选的问题，#6768 @qingdengyue
-- Slider 新增 `debounce` 属性，#6820 @langgo
-- 修复 Pagination 的 jumper 中可以输入比最大页数更大的数字的问题，#6842 @huguangju
-- 修复 TimePicker 的小时数难以通过滚动的方式选中 23 时的问题，#6719 @qingdengyue
-
-### 1.4.3
-*2017-08-25*
-
-- 修复 Progress 百分比为 `0` 时的样式问题，#6551 @Kingwl
-- 修复 Carousel 在切换时幻灯片闪烁的问题，#6394
-- 修复禁用的 Button 在点击文字部分时未阻止事件传播的问题，#6421
-- 修复 DatePicker 的月视图错误计算禁用日期的问题，#6363
-- 修复 Autocomplete 键盘回车被阻止传播的问题，#6499 @leezng
-- 修复 DatePicker 的 i18n 不支持 `amPm` 的问题，#6574
-- 修复 Slider 由隐藏变为可见时交互错误的问题，#6593
-- 修复通过默认 slot 传递 `description` 的 Alert 错误地使用小图标的问题，#6612 @leezng
-
-### 1.4.2
-*2017-08-09*
-
-- 修复绑定值为对象类型时，初始值为 null 的 Select 会选中 value 为 `0` 的问题，#6143
-- 修复 `status` 为 `error` 的 Step 样式问题，#6155 @wacky6
-- 修复当 Cascader 的 `expand-trigger` 为 `hover` 时，点击选择条目后快速移动会再次选到父级元素的问题，#6199
-- 修复 Menu 在 collaspse 时不能收起子级菜单的问题，#6200
-- 修复 Switch 内部的原生 input 状态与组件不同步的问题，#6205 @wacky6
-- 修复 Slider 在 resize 窗口后滑块位置不准的问题，#6263
-- 修复 Autocomplete 在 blur 时不会收起下拉框的问题，#6256
-- 修复 Pagination 的 jumper 在 IE 下敲击回车无法触发翻页的问题，#6306 @qingdengyue
-- 修复 InputNumber 当 `size` 为 `large` 和 `small` 时的样式问题，#6310 @JeremyWuuuuu
-- 修复 DatePicker 的部分格式化文字 i18n 不生效的问题，#6328
-- 修复点击 Slider 的滑块会使其移动至起点的问题，#6359
-
-### 1.4.1
-*2017-07-28*
-
-- 修复 Tree 勾选父节点会弹出子节点的问题，#6029
-- 修复 Tree 勾选逻辑错误，#6034
-- 修复作为 Form 直接子元素的 FormItem 不继承 `label-width` 的问题，#6044
-- 修复 collapse 模式下的 Menu 自动弹出子菜单的问题，#6111
-- 修复使用 `v-if` 的动态 TabPane 顺序错误的问题，#6066
-- 修复鼠标在 `open-delay` 时间内移开元素后，仍然会弹出 Popover 的问题，#6058（by @laobubu）
-- 修复禁用的 Upload 的文件列表仍然显示删除按钮并可操作的问题，#6091
-- 修复斑马纹的 Table 的背景色在 hover 时不正确的问题，#6024（by @xtongs）
-
-### 1.4.0 Boron
-*2017-07-21*
-
-#### 新特性：
-- Message
-  - `message` 属性支持 VNode，#5463（by @egyptik）
-- ColorPicker
-  - 新增 `active-change` 事件，#5775
-- Popover
-  - 新增 `open-delay` 属性，#5842（by @kaungmyatlwin）
+#### 新特性
+- Form
+  - 新增 `clearValidate` 方法，用于清空所有表单项的验证信息，#7623
+- MessageBox
+  - 新增 `inputType` 属性，用户指定内部输入框的类型，#7651
 - Table
-  - `formatter` 新增 `value` 参数，#5709（by @haledeng）
-- Tree
-  - 新增 `disabled` 属性，#5937
-- Menu
-  - 新增 `collapse` 属性，#5941
-- Select
-  - 新增 `value-key` 属性，#5897
-
-#### 修复：
-- DatePicker
-  - 部分内部文案不受 i18n 控制的问题，#5485
-  - 初始值为空时，选择时间后的返回值毫秒部分不为零的问题，#5663
-  - `disabledDate` 范围被扩大的问题，#4946（by @liyangworld）
-- Steps
-  - 动态增减步骤后的样式错误，#5456（by @elfman）
+  - 新增 `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
-  - 带有固定列且可展开时，鼠标 hover 高亮行错位的问题，#5471（by @elfman）
-  - 部分浏览器不支持 `classList` 的问题，#5613（by @flynntsc）
-- Select
-  - 单选时打开下拉框有时无法定位到已选中项的问题，#5564（by @wacky6）
-  - 多选时 Vue 2.4.x 报错的问题，#5897
-- Radio
-  - RadioGroup 内只有一个 Radio 时的圆角丢失问题，#5646（by @YYvanYang）
-- Upload
-  - `auto-upload` 为 false 时，无法选择之前删除的文件的问题，#5706
-  - `disabled` 时删除按钮仍可见并可操作的问题，#5841
-  - 兼容 Vue 2.4 `key` 不能是对象的问题，#5872
-- MessageBox
-  - 非 `confirm` 或 `prompt` 情况下点击取消按钮仍然被 resolve 的问题，#5658
-- Rate
-  - 初始值带有小数时，激活的 icon 不显示小数部分的问题，#5785
-- Pagination
-  - 总页数的 i18n 不与 vue-i18n@6.x 兼容的问题，#5796（by @mario56）
-  - 当前页为最大页数减一时，错误地显示省略号的问题，#5861（by @openks）
-- Loading
-  - 不可见元素绑定 Loading 时的样式错误，#5649（by @xiongzixiao）
-- Cascader
-  - 输入框中的文字未垂直居中的问题，#5819（by @jianzhi92）
-- Tree
-  - 在 lazy 模式下 `setCheckedKeys` 和 `setCheckedNodes` 方法的 bug，#5937
-  - 在 lazy 模式下勾选父级节点会一次性加载全部后代节点的问题，#5963
-- Form
-  - 未在 FormItem 上指定 `label` 时，label 的具名 slot 失效的问题，#5921
-- Tooltip
-  - Vue 2.4.x 下触发元素为自定义组件时不工作的问题，#5916
-
-#### 非兼容性更新:
-- Select
-  - 值为对象类型时，需要提供一个 `value-key` 作为唯一性标识，#5897
-
-### 1.3.7
-*2017-06-18*
-
-- 修复异步加载数据的 Table 不显示合计行的问题，#5318
-- 修复 Pagination 的输入框数值与当前页不同步的问题，#5377
-- 修复 DatePicker 的 shortcut 面板过长时的溢出问题，#5297（by @alashow）
-- 修复当页面上有被选中的文本时点击 Switch 无效的问题，#5411
-- Form 中表示必填项的小红点现在可以动态更新了，#5403
-- 修复 Carousel 的 initial-index 属性无效的问题，#5334
-- 修复嵌套于 Dialog 中的 Popover 无法被 focus 的问题，#5336
-
-### 1.3.6
-*2017-06-09*
-
-- 修复 ColorPicker 的默认值有时与面板中的值不一致的问题，#5183（by @Kingwl）
-- 修复默认值为白色的 ColorPicker 无法通过面板改变 hue 的问题，#5184（by @Kingwl）
-- 修复 Dialog 在滚动后，其嵌套的 Select 需多次点击才能呼出的问题，#5226
-- 新增 Autocomplete 的 `props` 属性，#5282
-- 修复 DatePicker 在手动输入值后按 Tab 切换焦点时下拉框不消失的问题，#5149（by @ChuckFields）
-
-### 1.3.5
-*2017-06-03*
-
-- 修复 Select 的 `default-first-option` 属性在远程搜索时不生效的问题，#5084
-- 修复 InputNumber 与其他表单组件同行显示时不能对齐的问题，#5127
-- 修复行内 FormItem 对复合型 Input 失效的问题，#5151
-- 修复 FormItem 在 Firefox 中的高度与其他浏览器不一致的问题，#5152
-- 修复 Cascader 中 `value` 为 0 的数据不能展开下一级的问题，#5172（by @Kingwl）
-- 修复 Autocomplete 无法触发原生 `keydown` 和 `keyup` 事件的问题，#5129
-- 新增 Select 的 `clear` 事件，#5112
-- 修复 Cascader 在某些情况下下拉框的位置没有及时更新的问题，#5064
-- 提升 Dialog 和 MessageBox 的可访问性，#4786
-
-### 1.3.4
-*2017-05-23*
+  - 修复 `max-height` 变更后无法恢复的问题
+  - 修复一些样式上的计算错误
 
-- 修复带展开行的 Table 在高亮和斑马纹效果下的问题，#4871（by @mu-yu）
-- 新增 Select 的 `default-first-option` 属性，#4838（by @wacky6）
-- 修复可创建选项的 Select 在没有选项数据时不显示「无数据」文本的问题，#4977
-
-### 1.3.3
-*2017-05-14*
-
-- 新增 Dropdown 的 `visible-change` 事件，#4818（by @luciy）
-- 新增 Col 和 Row 的 `tag` 属性，#4799
-- 修复上个版本中 Cascader 搜索功能不可用的问题，#4812
-- 修复 `type` 为 range 的 DatePicker 错误地触发 watch 的问题，#4837（by @wacky6）
-- 修复 TimePicker 在某些浏览器上数字不居中的问题，#4847（by @pengchongfu）
-- 修复当按下 ESC 关闭 Dialog 时不触发 `before-close` 钩子的问题，#4819（by @patriciussanctus）
-- 修复当多个 MessageBox 中存在 VNode 格式的 `message` 时渲染不正确的问题
-- 修复按下 tab 键无法使 Checkbox 获得焦点的问题
-
-### 1.3.2
-*2017-05-10*
-
-- 修复在按需引入某些组件时，报 `el-collapse-transition` 未找到的错，#4728
-- 修复 Pagination 在 FireFox 中的垂直居中问题，#4756
-- 修复 `type` 为 week 时的 DatePicker 在更新绑定值后面板视图不更新的问题，#4739
-- 修复 `show-summary` 的 Table 的一些高度计算错误，#4736
-- 新增 Cascader 的 `before-filter` 属性，#4774
-- 新增 InputNumber 的 `debounce` 属性，#4712（by @pengchongfu）
-
-### 1.3.1
-*2017-05-06*
-
-- 修复 Autocomplete 输入中文时会清空输入框的问题，#4718
-- 修复异步获取数据的 Table 的合计行不随表格其余部分滚动的问题，#4717
-- 修复 `close-on-press-esc` 为 true 的 Dialog 在按下 ESC 时无法正确关闭的问题，#4706
-- 修复设置了 `on-value` 和 `off-value` 的 Switch `change` 事件参数不正确的问题，#4675
-
-### 1.3.0 Beryllium
-*2017-05-05*
-
-#### 新特性：
-- 新增 Transfer 组件
-- 新增 transition 的文档，现在用户可以使用内置 transition 了
-- Slider 新增垂直模式，使用 `vertical` 属性即可打开，#4410（by @devange）
-- CheckboxGroup 新增按钮模式，#3697（by @mdartic）
+#### 非兼容性更新
+- Autocomplete
+  - 移除 `props` 属性，现在使用 `value-key` 属性指定输入建议对象中用于显示的键名
 - Table
-  - 新增 `setCurrentRow` 方法，#4390
-  - 新增表尾合计行的功能，提供 `show-summary`、`sum-text` 和 `summary-method`，#4484
-  - TableColumn 新增 `filter-placement` 属性，#4491
-- Dialog
-  - 新增 `before-close` 属性，#4432
-  - 新增 `visible` 属性，且支持 `.sync` 修饰符，#4539
-- Upload
-  - 新增 `disabled` 属性，#4473
-  - `on-change` 事件现在也会在添加文件后触发，#4447
-  - 新增 `abort` 方法，#4575
-- Switch 新增 `on-value` 和 `off-value` 属性，支持自定义两种状态的值，#4403
+  - 将 `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
-  - 新增 `default-value` 属性，用于设定下拉框初次弹出时显示的日期，#4222（by @wacky6）
-  - 支持动态改变 `type`，#4417（by @coffeedeveloper）
-- CarouselItem 新增 `label` 属性，#4317（by @paul-blundell）
-- MessageBox 的 `message` 属性增加对 VNode 的支持，#4550
-- Pagination 的 `current-page` 增加对 `.sync` 的支持，#4539
-- Form 新增名为 label 的 slot，用于自定义标签文本的内容，#4634
-
-#### 修复：
-- Select 和 Table 的某些功能与 Vue 2.3.x 不兼容的问题，#4518
-- DatePicker 的 `disabledDate` 对手动在输入框中输入的值无效的问题，#4309
-- Tree 的树节点 ID 为数字 0 时的一些问题，#4415
-- TimePicker 在完成选择后数字不居中显示的问题，#4425（by @pengchongfu）
-- Autocomplete 在输入中文时频繁触发搜索方法的问题，#4393（by @qazbnm456）
-- Upload
-  - 不能选择同一个文件的问题，#4461
-  - `auto-upload` 为 false 时不显示预览图片的问题，#4572
-  - 一些样式问题，#4643
-- 嵌套在 FormItem 中的按钮样式的 RadioGroup 的样式问题，#4336
-- ColorPicker 修复将绑定值赋值为空不会清空颜色面板的问题，#4668（by @pengchongfu）
-- Table 修复在 Safari 下 `show-overflow-tooltip` 无效的问题，#4157（by @renxia）
-
-#### 非兼容性更新:
-- 最低兼容 Vue 2.3.0
-
-### 1.2.9
-*2017-04-19*
-
-- 修复在有文本选中的情况下，RadioButton 需要多次点击才能生效的问题，#4217
-- 修复 Tree 的多选框在某些浏览器下不能全选的问题，#4107（by @pengchongfu）
-- 修复可清空的 Cascader 清空按钮无效的问题，#4167（by @pengchongfu）
-- 修复带有 Tooltip 的 Table 在路由切换时有时会报错的问题，#4085
-- 修复 Upload 无法移除待上传的文件的问题，#4233
-- 新增 Notification 的 `onClick` 属性，#4221（by @amouillard）
-- 修复 DatePicker 在清空后值变为 undefined 的问题，#4186（by @pengchongfu）
-- 修复 FormItem 中 ColorPicker 的样式错误，#4303
-- 新增 Tooltip 的 `enterable` 属性，#4210
-
-### 1.2.8
-*2017-04-07*
-
-- 修复 Form 的 `resetFields` 会给表单项重新赋值的问题，#3840（by @pengchongfu）
-- 新增 CheckboxGroup 的 `max` 和 `min` 属性，#3700（by @mdartic）
-- 修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935
-- 新增 Message 的 `closeAll` 方法，#3966（by @pengchongfu）
-- 新增 Slider 的 `format-tooltip` 属性，#3657（by @liyanlong）
-- 修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）
-- 修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984
-- 修复某些断点下 `span` 为 0 的 Row 在其他断点下也会消失的问题，#4053
-
-### 1.2.7
-*2017-03-29*
-
-- 修复 Select 不兼容 Vue 2.2.6 的问题，#3797
-- 优化 Table 的 Tooltip 渲染性能，#3478
-- 新增 Table `tooltip-effect` 属性
-
-### 1.2.6
-*2017-03-28*
-
-- 修复 Switch 样式不兼容 vue SSR，#3752
-- 修复 TimePicker 日期计算错误，#3479
-- 修复 DatePicker 格式化 week 类型错误，#2774
-- 修复 DatePicker 周选择器默认值，#3058
-- 修复 Popover 销毁时未正确清除事件，#3555
-- 修复 InputNumber 鼠标左右键一起按下会导致值一直自增加，#3514（by @pengchongfu）
-- 修复 RadioButton 样式文件引入但无样式，#3276
-- 修复 Table 的 hover 样式，#3696（by @nicoeg）
-- 修复 Slider 跳动问题，#3664（by @gabrielboliveira）
-- 新增 Select `delete-tag` 事件 #3663（by @pengchongfu）
-- 新增 DatePicker 的 `onPick` 选项，#2921
-- 新增 Steps 可分别设置 step 的状态（status）和样式调整，#3722
-- 新增完整的按需引入组件的文档，#3302
-
-### 1.2.5
-*2017-03-19*
-
-- 新增 Slider 的 `show-tooltip` 属性，#3430（by @gabrielboliveira）
-- 修复动态改变 Slider `step` 的精度时，其值的精度不随之改变的问题，#3475（by @gabrielboliveira）
-- 修复含有 Tooltip 的 Table 在当前窗口高度临界于出现滚动条时，弹出 Tooltip 会导致 Table 宽度抖动的问题，#3549
-- 修复 Table 在某些情况下高度自动往复变小的问题，#3539
-- 修复 Popover 中的弹出类组件在点击 Popover 的空白区域时不隐藏的问题，#3451（by @nicoeg）
-- 现在 `xs`、`sm`、`md`、`lg` 值为 0 的 Col 会被正确隐藏，#3564
-
-### 1.2.4
-*2017-03-09*
-
-- 修复 Carousel 有时不响应数据动态更新的问题，#3159
-- 修复 Table 的 `cell-dblclick` 事件无法触发的问题，#3305
-- 修复禁用的 Cascader 不显示默认值的问题，#3297
-- 修复 Slider 在 `show-input` 时初始值不正确的问题，#3281
-- 修复 Tooltip 在服务端渲染时报错的问题，#3214
-- 修复 DatePicker 的 `range-separator` 属性有时无效的问题，#3378
-- 新增指令式调用 Loading 时响应动态加载文案的功能，#3345（by @imyzf）
-- 新增 Upload 的 `http-request` 参数，用于实现覆盖默认的上传行为，#3387
-- 新增 Col 支持将 `span` 值设为 0 时隐藏该列的功能，#3313
-
-### 1.2.3
-*2017-03-01*
-- 修复 Tooltip, #3152
-
-### 1.2.2
-*2017-02-28*
-
-- 修复若干组件与 Vue 2.2 不兼容的问题，#3002 #3067 #3097
-- 修复嵌套在 Dialog 内的 Cascader 下拉框有时出现在 Dialog 之后的问题，#3035
-- 修复 Cascader 的 `change` 事件参数在某些情况下不正确的问题，#3014
-- 新增 ColorPicker 的 `change` 事件，#3049（by @nicoeg）
-- 修复 Tree 的 `setCheckedKeys` 方法对非叶子节点无效的问题，#2967（by @rainyLeo）
-- 修复 Tooltip 和 `router-link` 共用报错的问题，#3143
-
-### 1.2.1
-*2017-02-23*
-
-- 修复用于 SSR 时报错的问题，#2982
-- 修复 Tabs 左右滚动按钮无法出现的问题，#2974
-- 修复 Table 在动态改变 `height` 属性后高度计算错误的问题，#2979
-- 新增 Table 的 `cell-dblclick` 和 `header-dragend` 事件，#2983 #2988
-- 修复行内表单在指定 `label-width` 时表单元素出现左边距的问题，#2990
-- 修复 Cascader 在某些情况下弹出框位置不正确的问题，#2992
-
-### 1.2.0 Lithium
-*2017-02-22*
-
-#### 新特性：
-- 新增 Cascader、ColorPicker 组件
-- Tabs 新增 `editable` 和 `addable` 属性以及 `tab-add` 和 `edit` 事件
-- 新增 UMD 格式的语言包文件
-- Tree 新增 `node-expand` 和 `node-collapse` 事件，#2507（by @masterzhang）
-- Tree 新增 `indent` 属性，#2713
-- Dialog 的标题支持以具名 slot 的方式传入，#2657
-- Slider 新增 `range` 属性，支持范围选择，#2751
-- Upload
-  - 新增 `auto-upload` 属性，用以控制是否在选择图片后自动上传，默认为开启
-  - 新增 `on-change` 钩子函数在文件状态改变时会调用
-  - 新增 `list-type` 设置文件列表展示外观
-- Autocomplete 滚动条使用 el-scrollbar
-
-#### 修复：
-- Carousel 不响应内容动态更新的问题，#2775
-- TimePicker 在某些情况下数字位置不居中的问题，#2948
-- TimePicker 在某些情况下范围选择时仅响应偶数次点击的问题，#2884（by @k55k32）
-- Tab 修复 tab-pane 动态显示时插入顺序问题, #2898
-- Menu 修复将 `default-active` 设置为不存在的 index 时 menu-item 还会高亮的问题
-- Collapse 修复嵌套使用时的样式问题
-
-#### 非兼容性更新:
-- 重构 Tooltip，不再生成额外的 HTML 标签，确保被 tooltip 包裹的组件的结构不变，#2459
-- Dialog 的遮罩层现在默认插入至 body 元素上，#2556
-- Tabs 现在内部不再维护 tab 实例，需要在外部通过相关事件去处理, #2567
-- Upload 重构升级
-  - `default-file-list` 属性更名为 `file-list`, `show-upload-list` 属性更名为 `show-file-list`
-  - `thumbnail-mode` 属性被移除
-
-### 1.1.6
-*2017-01-23*
-
-- 修复 MessageBox 的 `customClass` 会影响后续实例的问题，#2472
-- 修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题，#2466
-- 修复一些组件在单独引入时样式缺失的问题
-- 修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题，#2540
-- 修复 Table 排序支持返回原始顺序，#2491
-- 新增 `reset.css` 在 `theme-default` 内，#2378
-- 新增 DatePicker 的 `range-separator` 属性，#2579
-- 发布单独组件包：Table，DatePicker，Loading，Upload，Carousel
-- 新增芬兰语（@groenroos）
-
-### 1.1.5
-*2017-01-17*
-
-- 修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451
-- 新增 Collapse `value` 属性增加对 `Number` 类型的支持，#2455
-
-### 1.1.4
-*2017-01-16*
-
-- 修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329
-- 修复 Menu 在启用 router 模式后没有对 `$route` 变化进行响应的问题，#2391
-- 修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354
-- 修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。
-- 新增 Input 增加点击图标后的钩子函数属性，#2414
-- 新增 Radio Group 的 `disabled` 属性，#2411
-- 新增 Tree 增加 `accordion` 属性，#2408
-- 新增 Form 增加 `show-message` 属性，#2356
-- 修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）
-- 修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353
-- 修复 DatePicker 初始值为 null 显示 1970，#2388
-- 修复 Table 缺少 filteredValue 属性，#2348
-- 修复 Table 空数据时且存在滚动条时的样式，#2396
-- 新增 MessageBox 的 `beforeClose` 属性，#2204
-- 修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389
-
-非兼容性更新
-- 1.1.3 新增的 `default-sort-prop` 和 `default-sort-order` 属性现在合并为一个对象类型属性
-
-### 1.1.3
-*2017-01-09*
-
-- 修复 DatePicker 页面加载后首次清空不会触发 `change` 事件，#2167
-- 修复 DatePicker 选择下一年时，年份计算错误，#2152
-- 新增 Table 的 `default-sort-prop` 和 `default-sort-order` 属性，#2182（by @njleonzhang）
-- 修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196
-- 新增自定义 i18n 处理方法，方便和除了 `vue-i18n` 之外的插件使用，#2129
-- 新增 Input `resize` 属性，#2263（by @Kingwl）
-- 修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247
-- 修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）
-- 修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192
-
-### 1.1.2
-*2016-12-30*
-
-- 修复 Vue 2.1.7 升级导致的 Table `sortable` 和 `fixed` 无法使用的问题
-- 修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098
-- 移除 Collapse 的 `title` scoped slot, 并新增 `title` named slot，#2100
-- 修复 TimePicker 范围选择无法使用的问题
-- 修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106
-- 修复 Select 在使用方向键导航时控制台报错的问题，#2120
-- 修复 Form 中可搜索的 Select 验证时机错误的问题，#2120
-
-### 1.1.1
-*2016-12-29*
-
-- 修复由于编译而出现的不兼容新版 Vue 的问题
-
-### 1.1.0 Helium
-*2016-12-29*
-
-#### 新特性：
-- 新增 Carousel、Collapse 组件
-- 支持 SSR
-- 组件内的滚动条样式优化
-- Table 支持通过 [Scoped Slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots) 传入模板；原来的 `inline-template` 仍然兼容，但是不再推荐使用，未来可能会被移除
-- Table 支持展开行功能(Expandable rows)
-- DatePicker 支持指定周起始日(first day of week)
-- TimeSelect 支持设置 `maxTime`
-- Autocomplete 新增 `popper-class`属性
-- Tab-Pane 新增 name 为 label 的具名 `slot`，用于实现自定义标签内容
-
-#### 修复：
-- DatePicker 的 `change` 事件错误地触发多次的问题，#2070
-- Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883
-
-#### 非兼容性更新：
-- 最低兼容 Vue 2.1.6
-- Form validateField() 方法回调的参数更新
-- Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入
-- Input 和 Select 盒模型从 `block` 修改为 `inline-block`
-- Tabs 盒模型从 `inline-block` 修改为 `block`，Tab-Pane 移除 `label-content` 属性
-- Autocomplete 下拉列表现在直接插入到 `<body>` 标签下，而不是 `<el-autocomplete>` 下
-
-### 1.0.9
-*2016-12-27*
-
-- 修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834
-- 修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945
-- 新增 DatePicker 的 `change` 事件，返回和输入框一致的格式化后的值，#1841
-- 新增 Table 的 `header-align` 属性，#1424
-- 修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890
-- 修复可搜索的 Select 在选项较多时的卡顿问题，#1933
-- 修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001
-- 修复 Col `xs` 分辨率下样式无效的问题，#2011
-- 新增 Tab 组件的 `value` 属性并支持 `v-model` 用法，#2008
-- 修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999
-- 新增 DatePicker 的 `clearable` 属性，#1994
-- 修复 Form 异步验证时某些条件下总是验证通过的问题，#1936
-
-### 1.0.8
-*2016-12-20*
-
-- 修复 Popup 在叠加使用时阻止事件冒泡，#1677
-- 修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758
-- 修复 Slider 的 `change` 事件不能正确触发的问题，#1809
-- 修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786
-- 新增 Select 的 `loading-text`、`no-data-text`、`no-match-text` 属性和 `visible-change` 事件，#1849
-- 新增 DatePicker、Select 和 Tooltip 的 `popper-class` 属性，#1806
-- 新增 Tree 的 `expand-on-click-node`、`current-node-key` 属性和 `current-change` 事件，#1805 #1807
-- 新增 Table `row-click` 事件的第三个参数 `column`，#1808
-- 修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860
-- 新增 TabPanel `label-content` 渲染钩子方法中增加 tab 实例的参数，#1857
-- 新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851
-- 新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818
-- 新增 Progress 的 `onProgress` 钩子函数，#1782
-- 修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761
-- 新增 Table 的 `filter-change` 事件和 TableColumn 的 `column-key` 属性，#1876
-- 新增 Dropdown `hide-on-click` 属性，#1879
-
-### 1.0.7
-*2016-12-14*
-
-- 修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框
-- 修复 DatePicker 设置默认值为 null 会错误地显示时间值
-- 新增 Table 的 `row-contextmenu` 事件和 `max-height` 属性，#1663 #1674
-- 新增 MessageBox 的 `customClass` 属性，#1707
-- 新增 Message 和 Notification 的 `iconClass` 和 `customClass` 属性，#1671
-- 新增 Table 支持 empty slot，#1737
-- 改进 InputNumber change 事件增加 old value 的参数
-
-### 1.0.6
-*2016-12-09*
-
-- 新增 Tabs 组件的 `disabled` 属性，#1620
-- 新增 DatePicker 的 input 支持 `size`，#1440
-- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129
-- 修复 DatePicker 切换年份时显示异常的问题，#1607
-- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604
-- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583
-- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593
-- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619
-- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627
-- 修复 Table 的一些样式问题
-
-### 1.0.5
-*2016-12-06*
-
-- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537
-- 修复 Select 的初始值为一个空对象时会报错的问题，#1533
-- 修复 Select 远程搜索有时不显示下拉框的问题，#1531
-- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546
-- 修复 IE9 下 Steps 的样式问题，#1543
-- 新增 Upload 对所有文件类型生成 URL 的功能，#1530
-- 修复 TimeSelect 的样式，移除 flexbox, #1335
-
-### 1.0.4
-*2016-12-02*
-
-- 新增 Input Number 的 `controls` 属性，#1473
-- 修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514
-- 增加 Notification 的 `offset` 属性，#1419
-- 修复 Slider 在快速拖动时取值不准确的问题，#1458
-- 修复 Slider 在某些情况下绑定值为多位小数的问题，#1450
-- 修复 Select 在某些情况下绑定值和显示值不同步的问题
-- 新增 Select 的 `multiple-limit` 和 `allow-create` 属性
-- 修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438
-- 修复 Tree 有时在获取子级数据后视图不更新的问题，#1439
-- 修复 Table 在 windows 系统下的若干样式问题，#1464 #1507
-- 修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451
-- 新增 Table 的 `row-dblclick` 事件，#1362
-
-### 1.0.3
-*2016-11-28*
-
-- 修复 Pagination 的 `currentPage` 在某些情况下设置无效的情况，#1336
-- 修复 DatePicker 为 `month` 且设置了 `disabledDate` 的情况下切换年份时界面未更新的问题，#1158
-- 修复 DatePicker readonly 时未禁用清除按钮的问题，#1238
-- 修复 Slider 绑定值为 `NaN` 以及 `step` 小于 1 时无法正常工作的问题，#1239 #1282
-- 增加 Table 的多表头功能，#1312
-- 增加 Table 的 `rowStyle` 属性，#1348
-- 修复 TableColumn 的某些属性无法动态设置的问题，#1314
-- 增加 Tree 的 `filter-node-method` 属性和 `filter` 方法，#1257
-- 增加 Tree 的 `getCheckedKeys` 和 `setCheckedKeys` 方法，#1254
-- 重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152
-- 修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359
-- 增加 Form 中深对象验证的支持，#1363
-- 增加 Autocomplete 里的 `append` 和 `prepend` API，#1369
-- 增加 Pagination `pageSizes` 属性的动态支持，#1372
-- 增加 Radio Button 自定义选中按钮样式的 API，#1380
-- 增加 Menu Group 支持通过 slot 来设置 title，#1382
-- 修复 DatePicker 选择年的 bug，#1385
-- 新增 Upload 默认已上传的文件列表 API，#1393
-- 增加 Checkbox `label` 属性绑定的多类型支持，#1400
-- 增加 Tree 的 `setChecked` 方法，#1422
-
-### 1.0.2
-*2016-11-18*
-
-- 新增 Table `context` 属性，可以指定自定义 column 内部可获取的上下文，#1161
-- 新增 多种语言支持
-- 修复 没有正确动态渲染语言的问题，#1160
-- 新增 Alert 的 `render-content` 属性，#568
-- 新增 Button 的 focus 样式，#982
-- 修复 Switch 的 `change` 事件触发时机错误的问题，#1162
-- 修复 TimeSelect 开始时间设置 `00:00` 后会被禁用的问题，#676
-- 新增 Table `show-header` 属性，`header-click` 事件。#1195
-- 完善 Table 的 `height` 属性，当 `height` 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195
-- 修复 Table 的 `selection-change` 在某些情况下不触发的问题，#1198
-- 修复 Table 动态修改 `fixed` 属性可能会造成锁定列不消失的问题，#1182
-
-### 1.0.1
-*2016-11-16*
-
-- 修复 Pagination 错误地多次触发 `current-change` 事件的问题
-- 修复 Switch 在 Form 中的样式错误，#967
-- 修复 Loading 在某些情况下错误地锁定 `body` 滚动的问题，#968
-- Col 组件的 `span` 属性不再是必填属性，在省略的情况下其默认值为 `24`
-- 新增 DatePicker `disabled` 和 `editable` 属性，#976
-- 修复 DatePicker 的 `readonly` 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976
-- 新增 Message 和 Notification 的 `close` 方法，用于手动关闭实例
-- 新增 DatePicker 清除功能，#759
-- 修复 Form 重置日期报错，#937
-- 修复 Tab 设置active-name不是首个tab时的样式问题，#1034
-- 修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错
-- 新增 Step 支持内容居中对齐，#994
-- 修复 Upload 单独引入时提示 Progress 组件不存在，#1013
-- Layout 支持响应式布局
-- 新增 Dialog `show-close` 属性
-- 修复 和 `vue-i18n` 一起使用时，未初始化 i18n 会报错，#973
-- 修复 DatePicker 设置初始值后界面未更新 #1050
-- 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070
-- 新增 $loading 服务，用以调用 Loading
-- 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual`
-- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。
-
-
-### 1.0.0
-
-*2016-11-9*
-
-- 修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894
-- 修复结合 `vue-i18n` 使用时会提示不能覆盖 `$t` 方法的问题
-- 新增 Loading 自定义加载文案的功能，并优化了视觉表现
-- 修复 Input blur 事件的参数不是 event 对象的问题
-- `window.ELEMENT.locale.use` 改成 `window.ELEMENT.locale`
-
-### 1.0.0-rc.9
-
-*2016-11-07*
-
-- 新增 MessageBox 确定按钮自动获取焦点, #721
-- 修复 Popover focus 失效, #734
-- 修复 Clickoutside 报错, #729
-- 修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错
-- 更新 TimePicker 滚动条在 IE10+ 下隐藏
-- 新增 Dropdown 的 command api #432
-- 修复 Slider 在 Form 中的显示问题
-- 修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题
-- 改善 tabs 现在支持动态更新
-- Table 新增 highlightCurrentRow 属性、新增 current-change 事件
-- TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
-- TableColumn 新增属性 render-header
-- Pagination 新增属性 pageCount
-- DatePicker 修复重置 value 后默认选中日期没有重置, #878
-
-#### 非兼容性更新
-
-- Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)
-
-### 1.0.0-rc.8
-
-*2016-10-28*
-
-- 修复 Form reset method 对日期控件不起效的问题
-- 修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误
-- 修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题
-- 修复 Autocomplete 的弹出框不会消失 #439
-- 新增 Input 图标的点击事件 #444
-- 修复 Loading 关闭后有几率滚动失效的问题
-- 修复 远程搜索的 Select 不能正确渲染默认初始值的问题
-- 修复 Switch 的 width 属性无效的问题
-- Table 增加 rowClassName 属性
-- TableColumn 增加 fixed 属性，可选值：true, false, left, right
-- TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue
-- TableColumn[type="selection"] 增加 selectable 属性
-- 修复 Input textarea 在动态赋值时 autosize 没有触发的问题
-- 修复 Input Number min max 属性设置后点击加减出现的崩溃的bug
-- 优化 TimePicker/DatePicker 输入日期行为
-- 修复 DatePicker 输入禁用状态的日期却生效的问题 #484
-- 新增 Slider 的 disabled 属性
-- 新增 Menu 的 menu-trigger 属性
-- 新增 i18n 的支持
-
-#### 非兼容性更新
-
-- Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例
-- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
-- Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode
-- Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。
-- Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change
-
-### 1.0.0-rc.7
-
-*2016-10-13*
-
-- Upload 新增 Data 属性支持额外数据的传输
-- DatePicker 修复 `$t` 报错
-- Popper 重构 vue-popper
-- Pagination 修复输入后再点击切换，输入框的值不更新
-- Step: 修复自定义 icon 的样式
-- 修复 Tree 组件 checkbox 点击失效的问题
-- Breadcrumb 增加路由跳转的功能
-- 修复 可清空的 Select 中清空按钮的不恰当动画
-- DatePicker 修复使用 Tab 键切换时弹出框未隐藏
-
-### 1.0.0-rc.6
-
-*2016-10-11*
-
-- 修复 Tabs 切换后 Tab-panel 被销毁的问题
-- 修复 TimePicker 错误的隐藏面板
-- 修复 Table Cell 的样式, #204
-- 修复 Menu default-active 属性不能为空的问题, #200
-- 修复 Menu unique-opened 开启后无法展开子菜单的问题, #200
-- 为 Notification 和 Message 的不同 type 添加独立的调用方法
-- 为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定
-- 新增 Input textarea 类型的 rows, autosize 属性
-- 为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调
-- 新增 DatePicker 禁用日期功能 #253
-- 修复 多选可搜索的 Select 下拉选项自动展开的问题
-- 为 Dialog 添加 top 属性
-- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
-- Checkbox change 事件现在只能被人为的交互操作所触发
-- 新增 Checkbox checked 属性
-- 修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题
-
-#### 非兼容性更新
-
-- Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式
-
-### 1.0.0-rc.5
-
-*2016-09-30*
+  - 新增 `unlink-panels` 属性，用于在选择日期范围时取消两个日期面板之间的联动
+- Select
+  - 新增 `reserve-keyword` 属性，用于在选择某个选项后保留当前的搜索关键词
 
-- 修复 Table 头部不同步的问题
-- 修复 Menu 组件 default-active 绑定动态值无法更新的问题
-- 新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单
-- 修复 vue-popper 引入 popper 路径错误
-- 修复 DatePicker 初始值是合法时间类型但无法设置成功的问题
-- 修复 Pagination 的图标没有正确切换样式, #163
-- 修复 Row 组件 align 属性不生效的问题
-- 修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题
-- 新增 Menu 组件中 MenuItem 的 route 属性
+#### 修复
+- Table
+  - 修复 TableColumn 的 `header-align` 属性失效的问题
+  - 修复 Table 在父元素从 `display: none` 变成其他状态时会隐藏的问题
+  - 修复 Table 在父元素为 `display: flex` 时可能出现的宽度逐渐变大的问题
+  - 修复 `append` 具名 slot 和固定列并存时，动态获取表格数据会导致固定列消失的问题
+  - 修复 `expand-row-keys` 属性初始化无效的问题
+  - 修复 `data` 改变时过滤条件失效的问题
+  - 修复多级表头时固定列隐藏情况计算错误的问题
 
 #### 非兼容性更新
-- Menu 组件的 `unique-opend` 属性修正为 `unique-opened`
+- 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` 保持一致的逻辑，要求返回一个数字。
 
-### 1.0.0-rc.4
+### 2.0.0-alpha.3
+*2017-10-16*
 
-*2016-09-21*
+#### 新特性
+- 综合
+  - 新增全局配置组件尺寸的功能：在引入 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
 
-- 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
-- 修复 Time Picker 时间选择可滚动
-- 修复 Tooltip 有时会错位的问题
-- 修复 丢失的组件 css 文件
-- 修复 Table 在 Safari 下边框没对齐
-- 修复 TimePicker 图标样式被默认图标样式覆盖
-- 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
-- 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
-- 修复 Table 初次渲染时宽度重新计算 #78
-- 新增 时间、日期选择器增加 align 属性，可设置对齐方式
-- 新增 TableColumn 的 align 属性
-- 新增 autocomplete 的 select 事件
+#### 修复
+  - 修复部分组件的 `Injection "elFormItem" not found` 报错
 
 #### 非兼容性更新
-- Select 组件样式的 `display` 属性默认值修改为 `block`
-
-### 1.0.0-rc.3
-
-*2016-09-09*
-
-- 修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题
-- 修复 Steps 样式
-- 修复 无法安装的问题
-
-### 1.0.0-rc.2
-
-*2016-09-09*
+  - 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` 主题
+  - 增强以下组件的可访问性：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
+- Pagination
+  - 新增 `prev-text` 和 `next-text` 属性，用于自定义上一页和下一页的文本 #7005
 
-- 修复 Upload 上传的问题，并增加上传成功和失败的钩子函数
-- Button 组件增加 `nativeType` 属性，用于组件内 `<button>` 标签的原生 `type` 属性，默认值为 `button`
-- 修复 Table 自定义模板中渲染静态数据错误
-- 修复 Table 中被固定列的高度不与其他列的高度协调的问题
-- 修复 Time Picker 的 `picker-options` 属性
-- 修复一些组件图标丢失的问题
-- 修复 远程搜索的 Select 在 Form 中的显示问题
-- 修复 Input Number 输入小数和非数字值时的问题
-- 修复 Select 选中 value 为 0 的值时绑定值不更新的问题
-- 修复 Tree 取消选择某节点后，其同级节点均被取消的问题
-- 修复 Upload 的 headers 属性设置无效
-- 修复 Pagination 包含 sizes 子组件时 page-size 无效的问题
-- 优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs
+#### 修复
+- DatePicker
+  - 选择周数时，`v-model` 结果返回该周第二天的问题 #6038
+  - 在 `daterange` 类型中，第一次的输入会被清空的问题 #6021
+- DateTimePicker
+  - 和 TimePicker 相互影响的问题 #6090
+  - 选择时间小时和秒可超出限制的问题 #6076
+- TimePicker
+  - 失去焦点时无法正确改变 `v-model` 值的问题 #6023
+- Dialog
+  - 当含有下拉框时，下拉框的打开和关闭会造成文字虚晃的问题 #6088
+- Select
+  - 提升性能，修复组件销毁时可能导致 Vue dev-tool 卡死的问题 #6151
 
 #### 非兼容性更新
-- Menu 组件 `mode` 属性默认值修改为 `vertical`
-- Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档
-- Popover 现在可以通过 slot 指定 reference
-
-### 1.0.0-rc.1
-
-*2016-08-30*
+- 综合
+  - 移除 `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` 四个值
+  - `close-transition` 属性更名为 `disable-transitions`
+- Menu
+  - 移除 `theme` 属性。现在通过 `background-color`、`text-color` 和 `active-text-color` 属性进行颜色的自定义
+- Input
+  - 移除 `icon` 属性。现在通过 `suffix-icon` 属性或者 `suffix` 具名 slot 来加入尾部图标
+  - 移除 `on-icon-click` 属性和 `click` 事件。现在如果需要为输入框中的图标添加点击事件，请以具名 slot 的方式添加图标
+- Autocomplete
+  - 移除 `icon` 和 `on-icon-click` 属性。现在通过 `prefix` 和 `suffix` 具名 slot 来加入图标
+  - 移除 `custom-item` 属性。现在通过 `scoped slot` 自定义输入建议列表项的内容
+- Table
+  - 移除通过 `inline-template` 自定义列模板的功能
+- Steps
+  - 移除 `center` 属性
+  - 现在步骤条将默认充满父容器
 
-Element 1.0.0-rc.1 发布
+##
+<i><sup>*</sup> 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。因此请在 `dangerouslyUseHTMLString` 打开的情况下，确保 `message` 的内容是可信的，**永远不要**将用户提交的内容赋值给 `message` 属性。</i>

README.md

@@ -10,7 +10,7 @@
 [![npm package](https://img.shields.io/npm/v/element-ui.svg)](https://www.npmjs.org/package/element-ui)
 [![NPM downloads](http://img.shields.io/npm/dm/element-ui.svg)](https://npmjs.org/package/element-ui)
 ![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS)
-![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS)
+![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-chalk/index.css?compression=gzip&label=gzip%20size:%20CSS)
 [![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(Chinese)
 [![Join the chat at https://gitter.im/element-en/Lobby](https://badges.gitter.im/element-en/Lobby.svg)](https://gitter.im/element-en/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)(English)
 [![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers) 
@@ -23,23 +23,24 @@
 <!--</a >-->
 
 ## Links
-- [Home Page](http://element.eleme.io/)
-- [Docs](http://element.eleme.io/#/component)
+- Homepage and documentation
+  - International users: http://element.eleme.io/
+  - Chinese users: http://element-cn.eleme.io/
 - [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
-- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
-- [Preview and generate theme online](https://elementui.github.io/theme-preview)
+- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
+- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
 - [Element for React](https://github.com/eleme/element-react)
+- [Element for Angular](https://github.com/eleme/element-angular)
 - [Atom helper](https://github.com/ElemeFE/element-helper)
-- Starter Kit
+- Starter kit
   - [element-starter](https://github.com/ElementUI/element-starter)
   - [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
   - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
-- [Design resources](https://github.com/ElementUI/Resources)
+- [Design resources](https://github.com/ElementUI/Resources) (working in progress)
 - Boilerplate for bug reports
   - [CodePen](https://codepen.io/anon/pen/ozYpNA)
   - [JSFiddle](https://jsfiddle.net/gmve9d3p/)
-- [Mint UI](https://github.com/ElemeFE/mint-ui) - Mobile UI elements for Vue.js
 
 ## Install
 ```shell

build/bin/build-entry.js

@@ -8,7 +8,7 @@ var endOfLine = require('os').EOL;
 var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
 var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
 var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
-var MAIN_TEMPLATE = `/* Automatic generated by './build/bin/build-entry.js' */
+var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */
 
 {{include}}
 import locale from 'element-ui/src/locale';
@@ -31,6 +31,9 @@ const install = function(Vue, opts = {}) {
 
   Vue.use(Loading.directive);
 
+  const ELEMENT = {};
+  ELEMENT.size = opts.size || '';
+
   Vue.prototype.$loading = Loading.service;
   Vue.prototype.$msgbox = MessageBox;
   Vue.prototype.$alert = MessageBox.alert;
@@ -38,6 +41,8 @@ const install = function(Vue, opts = {}) {
   Vue.prototype.$prompt = MessageBox.prompt;
   Vue.prototype.$notify = Notification;
   Vue.prototype.$message = Message;
+
+  Vue.prototype.$ELEMENT = ELEMENT;
 };
 
 /* istanbul ignore if */

build/bin/gen-cssfile.js

@@ -2,7 +2,7 @@ var fs = require('fs');
 var path = require('path');
 var Components = require('../../components.json');
 var themes = [
-  'theme-default'
+  'theme-chalk'
 ];
 Components = Object.keys(Components);
 var basepath = path.resolve(__dirname, '../../packages/');
@@ -16,10 +16,11 @@ function fileExists(filePath) {
 }
 
 themes.forEach((theme) => {
-  var indexContent = '@import "./base.css";\n';
+  var isSCSS = theme !== 'theme-default';
+  var indexContent = isSCSS ? '@import "./base.scss";\n' : '@import "./base.css";\n';
   Components.forEach(function(key) {
     if (['icon', 'option', 'option-group'].indexOf(key) > -1) return;
-    var fileName = key + '.css';
+    var fileName = key + (isSCSS ? '.scss' : '.css');
     indexContent += '@import "./' + fileName + '";\n';
     var filePath = path.resolve(basepath, theme, 'src', fileName);
     if (!fileExists(filePath)) {
@@ -27,5 +28,5 @@ themes.forEach((theme) => {
       console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
     }
   });
-  fs.writeFileSync(path.resolve(basepath, theme, 'src', 'index.css'), indexContent);
+  fs.writeFileSync(path.resolve(basepath, theme, 'src', isSCSS ? 'index.scss' : 'index.css'), indexContent);
 });

build/bin/gen-indices.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const algoliasearch = require('algoliasearch');
+const slugify = require('transliteration').slugify;
+const key = require('./algolia-key');
+
+const client = algoliasearch('9NLTR1QH8B', key);
+
+['zh-CN', 'en-US'].forEach(lang => {
+  const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
+  const index = client.initIndex(indexName);
+  index.clearIndex(err => {
+    if (err) return;
+    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
+      if (err) return;
+      let indices = [];
+      files.forEach(file => {
+        const component = file.replace('.md', '');
+        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
+        const matches = content
+          .replace(/:::[\s\S]*?:::/g, '')
+          .replace(/```[\s\S]*?```/g, '')
+          .match(/#{2,4}[^#]*/g)
+          .map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
+          .map(match => {
+            const length = match.length;
+            if (length > 2) {
+              const desc = match.slice(1, length).join('');
+              return [match[0], desc];
+            }
+            return match;
+          });
+
+        indices = indices.concat(matches.map(match => {
+          const isComponent = match[0].indexOf('###') < 0;
+          const title = match[0].replace(/#{2,4}/, '').trim();
+          const index = { component, title };
+          index.ranking = isComponent ? 2 : 1;
+          index.anchor = slugify(title);
+          index.content = (match[1] || title).replace(/<[^>]+>/g, '');
+          return index;
+        }));
+      });
+
+      index.addObjects(indices, (err, res) => {
+        console.log(err, res);
+      });
+    });
+  });
+});

build/bin/iconInit.js

@@ -3,7 +3,7 @@
 var postcss = require('postcss');
 var fs = require('fs');
 var path = require('path');
-var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-default/src/icon.css'), 'utf8');
+var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
 var nodes = postcss.parse(fontFile).nodes;
 var classList = [];
 

build/bin/template.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const templates = path.resolve(process.cwd(), './examples/pages/template');
+
+const chokidar = require('chokidar');
+let watcher = chokidar.watch([templates]);
+
+watcher.on('ready', function() {
+  watcher
+    .on('change', function() {
+      exec('npm run i18n');
+    });
+});
+
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}

build/bin/version.js

@@ -1,6 +1,6 @@
 var fs = require('fs');
 var path = require('path');
 var version = process.env.VERSION || require('../../package.json').version;
-var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3' };
-if (!content[version]) content[version] = '1.4';
+var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' };
+if (!content[version]) content[version] = '2.0';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

build/config.js

@@ -2,7 +2,7 @@ var path = require('path');
 var fs = require('fs');
 var nodeExternals = require('webpack-node-externals');
 var Components = require('../components.json');
-var saladConfig = require('../packages/theme-default/salad.config.json');
+var saladConfig = require('./salad.config.json');
 
 var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils'));
 var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins'));

build/cooking.common.js

@@ -14,5 +14,9 @@ cooking.set({
 
 cooking.add('output.filename', 'element-ui.common.js');
 cooking.add('loader.js.exclude', config.jsexclude);
+cooking.add('loader.scss', {
+  test: /\.scss$/,
+  loaders: ['style-loader', 'css-loader', 'sass-loader']
+});
 cooking.add('vue.preserveWhitespace', false);
 module.exports = cooking.resolve();

build/cooking.component.js

@@ -15,5 +15,9 @@ cooking.set({
 
 cooking.add('output.filename', '[name].js');
 cooking.add('loader.js.exclude', config.jsexclude);
+cooking.add('loader.scss', {
+  test: /\.scss$/,
+  loaders: ['style-loader', 'css-loader', 'sass-loader']
+});
 cooking.add('vue.preserveWhitespace', false);
 module.exports = cooking.resolve();

build/cooking.conf.js

@@ -14,5 +14,9 @@ cooking.set({
 
 cooking.add('output.filename', 'index.js');
 cooking.add('loader.js.exclude', config.jsexclude);
+cooking.add('loader.scss', {
+  test: /\.scss$/,
+  loaders: ['style-loader', 'css-loader', 'sass-loader']
+});
 cooking.add('vue.preserveWhitespace', false);
 module.exports = cooking.resolve();

build/cooking.demo.js

@@ -55,6 +55,11 @@ cooking.add('loader.md', {
   loader: 'vue-markdown-loader'
 });
 
+cooking.add('loader.scss', {
+  test: /\.scss$/,
+  loaders: ['style-loader', 'css-loader', 'sass-loader']
+});
+
 cooking.add(
   'output.chunkFilename',
   isProd ? '[name].[chunkhash:7].js' : '[name].js'
@@ -96,7 +101,8 @@ cooking.add('vueMarkdown', {
         return '</div></demo-block>\n';
       }
     }],
-    [require('markdown-it-container'), 'tip']
+    [require('markdown-it-container'), 'tip'],
+    [require('markdown-it-container'), 'warning']
   ],
   preprocess: function(MarkdownIt, source) {
     MarkdownIt.renderer.rules.table_open = function() {
@@ -110,7 +116,7 @@ cooking.add('vueMarkdown', {
 var wrap = function(render) {
   return function() {
     return render.apply(this, arguments)
-      .replace('<code class="', '<code class="hljs ')
+      .replace('<code v-pre class="', '<code class="hljs ')
       .replace('<code>', '<code class="hljs">');
   };
 };

build/cooking.test.js

@@ -10,29 +10,6 @@ cooking.set({
   alias: Object.assign(config.alias, {
     'vue$': 'vue/dist/vue.common.js'
   }),
-  postcss: function(webapck) {
-    return [
-      require('postcss-salad')({
-        browsers: ['ie > 8', 'last 2 versions', 'Chrome > 24'],
-        features: {
-          'partialImport': {
-            addDependencyTo: webapck
-          },
-          'bem': {
-            'shortcuts': {
-              'component': 'b',
-              'modifier': 'm',
-              'descendent': 'e'
-            },
-            'separators': {
-              'descendent': '__',
-              'modifier': '--'
-            }
-          }
-        }
-      })
-    ];
-  },
   sourceMap: '#inline-source-map'
 });
 

build/deploy-ci.sh

@@ -22,11 +22,11 @@ if [ "$TRAVIS_TAG" ]; then
   git push origin master --tags
   cd ../..
 
-  # build theme-default
+  # build theme-chalk
   cd temp_web
-  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
+  git clone https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
   rm -rf *
-  cp -rf ../../packages/theme-default/** .
+  cp -rf ../../packages/theme-chalk/** .
   git add -A .
   git commit -m "[build] $TRAVIS_TAG"
   git tag $TRAVIS_TAG
@@ -39,10 +39,8 @@ if [ "$TRAVIS_TAG" ]; then
   git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element
   # build sub folder
   echo $TRAVIS_TAG
-  export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+")
-  echo $SUB_FOLDER
 
-  SUB_FOLDER='1.4'
+  SUB_FOLDER='2.0'
   mkdir $SUB_FOLDER
   rm -rf *.js *.css *.map static
   rm -rf $SUB_FOLDER/**
@@ -69,11 +67,11 @@ git commit -m "$TRAVIS_COMMIT_MSG"
 git push origin master
 cd ../..
 
-# push dev theme-default
+# push dev theme-chalk
 cd temp_web
-git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default
+git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-chalk.git && cd theme-chalk
 rm -rf *
-cp -rf ../../packages/theme-default/** .
+cp -rf ../../packages/theme-chalk/** .
 git add -A .
 git commit -m "$TRAVIS_COMMIT_MSG"
 git push origin $TRAVIS_BRANCH

build/deploy-faas.sh

@@ -5,9 +5,8 @@ cd temp_web
 git clone -b gh-pages https://github.com/ElemeFE/element.git && cd element
 
 # build sub folder
-SUB_FOLDER='1.4'
+SUB_FOLDER='2.0'
 mkdir $SUB_FOLDER
-
 rm -rf *.js *.css *.map static
 rm -rf $SUB_FOLDER/**
 cp -rf ../../examples/element-ui/** .

build/release.sh

@@ -16,8 +16,8 @@ then
   VERSION=$VERSION npm run dist
 
   # publish theme
-  echo "Releasing theme-default $VERSION ..."
-  cd packages/theme-default
+  echo "Releasing theme-chalk $VERSION ..."
+  cd packages/theme-chalk
   npm version $VERSION --message "[release] $VERSION"
   if [[ $VERSION =~ "beta" ]]
   then

components.json

@@ -62,5 +62,10 @@
   "collapse-item": "./packages/collapse-item/index.js",
   "cascader": "./packages/cascader/index.js",
   "color-picker": "./packages/color-picker/index.js",
-  "transfer": "./packages/transfer/index.js"
+  "transfer": "./packages/transfer/index.js",
+  "container": "./packages/container/index.js",
+  "header": "./packages/header/index.js",
+  "aside": "./packages/aside/index.js",
+  "main": "./packages/main/index.js",
+  "footer": "./packages/footer/index.js"
 }

examples/app.vue

@@ -7,21 +7,44 @@
     margin: 0;
     padding: 0;
     height: 100%;
+    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
+    font-weight: 400;
+    -webkit-font-smoothing: antialiased;
+
+    &.is-component {
+      overflow: hidden;
+    }
   }
 
   #app {
     height: 100%;
-  }
+    
+    @when component {
+      overflow-y: hidden;
+
+      .main-cnt {
+        padding: 0;
+        margin-top: 0;
+        height: 100%;
+        min-height: auto;
+      }
 
-  body {
-    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
-    overflow: auto;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
+      .headerWrapper {
+        position: fixed;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 1500;
+        
+        .container {
+          padding: 0;
+        }
+      }
+    }
   }
 
   a {
-    color: #4078c0;
+    color: #409EFF;
     text-decoration: none;
   }
 
@@ -44,7 +67,7 @@
     font-family: Menlo, Monaco, Consolas, Courier, monospace;
     font-size: 12px;
     padding: 18px 24px;
-    background-color: #f9fafc;
+    background-color: #fafafa;
     border: solid 1px #eaeefb;
     margin-bottom: 25px;
     border-radius: 4px;
@@ -53,7 +76,7 @@
 
   .main-cnt {
     margin-top: -80px;
-    padding: 80px 0 120px;
+    padding: 80px 0 340px;
     box-sizing: border-box;
     min-height: 100%;
   }
@@ -61,7 +84,7 @@
   .container,
   .page-container {
     width: 1140px;
-    padding: 0 30px;
+    padding: 0;
     margin: 0 auto;
   }
 
@@ -107,10 +130,23 @@
       background-color: #ECF8FF;
       border-radius: 4px;
       border-left: #50bfff 5px solid;
-      margin-top: 20px;
+      margin: 20px 0;
 
       code {
-        background-color: rgba(#fff, .7);
+        background-color: rgba(255, 255, 255, .7);
+        color: #445368;
+      }
+    }
+
+    .warning {
+      padding: 8px 16px;
+      background-color: #fff6f7;
+      border-radius: 4px;
+      border-left: #FE6C6F 5px solid;
+      margin: 20px 0;
+
+      code {
+        background-color: rgba(255, 255, 255, .7);
         color: #445368;
       }
     }
@@ -118,7 +154,6 @@
   .demo {
     margin: 20px 0;
   }
-  
   @media (max-width: 1140px) {
     .container,
     .page-container {
@@ -131,16 +166,20 @@
     .page-container {
       padding: 0 20px;
     }
+  
+    #app.is-component .headerWrapper .container {
+      padding: 0 12px;
+    }
   }
 </style>
 
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'is-component': isComponent }">
     <main-header v-if="lang !== 'play'"></main-header>
     <div class="main-cnt">
       <router-view></router-view>
     </div>
-    <main-footer v-if="lang !== 'play'"></main-footer>
+    <main-footer v-if="lang !== 'play' && !isComponent"></main-footer>
   </div>
 </template>
 
@@ -156,6 +195,9 @@
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
+      },
+      isComponent() {
+        return /^component-/.test(this.$route.name || '');
       }
     },
 
@@ -168,48 +210,11 @@
     methods: {
       localize() {
         use(this.lang === 'zh-CN' ? zhLocale : enLocale);
-      },
-
-      renderAnchorHref() {
-        if (/changelog/g.test(location.href)) return;
-        const anchors = document.querySelectorAll('h2 a,h3 a');
-        const basePath = location.href.split('#').splice(0, 2).join('#');
-
-        [].slice.call(anchors).forEach(a => {
-          const href = a.getAttribute('href');
-          a.href = basePath + href;
-        });
-      },
-
-      goAnchor() {
-        if (location.href.match(/#/g).length > 1) {
-          const anchor = location.href.match(/#[^#]+$/g);
-          if (!anchor) return;
-          const elm = document.querySelector(anchor[0]);
-          if (!elm) return;
-
-          setTimeout(_ => {
-            document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120;
-          }, 50);
-        }
       }
     },
 
     mounted() {
       this.localize();
-      this.renderAnchorHref();
-      this.goAnchor();
-    },
-
-    created() {
-      window.addEventListener('hashchange', () => {
-        if (location.href.match(/#/g).length < 2) {
-          document.documentElement.scrollTop = document.body.scrollTop = 0;
-          this.renderAnchorHref();
-        } else {
-          this.goAnchor();
-        }
-      });
     }
   };
 </script>

examples/assets/images/element-logo-small.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#FFFFFF">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
             <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
         </g>
     </g>

examples/bus.js

@@ -0,0 +1,2 @@
+import Vue from 'vue';
+export default new Vue();

examples/components/demo-block.vue

@@ -5,30 +5,43 @@
     @mouseenter="hovering = true"
     @mouseleave="hovering = false">
     <slot name="source"></slot>
-    <div class="meta">
-      <div class="description">
+    <div class="meta" ref="meta">
+      <div class="description" v-if="$slots.default">
         <slot></slot>
-        <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
-          <el-button size="small" type="primary" @click="goJsfiddle">{{ langConfig['button-text'] }}</el-button>
-        </el-tooltip>
       </div>
       <slot name="highlight"></slot>
     </div>
-    <div class="demo-block-control" @click="isExpanded = !isExpanded">
+    <div
+      class="demo-block-control"
+      ref="control"
+      :class="{ 'is-fixed': fixedControl }"
+      @click="isExpanded = !isExpanded">
       <transition name="arrow-slide">
         <i :class="[iconClass, { 'hovering': hovering }]"></i>
       </transition>
       <transition name="text-slide">
         <span v-show="hovering">{{ controlText }}</span>
       </transition>
+      <el-tooltip effect="dark" :content="langConfig['tooltip-text']" placement="right">
+        <transition name="text-slide">
+          <el-button
+            v-show="hovering || isExpanded"
+            size="small"
+            type="text"
+            class="control-button"
+            @click.stop="goJsfiddle">
+            {{ langConfig['button-text'] }}
+          </el-button>
+        </transition>
+      </el-tooltip>
     </div>
   </div>
 </template>
 
 <style>
   .demo-block {
-    border: solid 1px #eaeefb;
-    border-radius: 4px;
+    border: solid 1px #ebebeb;
+    border-radius: 3px;
     transition: .2s;
 
     &.hover {
@@ -48,28 +61,28 @@
     }
 
     .meta {
-      background-color: #f9fafc;
+      background-color: #fafafa;
       border-top: solid 1px #eaeefb;
-      clear: both;
       overflow: hidden;
       height: 0;
       transition: height .2s;
     }
 
     .description {
-      padding: 18px 24px;
-      width: 40%;
+      padding: 20px;
       box-sizing: border-box;
-      border-left: solid 1px #eaeefb;
-      float: right;
+      border: solid 1px #ebebeb;
+      border-radius: 3px;
       font-size: 14px;
-      line-height: 1.8;
-      color: #5e6d82;
+      line-height: 22px;
+      color: #666;
       word-break: break-word;
+      margin: 10px;
+      background-color: #fff;
 
       p {
-        margin: 0 0 12px;
-        line-height: 1.8;
+        margin: 0;
+        line-height: 26px;
       }
 
       code {
@@ -86,9 +99,6 @@
     }
 
     .highlight {
-      width: 60%;
-      border-right: solid 1px #eaeefb;
-
       pre {
         margin: 0;
       }
@@ -107,7 +117,7 @@
 
     .demo-block-control {
       border-top: solid 1px #eaeefb;
-      height: 36px;
+      height: 44px;
       box-sizing: border-box;
       background-color: #fff;
       border-bottom-left-radius: 4px;
@@ -116,29 +126,34 @@
       margin-top: -1px;
       color: #d3dce6;
       cursor: pointer;
-      transition: .2s;
       position: relative;
+    
+      &.is-fixed {
+        position: fixed;
+        bottom: 0;
+        width: 868px;
+      }
 
       i {
-        font-size: 12px;
-        line-height: 36px;
+        font-size: 16px;
+        line-height: 44px;
         transition: .3s;
         &.hovering {
           transform: translateX(-40px);
         }
       }
 
-      span {
+      > span {
         position: absolute;
         transform: translateX(-30px);
         font-size: 14px;
-        line-height: 36px;
+        line-height: 44px;
         transition: .3s;
         display: inline-block;
       }
 
       &:hover {
-        color: #20a0ff;
+        color: #409EFF;
         background-color: #f9fafc;
       }
 
@@ -147,6 +162,16 @@
         opacity: 0;
         transform: translateX(10px);
       }
+      
+      .control-button {
+        line-height: 26px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        font-size: 14px;
+        padding-left: 5px;
+        padding-right: 25px;
+      }
     }
   }
 </style>
@@ -159,7 +184,9 @@
     data() {
       return {
         hovering: false,
-        isExpanded: false
+        isExpanded: false,
+        fixedControl: false,
+        scrollParent: null
       };
     },
 
@@ -177,7 +204,7 @@
         '\n<scr' + `ipt src="//unpkg.com/element-ui@${ version }/lib/index.js"></scr` + 'ipt>';
         let jsTpl = (script || '').replace(/export default/, 'var Main =').trim();
         let htmlTpl = `${resourcesTpl}\n<div id="app">\n${html.trim()}\n</div>`;
-        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-default/index.css");\n${(style || '').trim()}\n`;
+        let cssTpl = `@import url("//unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css");\n${(style || '').trim()}\n`;
         jsTpl = jsTpl
           ? jsTpl + '\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount(\'#app\')'
           : 'new Vue().$mount(\'#app\')';
@@ -206,6 +233,17 @@
         document.body.appendChild(form);
 
         form.submit();
+      },
+
+      scrollHandler() {
+        const { top, bottom, left } = this.$refs.meta.getBoundingClientRect();
+        this.fixedControl = bottom > document.documentElement.clientHeight &&
+          top + 44 <= document.documentElement.clientHeight;
+        this.$refs.control.style.left = this.fixedControl ? `${ left }px` : '0';
+      },
+
+      removeScrollHandler() {
+        this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler);
       }
     },
 
@@ -236,7 +274,8 @@
 
       codeAreaHeight() {
         if (this.$el.getElementsByClassName('description').length > 0) {
-          return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
+          return this.$el.getElementsByClassName('description')[0].clientHeight +
+            this.$el.getElementsByClassName('highlight')[0].clientHeight + 20;
         }
         return this.$el.getElementsByClassName('highlight')[0].clientHeight;
       }
@@ -245,6 +284,17 @@
     watch: {
       isExpanded(val) {
         this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
+        if (!val) {
+          this.fixedControl = false;
+          this.$refs.control.style.left = '0';
+          this.removeScrollHandler();
+          return;
+        }
+        setTimeout(() => {
+          this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__wrap');
+          this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
+          this.scrollHandler();
+        }, 200);
       }
     },
 
@@ -256,6 +306,10 @@
           highlight.borderRight = 'none';
         }
       });
+    },
+
+    beforeDestroy() {
+      this.removeScrollHandler();
     }
   };
 </script>

examples/components/footer-nav.vue

@@ -19,8 +19,8 @@
 
 <style>
   .footer-nav {
-    padding: 24px 0;
-    color: #99a9bf;
+    padding: 40px 0;
+    color: #333;
     font-size: 14px;
     
     &::after {
@@ -31,7 +31,7 @@
      
     & i {
       transition: .3s;
-      color: #d9def1;
+      color: #999;
       vertical-align: baseline;
     }
   }
@@ -41,10 +41,10 @@
     transition: .3s;
     
     &:hover {
-      color: #20a0ff;
+      color: #409EFF;
      
       & i {
-        color: #20a0ff;
+        color: #409EFF;
       }
     }
   }
@@ -90,7 +90,7 @@
     methods: {
       setNav() {
         let nav = navConfig[this.lang];
-        this.nav = nav[0].children.concat(nav[1]);
+        this.nav = [nav[0]].concat(nav[2].children);
         nav[3].groups.map(group => group.list).forEach(list => {
           this.nav = this.nav.concat(list);
         });

examples/components/footer.vue

@@ -2,12 +2,26 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-main">
-        <p class="footer-main-title">Element {{ version }} Boron</p>
+        <h4>{{ langConfig.links }}</h4>
+        <a href="https://github.com/ElemeFE/element" class="footer-main-link" target="_blank">{{ langConfig.repo }}</a>
+        <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
+        <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
+        <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
+        <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
+        <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
+        <a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
+        <a href="https://github.com/eleme/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
+      </div>
+      <div class="footer-main">
+        <h4>{{ langConfig.community }}</h4>
+        <a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
         <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>
+        <a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
+        <a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
       </div>
       <div class="footer-social">
+        <p class="footer-social-title">Element {{ version && version.slice(0, 3) }} Carbon</p>
         <el-popover
           ref="weixin"
           placement="top"
@@ -18,9 +32,12 @@
           <img src="../assets/images/qrcode.png" alt="">
         </el-popover>
         <i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
-        <a href="//github.com/elemefe" target="_blank">
+        <a href="https://github.com/elemefe" target="_blank">
           <i class="doc-icon-github elementdoc"></i>
         </a>
+        <a :href="gitterLink" target="_blank">
+          <i class="doc-icon-gitter elementdoc"></i>
+        </a>
       </div>
     </div>
   </footer>
@@ -28,83 +45,81 @@
 
 <style>
   .footer {
-    height: 120px;
-    background-color: #324057;
-    color: #a4aebd;
+    background-color: #F7FBFD;
     width: 100%;
-    z-index: 1000;
-    margin-top: -120px;
-
-    * {
-      word-spacing: 0;
-    }
+    padding: 40px 150px;
+    margin-top: -340px;
+    box-sizing: border-box;
+    height: 340px;
 
     .container {
-      height: 100%;
       box-sizing: border-box;
+      width: auto;
     }
 
     .footer-main {
       font-size: 0;
-      padding-top: 40px;
       display: inline-block;
-
-      .footer-main-title {
+      vertical-align: top;
+      margin-right: 110px;
+    
+      h4 {
+        font-size: 18px;
+        color: #333;
         line-height: 1;
-        font-size: 22px;
-        margin: 0;
+        margin: 0 0 15px 0;
       }
 
       .footer-main-link {
-        display: inline-block;
-        margin: 12px 18px 0 0;
-        line-height: 1;
-        font-size: 12px;
-        color: #768193;
+        display: block;
+        margin: 0;
+        line-height: 2;
+        font-size: 14px;
+        color: #666;
 
-        a {
-          color: #768193;
-          text-decoration: none;
+        &:hover {
+          color: #333;
         }
       }
     }
 
     .footer-social {
       float: right;
-      line-height: 120px;
+      text-align: right;
+    
+      .footer-social-title {
+        color: #666;
+        font-size: 18px;
+        line-height: 1;
+        margin: 0 0 20px 0;
+        padding: 0;
+        font-weight: bold;
+      }
 
       .elementdoc {
         transition: .3s;
         display: inline-block;
         line-height: 32px;
         text-align: center;
-        color: #8D99AB;
+        color: #c8d6e8;
         background-color: transparent;
         size: 32px;
         font-size: 32px;
         vertical-align: middle;
+        margin-right: 20px;
         &:hover {
-           transform: scale(1.2);
-        }
-      }
-
-      .doc-icon-weixin {
-        margin-right: 36px;
-        &:hover {
-          color: #fff;
+          transform: scale(1.2);
+          color: #8D99AB;
         }
       }
 
-      .doc-icon-github {
+      .doc-icon-gitter {
         margin-right: 0;
-        &:hover {
-           color: #fff;
-        }
       }
     }
   }
 
-  .footer-popover {
+  .el-popover.footer-popover {
     padding: 0;
     min-width: 120px;
     line-height: normal;
@@ -151,6 +166,10 @@
 
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['footer'];
+      },
+
+      gitterLink() {
+        return this.lang === 'zh-CN' ? 'https://gitter.im/ElemeFE/element' : 'https://gitter.im/element-en/Lobby';
       }
     }
   };

examples/components/header.vue

@@ -2,9 +2,10 @@
   .headerWrapper {
     height: 80px;
   }
+
   .header {
     height: 80px;
-    background-color: rgba(32, 160, 255, 1);
+    background-color: #fff;
     color: #fff;
     top: 0;
     left: 0;
@@ -18,6 +19,10 @@
       box-sizing: border-box;
     }
 
+    .nav-lang-spe {
+      color: #888;
+    }
+
     h1 {
       margin: 0;
       float: left;
@@ -25,7 +30,7 @@
       font-weight: normal;
 
       a {
-        color: #fff;
+        color: #333;
         text-decoration: none;
         display: block;
       }
@@ -43,6 +48,7 @@
         border-radius: 3px;
       }
     }
+
     .nav {
       float: right;
       height: 100%;
@@ -52,24 +58,48 @@
       padding: 0;
       margin: 0;
     }
+
+    .nav-gap {
+      position: relative;
+      width: 1px;
+      height: 80px;
+      padding: 0 20px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: calc(50% - 8px);
+        width: 1px;
+        height: 16px;
+        background: #ebebeb;
+      }
+    }
+
     .nav-logo,
     .nav-logo-small {
       vertical-align: sub;
     }
+
     .nav-logo-small {
       display: none;
     }
+
     .nav-item {
       margin: 0;
       float: left;
       list-style: none;
       position: relative;
       cursor: pointer;
-      margin-left: 20px;
     
+      &.nav-algolia-search {
+        cursor: default;
+      }
+    
+      &.lang-item,
       &:last-child {
         cursor: default;
         margin-left: 34px;
+
         span {
           opacity: .8;
         }
@@ -78,48 +108,88 @@
           cursor: pointer;
           display: inline-block;
           height: 100%;
+          color: #888;
+
           &:hover {
-            opacity: 1;
+            color: #409EFF;
           }
           &.active {
-            font-weight: 700;
-            opacity: 1;
-          }
+             font-weight: bold;
+             color: #409EFF;
+           }
         }
       }
 
       a {
         text-decoration: none;
-        color: #fff;
+        color: #888;
         display: block;
-        padding: 0 20px;
-        opacity: .8;
+        padding: 0 22px;
+
         &.active,
         &:hover {
-          opacity: 1;
-        }
-         
-        &.active {
-          font-weight: 700;
+          color: #333;
         }
 
-        &.active::before {
+        &.active::after {
           content: '';
-          display: block;
+          display: inline-block;
           position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
+          bottom: 15px;
+          left: calc(50% - 7px);
+          width: 14px;
           height: 4px;
-          background:#99d2fc;
+          background: #409EFF;
         }
       }
     }
   }
-  .header-home {
-    position: fixed;
-    top: 0;
-    background-color: rgba(32, 160, 255, 0);
+
+  .nav-dropdown {
+    margin-bottom: 6px;
+    padding-left: 18px;
+    width: 100%;
+
+    span {
+      display: block;
+      width: 100%;
+      font-size: 16px;
+      color: #888;
+      line-height: 40px;
+      transition: .2s;
+      padding-bottom: 6px;
+      user-select: none;
+
+      &:hover {
+         cursor: pointer;
+       }
+    }
+
+    i {
+      transition: .2s;
+      font-size: 12px;
+      color: #979797;
+      transform: translateY(-2px);
+    }
+
+    @when active {
+      span, i {
+        color: #409EFF;
+      }
+      i {
+        transform: rotateZ(180deg) translateY(3px);
+      }
+    }
+
+    &:hover {
+      span, i {
+        color: #409EFF;
+      }
+    }
+  }
+  
+  .nav-dropdown-list {
+    width: auto;
   }
 
   @media (max-width: 850px) {
@@ -133,6 +203,7 @@
       .nav-item {
         margin-left: 6px;
 
+        &.lang-item,
         &:last-child {
           margin-left: 10px;
         }
@@ -141,8 +212,12 @@
           padding: 0 5px;
         }
       }
+      .nav-theme-switch, .nav-algolia-search {
+        display: none;
+      }
     }
   }
+
   @media (max-width: 700px) {
     .header {
       .container {
@@ -153,29 +228,39 @@
         font-size: 12px;
         vertical-align: top;
       }
+      .nav-dropdown {
+        padding: 0;
+      }
+      .nav-gap {
+        padding: 0 8px;
+      }
     }
   }
 </style>
 <template>
   <div class="headerWrapper">
-    <header class="header"
-    ref="header"
-    :style="headerStyle"
-    :class="{
-      'header-home': isHome
-    }">
+    <header class="header" ref="header">
       <div class="container">
         <h1><router-link :to="`/${ lang }`">
-          <img
-            src="../assets/images/element-logo.svg"
-            alt="element-logo"
-            class="nav-logo">
-          <img
-            src="../assets/images/element-logo-small.svg"
-            alt="element-logo"
-            class="nav-logo-small">
+          <!-- logo -->
+          <slot>
+            <img
+              src="../assets/images/element-logo.svg"
+              alt="element-logo"
+              class="nav-logo">
+            <img
+              src="../assets/images/element-logo-small.svg"
+              alt="element-logo"
+              class="nav-logo-small">
+          </slot>
+
         </router-link></h1>
+
+        <!-- nav -->
         <ul class="nav">
+          <li class="nav-item nav-algolia-search" v-show="isComponentPage">
+            <algolia-search></algolia-search>
+          </li>
           <li class="nav-item">
             <router-link
               active-class="active"
@@ -195,14 +280,45 @@
               exact>{{ langConfig.resource }}
             </router-link>
           </li>
-          <li class="nav-item">
+
+          <!-- gap -->
+          <li class="nav-item" v-show="isComponentPage">
+            <div class="nav-gap"></div>
+          </li>
+
+          <!-- 版本选择器 -->
+          <li class="nav-item" v-show="isComponentPage">
+            <el-dropdown
+                trigger="click"
+                class="nav-dropdown"
+                :class="{ 'is-active': dropdownVisible }">
+              <span>
+                {{ langConfig.dropdown }}{{ version }}
+                <i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu
+                  slot="dropdown"
+                  class="nav-dropdown-list"
+                  @input="handleDropdownToggle">
+                <el-dropdown-item
+                    v-for="item in Object.keys(versions)"
+                    :key="item"
+                    @click.native="switchVersion(item)">
+                  {{ item }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </li>
+
+          <!-- lang -->
+          <li class="nav-item lang-item">
             <span
               class="nav-lang"
               :class="{ 'active': lang === 'zh-CN' }"
               @click="switchLang('zh-CN')">
               中文
             </span>
-            <span> / </span>
+            <span class="nav-lang-spe"> / </span>
             <span
               class="nav-lang"
               :class="{ 'active': lang === 'en-US' }"
@@ -210,59 +326,79 @@
               En
             </span>
           </li>
+          
+          <!--theme picker-->
+          <li class="nav-item nav-theme-switch" v-show="isComponentPage">
+            <theme-picker></theme-picker>
+          </li>
         </ul>
       </div>
     </header>
   </div>
 </template>
 <script>
+  import ThemePicker from './theme-picker.vue';
+  import AlgoliaSearch from './search.vue';
   import compoLang from '../i18n/component.json';
+  import { version } from 'main/index.js';
 
   export default {
     data() {
       return {
         active: '',
-        isHome: false,
-        headerStyle: {}
+        versions: [],
+        version,
+        dropdownVisible: true
       };
     },
-    watch: {
-      '$route.path': {
-        immediate: true,
-        handler() {
-          this.isHome = /^home/.test(this.$route.name);
-          this.headerStyle.backgroundColor = `rgba(32, 160, 255, ${ this.isHome ? '0' : '1' })`;
-        }
-      }
+
+    components: {
+      ThemePicker,
+      AlgoliaSearch
     },
+
     computed: {
       lang() {
         return this.$route.path.split('/')[1] || 'zh-CN';
       },
       langConfig() {
         return compoLang.filter(config => config.lang === this.lang)[0]['header'];
+      },
+      isComponentPage() {
+        return /^component/.test(this.$route.name);
       }
     },
+
     methods: {
+      switchVersion(version) {
+        if (version === this.version) return;
+        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
+      },
+
       switchLang(targetLang) {
         if (this.lang === targetLang) return;
         localStorage.setItem('ELEMENT_LANGUAGE', targetLang);
         this.$router.push(this.$route.path.replace(this.lang, targetLang));
+      },
+
+      handleDropdownToggle(visible) {
+        this.dropdownVisible = visible;
       }
     },
-    mounted() {
-      function scroll(fn) {
-        window.addEventListener('scroll', () => {
-          fn();
-        }, false);
-      }
-      scroll(() => {
-        if (this.isHome) {
-          const threshold = 200;
-          let alpha = Math.min((document.documentElement.scrollTop || document.body.scrollTop), threshold) / threshold;
-          this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
+
+    created() {
+      const xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = _ => {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+          const versions = JSON.parse(xhr.responseText);
+          this.versions = Object.keys(versions).slice(-2).reduce((prev, next) => {
+            prev[next] = versions[next];
+            return prev;
+          }, {});
         }
-      });
+      };
+      xhr.open('GET', '/versions.json');
+      xhr.send();
     }
   };
 </script>

examples/components/search.vue

@@ -0,0 +1,199 @@
+<template>
+  <el-autocomplete
+    v-model="query"
+    size="small"
+    :popper-class="`algolia-search${ isEmpty ? ' is-empty' : '' }`"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :trigger-on-focus="false"
+    @select="handleSelect">
+    <template slot-scope="props">
+      <p class="algolia-search-title" v-if="props.item.title">
+        <span v-html="props.item.highlightedCompo"></span>
+        <span class="algolia-search-separator">></span>
+        <span v-html="props.item.title"></span>
+      </p>
+      <p
+        class="algolia-search-content"
+        v-if="props.item.content"
+        v-html="props.item.content"></p>
+      <a
+        class="algolia-search-link"
+        v-if="props.item.img"
+        target="_blank"
+        href="https://www.algolia.com/docsearch">
+        <img
+          class="algolia-search-logo"
+          src="../assets/images/search-by-algolia.svg"
+          alt="algolia-logo">
+      </a>
+      <p
+        class="algolia-search-empty"
+        v-if="props.item.isEmpty">{{ emptyText }}</p>
+    </template>
+  </el-autocomplete>
+</template>
+
+<style>
+  .algolia-search {
+    width: 450px !important;
+  
+    &.is-empty {
+      .el-autocomplete-suggestion__list {
+        padding-bottom: 0;
+      }
+    }
+
+    .el-autocomplete-suggestion__list {
+      position: static !important;
+      padding-bottom: 31px;
+    }
+
+    li {
+      border-bottom: solid 1px #ebebeb;
+      
+      &:last-child {
+         border-bottom: none;
+       }
+    }
+    
+    .algolia-highlight {
+      color: #409EFF;
+      font-weight: bold;
+    }
+    
+    .algolia-search-title {
+      font-size: 14px;
+      margin: 6px 0;
+      line-height: 1.8;
+    }
+    
+    .algolia-search-separator {
+      padding: 0 6px;
+    }
+    
+    .algolia-search-content {
+      font-size: 12px;
+      margin: 6px 0;
+      line-height: 2.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .algolia-search-link {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding-right: 20px;
+      background-color: #dfe4ed;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      box-sizing: border-box;
+      text-align: right;
+
+      &:hover {
+         background-color: #dfe4ed;
+       }
+    
+      img {
+        display: inline-block;
+        height: 17px;
+        margin-top: 10px;
+      }
+    }
+  
+    .algolia-search-empty {
+      margin: 5px 0;
+      text-align: center;
+      color: #999;
+    }
+  }
+</style>
+
+<script>
+  import algoliasearch from 'algoliasearch';
+
+  export default {
+    data() {
+      return {
+        index: null,
+        query: '',
+        isEmpty: false
+      };
+    },
+
+    computed: {
+      lang() {
+        return this.$route.meta.lang;
+      },
+
+      placeholder() {
+        return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
+      },
+
+      emptyText() {
+        return this.lang === 'zh-CN' ? '无匹配结果' : 'No results';
+      }
+    },
+
+    watch: {
+      lang() {
+        this.initIndex();
+      }
+    },
+
+    methods: {
+      initIndex() {
+        const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
+        this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`);
+      },
+
+      querySearch(query, cb) {
+        if (!query) return;
+        this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
+          if (err) {
+            console.error(err);
+            return;
+          }
+          if (res.hits.length > 0) {
+            this.isEmpty = false;
+            cb(res.hits.map(hit => {
+              let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
+              const highlightStart = content.indexOf('<span class="algolia-highlight">');
+              if (highlightStart > -1) {
+                const startEllipsis = highlightStart - 15 > 0;
+                content = (startEllipsis ? '...' : '') +
+                  content.slice(Math.max(0, highlightStart - 15), content.length);
+              } else if (content.indexOf('|') > -1) {
+                content = '';
+              }
+              return {
+                anchor: hit.anchor,
+                component: hit.component,
+                highlightedCompo: hit._highlightResult.component.value,
+                title: hit._highlightResult.title.value,
+                content
+              };
+            }).concat({ img: true }));
+          } else {
+            this.isEmpty = true;
+            cb([{ isEmpty: true }]);
+          }
+        });
+      },
+
+      handleSelect(val) {
+        if (val.img || val.isEmpty) return;
+        const component = val.component || '';
+        const anchor = val.anchor;
+        this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);
+      }
+    },
+
+    mounted() {
+      this.initIndex();
+    }
+  };
+</script>

examples/components/side-nav.vue

@@ -3,56 +3,33 @@
     width: 100%;
     box-sizing: border-box;
     padding-right: 30px;
+    transition: opacity .5s;
+    &:hover {
+      opacity: 1 !important;
+    }
 
     li {
       list-style: none;
     }
+
     ul {
       padding: 0;
       margin: 0;
       overflow: hidden;
     }
+    
+    > ul > .nav-item > a {
+      margin-top: 15px;
+    }
 
-    .nav-dropdown {
-      margin-bottom: 6px;
-      width: 100%;
-      span {
-        display: block;
-        width: 100%;
-        font-size: 16px;
-        color: #5e6d82;
-        line-height: 40px;
-        transition: .2s;
-        padding-bottom: 6px;
-        border-bottom: 1px solid #eaeefb;
-        &:hover {
-          cursor: pointer;
-        }
-      }
-      i {
-        transition: .2s;
-        font-size: 12px;
-        color: #d3dce6;
-      }
-      @when active {
-        span, i {
-          color: #20a0ff;
-        }
-        i {
-          transform: rotateZ(180deg) translateY(2px);
-        }
-      }
-      &:hover {
-        span, i {
-          color: #20a0ff;
-        }
-      }
+    > ul > .nav-item:nth-child(-n + 3) > a {
+      margin-top: 0;
     }
 
     .nav-item {
       a {
         font-size: 16px;
-        color: #5e6d82;
+        color: #333;
         line-height: 40px;
         height: 40px;
         margin: 0;
@@ -60,40 +37,43 @@
         text-decoration: none;
         display: block;
         position: relative;
-        transition: all .3s;
+        transition: .15s ease-out;
+        font-weight: bold;
 
         &.active {
-          color: #20a0ff;
+          color: #409EFF;
         }
       }
+
       .nav-item {
         a {
           display: block;
           height: 40px;
+          color: #444;
           line-height: 40px;
-          font-size: 13px;
-          padding-left: 24px;
+          font-size: 14px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
+          font-weight: normal;
 
-
-          &:hover {
-            color: #20a0ff;
+          &:hover,
+          &.active {
+            color: #409EFF;
           }
         }
       }
     }
+
     .nav-group__title {
       font-size: 12px;
-      color: #99a9bf;
-      padding-left: 8px;
+      color: #999;
       line-height: 26px;
-      margin-top: 10px;
+      margin-top: 15px;
     }
-    
+
     #code-sponsor-widget {
-      margin: 50px 0 0 -20px;
+      margin: 0 0 0 -20px;
     }
   }
   .nav-dropdown-list {
@@ -105,29 +85,10 @@
   }
 </style>
 <template>
-  <div class="side-nav" :style="navStyle">
-    <el-dropdown
-      v-show="isComponentPage"
-      trigger="click"
-      class="nav-dropdown"
-      :class="{ 'is-active': dropdownVisible }">
-      <span>
-        {{ langConfig.dropdown }}{{ version }}
-        <i class="el-icon-caret-bottom el-icon--right"></i>
-      </span>
-      <el-dropdown-menu
-        slot="dropdown"
-        :offset="-80"
-        class="nav-dropdown-list"
-        @input="handleDropdownToggle">
-        <el-dropdown-item
-          v-for="item in Object.keys(versions)"
-          :key="item"
-          @click.native="switchVersion(item)">
-          {{ item }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
+  <div
+    class="side-nav"
+    @mouseenter="isFade = false"
+    :style="navStyle">
     <ul>
       <li class="nav-item" v-for="item in data">
         <a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
@@ -169,12 +130,12 @@
         </template>
       </li>
     </ul>
-    <div id="code-sponsor-widget"></div>
+    <!--<div id="code-sponsor-widget"></div>-->
   </div>
 </template>
 <script>
+  import bus from '../bus';
   import compoLang from '../i18n/component.json';
-  import { version } from 'main/index.js';
 
   export default {
     props: {
@@ -189,32 +150,33 @@
         highlights: [],
         navState: [],
         isSmallScreen: false,
-        versions: [],
-        version,
-        dropdownVisible: false
+        isFade: false
       };
     },
     watch: {
       '$route.path'() {
         this.handlePathChange();
+      },
+      isFade(val) {
+        bus.$emit('navFade', val);
       }
     },
     computed: {
       navStyle() {
-        return this.isSmallScreen ? { 'padding-bottom': '60px' } : {};
-      },
-      isComponentPage() {
-        return /^component-/.test(this.$route.name);
+        const style = {};
+        if (this.isSmallScreen) {
+          style.paddingBottom = '60px';
+        }
+        if (this.isFade) {
+          style.opacity = '0.5';
+        }
+        return style;
       },
       langConfig() {
         return compoLang.filter(config => config.lang === this.$route.meta.lang)[0]['nav'];
       }
     },
     methods: {
-      switchVersion(version) {
-        if (version === this.version) return;
-        location.href = `${ location.origin }/${ this.versions[version] }/${ location.hash } `;
-      },
       handleResize() {
         this.isSmallScreen = document.documentElement.clientWidth < 768;
         this.handlePathChange();
@@ -250,24 +212,12 @@
         if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
         this.hideAllMenu();
         event.currentTarget.nextElementSibling.style.height = 'auto';
-      },
-      handleDropdownToggle(visible) {
-        this.dropdownVisible = visible;
       }
     },
     created() {
-      const xhr = new XMLHttpRequest();
-      xhr.onreadystatechange = _ => {
-        if (xhr.readyState === 4 && xhr.status === 200) {
-          const versions = JSON.parse(xhr.responseText);
-          this.versions = Object.keys(versions).slice(-2).reduce((prev, next) => {
-            prev[next] = versions[next];
-            return prev;
-          }, {});
-        }
-      };
-      xhr.open('GET', '/versions.json');
-      xhr.send();
+      bus.$on('fadeNav', () => {
+        this.isFade = true;
+      });
     },
     mounted() {
       this.handleResize();

examples/components/theme-picker.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-color-picker
+    class="theme-picker"
+    popper-class="theme-picker-dropdown"
+    v-model="theme"></el-color-picker>
+</template>
+
+<style>
+  .theme-picker {
+    height: 80px;
+    display: inline-block;
+    @utils-vertical-center;
+  }
+
+  .theme-picker .el-color-picker__trigger {
+    vertical-align: middle;
+  }
+  
+  .theme-picker-dropdown .el-color-dropdown__link-btn {
+    display: none;
+  }
+</style>
+
+<script>
+  import { version } from 'main/index.js';
+
+  const ORIGINAL_THEME = '#409EFF';
+  export default {
+    data() {
+      return {
+        chalk: '', // content of theme-chalk css
+        docs: '', // content of docs css
+        theme: ORIGINAL_THEME
+      };
+    },
+
+    watch: {
+      theme(val, oldVal) {
+        if (typeof val !== 'string') return;
+        const themeCluster = this.getThemeCluster(val.replace('#', ''));
+        const originalCluster = this.getThemeCluster(oldVal.replace('#', ''));
+        const getHandler = (variable, id) => {
+          return () => {
+            const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''));
+            let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster);
+
+            let styleTag = document.getElementById(id);
+            if (!styleTag) {
+              styleTag = document.createElement('style');
+              styleTag.setAttribute('id', id);
+              document.head.appendChild(styleTag);
+            }
+            styleTag.innerText = newStyle;
+          };
+        };
+
+        const chalkHandler = getHandler('chalk', 'chalk-style');
+        const docsHandler = getHandler('docs', 'docs-style');
+
+        if (!this.chalk) {
+          const url = `https://unpkg.com/element-ui@${ version }/lib/theme-chalk/index.css`;
+          this.getCSSString(url, chalkHandler, 'chalk');
+        } else {
+          chalkHandler();
+        }
+
+        if (!this.docs) {
+          const links = [].filter.call(document.querySelectorAll('link'), link => {
+            return /docs\..+\.css/.test(link.href || '');
+          });
+          links[0] && this.getCSSString(links[0].href, docsHandler, 'docs');
+        } else {
+          docsHandler();
+        }
+
+        const styles = [].slice.call(document.querySelectorAll('style'))
+          .filter(style => {
+            const text = style.innerText;
+            return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text);
+          });
+        styles.forEach(style => {
+          const { innerText } = style;
+          if (typeof innerText !== 'string') return;
+          style.innerText = this.updateStyle(innerText, originalCluster, themeCluster);
+        });
+      }
+    },
+
+    methods: {
+      updateStyle(style, oldCluster, newCluster) {
+        let newStyle = style;
+        oldCluster.forEach((color, index) => {
+          newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]);
+        });
+        return newStyle;
+      },
+
+      getCSSString(url, callback, variable) {
+        const xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '');
+            callback();
+          }
+        };
+        xhr.open('GET', url);
+        xhr.send();
+      },
+
+      getThemeCluster(theme) {
+        const tintColor = (color, tint) => {
+          let red = parseInt(color.slice(0, 2), 16);
+          let green = parseInt(color.slice(2, 4), 16);
+          let blue = parseInt(color.slice(4, 6), 16);
+
+          if (tint === 0) { // when primary color is in its rgb space
+            return [red, green, blue].join(',');
+          } else {
+            red += Math.round(tint * (255 - red));
+            green += Math.round(tint * (255 - green));
+            blue += Math.round(tint * (255 - blue));
+
+            red = red.toString(16);
+            green = green.toString(16);
+            blue = blue.toString(16);
+
+            return `#${ red }${ green }${ blue }`;
+          }
+        };
+
+        const clusters = [theme];
+        for (let i = 0; i <= 9; i++) {
+          clusters.push(tintColor(theme, Number((i / 10).toFixed(2))));
+        }
+        return clusters;
+      }
+    }
+  };
+</script>

examples/docs/en-US/alert.md

@@ -118,6 +118,42 @@ Displaying an icon improves readability.
 ```
 :::
 
+## Centered text
+
+Use the `center` attribute to center the text.
+
+::: demo
+
+```html
+<template>
+  <el-alert
+    title="success alert"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="info alert"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="warning alert"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="error alert"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
 ### With description
 
 Description includes a message with more detailed information.
@@ -176,6 +212,7 @@ Description includes a message with more detailed information.
 | type | component type | string | success/warning/info/error | info |
 | description | descriptive text. Can also be passed with the default slot | string | — | — |
 | closable | if closable or not | boolean | — | true |
+| center | whether to center the text | boolean | — | false |
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |
 

examples/docs/en-US/badge.md

@@ -96,7 +96,7 @@ Use a red dot to mark content that needs to be noticed.
 ```html
 <el-badge is-dot class="item">query</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>

examples/docs/en-US/breadcrumb.md

@@ -17,10 +17,25 @@ Displays the location of the current page, making it easier to browser back.
 ```
 :::
 
+### Icon separator
+
+:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+  <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
 ### Breadcrumb Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | separator character | string | — | / |
+| separator-class | class name of icon separator | string | — | - |
 
 ### Breadcrumb Item Attributes
 | Attribute      | Description          | Type      | Accepted Values            | Default|

examples/docs/en-US/button.md

@@ -1,27 +1,3 @@
-<script>
-  import { addClass } from 'element-ui/src/utils/dom';
-  export default {
-    data() {
-      return {
-        isLoading: false,
-        isLoading2: false
-      };
-    },
-    methods: {
-      handleClick(event) {
-        console.log(event);
-        alert('button clicked!');
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let thirdDemo = demos[2];
-        addClass(thirdDemo, 'intro-block');
-      });
-    }
-  }
-</script>
 <style>
   .demo-box.demo-button {
     .el-row {
@@ -42,30 +18,6 @@
       }
     }
   }
-
-  .demo-box.demo-button .intro-block {
-    padding: 0;
-  }
-
-  .demo-button .intro-block .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-button .intro-block .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-button .intro-block .wrapper {
-    float: right;
-    margin-right: 20px;
-  }
 </style>
 
 ## Button
@@ -74,66 +26,87 @@ Commonly used button.
 
 ### Basic usage
 
-::: demo Button provides 7 themes defined by the `type` attribute.
+::: demo Use `type`, `plain` and `round` to define Button's style.
 
 ```html
-<el-button>Default Button</el-button>
-<el-button type="primary">Primary Button</el-button>
-<el-button type="text">Text Button</el-button>
+<div>
+  <el-button>Default</el-button>
+  <el-button type="primary">Primary</el-button>
+  <el-button type="success">Success</el-button>
+  <el-button type="info">Info</el-button>
+  <el-button type="warning">Warning</el-button>
+  <el-button type="danger">Danger</el-button>
+</div>
+
+<div style="margin: 20px 0">
+  <el-button plain>Plain</el-button>
+  <el-button type="primary" plain>Primary</el-button>
+  <el-button type="success" plain>Success</el-button>
+  <el-button type="info" plain>Info</el-button>
+  <el-button type="warning" plain>Warning</el-button>
+  <el-button type="danger" plain>Danger</el-button>
+</div>
+
+<div>
+  <el-button round>Round</el-button>
+  <el-button type="primary" round>Primary</el-button>
+  <el-button type="success" round>Success</el-button>
+  <el-button type="info" round>Info</el-button>
+  <el-button type="warning" round>Warning</el-button>
+  <el-button type="danger" round>Danger</el-button>
+</div>
 ```
 :::
 
 ### Disabled Button
 
-The `disableds` attribute determines if the button is disabled.
+The `disabled` attribute determines if the button is disabled.
 
 :::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
 
 ```html
-<el-button :plain="true" :disabled="true">Default Button</el-button>
-<el-button type="primary" disabled>Primary Button</el-button>
-<el-button type="text" disabled>Text Button</el-button>
+<div>
+  <el-button disabled>Default</el-button>
+  <el-button type="primary" disabled>Primary</el-button>
+  <el-button type="success" disabled>Success</el-button>
+  <el-button type="info" disabled>Info</el-button>
+  <el-button type="warning" disabled>Warning</el-button>
+  <el-button type="danger" disabled>Danger</el-button>
+</div>
+
+<div style="margin-top: 20px">
+  <el-button plain disabled>Plain</el-button>
+  <el-button type="primary" plain disabled>Primary</el-button>
+  <el-button type="success" plain disabled>Success</el-button>
+  <el-button type="info" plain disabled>Info</el-button>
+  <el-button type="warning" plain disabled>Warning</el-button>
+  <el-button type="danger" plain disabled>Danger</el-button>
+</div>
 ```
 :::
 
-### Color Indication
+### Text Button
 
-Different colors represent different meanings.
+Buttons without border and background.
 
-:::demo Use `plain` attribute to create a plain button, and it accepts a `Boolean` value. You can assign different `type` to a plain button as mentioned above. **Note**: When using the plain button, you still can set `type` to `text`, but it makes no difference. A plain button will be styled like a `text button` by default.
+:::demo
 ```html
-<div class="block">
-  <span class="demonstration">Default</span>
-  <span class="wrapper">
-    <el-button type="success">Success</el-button>
-    <el-button type="warning">Warning</el-button>
-    <el-button type="danger">Danger</el-button>
-    <el-button type="info">Info</el-button>
-  </span>
-</div>
-<div class="block">
-  <span class="demonstration">Hover to display color</span>
-  <span class="wrapper">
-    <el-button :plain="true" type="success">Success</el-button>
-    <el-button :plain="true" type="warning">Warning</el-button>
-    <el-button :plain="true" type="danger">Danger</el-button>
-    <el-button :plain="true" type="info">Info</el-button>
-  </span>
-</div>
+<el-button type="text">Text Button</el-button>
+<el-button type="text" disabled>Text Button</el-button>
 ```
 :::
 
 ### Icon Button
 
-Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
+Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
 
 :::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
 :::
@@ -146,13 +119,13 @@ Displayed as a button group, can be used to group a series of similar operations
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">Previous Page</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">Previous Page</el-button>
   <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -172,24 +145,33 @@ Click the button to load data, then the button displays a loading state.
 
 Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
 
-:::demo Use attribute `size` to set additional sizes with `large`, `small` or `mini`.
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ```html
-<el-button type="primary" size="large">Large Button</el-button>
-<el-button type="primary">Default Button</el-button>
-<el-button type="primary" size="small">Small Button</el-button>
-<el-button type="primary" size="mini">Mini Button</el-button>
+<div>
+  <el-button>Default</el-button>
+  <el-button size="medium">Medium</el-button>
+  <el-button size="small">Small</el-button>
+  <el-button size="mini">Mini</el-button>
+</div>
+<div style="margin-top: 20px">
+  <el-button round>Default</el-button>
+  <el-button size="medium" round>Medium</el-button>
+  <el-button size="small" round>Small</el-button>
+  <el-button size="mini" round>Mini</el-button>
+</div>
 ```
 :::
 
 ### Attributes
 | Attribute      | Description    | Type      | Accepted values       | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | button size   | string  |   large/small/mini            |    —     |
-| type     | button type   | string    |   primary/success/warning/danger/info/text |     —    |
-| plain     | determine whether it's a plain button   | Boolean    | — | false   |
-| loading   | determine whether it's loading   | Boolean    | — | false   |
+| size     | button size   | string  |   medium / small / mini            |    —     |
+| type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | determine whether it's a plain button   | boolean    | — | false   |
+| round     | determine whether it's a round button   | boolean    | — | false   |
+| loading   | determine whether it's loading   | boolean    | — | false   |
 | disabled  | disable the button    | boolean   | —   | false   |
-| icon  | button icon, accepts an icon name of Element icon component | string   |  —  |  —  |
+| icon  | icon class name | string   |  —  |  —  |
 | autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
-| native-type | same as native button's `type` | string | button/submit/reset | button |
+| native-type | same as native button's `type` | string | button / submit / reset | button |

examples/docs/en-US/card.md

@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -57,8 +57,8 @@ Card includes title, content and operations.
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">Card name</span>
-    <el-button style="float: right;" type="primary">Operation button</el-button>
+    <span>Card name</span>
+    <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'List item ' + o }}
@@ -71,16 +71,16 @@ Card includes title, content and operations.
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {

examples/docs/en-US/carousel.md

@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {

examples/docs/en-US/cascader.md

@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -1676,9 +1676,10 @@ Search and select options with a keyword.
 | expand-trigger  | trigger mode of expanding current item | string | click / hover | click |
 | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
 | filterable  | whether the options can be searched | boolean | — | — |
-| debounce | debounce delay when typing filter keyword, in millisecond | number | — | 300 |
+| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
-| size  | size of Input | string | large / small / mini | — |
+| size  | size of Input | string | medium / small / mini | — |
+| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### props
 | Attribute | Description | Type | Accepted Values | Default |
@@ -1687,7 +1688,6 @@ Search and select options with a keyword.
 | value     | specify which key of option object is used as the option's value | string | — | — |
 | children  | specify which key of option object is used as the option's child options | string | — | — |
 | disabled  | specify which key of option object indicates if the option is disabled | string | — | — |
-| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/checkbox.md

@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: 'valid',
         checkAll: false,
         cities: cityOptions,
@@ -15,16 +19,19 @@
         checkedCities1: ['Shanghai', 'Beijing'],
         isIndeterminate: true,
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou']
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -135,15 +142,15 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['Shanghai', 'Beijing'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -190,21 +197,29 @@ The `min` and `max` properties can help you to limit the number of checked items
 
 Checkbox with button styles.
 
-:::demo You just need to change `<el-checkbox>` element into `<el-checkbox-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-checkbox` element into `el-checkbox-button` element. We also provide `size` attribute.
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Shenzhen'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === 'Beijing'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];
@@ -213,8 +228,9 @@ Checkbox with button styles.
     data () {
       return {
         checkboxGroup1: ['Shanghai'],
-        checkboxGroup2: ['Beijing'],
-        checkboxGroup3: ['Guangzhou'],
+        checkboxGroup2: ['Shanghai'],
+        checkboxGroup3: ['Shanghai'],
+        checkboxGroup4: ['Shanghai'],
         cities: cityOptions
       };
     }
@@ -223,28 +239,89 @@ Checkbox with button styles.
 ```
 :::
 
+### With borders
+
+:::demo The `border` attribute adds a border to Checkboxes.
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="Option1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="Option2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="Option1" border></el-checkbox>
+      <el-checkbox label="Option2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
+:::
+
 ### Checkbox Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | value of the checkbox when used inside a `checkbox-group`   | string    |       —        |     —    |
-| true-label | value of the checkbox if it's checked   | string, number    |       —        |     —    |
-| false-label | value of the checkbox if it's not checked   | string, number    |      —         |     —    |
+| label     | value of the Checkbox when used inside a `checkbox-group`   | string / number / boolean   |       —        |     —    |
+| true-label | value of the Checkbox if it's checked   | string / number    |       —        |     —    |
+| false-label | value of the Checkbox if it's not checked   | string / number    |      —         |     —    |
+| disabled  | whether the Checkbox is disabled   | boolean   |  — | false   |
+| border  | whether to add a border around Checkbox  | boolean   | — | false   |
+| size  | size of the Checkbox, only works when `border` is true  | string  | medium / small / mini | — |
 | name | native 'name' attribute | string    |      —         |     —    |
-| disabled  | if the checkbox is disabled   | boolean   |  — | false   |
-| checked  | if the checkbox is checked   | boolean   |  — | false   |
+| checked  | if the Checkbox is checked   | boolean   |  — | false   |
 | indeterminate  | same as `indeterminate` in native checkbox | boolean   |  — | false   |
 
+### Checkbox Events
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| change  | triggers when the binding value changes | the updated value |
+
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
-|size | the size of checkbox buttons | string | large/small | —
-|fill  | border and background color when button is active | string   | — | #20a0ff   |
-|text-color | font color when button is active | string   | — | #ffffff   |
+|size | size of checkbox buttons or bordered checkboxes | string | medium / small / mini | — |
+| disabled  | whether the nesting checkboxes are disabled | boolean   | — | false   |
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
+|text-color | font color when button is active | string   | — | #ffffff   |
+|fill  | border and background color when button is active | string   | — | #409EFF   |
 
-### Checkbox Events
+### Checkbox-group Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| change  | triggers when the binding value changes | Event object |
+| change  | triggers when the binding value changes | the updated value |
 
+### Checkbox-button Attributes
+| Attribute      | Description         | Type    | Options                         | Default|
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | value of the checkbox when used inside a `checkbox-group` | string / number / boolean  |       —        |     —    |
+| true-label | value of the checkbox if it's checked | string / number | — |     —    |
+| false-label | value of the checkbox if it's not checked | string / number    |      —         |     —    |
+| disabled  | whether the checkbox is disabled | boolean   |  — | false   |
+| name | native 'name' attribute | string    |      —         |     —    |
+| checked  | if the checkbox is checked | boolean   |  — | false   |

examples/docs/en-US/color-picker.md

@@ -2,9 +2,10 @@
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null,
-        color3: 'rgba(19, 206, 102, 0.8)'
+        color3: 'rgba(19, 206, 102, 0.8)',
+        color4: '#409EFF'
       };
     },
     mounted() {
@@ -21,7 +22,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -34,6 +35,9 @@
     font-size: 14px;
     margin-bottom: 20px;
   }
+  .demo-color-picker .el-color-picker + .el-color-picker {
+    margin-left: 20px;
+  }
 </style>
 
 ## ColorPicker
@@ -57,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color1: '#20a0ff',
+        color1: '#409EFF',
         color2: null
       }
     }
@@ -84,11 +88,35 @@ ColorPicker is a color selector supporting multiple color formats.
 ```
 :::
 
+### Sizes
+
+:::demo
+```html
+<el-color-picker v-model="color4"></el-color-picker>
+<el-color-picker v-model="color4" size="medium"></el-color-picker>
+<el-color-picker v-model="color4" size="small"></el-color-picker>
+<el-color-picker v-model="color4" size="mini"></el-color-picker>
+
+<script>
+  export default {
+    data() {
+      return {
+        color4: '#409EFF'
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute | Description | Type | Accepted Values | Default |
 |---------- |-------- |---------- |-------------  |-------- |
+| disabled | whether to disable the ColorPicker | boolean | — | false |
+| size | size of ColorPicker | string | — | medium / small / mini |
 | show-alpha | whether to display the alpha slider | boolean | — | false |
 | color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
+| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/color.md

@@ -24,15 +24,8 @@
       border-radius: 0 0 4px 4px;
     }
   }
-  .bg-blue-light {
-    background-color: #58b7ff;
-  }
-  .bg-blue,
-  .bg-info {
-    background-color: #20a0ff;
-  }
-  .bg-blue-dark {
-    background-color: #1d8ce0;
+  .bg-blue {
+    background-color: #409EFF;
   }
 
   .bg-success {
@@ -44,43 +37,38 @@
   .bg-danger {
     background-color: #ff4949;
   }
-
-  .bg-black {
-    background-color: #1f2d3d;
-  }
-  .bg-black-light {
-    background-color: #324057;
-  }
-  .bg-black-lighter {
-    background-color: #475669;
+  .bg-info {
+    background-color: #878D99;
   }
 
-  .bg-silver {
-    background-color: #8492a6;
+  .bg-text-primary {
+    background-color: #2d2f33;
+  }
+  .bg-text-regular {
+    background-color: #5a5e66;
   }
-  .bg-silver-light {
-    background-color: #99a9bf;
+  .bg-text-secondary {
+    background-color: #878d99;
   }
-  .bg-silver-lighter {
-    background-color: #c0ccda;
+  .bg-text-placeholder {
+    background-color: #b4bccc;
   }
 
-  .bg-gray {
-    background-color: #d3dce6;
+  .bg-border-base {
+    background-color: #d8dce5;
   }
-  .bg-gray-light {
-    background-color: #e5e9f2;
+  .bg-border-light {
+    background-color: #dfe4ed;
   }
-  .bg-gray-lighter {
-    background-color: #eff2f7;
+  .bg-border-lighter {
+    background-color: #e6ebf5;
   }
-
-  .bg-white-dark {
-    background-color: #f9fafc;
+  .bg-border-extra-light {
+    background-color: #edf2fc;
   }
 
-  .color-gray {
-    color: #5e6d82;
+  [class*=" bg-border-"] {
+    color: #5a5e66;
   }
 </style>
 
@@ -92,14 +80,8 @@ Element uses a specific set of palettes to specify colors to provide a consisten
 The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-light">Light Blue<div class="value">#58B7FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#20A0FF</div></div>
-  </el-col>
-  <el-col :span="8">
-    <div class="demo-color-box bg-blue-dark">Dark Blue<div class="value">#1D8CE0</div></div>
+  <el-col :span="6">
+    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
 
@@ -109,16 +91,16 @@ Besides the main color, you need to use different scene colors in different scen
 
 <el-row :gutter="12">
   <el-col :span="6">
-    <div class="demo-color-box bg-info">Blue<div class="value">#20A0FF</div></div>
+    <div class="demo-color-box bg-success">Success<div class="value">#67C23A</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-success">Success<div class="value">#13CE66</div></div>
+    <div class="demo-color-box bg-warning">Warning<div class="value">#EB9E05</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-warning">Warning<div class="value">#F7BA2A</div></div>
+    <div class="demo-color-box bg-danger">Danger<div class="value">#FA5555</div></div>
   </el-col>
   <el-col :span="6">
-    <div class="demo-color-box bg-danger">Danger<div class="value">#FF4949</div></div>
+    <div class="demo-color-box bg-info">Info<div class="value">#878D99</div></div>
   </el-col>
 </el-row>
 
@@ -129,29 +111,18 @@ Neutral colors are for text, background and border colors. You can use different
 <el-row :gutter="12">
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-black">Black<div class="value">#1F2D3D</div></div>
-      <div class="demo-color-box bg-black-light">Light Black<div class="value">#324057</div></div>
-      <div class="demo-color-box bg-black-lighter">Extra Light Black<div class="value">#475669</div></div>
+      <div class="demo-color-box bg-text-primary">Primary Text<div class="value">#2D2F33</div></div>
+      <div class="demo-color-box bg-text-regular">Regular Text<div class="value">#5A5E66</div></div>
+      <div class="demo-color-box bg-text-secondary">Secondary Text<div class="value">#878D99</div></div>
+      <div class="demo-color-box bg-text-placeholder">Placeholder Text<div class="value">#B4BCCC</div></div>
     </div>
   </el-col>
   <el-col :span="6">
     <div class="demo-color-box-group">
-      <div class="demo-color-box bg-silver">Silver<div class="value">#8492A6</div></div>
-      <div class="demo-color-box bg-silver-light">Light Silver<div class="value">#99A9BF</div></div>
-      <div class="demo-color-box bg-silver-lighter">Extra Light Silver<div class="value">#C0CCDA</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group">
-      <div class="demo-color-box color-gray bg-gray">Gray<div class="value">#D3DCE6</div></div>
-      <div class="demo-color-box color-gray bg-gray-light">Light Gray<div class="value">#E5E9F2</div></div>
-      <div class="demo-color-box color-gray bg-gray-lighter">Extra Light Gray<div class="value">#EFF2F7</div></div>
-    </div>
-  </el-col>
-  <el-col :span="6">
-    <div class="demo-color-box-group" style="border: 1px solid #e0e6ed;border-radius: 4px;">
-      <div class="demo-color-box color-gray bg-white-dark">Dark White<div class="value">#F9FAFC</div></div>
-      <div class="demo-color-box color-gray bg-white">White<div class="value">#FFFFFF</div></div>
+      <div class="demo-color-box bg-border-base">Base Border<div class="value">#D8DCE5</div></div>
+      <div class="demo-color-box bg-border-light">Light Border<div class="value">#DFE4ED</div></div>
+      <div class="demo-color-box bg-border-lighter">Lighter Border<div class="value">#E6EBF5</div></div>
+      <div class="demo-color-box bg-border-extra-light">Extra Light Border<div class="value">#EDF2FC</div></div>
     </div>
   </el-col>
 </el-row>

examples/docs/en-US/container.md

@@ -0,0 +1,299 @@
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+  
+  #common-layouts + .demo-container {
+    .el-header, .el-footer {
+      text-align: center;
+    }
+    
+    .el-aside {
+      background-color: #D3DCE6;
+      text-align: center;
+      line-height: 200px;
+    }
+    
+    .el-main {
+      background-color: #E9EEF3;
+      color: #333;
+      text-align: center;
+      line-height: 160px;
+    }
+    
+    & > .source > .el-container {
+      margin-bottom: 40px;
+    
+      &:nth-child(5) .el-aside,
+      &:nth-child(6) .el-aside {
+        line-height: 260px;
+      }
+    
+     &:nth-child(7) .el-aside {
+       line-height: 320px;
+      }
+    }
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+
+## Container
+Container components for scaffolding basic structure of the page:
+
+`<el-container>`: wrapper container. When nested with a `<el-header>` or `<el-footer>`, all its child elements will be vertically arranged. Otherwise horizontally.
+
+`<el-header>`: container for headers.
+
+`<el-aside>`: container for side sections (usually a side nav).
+
+`<el-main>`: container for main sections.
+
+`<el-footer>`: container for footers.
+
+:::tip
+These components use flex for layout, so please make sure your browser supports it. Besides, `<el-container>`'s direct child elements have to be one or more of the latter four components. And father element of the latter four components must be a `<el-container>`.
+:::
+
+### Common layouts
+
+::: demo
+```html
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-main>Main</el-main>
+  <el-footer>Footer</el-footer>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-main>Main</el-main>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-header>Header</el-header>
+  <el-container>
+    <el-aside width="200px">Aside</el-aside>
+    <el-container>
+      <el-main>Main</el-main>
+      <el-footer>Footer</el-footer>
+    </el-container>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+  </el-container>
+</el-container>
+
+<el-container>
+  <el-aside width="200px">Aside</el-aside>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-main>Main</el-main>
+    <el-footer>Footer</el-footer>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header, .el-footer {
+    background-color: #B3C0D1;
+    color: #333;
+    text-align: center;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    line-height: 200px;
+  }
+  
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    line-height: 160px;
+  }
+  
+  body > .el-container {
+    margin-bottom: 40px;
+  }
+  
+  .el-container:nth-child(5) .el-aside,
+  .el-container:nth-child(6) .el-aside {
+    line-height: 260px;
+  }
+  
+  .el-container:nth-child(7) .el-aside {
+    line-height: 320px;
+  }
+</style>
+```
+:::
+
+### Example
+
+::: demo
+```html
+<el-container style="height: 500px; border: 1px solid #eee">
+  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+    <el-menu :default-openeds="['1', '3']">
+      <el-submenu index="1">
+        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="1-1">Option 1</el-menu-item>
+          <el-menu-item index="1-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="1-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">Option4</template>
+          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="2">
+        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="2-1">Option 1</el-menu-item>
+          <el-menu-item index="2-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="2-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="2-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-submenu index="3">
+        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>
+        <el-menu-item-group>
+          <template slot="title">Group 1</template>
+          <el-menu-item index="3-1">Option 1</el-menu-item>
+          <el-menu-item index="3-2">Option 2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="Group 2">
+          <el-menu-item index="3-3">Option 3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="3-4">
+          <template slot="title">Option 4</template>
+          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+    </el-menu>
+  </el-aside>
+  
+  <el-container>
+    <el-header style="text-align: right; font-size: 12px">
+      <el-dropdown>
+        <i class="el-icon-setting" style="margin-right: 15px"></i>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>View</el-dropdown-item>
+          <el-dropdown-item>Add</el-dropdown-item>
+          <el-dropdown-item>Delete</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <span>Tom</span>
+    </el-header>
+    
+    <el-main>
+      <el-table :data="tableData">
+        <el-table-column prop="date" label="Date" width="140">
+        </el-table-column>
+        <el-table-column prop="name" label="Name" width="120">
+        </el-table-column>
+        <el-table-column prop="address" label="Address">
+        </el-table-column>
+      </el-table>
+    </el-main>
+  </el-container>
+</el-container>
+
+<style>
+  .el-header {
+    background-color: #B3C0D1;
+    color: #333;
+    line-height: 60px;
+  }
+  
+  .el-aside {
+    color: #333;
+  }
+</style>
+
+<script>
+  export default {
+    data() {
+      const item = {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: 'No. 189, Grove St, Los Angeles'
+      };
+      return {
+        tableData: Array(20).fill(item)
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Container Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| direction | layout direction for child elements | string | horizontal / vertical | vertical when nested with `el-header` or `el-footer`; horizontal otherwise |
+
+### Header Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | height of the header | string | — | 60px |
+
+### Aside Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| width | width of the side section | string | — | 300px |
+
+### Footer Attributes
+| Attribute      | Description          | Type      | Accepted Values       | Default  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| height | height of the footer | string | — | 60px |

examples/docs/en-US/custom-theme.md

@@ -1,33 +1,76 @@
 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
 
-## Changing theme color
-If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-preview/#/en-US) is recommended.
-
-The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
+### Changing theme color
+If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
 
 The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
 
-## More customizations
+### Update SCSS variables in your project
+`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
+
+```html
+/* theme color */
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
+
+@import "../node_modules/element-ui/packages/theme-chalk/src/index";
+```
+
+Then in the entry file of your project, import this style file instead of Element's built CSS:
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way:
+
+| Variable | Description | Default value |
+| ------ | ---- | ------ |
+| $--sm | `sm` breakpoint for responsive layout | 768px |
+| $--md | `md` breakpoint for responsive layout | 992px |
+| $--lg | `lg` breakpoint for responsive layout | 1200px |
+| $--xl | `xl` breakpoint for responsive layout | 1920px |
+| $--color-primary | theme color | #409EFF |
+| $--color-success | color for success | #67C23A |
+| $--color-warning | color for warning | #EB9E05 |
+| $--color-danger | color for danger | #FA5555 |
+| $--color-info | color for info | #878D99 |
+| $--color-text-primary | color for primary texts | #2D2F33 |
+| $--color-text-regular | color for regular texts | #5A5E66 |
+| $--color-text-secondary | color for secondary texts | #878D99 |
+| $--color-text-placeholder | color for placeholder texts | #B4BCCC |
+| $--border-color-base | base border color | #D8DCE5 |
+| $--border-color-light | light border color | #DFE4ED |
+| $--border-color-lighter | lighter border color | #E6EBF5 |
+| $--border-color-extra-light | extra light border color | #EDF2FC |
+| $--font-path | icon font file path | 'fonts' |
+
+### More customizations
 If you need more customization than just changing the theme color, please follow these steps:
 
-### Install related tool
+#### <strong>Install related tool</strong>
 First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
 ```shell
 npm i element-theme -g
 ```
 
-Then install the default theme from npm or GitHub.
+Then install the chalk theme from npm or GitHub.
 ```shell
 # from npm
-npm i element-theme-default -D
+npm i element-theme-chalk -D
 
 # from GitHub
-npm i https://github.com/ElementUI/theme-default -D
+npm i https://github.com/ElementUI/theme-chalk -D
 ```
 
-### Initialize variable file
-After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
+#### <strong>Initialize variable file</strong>
+After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.scss` by default. And you can specify its output directory as you will.
 
 ```shell
 et -i [custom output file]
@@ -35,32 +78,32 @@ et -i [custom output file]
 > ✔ Generator variables file
 ```
 
-In `element-variables.css` you can find all the variables we used to style Element and they are defined in CSS4 style:
+In `element-variables.scss` you can find all the variables we used to style Element and they are defined in SCSS format:
 ```css
-:root {
-
-  /* Colors
-  -------------------------- */
-  --color-primary: #20a0ff;
-  --color-success: #13ce66;
-  --color-warning: #f7ba2a;
-  --color-danger: #ff4949;
-  --color-info: #50BFFF;
-  --color-blue: #2e90fe;
-  --color-blue-light: #5da9ff;
-  --color-blue-lighter: rgba(var(--color-blue), 0.12);
-  --color-white: #fff;
-  --color-black: #000;
-  --color-grey: #C0CCDA;
+$--color-primary: #409EFF !default;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); /* 53a8ff */
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); /* 66b1ff */
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); /* 79bbff */
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); /* 8cc5ff */
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); /* a0cfff */
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); /* b3d8ff */
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); /* c6e2ff */
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); /* d9ecff */
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); /* ecf5ff */
+
+$--color-success: #67c23a !default;
+$--color-warning: #eb9e05 !default;
+$--color-danger: #fa5555 !default;
+$--color-info: #878d99 !default;
 ```
 
-### Modify variables
-Just edit `element-variables.css`, e.g. changing the theme color to red:
+#### <strong>Modify variables</strong>
+Just edit `element-variables.scss`, e.g. changing the theme color to red:
 ```CSS
---color-primary: red;
+$--color-primary: red;
 ```
 
-### Build theme
+#### <strong>Build theme</strong>
 After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`. And if you customized the variable file's output, you need to add a parameter `-c` and variable file's name:
 ```shell
 et
@@ -69,7 +112,7 @@ et
 > ✔ build element theme
 ```
 
-### Import custom theme
+#### <strong>Import custom theme</strong>
 By default the build theme file is placed inside `./theme`. You can specify its output directory with parameter `-o`. Importing your own theme is just like importing the default theme, only this time you import the file you just built:
 
 ```javascript
@@ -80,7 +123,7 @@ import Vue from 'vue'
 Vue.use(ElementUI)
 ```
 
-### Import component theme on demand
+#### <strong>Import component theme on demand</strong>
 If you are using `babel-plugin-component` for on-demand import, just modify `.babelrc` and specify `styleLibraryName` to the path where your custom theme is located relative to `.babelrc`. Note that `~` is required:
 ```json
 {
@@ -93,4 +136,4 @@ If you are using `babel-plugin-component` for on-demand import, just modify `.ba
 }
 ```
 
-If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.
+If you are unfamiliar with `babel-plugin-component`, please refer to <a href="./#/en-US/component/quickstart">Quick Start</a>. For more details, check out the [project repository](https://github.com/ElementUI/element-theme) of `element-theme`.

examples/docs/en-US/date-picker.md

@@ -57,7 +57,11 @@
         value4: '',
         value5: '',
         value6: '',
-        value7: ''
+        value7: '',
+        value8: '',
+        value9: '',
+        value10: '',
+        value11: ''
       };
     }
   };
@@ -206,7 +210,7 @@ You can choose week, month or year by extending the standard date picker compone
 
 Picking a date range is supported.
 
-:::demo
+:::demo When in range mode, the left and right panels are linked by default. If you want the two panels to switch current months independently, you can use the `unlink-panels` attribute.
 
 ```html
 <template>
@@ -215,7 +219,9 @@ Picking a date range is supported.
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="Pick a range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
@@ -224,7 +230,10 @@ Picking a date range is supported.
       v-model="value7"
       type="daterange"
       align="right"
-      placeholder="Pick a range"
+      unlink-panels
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
@@ -271,22 +280,117 @@ Picking a date range is supported.
 
 :::
 
+###  Default Value
+
+If user hasn't picked a date, shows today's calendar by default. You can use `default-value` to set another date. Its value should be parsable by `new Date()`.
+
+If type is `daterange`, `default-value` sets the left side calendar.
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">date</span>
+    <el-date-picker
+      v-model="value8"
+      type="date"
+      placeholder="Pick a date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">daterange</span>
+    <el-date-picker
+      v-model="value9"
+      type="daterange"
+      start-placeholder="Start Date"
+      end-placeholder="End Date"
+      default-value="2010-10-01">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value8: '',
+        value9: ''
+      };
+    }
+  };
+</script>
+```
+:::
+
+###  Formatted Value
+
+By default, DatePicker emits `Date` object. You can use `value-format` to designate the format of emitted value, it accepts the same format string of `format` attribute.
+
+:::warning
+This feature is at alpha stage. Feedback welcome.
+:::
+
+:::demo
+```html
+<template>
+  <div class="block">
+    <span class="demonstration">Emits Date object</span>
+    <div class="demonstration">Value: {{ value10 }}</div>
+    <el-date-picker
+      v-model="value10"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd">
+    </el-date-picker>
+  </div>
+  <div class="block">
+    <span class="demonstration">Emits formatted date</span>
+    <div class="demonstration">Value: {{ value11 }}</div>
+    <el-date-picker
+      v-model="value11"
+      type="date"
+      placeholder="Pick a Date"
+      format="yyyy/MM/dd"
+      value-format="yyyy-MM-dd">
+    </el-date-picker>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value10: '',
+        value11: '',
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
-|size | size of Input | string | large/small/mini | — |
+| size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the displayed value in the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
-| default-value | optional default time of the picker | Date | anything accepted by `new Date()` | - |
+| range-separator | range separator | string | — | '-' |
+| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
+| name | same as `name` in native input | string | — | — |
+| unlink-panels | unlink two date-panels in range-picker | boolean | — | false |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -294,7 +398,7 @@ Picking a date range is supported.
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
-| onPick | a callback that triggers when the seleted date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
+| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 
 ### shortcuts
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -306,4 +410,11 @@ Picking a date range is supported.
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
+| change | triggers when user confirms the value | component's binding value |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
+
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | — |

examples/docs/en-US/datetime-picker.md

@@ -100,6 +100,10 @@
 
 Select date and time in one picker.
 
+:::tip
+DateTimePicker is derived from DatePicker and TimePicker. For a more detailed explanation on `pickerOptions` and other attributes, you can refer to DatePicker and TimePicker.
+:::
+
 ###  Date and time
 
 :::demo You can select date and time in one picker at the same time by setting `type` to `datetime`. The way to use shortcuts is the same as Date Picker.
@@ -171,7 +175,9 @@ Select date and time in one picker.
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="Select time range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
@@ -180,7 +186,9 @@ Select date and time in one picker.
       v-model="value4"
       type="datetimerange"
       :picker-options="pickerOptions2"
-      placeholder="Select time range"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       align="right">
     </el-date-picker>
   </div>
@@ -234,19 +242,27 @@ Select date and time in one picker.
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
 |size | size of Input | string | large/small/mini | — |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | string | — | — |
+| time-arrow-control | whether to pick time using arrow buttons | boolean | — | false |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
+| range-separator | range separator | string | - | '-' |
+| default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
+| name | same as `name` in native input | string | — | — |
+| unlink-panels | unllink two date-panels in range-picker | boolean | — | false |
 
 ### Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
+| firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
 
 ### shortcuts
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -254,9 +270,14 @@ Select date and time in one picker.
 | text | title of the shortcut | string | — | — |
 | onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — |
 
-
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
+| change | triggers when user confirms the value | component's binding value |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
 
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | — |

examples/docs/en-US/dialog.md

@@ -22,6 +22,9 @@
         dialogVisible: false,
         dialogTableVisible: false,
         dialogFormVisible: false,
+        outerVisible: false,
+        innerVisible: false,
+        centerDialogVisible: false,
         form: {
           name: '',
           region: '',
@@ -86,7 +89,7 @@ Dialog pops up a dialog box, and it's quite customizable.
 <el-dialog
   title="Tips"
   :visible.sync="dialogVisible"
-  size="tiny"
+  width="30%"
   :before-close="handleClose">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
@@ -116,6 +119,10 @@ Dialog pops up a dialog box, and it's quite customizable.
 ```
 :::
 
+:::tip
+`before-close` only works when user clicks the close icon or the backdrop. If you have buttons that close the Dialog in the `footer` named slot, you can add what you would do with `before-close` in the buttons' click event handler.
+:::
+
 ### Customizations
 
 The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。
@@ -196,22 +203,101 @@ The content of Dialog can be anything, even a table or a form. This example show
 ```
 :::
 
+### Nested Dialog
+If a Dialog is nested in another Dialog, `append-to-body` is required.
+:::demo Normally we do not recommend using nested Dialog. If you need multiple Dialogs rendered on the page, you can simply flat them so that they're siblings to each other. If you must nest a Dialog inside another Dialog, set `append-to-body` of the nested Dialog to true, and it will append to body instead of its parent node, so both Dialogs can be correctly rendered.
+```html
+<template>
+  <el-button type="text" @click="outerVisible = true">open the outer Dialog</el-button>
+  
+  <el-dialog title="Outter Dialog" :visible.sync="outerVisible">
+    <el-dialog
+        width="30%"
+        title="Inner Dialog"
+        :visible.sync="innerVisible"
+        append-to-body>
+    </el-dialog>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="outerVisible = false">Cancel</el-button>
+      <el-button type="primary" @click="innerVisible = true">open the inner Dialog</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        outerVisible: false,
+        innerVisible: false
+      };
+    }
+  }
+</script>
+```
+:::
+
+:::
+
+### Centered content
+Dialog's content can be centered.
+
+:::demo Setting `center` to `true` will center dialog's header and footer horizontally.
+
+```html
+<el-button type="text" @click="centerDialogVisible = true">Click to open the Dialog</el-button>
+
+<el-dialog
+  title="Warning"
+  :visible.sync="centerDialogVisible"
+  width="30%"
+  center>
+  <span>It should be noted that the content will not be aligned in center by default</span>
+  <span slot="footer" class="dialog-footer">
+    <el-button @click="centerDialogVisible = false">Cancel</el-button>
+    <el-button type="primary" @click="centerDialogVisible = false">Confirm</el-button>
+  </span>
+</el-dialog>
+
+<script>
+  export default {
+    data() {
+      return {
+        centerDialogVisible: false
+      };
+    }
+  };
+</script>
+```
+:::
+
+:::tip
+`center` only affects Dialog's header and footer. The body of Dialog can be anything, so sometimes it may not look good when centered. You need to write some CSS if you wish to center the body as well.
+:::
+
+:::tip
+If the variable bound to `visible` is managed in Vuex store, the `.sync` can not work properly. In this case, please remove the `.sync` modifier, listen to `open` and `close` events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.
+:::
+
 ### Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | visible   | visibility of Dialog, supports the .sync modifier | boolean | — | false |
 | title     | title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |
-| size      | size of Dialog | string    | tiny/small/large/full | small |
-| top      | value for `top` of Dialog CSS, works when `size` is not `full` | string    | — | 15% |
+| width     | width of Dialog | string    | — | 50% |
+| fullscreen     | whether the Dialog takes up full screen | boolean    | — | false |
+| top      | value for `margin-top` of Dialog CSS | string    | — | 15vh |
 | modal     | whether a mask is displayed | boolean   | — | true |
 | modal-append-to-body     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |
+| append-to-body     | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true` | boolean   | — | false |
 | lock-scroll     | whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |
 | custom-class      | custom class names for Dialog | string    | — | — |
 | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean    | — | true |
 | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean    | — | true |
 | show-close | whether to show a close button | boolean    | — | true |
 | before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — |
+| center | whether to align the header and footer in center | boolean | — | false |
 
 ### Slot
 

examples/docs/en-US/dropdown.md

@@ -9,9 +9,9 @@
     }
     .el-dropdown-link {
       cursor: pointer;
-      color: #20a0ff;
+      color: #409EFF;
     }
-    .el-icon-caret-bottom {
+    .el-icon-arrow-down {
       font-size: 12px;
     }
   }
@@ -61,7 +61,7 @@ Hover on the dropdown menu to unfold it for more actions.
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -71,6 +71,17 @@ Hover on the dropdown menu to unfold it for more actions.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 ```
 
 :::
@@ -83,7 +94,7 @@ Use the button to trigger the dropdown list.
 ```html
 <el-dropdown>
   <el-button type="primary">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -103,6 +114,28 @@ Use the button to trigger the dropdown list.
     <el-dropdown-item>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -118,7 +151,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">hover to trigger</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -133,7 +166,7 @@ Click the triggering element or hover on it.
     <span class="demonstration">click to trigger</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+        Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>Action 1</el-dropdown-item>
@@ -145,6 +178,22 @@ Click the triggering element or hover on it.
     </el-dropdown>
   </el-col>
 </el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
 ```
 :::
 
@@ -156,7 +205,7 @@ Use `hide-on-click` to define if menu closes on clicking.
 ```html
 <el-dropdown :hide-on-click="false">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
@@ -166,6 +215,16 @@ Use `hide-on-click` to define if menu closes on clicking.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
 ```
 :::
 
@@ -177,7 +236,7 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```html
 <el-dropdown @command="handleCommand">
   <span class="el-dropdown-link">
-    Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>
+    Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item command="a">Action 1</el-dropdown-item>
@@ -187,6 +246,17 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
     <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+</style>
+
 <script>
   export default {
     methods: {
@@ -199,15 +269,63 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
 ```
 :::
 
+### Sizes
+
+Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-dropdown split-button type="primary">
+  Default
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="medium" split-button type="primary">
+  Medium
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="small" split-button type="primary">
+  Small
+  <el-dropdown-menu slot="dropdown">
+   <el-dropdown-item>Action 1</el-dropdown-item>
+   <el-dropdown-item>Action 2</el-dropdown-item>
+   <el-dropdown-item>Action 3</el-dropdown-item>
+   <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+
+<el-dropdown size="mini" split-button type="primary">
+  Mini
+  <el-dropdown-menu slot="dropdown">
+    <el-dropdown-item>Action 1</el-dropdown-item>
+    <el-dropdown-item>Action 2</el-dropdown-item>
+    <el-dropdown-item>Action 3</el-dropdown-item>
+    <el-dropdown-item>Action 4</el-dropdown-item>
+  </el-dropdown-menu>
+</el-dropdown>
+```
+:::
+
 
 ### Dropdown Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
-| size          | menu button size, refer to `Button` Component, only works when `split-button` is true  | string  |          —             |    —     |
+| type          | menu button type, refer to `Button` Component, only works when `split-button` is true  | string  |  —   |    —     |
+| size          | menu size, also works on the split button  | string  | medium / small / mini  |    —     |
 | split-button | whether a button group is displayed | boolean         |     —       | false   |
-| size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
-| menu-align    | horizontal alignment     | string          | start/end  | end |
+| placement    | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end  | bottom-end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
 | hide-on-click | whether to hide menu after clicking menu-item     | boolean          | — | true |
 | show-timeout | Delay time before show a dropdown     | number          | — | 250 |

examples/docs/en-US/form.md

@@ -5,17 +5,15 @@
         if (!value) {
           return callback(new Error('Please input the age'));
         }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'));
+        if (!Number.isInteger(value)) {
+          callback(new Error('Please input digits'));
+        } else {
+          if (value < 18) {
+            callback(new Error('Age must be greater than 18'));
           } else {
-            if (value < 18) {
-              callback(new Error('Age must be greater than 18'));
-            } else {
-              callback();
-            }
+            callback();
           }
-        }, 1000);
+        }
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -47,6 +45,16 @@
           resource: '',
           desc: ''
         },
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        },
         formInline: {
           user: '',
           region: ''
@@ -264,7 +272,7 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery">
-    <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
+    <el-switch v-model="form.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type">
     <el-checkbox-group v-model="form.type">
@@ -426,7 +434,7 @@ Form component allows you to verify your data, helping you find and correct erro
     </el-col>
   </el-form-item>
   <el-form-item label="Instant delivery" prop="delivery">
-    <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
+    <el-switch v-model="ruleForm.delivery"></el-switch>
   </el-form-item>
   <el-form-item label="Activity type" prop="type">
     <el-checkbox-group v-model="ruleForm.type">
@@ -512,10 +520,11 @@ Form component allows you to verify your data, helping you find and correct erro
 
 ### Custom validation rules
 
-:::demo This example shows how to customize your own validation rules to finish a two-factor password verification.
+This example shows how to customize your own validation rules to finish a two-factor password verification.
 
+:::demo Here we use `status-icon` to reflect validation result as an icon.
 ```html
-<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
+<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
     <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
   </el-form-item>
@@ -537,17 +546,15 @@ Form component allows you to verify your data, helping you find and correct erro
         if (!value) {
           return callback(new Error('Please input the age'));
         }
-        setTimeout(() => {
-          if (!Number.isInteger(value)) {
-            callback(new Error('Please input digits'));
+        if (!Number.isInteger(value)) {
+          callback(new Error('Please input digits'));
+        } else {
+          if (value < 18) {
+            callback(new Error('Age must be greater than 18'));
           } else {
-            if (value < 18) {
-              callback(new Error('Age must be greater than 18'));
-            } else {
-              callback();
-            }
+            callback();
           }
-        }, 1000);
+        }
       };
       var validatePass = (rule, value, callback) => {
         if (value === '') {
@@ -738,6 +745,75 @@ Form component allows you to verify your data, helping you find and correct erro
 When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
 :::
 
+### Size control
+
+All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
+
+::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
+```html
+<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
+  <el-form-item label="Activity name">
+    <el-input v-model="sizeForm.name"></el-input>
+  </el-form-item>
+  <el-form-item label="Activity zone">
+    <el-select v-model="sizeForm.region" placeholder="please select your zone">
+      <el-option label="Zone one" value="shanghai"></el-option>
+      <el-option label="Zone two" value="beijing"></el-option>
+    </el-select>
+  </el-form-item>
+  <el-form-item label="Activity time">
+    <el-col :span="11">
+      <el-date-picker type="date" placeholder="Pick a date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
+    </el-col>
+    <el-col class="line" :span="2">-</el-col>
+    <el-col :span="11">
+      <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>
+    </el-col>
+  </el-form-item>
+  <el-form-item label="Activity type">
+    <el-checkbox-group v-model="sizeForm.type">
+      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>
+      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>
+    </el-checkbox-group>
+  </el-form-item>
+  <el-form-item label="Resources">
+    <el-radio-group v-model="sizeForm.resource" size="medium">
+      <el-radio border label="Sponsor"></el-radio>
+      <el-radio border label="Venue"></el-radio>
+    </el-radio-group>
+  </el-form-item>
+  <el-form-item size="large">
+    <el-button type="primary" @click="onSubmit">Create</el-button>
+    <el-button>Cancel</el-button>
+  </el-form-item>
+</el-form>
+
+<script>
+  export default {
+    data() {
+      return {
+        sizeForm: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      };
+    },
+    methods: {
+      onSubmit() {
+        console.log('submit!');
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Form Attributes
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -745,18 +821,22 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | model| data of form component | object | — | — |
 | rules | validation rules of form | object | — | — |
 | inline | whether the form is inline | boolean | — | false |
-| label-position | position of label | string | left/right/top | right |
+| label-position | position of label | string | left / right / top | right |
 | label-width | width of label, and all its direct child form items will inherit this value | string | — | — |
 | label-suffix | suffix of the label | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
+| inline-message  | whether to display the error message inline with the form item | boolean | — | false |
+| status-icon  | whether to display an icon indicating the validation result | boolean | — | false |
+| size  | control the size of components in this form | string | medium / small / mini | - |
 
 ### Form Methods
 
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| validate | the method to validate the whole form | Function(callback: Function(boolean)) |
+| validate | the method to validate the whole form. Returns a promise if callback is omitted | Function(callback: Function(boolean)) |
 | validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) |
 | resetFields | reset all the fields and remove validation result | — |
+| clearValidate | clear validation message for all fields | -
 
 ### Form-Item Attributes
 
@@ -769,10 +849,17 @@ When an `el-form-item` is nested in another `el-form-item`, its label width will
 | rules | validation rules of form | object | — | — |
 | error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
 | show-message  | whether to show the error message | boolean | — | true |
-
+| inline-message  | inline style validate message | boolean | — | false |
+| size  | control the size of components in this form-item | string | medium / small / mini | - |
 
 ### Form-Item Slot
-| name | Description |
+| Name | Description |
 |------|--------|
 | — | content of Form Item |
 | label | content of label |
+
+### Form-Item Methods
+
+| Method | Description | Parameters |
+| ---- | ---- | ---- |
+| resetField | reset current field and remove validation result | — |

examples/docs/en-US/home.md

@@ -1,11 +0,0 @@
-# Components Document
-
-<script>
-  import { addClass } from 'examples/dom/class.js';
-
-  module.exports = {
-    ready() {
-      addClass(this.$el.parentNode, 'no-toc')
-    }
-  }
-</script>

examples/docs/en-US/i18n.md

@@ -102,7 +102,7 @@ const i18n = new VueI18n({
 })
 
 Vue.use(Element, {
-  i18n: (key, value) => i18n.t(key. value)
+  i18n: (key, value) => i18n.t(key, value)
 })
 
 new Vue({ i18n }).$mount('#app')

examples/docs/en-US/icon.md

@@ -22,7 +22,7 @@
     margin: 0 20px;
   }
 
-  .icon-list {
+  .page-component .content > ul.icon-list {
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -79,7 +79,7 @@ Just assign the class name to `el-icon-iconName`.
 <i class="el-icon-edit"></i>
 <i class="el-icon-share"></i>
 <i class="el-icon-delete"></i>
-<el-button type="primary" icon="search">Search</el-button>
+<el-button type="primary" icon="el-icon-search">Search</el-button>
 
 ```
 :::
@@ -94,34 +94,3 @@ Just assign the class name to `el-icon-iconName`.
     </span>
   </li>
 </ul>
-
-### Third-party icons
-
-Some of Element's components has an `icon` attribute, e.g. Input. If you want to use a third-party icon in the `icon` attribute, here's what you need to do:
-<p>
-  <span>1.</span> Modify the class name prefix of the third-party library
-</p>
-
-Please read third-party icon library documentation on how to do it. For example, if you're using [iconfont.cn](http://iconfont.cn/), you can find prefix editor in the "Edit Project" dialog. If you're using [Font Awesome](http://fontawesome.io/), you can refer to [this demo](https://github.com/ElementUI/element-font-awesome).
-
-<p>
-  <span>2.</span> Add some CSS:
-</p>
-
-```CSS
-[class^="el-icon-my"], [class*=" el-icon-my"] {
-font-family:"your-font-family" !important;
-
-/* The following is based on original CSS rules of third-party library */
-font-size: inherit;
-font-style:normal;
--webkit-font-smoothing: antialiased;
--moz-osx-font-smoothing: grayscale;
-}
-```
-
-Now you can use them as you do with Element built-in icons. For example, in el-input:
-
-```html
-<el-input icon="my-xxx" />
-```

examples/docs/en-US/input-number.md

@@ -7,7 +7,9 @@
         num3: 5,
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1,
+        num8: 1
       }
     },
     methods: {
@@ -99,15 +101,16 @@ Allows you to define incremental steps.
 
 ### Size
 
-Additional `large` and `small` sizes of the input box are available
+Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 :::demo
 
 ```html
 <template>
-  <el-input-number size="large" v-model="num4"></el-input-number>
-  <el-input-number v-model="num5"></el-input-number>
-  <el-input-number size="small" v-model="num6"></el-input-number>
+  <el-input-number v-model="num4"></el-input-number>
+    <el-input-number size="medium" v-model="num5"></el-input-number>
+    <el-input-number size="small" v-model="num6"></el-input-number>
+    <el-input-number size="mini" v-model="num7"></el-input-number>
 </template>
 <script>
   export default {
@@ -115,7 +118,32 @@ Additional `large` and `small` sizes of the input box are available
       return {
         num4: 1,
         num5: 1,
-        num6: 1
+        num6: 1,
+        num7: 1
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Controls Position
+
+:::demo Set `controls-position` to decide the position of control buttons.
+```html
+<template>
+  <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        num8: 1
+      };
+    },
+    methods: {
+      handleChange(value) {
+        console.log(value);
       }
     }
   };
@@ -134,10 +162,19 @@ Additional `large` and `small` sizes of the input box are available
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
 |controls| whether to enable the control buttons | boolean | — | true |
-|debounce| debounce delay when typing, in millisecond | number | — | 300 |
-
+|debounce| debounce delay when typing, in milliseconds | number | — | 300 |
+|controls-position | position of the control buttons | string | right | - |
+|name | same as `name` in native input | string | — | — |
+|label | label text | string | — | — |
 ### Events
 
 | Event Name | Description | Parameters |
 |----| ---- | -----|
-|change | triggers when the value changes | value after change |
+|change | triggers when the value changes | value after change |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
+
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | - |

examples/docs/en-US/input.md

@@ -1,18 +1,4 @@
 <script>
-  import Vue from 'vue';
-  Vue.component('my-item-en', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'value' } }, [item.value]),
-        h('span', { attrs: { class: 'link' } }, [item.link])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
   export default {
     data() {
       return {
@@ -20,6 +6,9 @@
         input: '',
         input1: '',
         input2: '',
+        input21: '',
+        input22: '',
+        input23: '',
         input3: '',
         input4: '',
         input5: '',
@@ -66,7 +55,7 @@
       },
       createStateFilter(queryString) {
         return (state) => {
-          return (state.value.indexOf(queryString.toLowerCase()) === 0);
+          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -85,7 +74,7 @@
 <style>
   .demo-input.demo-en-US {
     .el-select .el-input {
-      width: 110px;
+      width: 130px;
     }
     .el-input {
       width: 180px;
@@ -102,6 +91,19 @@
         margin: 0 10px 10px 0;
       }
     }
+    .demo-input-suffix {
+      padding: 10px;
+    }
+    .demo-input-suffix .el-input {
+      margin-right: 15px;
+    }
+    .demo-input-label {
+      display: inline-block;
+      width: 130px;
+    }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -190,26 +192,50 @@ export default {
 
 Add an icon to indicate input type.
 
-::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
-
+::: demo To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well.
 ```html
-<el-input
-  placeholder="Pick a date"
-  icon="search"
-  v-model="input2"
-  :on-icon-click="handleIconClick">
-</el-input>
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using attributes</span>
+  <el-input
+    placeholder="Pick a date"
+    suffix-icon="el-icon-date"
+    v-model="input2">
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    prefix-icon="el-icon-search"
+    v-model="input21">
+  </el-input>
+</div>
+<div class="demo-input-suffix">
+  <span class="demo-input-label">Using slots</span>
+  <el-input
+    placeholder="Pick a date"
+    v-model="input22">
+    <i slot="suffix" class="el-input__icon el-icon-date"></i>
+  </el-input>
+  <el-input
+    placeholder="Type something"
+    v-model="input23">
+    <i slot="prefix" class="el-input__icon el-icon-search"></i>
+  </el-input>
+</div>
+
+<style>
+  .demo-input-label {
+    display: inline-block;
+    width: 130px;
+  }
+</style>
 
 <script>
 export default {
   data() {
     return {
-      input2: ''
-    }
-  },
-  methods: {
-    handleIconClick(ev) {
-      console.log(ev);
+      input2: '',
+      input21: '',
+      input22: '',
+      input23: ''
     }
   }
 }
@@ -295,13 +321,13 @@ Prepend or append an element, generally a label or a button.
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input5">
+  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
       <el-option label="Tel" value="3"></el-option>
     </el-select>
-    <el-button slot="append" icon="search"></el-button>
+    <el-button slot="append" icon="el-icon-search"></el-button>
   </el-input>
 </div>
 
@@ -309,6 +335,9 @@ Prepend or append an element, generally a label or a button.
   .el-select .el-input {
     width: 110px;
   }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
 </style>
 <script>
 export default {
@@ -331,11 +360,11 @@ export default {
 ```html
 <div class="demo-input-size">
   <el-input
-    size="large"
     placeholder="Please Input"
     v-model="input6">
   </el-input>
   <el-input
+    size="medium"
     placeholder="Please Input"
     v-model="input7">
   </el-input>
@@ -413,7 +442,7 @@ You can get some recommended tips based on the current input.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -443,18 +472,24 @@ You can get some recommended tips based on the current input.
 
 Customize how suggestions are displayed.
 
-:::demo
+:::demo Use `scoped slot` to customize suggestion items. In the scope, you can access the suggestion object via the `item` key.
 ```html
 <el-autocomplete
   popper-class="my-autocomplete"
   v-model="state3"
   :fetch-suggestions="querySearch"
-  custom-item="my-item-en"
   placeholder="Please input"
-  @select="handleSelect"
-  icon="edit"
-  :on-icon-click="handleIconClick"
-></el-autocomplete>
+  @select="handleSelect">
+  <i
+    class="el-icon-edit el-input__icon"
+    slot="suffix"
+    @click="handleIconClick">
+  </i>
+  <template slot-scope="props">
+    <div class="value">{{ props.item.value }}</div>
+    <span class="link">{{ props.item.link }}</span>
+  </template>
+</el-autocomplete>
 
 <style>
   .my-autocomplete {
@@ -475,19 +510,6 @@ Customize how suggestions are displayed.
 </style>
 
 <script>
-  Vue.component('my-item-en', {
-    functional: true,
-    render: function (h, ctx) {
-      var item = ctx.props.item;
-      return h('li', ctx.data, [
-        h('div', { attrs: { class: 'value' } }, [item.value]),
-        h('span', { attrs: { class: 'link' } }, [item.link])
-      ]);
-    },
-    props: {
-      item: { type: Object, required: true }
-    }
-  });
   export default {
     data() {
       return {
@@ -499,12 +521,12 @@ Customize how suggestions are displayed.
       querySearch(queryString, cb) {
         var links = this.links;
         var results = queryString ? link.filter(this.createFilter(queryString)) : links;
-        // call callback function to return recommended data
+        // call callback function to return suggestion objects
         cb(results);
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       loadAll() {
@@ -577,7 +599,7 @@ Search data from server-side.
       },
       createFilter(queryString) {
         return (link) => {
-          return (link.value.indexOf(queryString.toLowerCase()) === 0);
+          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
         };
       },
       handleSelect(item) {
@@ -596,16 +618,17 @@ Search data from server-side.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | ----| ----| ----| ---- | ----- |
-|type| Same as the `type` attribute of native input, except that it can be `textarea` | string | — | text |
-|value| binding value | string/number| — | — |
+|type| type of input | string | text / textarea | text |
+|value| binding value | string / number| — | — |
 |maxlength| maximum Input text length| number| — | — |
 |minlength| minimum Input text length| number | — | — |
 |placeholder| placeholder of Input| string | — | — |
 |disabled | whether Input is disabled | boolean | — | false |
-|size | size of Input, works when `type` is not 'textarea' | string | large/small/mini | — |
-|icon | icon name | string | — | — |
+|size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
+| prefix-icon   | prefix icon class  | string          | — | — |
+| suffix-icon   | suffix icon class  | string          | — | — |
 |rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
-|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean/object | — | false |
+|autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }  | boolean / object | — | false |
 |auto-complete | same as `auto-complete` in native input | string | on/off | off |
 |name | same as `name` in native input | string | — | — |
 | readonly | same as `readonly` in native input | boolean | — | false |
@@ -615,15 +638,23 @@ Search data from server-side.
 |resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autofocus | same as `autofocus` in native input | boolean | — | false |
 |form | same as `form` in native input | string | — | — |
-| on-icon-click | hook function when clicking on the input icon | function | — | — |
+| label | label text | string | — | — |
+
+### Input slots
+
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix |
+| suffix | content as Input suffix |
+| prepend | content to prepend before Input |
+| append | content to append after Input |
 
 ### Input Events
 
 | Event Name | Description | Parameters |
 |----| ----| ----|
-|click | triggers when the icon inside Input is clicked | (event: Event) |
-| blur | triggers when the icon inside Input is blur | (event: Event) |
-| focus | triggers when the icon inside Input is focus | (event: Event) |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
 | change | triggers when the icon inside Input value change | (value: string \| number) |
 
 ### Autocomplete Attributes
@@ -632,21 +663,26 @@ Attribute | Description | Type | Options | Default
 |----| ----| ----| ---- | -----|
 |placeholder| the placeholder of Autocomplete| string | — | — |
 |disabled | whether Autocomplete is disabled  | boolean | — | false|
-| props | configuration options, see the following table | object | — | — |
+| valueKey | key name of the input suggestion object for display | string | — | value |
 |icon | icon name | string | — | — |
 |value | binding value | string | — | — |
-|custom-item | component name of your customized suggestion list item | string | — | — |
+| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
 |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
 | popper-class | custom class name for autocomplete's dropdown | string | — | — |
 | trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
 | on-icon-click | hook function when clicking on the input icon | function | — | — |
+| name | same as `name` in native input | string | — | — |
 | select-when-unmatched | whether to emit a `select` event on enter when there is no autocomplete match | boolean | — | false |
+| label | label text | string | — | — |
 
-### props
-| Attribute | Description | Type | Accepted Values | Default |
-| --------- | ----------------- | ------ | ------ | ------ |
-| label     | specify which key of option object is used as the option's label | string | — | value |
-| value     | specify which key of option object is used as the option's value | string | — | value |
+### Autocomplete slots
+
+| Name | Description |
+|------|--------|
+| prefix | content as Input prefix |
+| suffix | content as Input suffix |
+| prepend | content to prepend before Input |
+| append | content to append after Input |
 
 ### Autocomplete Events
 
@@ -654,8 +690,7 @@ Attribute | Description | Type | Options | Default
 |----| ----| ----|
 |select | triggers when a suggestion is clicked | suggestion being clicked |
 
-
-
-
-
-
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | — |

examples/docs/en-US/installation.md

@@ -12,13 +12,13 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/
 
 ```html
 <!-- import CSS -->
-<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
+<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <!-- import JavaScript -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
 ```
 
 ### Hello world
-If you are using CDN, a hello-world page is easy with Element. [Online Demo](http://codepen.io/QingWei-Li/pen/vXwJrY)
+If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
 
 ```html
 <!DOCTYPE html>
@@ -26,12 +26,12 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
 <head>
   <meta charset="UTF-8">
   <!-- import CSS -->
-  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 </head>
 <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/en-US/layout.md

@@ -309,15 +309,15 @@ Use the flex layout to make flexible alignment of columns.
 
 ### Responsive Layout
 
-Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.
+Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.
 
 ::: demo
 ```html
 <el-row :gutter="10">
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
-  <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
-  <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
 </el-row>
 
 <style>
@@ -341,6 +341,27 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 ```
 :::
 
+### Utility classes for hiding elements
+
+Additionally, Element provides a series of classes for hiding elements under certain conditions. These classes can be added to any DOM elements or custom components. You need to import the following CSS file to use these classes:
+
+```js
+import 'element-ui/lib/theme-chalk/display.css';
+```
+
+The classes are:
+- `hidden-xs-only` - hide when on extra small viewports only
+- `hidden-sm-only` - hide when on small viewports and down
+- `hidden-sm-and-down` - hide when on small viewports and down
+- `hidden-sm-and-up` - hide when on small viewports and up
+- `hidden-md-only` - hide when on medium viewports only
+- `hidden-md-and-down` - hide when on medium viewports and down
+- `hidden-md-and-up` - hide when on medium viewports and up
+- `hidden-lg-only` - hide when on large viewports only
+- `hidden-lg-and-down` - hide when on large viewports and down
+- `hidden-lg-and-up` - hide when on large viewports and up
+- `hidden-xl-only` - hide when on extra large viewports only
+
 ### Row Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
@@ -359,8 +380,9 @@ Taking example by Bootstrap's responsive design, four breakpoints are preset: xs
 | pull |  number of columns that grid moves to the left | number | — | 0 |
 | xs | `<768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | sm | `≥768px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| md | `≥992` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
-| lg | `≥1200` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| md | `≥992px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| lg | `≥1200px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
+| xl | `≥1920px` Responsive columns or column props object | number/object (e.g. {span: 4, offset: 4}) | — | — |
 | tag | custom element tag | string | * | div |
 
 

examples/docs/en-US/loading.md

@@ -32,7 +32,18 @@
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -51,7 +62,7 @@ Displays animation in a container (such as a table) while loading data.
 ```html
 <template>
   <el-table
-    v-loading.body="loading"
+    v-loading="loading"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -102,16 +113,18 @@ Displays animation in a container (such as a table) while loading data.
 ```
 :::
 
-### Loading text
+### Customization
 
-You can customize a text message.
+You can customize loading text, loading spinner and background color.
 
-:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner.
+:::demo Add attribute `element-loading-text` to the element on which `v-loading` is bound, and its value will be displayed under the spinner. Similarly, `element-loading-spinner` and `element-loading-background` are for customizing loading spinner class name and background color.
 ```html
 <template>
   <el-table
     v-loading="loading2"
     element-loading-text="Loading..."
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
     :data="tableData"
     style="width: 100%">
     <el-table-column
@@ -160,7 +173,7 @@ You can customize a text message.
 
 Show a full screen animation while loading data.
 
-:::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`.
+:::demo When used as a directive, a full screen Loading requires the `fullscreen` modifier, and it will be appended to body. In this case, if you wish to disable scrolling on body, you can add another modifier `lock`. When used as a service, Loading will be full screen by default.
 
 ```html
 <template>
@@ -168,7 +181,12 @@ Show a full screen animation while loading data.
     type="primary"
     @click="openFullScreen"
     v-loading.fullscreen.lock="fullscreenLoading">
-    Full screen loading for 3 seconds
+    As a directive
+  </el-button>
+  <el-button
+    type="primary"
+    @click="openFullScreen2">
+    As a service
   </el-button>
 </template>
 
@@ -184,7 +202,18 @@ Show a full screen animation while loading data.
         this.fullscreenLoading = true;
         setTimeout(() => {
           this.fullscreenLoading = false;
-        }, 3000);
+        }, 2000);
+      },
+      openFullScreen2() {
+        const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+        setTimeout(() => {
+          loading.close();
+        }, 2000);
       }
     }
   }
@@ -224,4 +253,6 @@ If Element is imported entirely, a globally method `$loading` will be registered
 | fullscreen | same as the `fullscreen` modifier of `v-loading` | boolean | — | true |
 | lock | same as the `lock` modifier of `v-loading` | boolean | — | false |
 | text | loading text that displays under the spinner | string | — | — |
+| spinner | class name of the custom spinner | string | — | — |
+| background | background color of the mask | string | — | — |
 | customClass | custom class name for Loading | string | — | — |

examples/docs/en-US/menu.md

@@ -4,7 +4,7 @@
       padding-left: 55px;
     }
     .el-menu-vertical-demo:not(.el-menu--collapse) {
-      width: 200px;
+      width: 240px;
       min-height: 400px;
     }
     .line {
@@ -59,9 +59,9 @@ Menu that provides navigation for your website.
 
 Top bar NavMenu can be used in a variety of scenarios.
 
-::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu.
+::: demo By default Menu is vertical, but you can change it to horizontal by setting the mode prop to 'horizontal'. In addition, you can use the submenu component to create a second level menu. Menu provides `background-color`, `text-color` and `active-text-color` to customize the colors.
 ```html
-<el-menu theme="dark" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -72,7 +72,14 @@ Top bar NavMenu can be used in a variety of scenarios.
   <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
 </el-menu>
 <div class="line"></div>
-<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
+<el-menu
+  :default-active="activeIndex2"
+  class="el-menu-demo"
+  mode="horizontal"
+  @select="handleSelect"
+  background-color="#545c64"
+  text-color="#fff"
+  active-text-color="#ffd04b">
   <el-menu-item index="1">Processing Center</el-menu-item>
   <el-submenu index="2">
     <template slot="title">Workspace</template>
@@ -108,11 +115,18 @@ Vertical NavMenu with sub-menus.
 ::: demo You can use the el-menu-item-group component to create a menu group, and the name of the group is determined by the title prop or a named slot.
 ```html
 <el-row class="tac">
-  <el-col :span="8">
-    <h5>With icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
+  <el-col :span="12">
+    <h5>Default colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose">
       <el-submenu index="1">
-        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
           <el-menu-item index="1-2">item one</el-menu-item>
@@ -125,18 +139,34 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2"><i class="el-icon-menu"></i>Navigator Two</el-menu-item>
-      <el-menu-item index="3"><i class="el-icon-setting"></i>Navigator Three</el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
-  <el-col :span="8">
-    <h5>Without icons</h5>
-    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="dark">
+  <el-col :span="12">
+    <h5>Custom colors</h5>
+    <el-menu
+      default-active="2"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#545c64"
+      text-color="#fff"
+      active-text-color="#ffd04b">
       <el-submenu index="1">
-        <template slot="title">Navigator One</template>
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>Navigator One</span>
+        </template>
         <el-menu-item-group title="Group One">
           <el-menu-item index="1-1">item one</el-menu-item>
-          <el-menu-item index="1-2">item two</el-menu-item>
+          <el-menu-item index="1-2">item one</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="Group Two">
           <el-menu-item index="1-3">item three</el-menu-item>
@@ -146,21 +176,14 @@ Vertical NavMenu with sub-menus.
           <el-menu-item index="1-4-1">item one</el-menu-item>
         </el-submenu>
       </el-submenu>
-      <el-menu-item index="2">Navigator Two</el-menu-item>
-      <el-menu-item index="3">Navigator Three</el-menu-item>
-    </el-menu>
-  </el-col>
-  <el-col :span="8">
-    <h5>Groups</h5>
-    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">
-      <el-menu-item-group title="Group One">
-        <el-menu-item index="1"><i class="el-icon-message"></i>Navigator One</el-menu-item>
-        <el-menu-item index="2"><i class="el-icon-message"></i>Navigator Two</el-menu-item>
-      </el-menu-item-group>
-      <el-menu-item-group title="Group Two">
-        <el-menu-item index="3"><i class="el-icon-message"></i>Navigator Three</el-menu-item>
-        <el-menu-item index="4"><i class="el-icon-message"></i>Navigator Four</el-menu-item>
-      </el-menu-item-group>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span>Navigator Two</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-setting"></i>
+        <span>Navigator Three</span>
+      </el-menu-item>
     </el-menu>
   </el-col>
 </el-row>
@@ -193,7 +216,7 @@ Vertical NavMenu could be collapsed.
 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
   <el-submenu index="1">
     <template slot="title">
-      <i class="el-icon-message"></i>
+      <i class="el-icon-location"></i>
       <span slot="title">Navigator One</span>
     </template>
     <el-menu-item-group>
@@ -249,15 +272,22 @@ Vertical NavMenu could be collapsed.
 ### Menu Attribute
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| mode     | menu display mode   | string  |   horizontal/vertical   | vertical |
+| mode     | menu display mode   | string  |   horizontal / vertical   | vertical |
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
-| theme     | theme color   | string    | light/dark | light |
+| background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
+| text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
+| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |
 | unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |
 | menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | — | hover |
 | router  | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean   | — | false   |
 
+### Menu Methods
+| Event Name | Description | Parameters |
+|---------- |-------- |---------- |
+| open  | open a specific sub-menu | index: index of the sub-menu to open |
+| close  | close a specific sub-menu | index: index of the sub-menu to close |
 
 ### Menu Events
 | Event Name | Description | Parameters |
@@ -286,10 +316,3 @@ Vertical NavMenu could be collapsed.
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | title     | group title   | string  | — | — |
-
-
-
-
-
-
-

examples/docs/en-US/message-box.md

@@ -91,15 +91,42 @@
             });
           }, 200);
         });
-      }
+      },
+
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      },
 
+      open6() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
     }
   };
 </script>
 
 ## MessageBox
 
-A set of modal boxes simulating system message box, mainly for message prompt, success tips, error messages and query information.
+A set of modal boxes simulating system message box, mainly for alerting information, confirm operations and prompting messages.
+:::tip
+By design MessageBox provides simulations of system's `alert`, `confirm` and `prompt`，so it's content should be simple. For more complicated contents, please use Dialog.
+:::
 
 ### Alert
 
@@ -260,19 +287,88 @@ Can be customized to show various content.
 ```
 :::
 
+### Use HTML String
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+```html
+<template>
+  <el-button type="text" @click="open5">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open5() {
+        this.$alert('<strong>This is <i>HTML</i> string</strong>', 'HTML String', {
+          dangerouslyUseHTMLString: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, 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.
+:::
+
+### Centered content
+Content of MessageBox can be centered.
+
+:::demo Setting `center` to `true` will center the content
+
+```html
+<template>
+  <el-button type="text" @click="open6">Click to open Message Box</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open6() {
+        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
+          confirmButtonText: 'OK',
+          cancelButtonText: 'Cancel',
+          type: 'warning',
+          center: true
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: 'Delete completed'
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: 'Delete canceled'
+          });
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Global method
 
-Element has added the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a vue instance you can call `MessageBox` like what we did in this page.
+If Element is fully imported, it will add the following global methods for Vue.prototype: `$msgbox`, `$alert`, `$confirm` and `$prompt`. So in a Vue instance you can call `MessageBox` like what we did in this page. The parameters are:
+- `$msgbox(options)`
+- `$alert(message, title, options)` or `$alert(message, options)`
+- `$confirm(message, title, options)` or `$confirm(message, options)`
+- `$prompt(message, title, options)` or `$prompt(message, options)`
 
 ### Local import
 
-Import `MessageBox`:
+If you prefer importing `MessageBox` on demand:
 
 ```javascript
 import { MessageBox } from 'element-ui';
 ```
 
-The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`.
+The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.confirm` and `MessageBox.prompt`. The parameters are the same as above.
 
 ### Options
 
@@ -280,7 +376,8 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
 | message | content of the MessageBox | string | — | — |
-| type | message type, used for icon display | string | success/info/warning/error | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
+| type | message type, used for icon display | string | success / info / warning / error | — |
 | customClass | custom class name for MessageBox | string | — | — |
 | callback | MessageBox closing callback if you don't prefer Promise | function(action), where action can be 'confirm' or 'cancel', and `instance` is the MessageBox instance. You can access to that instance's attributes and methods | — | — |
 | beforeClose | callback before MessageBox closes, and it will prevent MessageBox from closing | function(action, instance, done), where `action` can be 'confirm' or 'cancel'; `instance` is the MessageBox instance, and you can access to that instance's attributes and methods; `done` is for closing the instance | — | — |
@@ -293,9 +390,13 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | confirmButtonClass | custom class name of confirm button | string | — | — |
 | closeOnClickModal | whether MessageBox can be closed by clicking the mask | boolean | — | true (false when called with alert) |
 | closeOnPressEscape | whether MessageBox can be closed by pressing the ESC | boolean | — | true (false when called with alert) |
+| closeOnHashChange | whether to close MessageBox when hash changes | boolean | — | true |
 | showInput | whether to show an input | boolean | — | false (true when called with prompt) |
 | inputPlaceholder | placeholder of input | string | — | — |
+| inputType | type of input | string | — | text |
 | inputValue | initial value of input | string | — | — |
 | inputPattern | regexp for the input | regexp | — | — |
 | inputValidator | validation function for the input. Should returns a boolean or string. If a string is returned, it will be assigned to inputErrorMessage | function | — | — |
-| inputErrorMessage | error message when validation fails | string | — | Illegal input |
+| inputErrorMessage | error message when validation fails | string | — | Illegal input |
+| center | whether to align the content in center | boolean | — | false |
+| roundButton | whether to use round button | boolean | — | false |

examples/docs/en-US/message.md

@@ -62,6 +62,20 @@
           message: 'Oops, this is a error message.',
           type: 'error'
         });
+      },
+
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      },
+
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
       }
     }
   };
@@ -75,7 +89,7 @@ Used to show feedback after an activity. The difference with Notification is tha
 
 Displays at the top, and disappears after 3 seconds.
 
-:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or VNode as parameter, and it will be shown as the main body.
+:::demo The setup of Message is very similar to notification, so parts of the options won't be explained in detail here. You can check the options table below combined with notification doc to understand it. Element has registered a `$message` method for invoking. Message can take a string or a VNode as parameter, and it will be shown as the main body.
 
 ```html
 <template>
@@ -199,6 +213,60 @@ A close button can be added.
 ```
 :::
 
+### Centered text
+Use the `center` attribute to center the text.
+
+:::demo
+
+```html
+<template>
+  <el-button :plain="true" @click="openCenter">Centered text</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openCenter() {
+        this.$message({
+          message: 'Centered text',
+          center: true
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Use HTML string
+`message` supports HTML string.
+
+:::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+
+```html
+<template>
+  <el-button :plain="true" @click="openHTML">Use HTML String</el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      openHTML() {
+        this.$message({
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, 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.
+:::
+
 ### Global method
 
 Element has added a global method `$message` for Vue.prototype. So in a vue instance you can call `Message` like what we did in this page.
@@ -220,9 +288,11 @@ You can call `Message.closeAll()` to manually close all the instances.
 | message | message text | string / VNode | — | — |
 | type | message type | string | success/warning/info/error | info |
 | iconClass | custom icon's class, overrides `type` | string | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | customClass | custom class name for Message | string | — | — |
 | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 |
 | showClose | whether to show a close button | boolean | — | false |
+| center | whether to center the text | boolean | — | false |
 | onClose | callback function when closed with the message instance as the parameter | function | — | — |
 
 ### Methods

examples/docs/en-US/notification.md

@@ -49,6 +49,37 @@
       },
 
       open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      },
+
+      open11() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -56,6 +87,22 @@
         });
       },
 
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      },
+      
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      },
+
       onClose() {
         console.log('Notification is closed');
       }
@@ -65,7 +112,7 @@
 
 ## Notification
 
-Displays a global notification message at the upper right corner of the page.
+Displays a global notification message at a corner of the page.
 
 ### Basic usage
 
@@ -177,16 +224,84 @@ We provide four types: success, warning, info and error.
 ```
 :::
 
+### Custom position
+
+Notification can emerge from any corner you like.
+
+::: demo The `position` attribute defines which corner Notification slides in. It can be `top-right`, `top-left`, `bottom-right` or `bottom-left`. Defaults to `top-right`.
+```html
+<template>
+  <el-button
+    plain
+    @click="open7">
+    Top Right
+  </el-button>
+  <el-button
+    plain
+    @click="open8">
+    Bottom Right
+  </el-button>
+  <el-button
+    plain
+    @click="open9">
+    Bottom Left
+  </el-button>
+  <el-button
+    plain
+    @click="open10">
+    Top Left
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open7() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top right corner'
+        });
+      },
+
+      open8() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom right corner',
+          position: 'bottom-right'
+        });
+      },
+
+      open9() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the bottom left corner',
+          position: 'bottom-left'
+        });
+      },
+
+      open10() {
+        this.$notify({
+          title: 'Custom Position',
+          message: 'I\'m at the top left corner',
+          position: 'top-left'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### With offset
 
-Customize Notification's offset from the top edge of the screen
+Customize Notification's offset from the edge of the screen.
 
-::: demo Set the `offset` attribute to customize Notification's offset from the top edge of the screen. Note that every Notification instance of the same moment should have the same offset.
+::: demo Set the `offset` attribute to customize Notification's offset from the edge of the screen. Note that every Notification instance of the same moment should have the same offset.
 ```html
 <template>
   <el-button
-      plain
-      @click="open7">
+    plain
+    @click="open11">
     Notification with offset
   </el-button>
 </template>
@@ -194,7 +309,7 @@ Customize Notification's offset from the top edge of the screen
 <script>
   export default {
     methods: {
-      open7() {
+      open11() {
         this.$notify.success({
           title: 'Success',
           message: 'This is a success message',
@@ -207,6 +322,69 @@ Customize Notification's offset from the top edge of the screen
 ```
 :::
 
+### Use HTML string
+`message` supports HTML string.
+
+::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string.
+```html
+<template>
+  <el-button
+    plain
+    @click="open12">
+    Use HTML String
+  </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open12() {
+        this.$notify({
+          title: 'HTML String',
+          dangerouslyUseHTMLString: true,
+          message: '<strong>This is <i>HTML</i> string</strong>'
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
+:::warning
+Although `message` property supports HTML strings, 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.
+:::
+
+### Hide close button
+
+It is possible to hide the close button
+
+::: demo Set the `showClose` attribute to `false` so the notification cannot be closed by the user.
+```html
+<template>
+  <el-button
+    plain
+    @click="open13">
+    Hide close button
+    </el-button>
+</template>
+
+<script>
+  export default {
+    methods: {
+      open13() {
+        this.$notify.success({
+          title: 'Info',
+          message: 'This is a message without close button',
+          showClose: false
+        });
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Global method
 
 Element has added a global method `$notify` for Vue.prototype. So in a vue instance you can call `Notification` like what we did in this page.
@@ -226,16 +404,18 @@ In this case you should call `Notification(options)`. We have also registered me
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title | string | — | — |
 | message | description text | string/Vue.VNode | — | — |
+| dangerouslyUseHTMLString | whether `message` is treated as HTML string | boolean | — | false |
 | type | notification type | string | success/warning/info/error | — |
 | iconClass | custom icon's class. It will be overridden by `type` | string | — | — |
 | customClass | custom class name for Notification | string | — | — |
 | duration | duration before close. It will not automatically close if set 0 | number | — | 4500 |
+| showClose | whether to show a close button | boolean | — | true |
 | onClose | callback function when closed | function | — | — |
 | onClick | callback function when notification clicked | function | — | — |
 | offset | offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset | number | — | 0 |
 
 ### Methods
-`Notification` and `this.$notify` returns the current Message instance. To manually close the instance, you can call `close` on it.
+`Notification` and `this.$notify` returns the current Notification instance. To manually close the instance, you can call `close` on it.
 | Method | Description |
 | ---- | ---- |
 | close | close the Notification |

examples/docs/en-US/pagination.md

@@ -7,7 +7,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
 
@@ -205,6 +205,9 @@ Add more modules based on your scenario.
 | current-page | current page number, supports the .sync modifier | number | — | 1 |
 | layout | layout of Pagination, elements separated with a comma | string | `sizes`, `prev`, `pager`, `next`, `jumper`, `->`, `total`, `slot` | 'prev, pager, next, jumper, ->, total'  |
 | page-sizes | options of item count per page | number[] | — |  [10, 20, 30, 40, 50, 100] |
+| popper-class | custom class name for the page size Select's dropdown | string | — | — |
+| prev-text | text for the prev button | string | — | — |
+| next-text | text for the next button | string | — | — |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/progress.md

@@ -1,3 +1,14 @@
+<style>
+  .demo-box.demo-progress {
+    .el-progress--line {
+      margin-bottom: 15px;
+      width: 350px;
+    }
+    .el-progress--circle {
+      margin-right: 15px;
+    }
+  }
+</style>
 ## Progress
 
 Progress is used to show the progress of current operation, and inform the user the current status.

examples/docs/en-US/quickstart.md

@@ -4,127 +4,17 @@ This part walks you through the process of using Element in a webpack project.
 
 ### Use Starter Kit
 
-We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
-
-If you prefer not to use them, please read the following.
-
-### Config files
-
-Create a new project, and its structure should be
-```text
-|- src/  --------------------- source code
-    |- App.vue
-    |- main.js  -------------- entry
-|- .babelrc  ----------------- babel config
-|- index.html  --------------- HTML template
-|- package.json  ------------- npm config
-|- README.md  ---------------- readme
-|- webpack.config.js  -------- webpack config
-```
+Under construction.
 
-Typical configurations for these config files are:
+### Use vue-cli
 
-**.babelrc**
-```json
-{
-  "presets": ["vue-app"]
-}
-```
-
-<br>
+It is recommended to start a project using [vue-cli](https://github.com/vuejs/vue-cli):
 
-**package.json**
-```json
-{
-  "name": "element-starter",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
-  },
-  "dependencies": {
-    "element-ui": "^1.0.0",
-    "vue": "^2.1.6"
-  },
-  "devDependencies": {
-    "babel-core": "^6.0.0",
-    "babel-loader": "^6.0.0",
-    "babel-preset-vue-app": "^1.2.0",
-    "cross-env": "^1.0.6",
-    "css-loader": "^0.23.1",
-    "file-loader": "^0.8.5",
-    "style-loader": "^0.13.1",
-    "vue-loader": "^9.8.0",
-    "webpack": "beta",
-    "webpack-dev-server": "beta"
-  }
-}
-```
-
-<br>
-
-**webpack.config.js**
-```javascript
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  entry: './src/main.js',
-  output: {
-    path: path.resolve(__dirname, './dist'),
-    publicPath: '/dist/',
-    filename: 'build.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
-        loader: 'file-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
-        loader: 'file-loader',
-        query: {
-          name: '[name].[ext]?[hash]'
-        }
-      }
-    ]
-  },
-  devServer: {
-    historyApiFallback: true,
-    noInfo: true
-  },
-  devtool: '#eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports.devtool = '#source-map'
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = (module.exports.plugins || []).concat([
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ])
-}
+```shell
+> npm i -g vue-cli
+> mkdir my-project && cd my-project
+> vue init webpack
+> npm i && npm i element-ui
 ```
 
 ### Import Element
@@ -137,7 +27,7 @@ In main.js:
 ```javascript
 import Vue from 'vue'
 import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-default/index.css'
+import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 
 Vue.use(ElementUI)
@@ -168,7 +58,7 @@ Then edit .babelrc:
   "plugins": [["component", [
     {
       "libraryName": "element-ui",
-      "styleLibraryName": "theme-default"
+      "styleLibraryName": "theme-chalk"
     }
   ]]]
 }
@@ -194,7 +84,7 @@ new Vue({
 })
 ```
 
-Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/dev/components.json))
+Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/carbon/components.json))
 
 ```javascript
 import Vue from 'vue'
@@ -215,6 +105,7 @@ import {
   RadioGroup,
   RadioButton,
   Checkbox,
+  CheckboxButton,
   CheckboxGroup,
   Switch,
   Select,
@@ -244,19 +135,23 @@ import {
   Col,
   Upload,
   Progress,
-  Spinner,
   Badge,
   Card,
   Rate,
   Steps,
   Step,
   Carousel,
-  Scrollbar,
   CarouselItem,
   Collapse,
   CollapseItem,
   Cascader,
   ColorPicker,
+  Transfer,
+  Container,
+  Header,
+  Aside,
+  Main,
+  Footer,
   Loading,
   MessageBox,
   Message,
@@ -308,19 +203,22 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(Upload)
 Vue.use(Progress)
-Vue.use(Spinner)
 Vue.use(Badge)
 Vue.use(Card)
 Vue.use(Rate)
 Vue.use(Steps)
 Vue.use(Step)
 Vue.use(Carousel)
-Vue.use(Scrollbar)
 Vue.use(CarouselItem)
 Vue.use(Collapse)
 Vue.use(CollapseItem)
 Vue.use(Cascader)
 Vue.use(ColorPicker)
+Vue.use(Container)
+Vue.use(Header)
+Vue.use(Aside)
+Vue.use(Main)
+Vue.use(Footer)
 
 Vue.use(Loading.directive)
 
@@ -333,6 +231,26 @@ Vue.prototype.$notify = Notification
 Vue.prototype.$message = Message
 ```
 
+### Global config
+When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
+
+Fully import Element：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+Vue.use(Element, { size: 'small' })
+```
+
+Partial import Element：
+```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'.
+
 ### Start coding
 
 Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:

examples/docs/en-US/radio.md

@@ -7,7 +7,12 @@
         radio2: 3,
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York',
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   };
@@ -21,11 +26,11 @@ Single selection among multiple options.
 
 Radio should not have too many options. Otherwise, use the Select component instead.
 
-:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String` or `Number`.
+:::demo Creating a radio component is easy, you just need to bind a variable to Radio's `v-model`. It equals to the value of `label` of the chosen radio. The type of `label` is `String`, `Number` or `Boolean`.
 ```html
 <template>
-  <el-radio class="radio" v-model="radio" label="1">optionA</el-radio>
-  <el-radio class="radio" v-model="radio" label="2">optionB</el-radio>
+  <el-radio v-model="radio" label="1">Option A</el-radio>
+  <el-radio v-model="radio" label="2">Option B</el-radio>
 </template>
 
 <script>
@@ -47,8 +52,8 @@ Radio should not have too many options. Otherwise, use the Select component inst
 :::demo You just need to add the `disabled` attribute.
 ```html
 <template>
-  <el-radio disabled v-model="radio1" label="disabled">optionA</el-radio>
-  <el-radio disabled v-model="radio1" label="selected and disabled">optionB</el-radio>
+  <el-radio disabled v-model="radio1" label="disabled">Option A</el-radio>
+  <el-radio disabled v-model="radio1" label="selected and disabled">Option B</el-radio>
 </template>
 
 <script>
@@ -67,13 +72,13 @@ Radio should not have too many options. Otherwise, use the Select component inst
 
 Suitable for choosing from some mutually exclusive options.
 
-:::demo Combine `<el-radio-group>` with `<el-radio>` to display a radio group. Bind a variable with `v-model` of `<el-radio-group>` element and set label value in `<el-radio>`. It also provides `change` event with the current value as its parameter.
+:::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
 ```html
 <el-radio-group v-model="radio2">
-  <el-radio :label="3">optionA</el-radio>
-  <el-radio :label="6">optionB</el-radio>
-  <el-radio :label="9">optionC</el-radio>
+  <el-radio :label="3">Option A</el-radio>
+  <el-radio :label="6">Option B</el-radio>
+  <el-radio :label="9">Option C</el-radio>
 </el-radio-group>
 
 <script>
@@ -92,28 +97,42 @@ Suitable for choosing from some mutually exclusive options.
 
 Radio with button styles.
 
-:::demo You just need to change `<el-radio>` element into `<el-radio-button>` element. We also provide `size` attribute for these buttons: `large` and `small`.
+:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
 ```html
-<el-radio-group v-model="radio3">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio4">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington" :disabled="true"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
-<div style="margin: 15px 0;"></div>
-<el-radio-group v-model="radio5" :disabled="true">
-  <el-radio-button label="New York"></el-radio-button>
-  <el-radio-button label="Washington"></el-radio-button>
-  <el-radio-button label="Los Angeles"></el-radio-button>
-  <el-radio-button label="Chicago"></el-radio-button>
-</el-radio-group>
+<template>
+  <div>
+    <el-radio-group v-model="radio3">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio4" size="medium">
+      <el-radio-button label="New York" ></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio5" size="small">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington" disabled ></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio6" disabled size="mini">
+      <el-radio-button label="New York"></el-radio-button>
+      <el-radio-button label="Washington"></el-radio-button>
+      <el-radio-button label="Los Angeles"></el-radio-button>
+      <el-radio-button label="Chicago"></el-radio-button>
+    </el-radio-group>
+  </div>
+</template>
 
 <script>
   export default {
@@ -121,7 +140,50 @@ Radio with button styles.
       return {
         radio3: 'New York',
         radio4: 'New York',
-        radio5: 'New York'
+        radio5: 'New York',
+        radio6: 'New York'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### With borders
+
+:::demo The `border` attribute adds a border to Radios.
+```html
+<template>
+  <div>
+    <el-radio v-model="radio7" label="1" border>Option A</el-radio>
+    <el-radio v-model="radio7" label="2" border>Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio v-model="radio8" label="1" border size="medium">Option A</el-radio>
+    <el-radio v-model="radio8" label="2" border size="medium">Option B</el-radio>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio9" size="small">
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border disabled>Option B</el-radio>
+    </el-radio-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-radio-group v-model="radio10" size="mini" disabled>
+      <el-radio label="1" border>Option A</el-radio>
+      <el-radio label="2" border>Option B</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio7: '1',
+        radio8: '1',
+        radio9: '1',
+        radio10: '1'
       };
     }
   }
@@ -133,29 +195,37 @@ Radio with button styles.
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number/boolean | — | —
-disabled | whether radio is disabled | boolean | — | false
+label | the value of Radio | string / number / boolean | — | —
+disabled | whether Radio is disabled | boolean | — | false
+border  | whether to add a border around Radio  | boolean   | — | false
+size  | size of the Radio, only works when `border` is true  | string  | medium / small / mini | —
 name | native 'name' attribute | string    |      —         |     —
 
+### Radio Events
+
+| Event Name | Description | Parameters |
+| --- | --- | --- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
+
 ### Radio-group Attributes
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-size | the size of radio buttons | string | large/small | —
-fill  | border and background color when button is active | string   | — | #20a0ff   |
+size | the size of radio buttons or bordered radios | string | medium / small / mini | —
+disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
+fill  | border and background color when button is active | string   | — | #409EFF   |
 
 ### Radio-group Events
 
 | Event Name | Description | Parameters |
---- | --- | ---
-change | triggers when the bound value changes | the label value of the chosen radio
+| --- | --- | --- |
+| change | triggers when the bound value changes | the label value of the chosen radio |
 
 ### Radio-button Attributes
 
  Attribute      | Description          | Type      | Accepted Values       | Default
 ---- | ---- | ---- | ---- | ----
-label | the value of radio | string/number | — | —
+label | the value of radio | string / number | — | —
 disabled | whether radio is disabled | boolean | — | false
-
-
+name | native 'name' attribute | string    |      —         |     —

examples/docs/en-US/rate.md

@@ -3,7 +3,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -128,15 +128,15 @@ You can use different icons to distinguish different rate components.
 
 Read-only Rate is for displaying rating score. Half star is supported.
 
-:::demo Use attribute `disabled` to make the component read-only. Add `show-text` to display the rating score at the right side. Additionally, you can use attribute `text-template` to provide a text template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
+:::demo Use attribute `disabled` to make the component read-only. Add `show-score` to display the rating score at the right side. Additionally, you can use attribute `score-template` to provide a score template. It must contain `{value}`, and `{value}` will be replaced with the rating score.
 
 ``` html
 <el-rate
   v-model="value5"
   disabled
-  show-text
+  show-score
   text-color="#ff9900"
-  text-template="{value} points">
+  score-template="{value} points">
 </el-rate>
 
 <script>
@@ -166,9 +166,10 @@ Read-only Rate is for displaying rating score. Half star is supported.
 | void-icon-class | class name of unselected icons | string | — | el-icon-star-off |
 | disabled-void-icon-class | class name of unselected read-only icons | string | — | el-icon-star-on |
 | show-text | whether to display texts | boolean | — | false |
+| show-score | whether to display current score. show-score and show-text cannot be true at the same time | boolean | — | false |
 | text-color | color of texts | string | — | #1F2D3D |
 | texts | text array | array | — | ['极差', '失望', '一般', '满意', '惊喜'] |
-| text-template | text template when the component is read-only | string | — | {value} |
+| score-template | score template | string | — | {value} |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/en-US/select.md

@@ -530,6 +530,7 @@ Enter keywords and search data from server.
     multiple
     filterable
     remote
+    reserve-keyword
     placeholder="Please enter a keyword"
     :remote-method="remoteMethod"
     :loading="loading">
@@ -662,6 +663,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
 | no-data-text | displayed text when there is no options | string | — | No data |
 | popper-class | custom class name for Select's dropdown | string | — | — |
+| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
 
 ### Select Events
@@ -671,6 +673,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 | remove-tag | triggers when a tag is removed in multiple mode | removed tag value |
 | clear | triggers when the clear icon is clicked in a clearable Select | — |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -685,3 +689,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | label | label of option, same as `value` if omitted | string/number | — | — |
 | disabled | whether option is disabled | boolean | — | false |
 
+### Methods
+| Method | Description | Parameters |
+|------|--------|-------|
+| focus | focus the Input component | - |

examples/docs/en-US/slider.md

@@ -22,6 +22,33 @@
   }
 </script>
 
+<style>
+  .demo-box.demo-slider .source {
+    padding: 0;
+  }
+  
+  .demo-box.demo-slider .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: solid 1px #EFF2F6;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  .demo-box.demo-slider .demonstration {
+    font-size: 14px;
+    color: #8492a6;
+    line-height: 44px;
+  }
+  
+  .demo-box.demo-slider .demonstration + .el-slider {
+    float: right;
+    width: 70%;
+    margin-right: 20px;
+  }
+</style>
+
 ## Slider
 
 Drag the slider within a fixed range.
@@ -209,11 +236,12 @@ Selecting a range of values is supported.
 | show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
 | show-stops | whether to display breakpoints | boolean | — | false |
 | show-tooltip | whether to display tooltip value | boolean | — | true |
-| format-tooltip | format to display tooltip value | Function(value) | — | — |
+| format-tooltip | format to display tooltip value | function(value) | — | — |
 | range | whether to select a range | boolean | — | false |
 | vertical | vertical mode | boolean | — | false |
-| height | Slider height, required in vertical mode | String | — | — |
-|debounce| debounce delay when typing, in millisecond, works when `show-input` is true | number | — | 300 |
+| height | Slider height, required in vertical mode | string | — | — |
+| label | label for screen reader | string | — | — |
+|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
 
 ## Events
 | Event Name | Description | Parameters |

examples/docs/en-US/steps.md

@@ -25,7 +25,7 @@ Simple step bar.
 :::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
 
 ```html
-<el-steps :space="100" :active="active" finish-status="success">
+<el-steps :active="active" finish-status="success">
   <el-step title="Step 1"></el-step>
   <el-step title="Step 2"></el-step>
   <el-step title="Step 3"></el-step>
@@ -58,7 +58,7 @@ Shows the status of the step for each step.
 :::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
 
 ```html
-<el-steps :space="100" :active="1" finish-status="success">
+<el-steps :space="200" :active="1" finish-status="success">
   <el-step title="Done"></el-step>
   <el-step title="Processing"></el-step>
   <el-step title="Step 3"></el-step>
@@ -66,13 +66,28 @@ Shows the status of the step for each step.
 ```
 :::
 
+### Center 
+
+Title and desription can be centered.
+
+:::demo
+```html
+<el-steps :active="2" align-center>
+  <el-step title="Step 1" description="Some description"></el-step>
+  <el-step title="Step 2" description="Some description"></el-step>
+  <el-step title="Step 3" description="Some description"></el-step>
+  <el-step title="Step 4" description="Some description"></el-step>
+</el-steps>
+```
+:::
+
 ### Step bar with description
 
 There is description for each step.
 
 :::demo
 ```html
-<el-steps :space="200" :active="1">
+<el-steps :active="1">
   <el-step title="Step 1" description="Some description"></el-step>
   <el-step title="Step 2" description="Some description"></el-step>
   <el-step title="Step 3" description="Some description"></el-step>
@@ -87,10 +102,10 @@ A variety of custom icons can be used in the step bar.
 :::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
 
 ```html
-<el-steps :space="100" :active="1">
-  <el-step title="Step 1" icon="edit"></el-step>
-  <el-step title="Step 2" icon="upload"></el-step>
-  <el-step title="Step 3" icon="picture"></el-step>
+<el-steps :active="1">
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
 </el-steps>
 ```
 :::
@@ -102,10 +117,32 @@ Vertical step bars.
 :::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
 
 ```html
-<el-steps :space="100" direction="vertical" :active="1">
-  <el-step title="Step 1"></el-step>
-  <el-step title="Step 2"></el-step>
-  <el-step title="Step 3"></el-step>
+<div style="height: 300px;">
+  <el-steps direction="vertical" :active="1">
+    <el-step title="Step 1"></el-step>
+    <el-step title="Step 2"></el-step>
+    <el-step title="Step 3"></el-step>
+  </el-steps>
+</div>
+```
+:::
+
+### Simple step bar
+Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
+
+:::demo
+```html
+
+<el-steps :space="200" :active="1" simple>
+  <el-step title="Step 1" icon="el-icon-edit"></el-step>
+  <el-step title="Step 2" icon="el-icon-upload"></el-step>
+  <el-step title="Step 3" icon="el-icon-picture"></el-step>
+</el-steps>
+
+<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+  <el-step title="Step 1" ></el-step>
+  <el-step title="Step 2" ></el-step>
+  <el-step title="Step 3" ></el-step>
 </el-steps>
 ```
 :::
@@ -114,21 +151,21 @@ Vertical step bars.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — |
+| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
 | direction | display direction | string | vertical/horizontal | horizontal |
 | active | current activation step  | number | — | 0 |
-| process-status | status of current step | string | wait/process/finish/error/success | process |
-| finish-status | status of end step | string | wait/process/finish/error/success | finish |
-| align-center | whether step description is centered | boolean | — | false |
-| center | center whole `Steps` component | boolean | - | false |
+| process-status | status of current step | string | wait / process / finish / error / success | process |
+| finish-status | status of end step | string | wait / process / finish / error / success | finish |
+| align-center | center title and description | boolean | — | false |
+| simple | whether to apply simple theme | boolean | - | false |
 
 ### Step Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | title | step title | string | — | — |
 | description | step description | string | — | — |
-| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
-| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
+| icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
+| status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
 
 ### Step Slot
 | Name | Description |

examples/docs/en-US/switch.md

@@ -12,8 +12,11 @@
       return {
         value1: true,
         value2: true,
-        value3: '100',
-        value4: true
+        value3: true,
+        value4: true,
+        value5: '100',
+        value6: true,
+        value7: false
       }
     }
   };
@@ -24,19 +27,15 @@
 Switch is used for switching between two opposing states.
 
 ### Basic usage
-
-:::demo Bind `v-model` to a `Boolean` typed variable. You can add `on-text` or `off-text` attribute to show texts when the component is `on` or `off`, respectively. The `on-color` and `off-color` attribute decides the background color in two states.
+:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
 
 ```html
-<el-switch
-  v-model="value1"
-  on-text=""
-  off-text="">
+<el-switch v-model="value1">
 </el-switch>
 <el-switch
   v-model="value2"
-  on-color="#13ce66"
-  off-color="#ff4949">
+  active-color="#13ce66"
+  inactive-color="#ff4949">
 </el-switch>
 
 <script>
@@ -52,18 +51,49 @@ Switch is used for switching between two opposing states.
 ```
 :::
 
+### Text description
+:::demo You can add `active-text` and `inactive-text` attribute to show texts.
+
+```html
+<el-switch
+  v-model="value3"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+<el-switch
+  style="display: block"
+  v-model="value4"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+  active-text="Pay by month"
+  inactive-text="Pay by year">
+</el-switch>
+
+<script>
+  export default {
+    data() {
+      return {
+        value3: true,
+        value4: true
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Extended value types
 
-:::demo You can set `on-value` and `off-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
+:::demo You can set `active-value` and `inactive-value` attributes. They both receive a `Boolean`, `String` or `Number` typed value.
 
 ```html
-<el-tooltip :content="'Switch value: ' + value3" placement="top">
+<el-tooltip :content="'Switch value: ' + value5" placement="top">
   <el-switch
-    v-model="value3"
-    on-color="#13ce66"
-    off-color="#ff4949"
-    on-value="100"
-    off-value="0">
+    v-model="value5"
+    active-color="#13ce66"
+    inactive-color="#ff4949"
+    active-value="100"
+    inactive-value="0">
   </el-switch>
 </el-tooltip>
 
@@ -71,7 +101,7 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value3: '100'
+        value5: '100'
       }
     }
   };
@@ -86,13 +116,11 @@ Switch is used for switching between two opposing states.
 
 ```html
 <el-switch
-  v-model="value4"
-  on-text=""
-  off-text=""
+  v-model="value6"
   disabled>
 </el-switch>
 <el-switch
-  v-model="value4"
+  v-model="value7"
   disabled>
 </el-switch>
 
@@ -100,7 +128,8 @@ Switch is used for switching between two opposing states.
   export default {
     data() {
       return {
-        value4: true
+        value6: true,
+        value7: false
       }
     }
   };
@@ -113,22 +142,24 @@ Switch is used for switching between two opposing states.
  Attribute      | Description          | Type      | Accepted Values       | Default
 ----| ----| ----| ----|----
 disabled | whether Switch is disabled | boolean | — | false
-width | width of Switch | number | — | 58 (with text) / 46 (no text)
-on-close-icon | class name of the icon displayed when in `on` state, overrides `on-text` | string | — | —
-off-close-icon |class name of the icon displayed when in `off` state, overrides `off-text`| string | — | —
-on-text | text displayed when in `on` state | string | — | ON
-off-text | text displayed when in `off` state | string | — | OFF
-on-value  | switch value when in `on` state | boolean / string / number | — | true
-off-value  | switch value when in `off` state | boolean / string / number | — | false
-on-color | background color when in `on` state | string | — | #20A0FF
-off-color | background color when in `off` state | string | — | #C0CCDA
-name | input name of Switch | string | — | —
-allow-focus | allow `focus` and `blur` events on the input | boolean | — | false
+width | width of Switch | number | — | 40
+active-icon-class | class name of the icon displayed when in `on` state, overrides `active-text` | string | — | —
+inactive-icon-class |class name of the icon displayed when in `off` state, overrides `inactive-text`| string | — | —
+active-text | text displayed when in `on` state | string | — | —
+inactive-text | text displayed when in `off` state | string | — | —
+active-value  | switch value when in `on` state | boolean / string / number | — | true
+inactive-value  | switch value when in `off` state | boolean / string / number | — | false
+active-color | background color when in `on` state | string | — | #409EFF
+inactive-color | background color when in `off` state | string | — | #C0CCDA
+name| input name of Switch | string | — | —
 
 ### Events
 
  Event Name | Description | Parameters
 ---- | ----| ----
 change | triggers when value changes | value after changing
-blur | triggers on blur (if `allow-focus` is true) | event: Event
-focus | triggers on focus (if `allow-focus` is true) | event: Event
+
+### Methods
+Method | Description | Parameters
+------|--------|-------
+focus | focus the Switch component | —

examples/docs/en-US/table.md

@@ -256,17 +256,47 @@
         return row.tag === value;
       },
 
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       },
 
       deleteRow(index, rows) {
         rows.splice(index, 1);
+      },
+
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      },
+
+      indexMethod(index) {
+        return index * 2;
       }
     },
 
@@ -279,12 +309,12 @@
 </script>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 
   .demo-table .name-wrapper {
@@ -504,23 +534,23 @@ You can highlight your table content to distinguish between "success, informatio
 </template>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 </style>
 
 <script>
   export default {
     methods: {
-      tableRowClassName(row, index) {
-        if (index === 1) {
-          return 'info-row';
-        } else if (index === 3) {
-          return 'positive-row';
+      tableRowClassName({row, rowIndex}) {
+        if (rowIndex === 1) {
+          return 'warning-row';
+        } else if (rowIndex === 3) {
+          return 'success-row';
         }
         return '';
       }
@@ -561,7 +591,6 @@ When there are too many rows, you can use a fixed header.
   <el-table
     :data="tableData3"
     height="250"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -629,7 +658,6 @@ When there are too many columns, you can fix some of them.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       fixed
@@ -666,7 +694,7 @@ When there are too many columns, you can fix some of them.
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button @click="handleClick" type="text" size="small">Detail</el-button>
         <el-button type="text" size="small">Edit</el-button>
       </template>
@@ -732,7 +760,6 @@ When you have huge chunks of data to put in a table, you can fix the header and
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%"
     height="250">
     <el-table-column
@@ -839,7 +866,6 @@ When the the data is dynamically changed, you might want the table to have a max
 <template>
   <el-table
     :data="tableData4"
-    border
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -877,7 +903,7 @@ When the the data is dynamically changed, you might want the table to have a max
       fixed="right"
       label="Operations"
       width="120">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData4)"
           type="text"
@@ -964,7 +990,6 @@ When the data structure is complex, you can use group header to show the data hi
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1150,7 +1175,6 @@ You can also select multiple rows.
   <el-table
     ref="multipleTable"
     :data="tableData3"
-    border
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1160,7 +1184,7 @@ You can also select multiple rows.
     <el-table-column
       label="Date"
       width="120">
-      <template scope="scope">{{ scope.row.date }}</template>
+      <template slot-scope="scope">{{ scope.row.date }}</template>
     </el-table-column>
     <el-table-column
       property="name"
@@ -1244,7 +1268,6 @@ Sort the data to find or compare data quickly.
 <template>
   <el-table
     :data="tableData"
-    border
     :default-sort = "{prop: 'date', order: 'descending'}"
     style="width: 100%">
     <el-table-column
@@ -1308,7 +1331,6 @@ Filter the table to find desired data.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1333,7 +1355,7 @@ Filter the table to find desired data.
       :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
       :filter-method="filterTag"
       filter-placement="bottom-end">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-tag
           :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
           close-transition>{{scope.row.tag}}</el-tag>
@@ -1390,37 +1412,36 @@ Customize table column so it can be integrated with other components.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       label="Date"
       width="180">
-      <template scope="scope">
-        <el-icon name="time"></el-icon>
+      <template slot-scope="scope">
+        <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.date }}</span>
       </template>
     </el-table-column>
     <el-table-column
       label="Name"
       width="180">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-popover trigger="hover" placement="top">
           <p>Name: {{ scope.row.name }}</p>
           <p>Addr: {{ scope.row.address }}</p>
           <div slot="reference" class="name-wrapper">
-            <el-tag>{{ scope.row.name }}</el-tag>
+            <el-tag size="medium">{{ scope.row.name }}</el-tag>
           </div>
         </el-popover>
       </template>
     </el-table-column>
     <el-table-column
       label="Operations">
-      <template scope="scope">
+      <template slot-scope="scope">
         <el-button
-          size="small"
+          size="mini"
           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
         <el-button
-          size="small"
+          size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
       </template>
@@ -1474,7 +1495,7 @@ When the row content is too long and you do not want to display the horizontal s
     :data="tableData3"
     style="width: 100%">
     <el-table-column type="expand">
-      <template scope="props">
+      <template slot-scope="props">
         <p>State: {{ props.row.state }}</p>
         <p>City: {{ props.row.city }}</p>
         <p>Address: {{ props.row.address }}</p>
@@ -1690,20 +1711,245 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 ```
 :::
 
+### Rowspan and 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>
+  <div>
+    <el-table
+      :data="tableData6"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Name">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        sortable
+        label="Amount 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        sortable
+        label="Amount 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        sortable
+        label="Amount 3">
+      </el-table-column>
+    </el-table>
+
+    <el-table
+      :data="tableData6"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px">
+      <el-table-column
+        prop="id"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="Name">
+      </el-table-column>
+      <el-table-column
+        prop="amount1"
+        label="Amount 1">
+      </el-table-column>
+      <el-table-column
+        prop="amount2"
+        label="Amount 2">
+      </el-table-column>
+      <el-table-column
+        prop="amount3"
+        label="Amount 3">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData6: [{
+          id: '12987122',
+          name: 'Tom',
+          amount1: '234',
+          amount2: '3.2',
+          amount3: 10
+        }, {
+          id: '12987123',
+          name: 'Tom',
+          amount1: '165',
+          amount2: '4.43',
+          amount3: 12
+        }, {
+          id: '12987124',
+          name: 'Tom',
+          amount1: '324',
+          amount2: '1.9',
+          amount3: 9
+        }, {
+          id: '12987125',
+          name: 'Tom',
+          amount1: '621',
+          amount2: '2.2',
+          amount3: 17
+        }, {
+          id: '12987126',
+          name: 'Tom',
+          amount1: '539',
+          amount2: '4.1',
+          amount3: 15
+        }]
+      };
+    },
+    methods: {
+      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (rowIndex % 2 === 0) {
+          if (columnIndex === 0) {
+            return [1, 2];
+          } else if (columnIndex === 1) {
+            return [0, 0];
+          }
+        }
+      },
+
+      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          if (rowIndex % 2 === 0) {
+            return {
+              rowspan: 2,
+              colspan: 1
+            };
+          } else {
+            return {
+              rowspan: 0,
+              colspan: 0
+            };
+          }
+        }
+      }
+    }
+  };
+</script>
+```
+:::
+
+### Custom index
+
+You can customize row index in `type=index` columns.
+:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
+
+```html
+<template>
+  <el-table
+    :data="tableData"
+    style="width: 100%">
+    <el-table-column
+      type="index"
+      :index="indexMethod">
+    </el-table-column>
+    <el-table-column
+      prop="date"
+      label="Date"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="name"
+      label="Name"
+      width="180">
+    </el-table-column>
+    <el-table-column
+      prop="address"
+      label="Address">
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
+    methods: {
+      indexMethod(index) {
+        return index * 2;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | table data | array | — | — |
+| data | Table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
 | max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
-| stripe | whether table is striped | boolean | — | false |
-| border | whether table has vertical border | boolean | — | false |
+| stripe | whether Table is striped | boolean | — | false |
+| border | whether Table has vertical border | boolean | — | false |
+| size | size of Table | string | medium / small / mini | — |
 | fit | whether width of column automatically fits its container | boolean | — | true |
-| show-header | whether table header is visible | boolean | — | true |
+| show-header | whether Table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | current-row-key | key of current row, a set only prop | string,number | — | — |
-| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |
-| row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function(row, index)/Object | — | — |
+| row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
+| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
+| cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
+| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
+| header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
+| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
+| header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
+| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
@@ -1713,6 +1959,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 | method that returns rowspan and colspan | Function({ row, column, rowIndex, columnIndex }) | — | — |
 
 ### Table Events
 | Event Name | Description | Parameters |
@@ -1732,24 +1979,28 @@ For table of numbers, you can add an extra row at the table footer displaying ea
 | filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
 | header-dragend | triggers when finish dragging header | newWidth, oldWidth, column, event |
-| expand | triggers when user expands or collapses a row | row, expanded |
+| expand-change | triggers when user expands or collapses a row | row, expandedRows |
 
 ### Table Methods
 | Method | Description | Parameters |
 |------|--------|-------|
 | 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 |
+| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
+| clearSort | clear sorting, restore data to the original order | — |
+| clearFilter | clear filter | — |
 
 ### Table Slot
 | Name | Description |
 |------|--------|
-| append | Contents to be inserted after the last row. It is still nested inside the `<tbody>` tag. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
+| append | Contents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one. |
 
 ### Table-column Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
+| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
 | label | column label | string | — | — |
 | column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
 | prop |  field name. You can also use its alias: `property` | string | — | — |
@@ -1758,7 +2009,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`. Should return a boolean. | 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 |

examples/docs/en-US/tabs.md

@@ -24,7 +24,8 @@
           name: '2',
           content: 'Tab 2 content'
         }],
-        tabIndex: 2
+        tabIndex: 2,
+        tabPosition: 'top'
       }
     },
     methods: {
@@ -174,6 +175,40 @@ Border card tabs.
 
 :::
 
+### Tab position
+
+You can use `tab-position` attribute to set the tab's position.
+
+:::demo You can choose from four directions: `tabPosition="left|right|top|bottom"`
+
+```html
+<template>
+  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
+    <el-radio-button label="top">top</el-radio-button>
+    <el-radio-button label="right">right</el-radio-button>
+    <el-radio-button label="bottom">bottom</el-radio-button>
+    <el-radio-button label="left">left</el-radio-button>
+  </el-radio-group>
+
+  <el-tabs :tab-position="tabPosition" style="height: 200px;">
+    <el-tab-pane label="User">User</el-tab-pane>
+    <el-tab-pane label="Config">Config</el-tab-pane>
+    <el-tab-pane label="Role">Role</el-tab-pane>
+    <el-tab-pane label="Task">Task</el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabPosition: 'top'
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### Custom Tab
 
 You can use named slot to customize the tab label content.
@@ -339,8 +374,8 @@ Only card type Tabs support addable & closeable.
 | closable  | whether Tab is closable | boolean   | — |  false  |
 | addable  | whether Tab is addable   | boolean   | — |  false  |
 | editable  | whether Tab is addable and closable | boolean   | — |  false  |
-| active-name(deprecated)  | name of the selected tab  | string   |  —  |  name of first tab |
 | value  | name of the selected tab  | string   |  —  |  name of first tab |
+| tab-position  | position of tabs | string   |  top/right/bottom/left  |  top |
 
 ### Tabs Events
 | Event Name | Description | Parameters |

examples/docs/en-US/tag.md

@@ -4,11 +4,10 @@
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ],
         dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
         inputVisible: false,
@@ -46,18 +45,14 @@
     }
     .button-new-tag {
       margin-left: 10px;
-      height: 24px;
-      line-height: 22px;
+      height: 32px;
+      line-height: 30px;
       padding: 0 *;
     }
     .input-new-tag {
-      width: 78px;
+      width: 90px;
       margin-left: 10px;
       vertical-align: bottom;
-
-      .el-input__inner {
-        height: 24px;
-      }
     }
   }
 </style>
@@ -72,26 +67,24 @@ Used for marking and selection.
 
 ```html
 <el-tag>Tag One</el-tag>
-<el-tag type="gray">Tag Two</el-tag>
-<el-tag type="primary">Tag Three</el-tag>
-<el-tag type="success">Tag Four</el-tag>
-<el-tag type="warning">Tag Five</el-tag>
-<el-tag type="danger">Tag Six</el-tag>
+<el-tag type="success">Tag Two</el-tag>
+<el-tag type="info">Tag Three</el-tag>
+<el-tag type="warning">Tag Four</el-tag>
+<el-tag type="danger">Tag Five</el-tag>
 ```
 :::
 
 ### Removable Tag
 
-:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
+:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
 
 ```html
 <el-tag
   v-for="tag in tags"
   :key="tag.name"
-  :closable="true"
-  :type="tag.type"
->
-{{tag.name}}
+  closable
+  :type="tag.type">
+  {{tag.name}}
 </el-tag>
 
 <script>
@@ -100,11 +93,10 @@ Used for marking and selection.
       return {
         tags: [
           { name: 'Tag 1', type: '' },
-          { name: 'Tag 2', type: 'gray' },
-          { name: 'Tag 3', type: 'primary' },
-          { name: 'Tag 4', type: 'success' },
-          { name: 'Tag 5', type: 'warning' },
-          { name: 'Tag 6', type: 'danger' }
+          { name: 'Tag 2', type: 'success' },
+          { name: 'Tag 3', type: 'info' },
+          { name: 'Tag 4', type: 'warning' },
+          { name: 'Tag 5', type: 'danger' }
         ]
       };
     }
@@ -122,11 +114,10 @@ You can use the `close` event to add and remove tag dynamically.
 <el-tag
   :key="tag"
   v-for="tag in dynamicTags"
-  :closable="true"
-  :close-transition="false"
-  @close="handleClose(tag)"
->
-{{tag}}
+  closable
+  :disable-transitions="false"
+  @close="handleClose(tag)">
+  {{tag}}
 </el-tag>
 <el-input
   class="input-new-tag"
@@ -139,6 +130,25 @@ You can use the `close` event to add and remove tag dynamically.
 >
 </el-input>
 <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
+
+<style>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .button-new-tag {
+    margin-left: 10px;
+    height: 32px;
+    line-height: 30px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .input-new-tag {
+    width: 90px;
+    margin-left: 10px;
+    vertical-align: bottom;
+  }
+</style>
+
 <script>
   export default {
     data() {
@@ -174,17 +184,32 @@ You can use the `close` event to add and remove tag dynamically.
 ```
 :::
 
+### Sizes
+
+Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
+
+:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+
+```html
+<el-tag>Default</el-tag>
+<el-tag size="medium">Medium</el-tag>
+<el-tag size="small">Small</el-tag>
+<el-tag size="mini">Mini</el-tag>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| type | theme | string | primary/gray/success/warning/danger | — |
-| closable | whether Tab can be removed | boolean | — | false |
-| close-transition | whether to disable animations | boolean | — | false |
+| type | theme | string | success/info/warning/danger | — |
+| closable | whether Tag can be removed | boolean | — | false |
+| disable-transitions | whether to disable animations | boolean | — | false |
 | hit | whether Tag has a highlighted border | boolean | — | false |
-| color | background color of the tag | string | — | — |
+| color | background color of the Tag | string | — | — |
+| size | tag size | string | medium / small / mini | — |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------- |-------- |---------- |
-| close | triggers when Tab is removed | — |
+| close | triggers when Tag is removed | — |

examples/docs/en-US/time-picker.md

@@ -42,7 +42,7 @@ Provide a list of fixed time for users to choose.
 
 Can pick an arbitrary time.
 
-:::demo Use `el-time-picker` label, and you can limit the time range by using `selectableRange`.
+:::demo Use `el-time-picker` label, and you can limit the time range by specifying `selectableRange`. By default, you can scroll the mouse wheel to pick time, alternatively you can use the control arrows when the `arrow-control` attribute is set.
 
 ```html
 <template>
@@ -53,13 +53,22 @@ Can pick an arbitrary time.
     }"
     placeholder="Arbitrary time">
   </el-time-picker>
+  <el-time-picker
+    arrow-control
+    v-model="value3"
+    :picker-options="{
+      selectableRange: '18:30:00 - 20:30:00'
+    }"
+    placeholder="Arbitrary time">
+  </el-time-picker>
 </template>
 
 <script>
   export default {
     data() {
       return {
-        value2: new Date(2016, 9, 10, 18, 40)
+        value2: new Date(2016, 9, 10, 18, 40),
+        value3: new Date(2016, 9, 10, 18, 40)
       };
     }
   }
@@ -112,13 +121,23 @@ If start time is picked at first, then the end time will change accordingly.
 
 Can pick an arbitrary time range.
 
-:::demo We can pick a time range by adding an `is-range` attribute.
+:::demo We can pick a time range by adding an `is-range` attribute. Also, `arrow-control` is supported in range mode.
 ```html
 <template>
   <el-time-picker
     is-range
-    v-model="value3"
-    placeholder="Pick a time range">
+    v-model="value4"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
+  </el-time-picker>
+  <el-time-picker
+    is-range
+    arrow-control
+    v-model="value5"
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
   </el-time-picker>
 </template>
 
@@ -126,7 +145,8 @@ Can pick an arbitrary time range.
   export default {
     data() {
       return {
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
       };
     }
   }
@@ -140,7 +160,9 @@ Can pick an arbitrary time range.
       return {
         value1: '',
         value2: new Date(2016, 9, 10, 18, 40),
-        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value3: new Date(2016, 9, 10, 18, 40),
+        value4: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
+        value5: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
         startTime: '',
         endTime: ''
       };
@@ -154,13 +176,21 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | — | false |
 | editable | whether the input is editable | boolean | — | true |
-| clearable | Whether to show clear button | boolean | — | true |
-| size | size of Input | string | large/small/mini | — |
-| placeholder | placeholder | string | — | — |
-| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
-| align | alignment | left/center/right | left |
+| clearable | whether to show clear button | boolean | — | true |
+| size | size of Input | string | medium / small / mini | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start time in range mode | string | — | — |
+| end-placeholder | placeholder for the end time in range mode | string | — | — |
+| is-range | whether to pick a time range, only works with `<el-time-picker>` | boolean | — | false |
+| arrow-control | whether to pick time using arrow buttons, only works with `<el-time-picker>` | boolean | — | false |
+| value | value of the picker | Date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
+| align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
+| range-separator | range separator | string | - | '-' |
+| default-value | optional, default date of the calendar | Date for TimePicker, string for TimeSelect | anything accepted by `new Date()` for TimePicker, selectable value for TimeSelect | — |
+| value-format | optional, only for TimePicker, format of bounded value | string | hour `HH`, minute `mm`, second `ss` | — |
+| name | same as `name` in native input | string | — | — |
 
 ### Time Select Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -174,12 +204,13 @@ Can pick an arbitrary time range.
 ### Time Picker Options
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
+| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string / array | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 
 
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when input value changes | formatted value |
-
+| change | triggers when user confirms the value | component's bounded value |
+| blur | triggers when Input blurs | (event: Event) |
+| focus | triggers when Input focuses | (event: Event) |

examples/docs/en-US/transfer.md

@@ -1,7 +1,7 @@
 <style>
   .demo-transfer {
     .transfer-footer {
-      margin-left: 20px;
+      margin-left: 15px;
       padding: 6px 5px;
     }
   }
@@ -155,7 +155,7 @@ You can search and filter data items.
 
 You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.
 
-:::demo Use `titles`, `button-texts`, `render-content` and `footer-format` to respectively customize list titles, button texts, render function for data items, checking status texts in list footer. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
+:::demo Use `titles`, `button-texts`, `render-content` and `format` to respectively customize list titles, button texts, render function for data items, checking status texts in list header. For list footer contents, two named slots are provided: `left-footer` and `right-footer`. Plus, if you want some items initially checked, you can use `left-default-checked` and `right-default-checked`. Finally, this example demonstrate the `change` event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
 <template>
   <el-transfer
@@ -166,7 +166,7 @@ You can customize list titles, button texts, render function for data items, che
     :render-content="renderFunc"
     :titles="['Source', 'Target']"
     :button-texts="['To left', 'To right']"
-    :footer-format="{
+    :format="{
       noChecked: '${total}',
       hasChecked: '${checked}/${total}'
     }"
@@ -267,7 +267,7 @@ By default, Transfer looks for `key`, `label` and `disabled` in a data item. If
 | titles | custom list titles | array | — | ['List 1', 'List 2'] |
 | button-texts | custom button texts | array | — | [ ] |
 | render-content | custom render function for data items | function(h, option) | — | — |
-| footer-format | texts for checking status in list footer | object{noChecked, hasChecked} | — | { noChecked: '${total} items', hasChecked: '${checked}/${total} checked' } |
+| format | texts for checking status in list header | object{noChecked, hasChecked} | — | { noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' } |
 | props | prop aliases for data source | object{key, label, disabled} | — | — |
 | left-default-checked | key array of initially checked data items of the left list | array | — | [ ] |
 | right-default-checked | key array of initially checked data items of the right list | array | — | [ ] |

examples/docs/en-US/transition.md

@@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -146,7 +146,7 @@ For collapse effect, use the `el-collapse-transition` component.
 
 ```js
 // fade/zoom
-import 'element-ui/lib/theme-defaut/base.css';
+import 'element-ui/lib/theme-chalk/base.css';
 // collapse
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
 import Vue from 'vue'
@@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;

examples/docs/en-US/tree.md

@@ -137,6 +137,12 @@
     children: 'zones'
   };
 
+  const props1 = {
+    label: 'name',
+    children: 'zones',
+    isLeaf: 'leaf'
+  };
+
   const defaultProps = {
     children: 'children',
     label: 'label'
@@ -185,6 +191,23 @@
           resolve(data);
         }, 500);
       },
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      },
       getCheckedNodes() {
         console.log(this.$refs.tree.getCheckedNodes());
       },
@@ -209,23 +232,30 @@
       resetChecked() {
         this.$refs.tree.setCheckedKeys([]);
       },
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
       renderContent(h, { node, data, store }) {
         return (
-          <span style="white-space: normal">
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       },
@@ -241,9 +271,11 @@
         data,
         data2,
         data3,
+        data4: JSON.parse(JSON.stringify(data2)),
         regions,
         defaultProps,
         props,
+        props1,
         defaultCheckedKeys: [5],
         defaultExpandedKeys: [2, 3],
         filterText: ''
@@ -321,12 +353,11 @@ Basic tree structure.
 
 ### Selectable
 
-Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
+Used for node selection.
 
-::: demo
+::: demo This example also shows how to load node data asynchronously.
 ```html
 <el-tree
-  :data="regions"
   :props="props"
   :load="loadNode"
   lazy
@@ -338,11 +369,6 @@ Used for node selection. In the following example, data for each layer is acquir
   export default {
     data() {
       return {
-        regions: [{
-          'name': 'region1'
-        }, {
-          'name': 'region2'
-        }],
         props: {
           label: 'name',
           children: 'zones'
@@ -393,6 +419,52 @@ Used for node selection. In the following example, data for each layer is acquir
 ```
 :::
 
+### Custom leaf node in lazy mode
+
+::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
+```html
+<el-tree
+  :props="props1"
+  :load="loadNode1"
+  lazy
+  show-checkbox>
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        props1: {
+          label: 'name',
+          children: 'zones',
+          isLeaf: 'leaf'
+        },
+      };
+    },
+    methods: {
+      loadNode1(node, resolve) {
+        if (node.level === 0) {
+          return resolve([{ name: 'region' }]);
+        }
+        if (node.level > 1) return resolve([]);
+
+        setTimeout(() => {
+          const data = [{
+            name: 'leaf',
+            leaf: true
+          }, {
+            name: 'zone'
+          }];
+
+          resolve(data);
+        }, 500);
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Disabled checkbox
 
 The checkbox of a node can be set as disabled.
@@ -616,7 +688,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
 ::: demo Use `render-content` to assign a render function that returns the content of tree nodes. See Vue's documentation for a detailed introduction of render functions. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, `render-content` will work if relevant dependencies are correctly configured.
 ```html
 <el-tree
-  :data="data2"
+  :data="data4"
   :props="defaultProps"
   show-checkbox
   node-key="id"
@@ -631,7 +703,7 @@ The content of tree nodes can be customized, so you can add icons or buttons as
   export default {
     data() {
       return {
-        data2: [{
+        data4: [{
           id: 1,
           label: 'Level one 1',
           children: [{
@@ -674,23 +746,30 @@ The content of tree nodes can be customized, so you can add icons or buttons as
     },
 
     methods: {
-      append(store, data) {
-        store.append({ id: id++, label: 'testtest', children: [] }, data);
+      append(data) {
+        const newChild = { id: id++, label: 'testtest', children: [] };
+        if (!data.children) {
+          this.$set(data, 'children', []);
+        }
+        data.children.push(newChild);
       },
 
-      remove(store, data) {
-        store.remove(data);
+      remove(node, data) {
+        const parent = node.parent;
+        const children = parent.data.children || parent.data;
+        const index = children.findIndex(d => d.id === data.id);
+        children.splice(index, 1);
       },
 
       renderContent(h, { node, data, store }) {
         return (
-          <span>
+          <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
             <span>
               <span>{node.label}</span>
             </span>
-            <span style="float: right; margin-right: 20px">
-              <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
-              <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
+            <span>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }>Append</el-button>
+              <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
             </span>
           </span>);
       }
@@ -859,9 +938,8 @@ Only one node among the same level can be expanded at one time.
 | node-key              | unique identity key name for nodes, its value should be unique across the whole tree | string                      | —               | —       |
 | props                 | configuration options, see the following table | object                      | —               | —       |
 | load                  | method for loading subtree data          | function(node, resolve)     | —               | —       |
-| render-content        | render function for tree node            | Function(h, { node }        | —               | —       |
+| render-content        | render function for tree node            | Function(h, { node, data, store }        | —               | —       |
 | highlight-current     | whether current node is highlighted      | boolean                     | —               | false   |
-| current-node-key      | key of current node, a set only prop     | string, number              | —               | —       |
 | default-expand-all    | whether to expand all nodes by default   | boolean                     | —               | false   |
 | expand-on-click-node  | whether to expand or collapse node when clicking on the node, if false, then expand or collapse node only when clicking on the arrow icon. | —                           | true            |         |
 | auto-expand-parent    | whether to expand father node when a child node is expanded | boolean                     | —               | true    |
@@ -878,18 +956,24 @@ Only one node among the same level can be expanded at one time.
 | --------- | ---------------------------------------- | ------ | --------------- | ------- |
 | label     | specify which key of node object is used as the node's label | string, function(data, node) | —               | —       |
 | children | specify which node object is used as the node's subtree | string, function(data, node) | —               | —       |
-| disabled | specify which key of node object represents if node's checkbox is disabled |  boolean, function(data, node) | —    | —    |
+| disabled | specify which key of node object represents if node's checkbox is disabled | boolean, function(data, node) | —    | —    |
+| isLeaf | specify whether the node is a leaf node | boolean, function(data, node) | —    | —    |
 
 ### Method
 `Tree` has the following method, which returns the currently selected array of nodes.
 | Method          | Description                              | Parameters                               |
 | --------------- | ---------------------------------------- | ---------------------------------------- |
 | filter          | filter all tree nodes, filtered nodes will be hidden | Accept a parameter which will be used as first parameter for filter-node-method |
+| updateKeyChildren | set new data to node, only works when `node-key` is assigned  | (key, data) Accept two parameters: 1. key of node 2. new data |
 | getCheckedNodes | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of nodes | Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setCheckedNodes | set certain nodes to be checked, only works when `node-key` is assigned | an array of nodes to be checked          |
 | getCheckedKeys  | If the node can be selected (`show-checkbox` is `true`), it returns the currently selected array of node's keys | (leafOnly) Accept a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setCheckedKeys  | set certain nodes to be checked, only works when `node-key` is assigned | (keys, leafOnly) Accept two parameters: 1. an array of node's keys to be checked 2. a boolean type parameter whose default value is `false`. If the parameter is `true`, it only returns the currently selected array of sub-nodes. |
 | setChecked      | set node to be checked or not, only works when `node-key` is assigned | (key/data, checked, deep) Accept three parameters: 1. node's key or data to be checked 2. a boolean typed parameter indicating checked or not. 3. a boolean typed parameter indicating deep or not. |
+| getCurrentKey   | return the highlight node's key (null if no node is highlighted) | — |
+| getCurrentNode  | return the highlight node (null if no node is highlighted) | — |
+| setCurrentKey   | set highlighted node by key, only works when `node-key` is assigned | (key) the node's key to be highlighted |
+| setCurrentNode  | set highlighted node, only works when `node-key` is assigned | (node) the node to be highlighted |
 
 ### Events
 | Event Name     | Description                              | Parameters                               |

examples/docs/en-US/upload.md

@@ -19,7 +19,7 @@
         overflow: hidden;
 
         &:hover {
-          border-color: #20a0ff;
+          border-color: #409EFF;
         }
       }
       .avatar-uploader-icon {
@@ -113,6 +113,9 @@
       },
       handleChange(file, fileList) {
         this.fileList3 = fileList.slice(-3);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
       }
     }
   }
@@ -123,13 +126,16 @@ Upload files by clicking or drag-and-drop
 
 ### Click to upload files
 
-:::demo Customize upload button type and text using `slot`.
+:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded.
 ```html
 <el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  multiple
+  :limit="3"
+  :on-exceed="handleExceed"
   :file-list="fileList">
   <el-button size="small" type="primary">Click to upload</el-button>
   <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
@@ -147,6 +153,9 @@ Upload files by clicking or drag-and-drop
       },
       handlePreview(file) {
         console.log(file);
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
       }
     }
   }
@@ -179,7 +188,7 @@ Use `before-upload` hook to limit the upload file format and size.
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
+    border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
@@ -402,11 +411,13 @@ on-progress | hook function when some progress occurs | function(event, file, fi
 on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
-file-list | default uploaded files, e.g. [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}] | array | — | []
+file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
 list-type | type of fileList | string | text/picture/picture-card | text |
 auto-upload | whether to auto upload file | boolean | — | true |
 http-request | override default xhr behavior, allowing you to implement your own upload-file's request | function | — | — |
 disabled | whether to disable upload | boolean | — | false |
+limit | maximum number of uploads allowed | number | — | — |
+on-exceed | hook function when limit is exceeded | function(files, fileList) | — | - |
 
 ### Methods
 | Methods Name | Description | Parameters |

examples/docs/zh-CN/alert.md

@@ -115,6 +115,41 @@
 ```
 :::
 
+### 文字居中
+
+使用 `center` 属性让文字水平居中。
+
+::: demo
+```html
+<template>
+  <el-alert
+    title="成功提示的文案"
+    type="success"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="消息提示的文案"
+    type="info"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="警告提示的文案"
+    type="warning"
+    center
+    show-icon>
+  </el-alert>
+  <el-alert
+    title="错误提示的文案"
+    type="error"
+    center
+    show-icon>
+  </el-alert>
+</template>
+```
+:::
+
 ### 带有辅助性文字介绍
 
 包含标题和内容，解释更详细的警告。
@@ -171,6 +206,7 @@
 | type | 主题 | string | success/warning/info/error | info |
 | description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
 | closable | 是否可关闭 | boolean | — | true |
+| center | 文字是否居中 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
 

examples/docs/zh-CN/badge.md

@@ -98,7 +98,7 @@
 ```html
 <el-badge is-dot class="item">数据查询</el-badge>
 <el-badge is-dot class="item">
-  <el-button class="share-button" icon="share" type="primary"></el-button>
+  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
 </el-badge>
 
 <style>

examples/docs/zh-CN/breadcrumb.md

@@ -17,10 +17,25 @@
 ```
 :::
 
+### 图标分隔符
+
+:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
+
+```html
+<el-breadcrumb separator-class="el-icon-arrow-right">
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+  <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
+</el-breadcrumb>
+```
+:::
+
 ### Breadcrumb Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | — | 斜杠'/' |
+| separator-class | 图标分隔符 class | string | — | - |
 
 ### Breadcrumb Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

examples/docs/zh-CN/button.md

@@ -1,27 +1,3 @@
-<script>
-  import { addClass } from 'element-ui/src/utils/dom';
-  export default {
-    data() {
-      return {
-        isLoading: false,
-        isLoading2: false
-      };
-    },
-    methods: {
-      handleClick(event) {
-        console.log(event);
-        alert('button clicked!');
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        let demos = document.querySelectorAll('.source');
-        let thirdDemo = demos[2];
-        addClass(thirdDemo, 'intro-block');
-      });
-    }
-  }
-</script>
 <style>
   .demo-box.demo-button {
     .el-row {
@@ -42,30 +18,6 @@
       }
     }
   }
-
-  .demo-box.demo-button .intro-block {
-    padding: 0;
-  }
-
-  .demo-button .intro-block .block {
-    padding: 30px 24px;
-    overflow: hidden;
-    border-bottom: solid 1px #EFF2F6;
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  .demo-button .intro-block .demonstration {
-    font-size: 14px;
-    color: #8492a6;
-    line-height: 44px;
-  }
-
-  .demo-button .intro-block .wrapper {
-    float: right;
-    margin-right: 20px;
-  }
 </style>
 
 ## Button 按钮
@@ -75,12 +27,35 @@
 
 基础的按钮用法。
 
-:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
+:::demo 使用`type`、`plain`和`round`属性来定义 Button 的样式。
 
 ```html
-<el-button>默认按钮</el-button>
-<el-button type="primary">主要按钮</el-button>
-<el-button type="text">文字按钮</el-button>
+<div>
+  <el-button>默认按钮</el-button>
+  <el-button type="primary">主要按钮</el-button>
+  <el-button type="success">成功按钮</el-button>
+  <el-button type="info">信息按钮</el-button>
+  <el-button type="warning">警告按钮</el-button>
+  <el-button type="danger">危险按钮</el-button>
+</div>
+
+<div style="margin: 20px 0">
+  <el-button plain>朴素按钮</el-button>
+  <el-button type="primary" plain>主要按钮</el-button>
+  <el-button type="success" plain>成功按钮</el-button>
+  <el-button type="info" plain>信息按钮</el-button>
+  <el-button type="warning" plain>警告按钮</el-button>
+  <el-button type="danger" plain>危险按钮</el-button>
+</div>
+
+<div>
+  <el-button round>圆形按钮</el-button>
+  <el-button type="primary" round>主要按钮</el-button>
+  <el-button type="success" round>成功按钮</el-button>
+  <el-button type="info" round>信息按钮</el-button>
+  <el-button type="warning" round>警告按钮</el-button>
+  <el-button type="danger" round>危险按钮</el-button>
+</div>
 ```
 :::
 
@@ -91,51 +66,48 @@
 :::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
 
 ```html
-<el-button :plain="true" :disabled="true">主要按钮</el-button>
-<el-button type="primary" :disabled="true">主要按钮</el-button>
-<el-button type="text" :disabled="true">文字按钮</el-button>
+<div>
+  <el-button disabled>默认按钮</el-button>
+  <el-button type="primary" disabled>主要按钮</el-button>
+  <el-button type="success" disabled>成功按钮</el-button>
+  <el-button type="info" disabled>信息按钮</el-button>
+  <el-button type="warning" disabled>警告按钮</el-button>
+  <el-button type="danger" disabled>危险按钮</el-button>
+</div>
+
+<div style="margin-top: 20px">
+  <el-button plain disabled>朴素按钮</el-button>
+  <el-button type="primary" plain disabled>主要按钮</el-button>
+  <el-button type="success" plain disabled>成功按钮</el-button>
+  <el-button type="info" plain disabled>信息按钮</el-button>
+  <el-button type="warning" plain disabled>警告按钮</el-button>
+  <el-button type="danger" plain disabled>危险按钮</el-button>
+</div>
 ```
 :::
 
-### 有颜色倾向
+### 文字按钮
 
-不同的颜色倾向代表不同的提示
-
-:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
+没有边框和背景色的按钮。
 
+:::demo
 ```html
-<div class="block">
-  <span class="demonstration">默认显示颜色</span>
-  <span class="wrapper">
-    <el-button type="success">成功按钮</el-button>
-    <el-button type="warning">警告按钮</el-button>
-    <el-button type="danger">危险按钮</el-button>
-    <el-button type="info">信息按钮</el-button>
-  </span>
-</div>
-<div class="block">
-  <span class="demonstration">hover 显示颜色</span>
-  <span class="wrapper">
-    <el-button :plain="true" type="success">成功按钮</el-button>
-    <el-button :plain="true" type="warning">警告按钮</el-button>
-    <el-button :plain="true" type="danger">危险按钮</el-button>
-    <el-button :plain="true" type="info">信息按钮</el-button>
-  </span>
-</div>
+<el-button type="text">文字按钮</el-button>
+<el-button type="text" disabled>文字按钮</el-button>
 ```
 :::
 
 ### 图标按钮
 
-带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
+带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
 
 :::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。
 
 ```html
-<el-button type="primary" icon="edit"></el-button>
-<el-button type="primary" icon="share"></el-button>
-<el-button type="primary" icon="delete"></el-button>
-<el-button type="primary" icon="search">搜索</el-button>
+<el-button type="primary" icon="el-icon-edit"></el-button>
+<el-button type="primary" icon="el-icon-share"></el-button>
+<el-button type="primary" icon="el-icon-delete"></el-button>
+<el-button type="primary" icon="el-icon-search">搜索</el-button>
 <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
 ```
 :::
@@ -148,13 +120,13 @@
 
 ```html
 <el-button-group>
-  <el-button type="primary" icon="arrow-left">上一页</el-button>
+  <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
   <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
 </el-button-group>
 <el-button-group>
-  <el-button type="primary" icon="edit"></el-button>
-  <el-button type="primary" icon="share"></el-button>
-  <el-button type="primary" icon="delete"></el-button>
+  <el-button type="primary" icon="el-icon-edit"></el-button>
+  <el-button type="primary" icon="el-icon-share"></el-button>
+  <el-button type="primary" icon="el-icon-delete"></el-button>
 </el-button-group>
 ```
 :::
@@ -174,24 +146,33 @@
 
 Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
 
-:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
+:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
 
 ```html
-<el-button type="primary" size="large">大型按钮</el-button>
-<el-button type="primary">正常按钮</el-button>
-<el-button type="primary" size="small">小型按钮</el-button>
-<el-button type="primary" size="mini">超小按钮</el-button>
+<div>
+  <el-button>默认按钮</el-button>
+  <el-button size="medium">中等按钮</el-button>
+  <el-button size="small">小型按钮</el-button>
+  <el-button size="mini">超小按钮</el-button>
+</div>
+<div style="margin-top: 20px">
+  <el-button round>默认按钮</el-button>
+  <el-button size="medium" round>中等按钮</el-button>
+  <el-button size="small" round>小型按钮</el-button>
+  <el-button size="mini" round>超小按钮</el-button>
+</div>
 ```
 :::
 
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | 尺寸   | string  |   large,small,mini            |    —     |
-| type     | 类型   | string    |   primary,success,warning,danger,info,text |     —    |
-| plain     | 是否朴素按钮   | Boolean    | — | false   |
-| loading     | 是否加载中状态   | Boolean    | — | false   |
+| size     | 尺寸   | string  |   medium / small / mini            |    —     |
+| type     | 类型   | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | 是否朴素按钮   | boolean    | — | false   |
+| round     | 是否圆形按钮   | boolean    | — | false   |
+| loading     | 是否加载中状态   | boolean    | — | false   |
 | disabled  | 是否禁用状态    | boolean   | —   | false   |
-| icon  | 图标，已有的图标库中的图标名 | string   |  —  |  —  |
+| icon  | 图标类名 | string   |  —  |  —  |
 | autofocus  | 是否默认聚焦 | boolean   |  —  |  false  |
-| native-type | 原生 type 属性 | string | button,submit,reset | button |
+| native-type | 原生 type 属性 | string | button / submit / reset | button |

examples/docs/zh-CN/card.md

@@ -25,7 +25,7 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .button {
@@ -58,8 +58,8 @@
 ```html
 <el-card class="box-card">
   <div slot="header" class="clearfix">
-    <span style="line-height: 36px;">卡片名称</span>
-    <el-button style="float: right;" type="primary">操作按钮</el-button>
+    <span>卡片名称</span>
+    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
   </div>
   <div v-for="o in 4" :key="o" class="text item">
     {{'列表内容 ' + o }}
@@ -72,16 +72,16 @@
   }
 
   .item {
-    padding: 18px 0;
+    margin-bottom: 18px;
   }
 
   .clearfix:before,
   .clearfix:after {
-      display: table;
-      content: "";
+    display: table;
+    content: "";
   }
   .clearfix:after {
-      clear: both
+    clear: both
   }
 
   .box-card {

examples/docs/zh-CN/carousel.md

@@ -15,7 +15,7 @@
     padding: 30px;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {

examples/docs/zh-CN/cascader.md

@@ -263,7 +263,7 @@
     padding: 30px 0;
     text-align: center;
     border-right: solid 1px #EFF2F6;
-    float: left;
+    display: inline-block;
     width: 50%;
     box-sizing: border-box;
     &:last-child {
@@ -1678,7 +1678,8 @@
 | filterable | 是否可搜索选项 | boolean | — | — |
 | debounce | 搜索关键词输入的去抖延迟，毫秒 | number | — | 300 |
 | change-on-select | 是否允许选择任意一级的选项 | boolean | — | false |
-| size | 尺寸 | string | large / small / mini | — |
+| size | 尺寸 | string | medium / small / mini | — |
+| before-filter | 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选 | function(value) | — | — |
 
 ### props
 | 参数     | 说明              | 类型   | 可选值 | 默认值 |
@@ -1687,7 +1688,6 @@
 | label    | 指定选项标签为选项对象的某个属性值 | string | — | — |
 | children | 指定选项的子选项为选项对象的某个属性值 | string | — | — |
 | disabled | 指定选项的禁用为选项对象的某个属性值 | string | — | — |
-| before-filter | 可选参数, 筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选。 | function(value) | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/checkbox.md

@@ -8,6 +8,10 @@
         checked: true,
         checked1: false,
         checked2: true,
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
         isValid: '可用',
         checkAll: false,
         cities: cityOptions,
@@ -15,16 +19,19 @@
         checkedCities1: ['上海', '北京'],
         isIndeterminate: true,
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州']
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
+        checkboxGroup5: [],
+        checkboxGroup6: []
       };
     },
     methods: {
       handleChange(ev) {
         console.log(ev);
       },
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -35,18 +42,6 @@
     }
   };
 </script>
-
-<style>
-  .demo-box.demo-checkbox {
-    .checkbox {
-      margin-right: 5px;
-
-      & + .checkbox {
-        margin-left: 10px;
-      }
-    }
-  }
-</style>
 ## Checkbox 多选框
 一组备选项中进行多选
 
@@ -145,15 +140,15 @@
   export default {
     data() {
       return {
-        checkAll: true,
+        checkAll: false,
         checkedCities: ['上海', '北京'],
         cities: cityOptions,
         isIndeterminate: true
       };
     },
     methods: {
-      handleCheckAllChange(event) {
-        this.checkedCities = event.target.checked ? cityOptions : [];
+      handleCheckAllChange(val) {
+        this.checkedCities = val ? cityOptions : [];
         this.isIndeterminate = false;
       },
       handleCheckedCitiesChange(value) {
@@ -201,21 +196,29 @@
 
 按钮样式的多选组合。
 
-:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性，支持`large`和`small`两种。
+:::demo 只需要把`el-checkbox`元素替换为`el-checkbox-button`元素即可。此外，Element 还提供了`size`属性。
 ```html
 <template>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup1">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup2" size="small">
-    <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '深圳'" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
-  <div style="margin: 15px 0;"></div>
-  <el-checkbox-group v-model="checkboxGroup3" size="large" fill="#324057" text-color="#a4aebd" :min="1" :max="3">
-    <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="checkboxGroup1">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup2" size="medium">
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup3" size="small">
+      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
+      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
+    </el-checkbox-group>
+  </div>
 </template>
 <script>
   const cityOptions = ['上海', '北京', '广州', '深圳'];
@@ -223,38 +226,100 @@
     data () {
       return {
         checkboxGroup1: ['上海'],
-        checkboxGroup2: ['北京'],
-        checkboxGroup3: ['广州'],
+        checkboxGroup2: ['上海'],
+        checkboxGroup3: ['上海'],
+        checkboxGroup4: ['上海'],
         cities: cityOptions
       };
     }
   }
 </script>
 ```
+:::
 
+### 带有边框
+
+:::demo 设置`border`属性可以渲染为带有边框的多选框。
+```html
+<template>
+  <div>
+    <el-checkbox v-model="checked3" label="备选项1" border></el-checkbox>
+    <el-checkbox v-model="checked4" label="备选项2" border></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox v-model="checked5" label="备选项1" border size="medium"></el-checkbox>
+    <el-checkbox v-model="checked6" label="备选项2" border size="medium"></el-checkbox>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup5" size="small">
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border disabled></el-checkbox>
+    </el-checkbox-group>
+  </div>
+  <div style="margin-top: 20px">
+    <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled>
+      <el-checkbox label="备选项1" border></el-checkbox>
+      <el-checkbox label="备选项2" border></el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checked3: true,
+        checked4: false,
+        checked5: false,
+        checked6: true,
+        checkboxGroup5: [],
+        checkboxGroup6: []
+      };
+    }
+  }
+</script>
+```
 :::
 
 ### Checkbox Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string    |       —        |     —    |
-| true-label | 选中时的值   | string, number | — |     —    |
-| false-label | 没有选中时的值   | string, number    |      —         |     —    |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| border  | 是否显示边框  | boolean   | — | false   |
+| size  | Checkbox 的尺寸，仅在 border 为真时有效  | string  | medium / small / mini | — |
 | name | 原生 name 属性 | string    |      —         |     —    |
-| disabled  | 按钮禁用    | boolean   |  — | false   |
 | checked  | 当前是否勾选    | boolean   |  — | false   |
 | indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
+### Checkbox Events
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
 ### Checkbox-group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | Checkbox 按钮组尺寸   | string  | large, small  |    —     |
-| fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
-| text-color  | 按钮激活时的文本颜色    | string   | — | #ffffff   |
+| size     | 多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效   | string  | medium / small / mini  |    —     |
+| disabled  | 是否禁用    | boolean   | — | false   |
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
+| text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |
+| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #409EFF   |
 
-### Checkbox Events
+### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | 当绑定值变化时触发的事件 | event 事件对象 |
+| change  | 当绑定值变化时触发的事件 | 更新后的值 |
+
+### Checkbox-button Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| label     | 选中状态的值（只有在`checkbox-group`或者绑定对象类型为`array`时有效）| string / number / boolean  |       —        |     —    |
+| true-label | 选中时的值   | string / number | — |     —    |
+| false-label | 没有选中时的值   | string / number    |      —         |     —    |
+| disabled  | 是否禁用    | boolean   |  — | false   |
+| name | 原生 name 属性 | string    |      —         |     —    |
+| checked  | 当前是否勾选    | boolean   |  — | false   |