2017-10-28
- Fixed style error of RadioButton and CheckboxButton, #7793
- Fixed TimePicker not respond to mouse scroll in some conditions, #7811
- Fixed incomplete styles of some components when imported on demand, #7811
2017-10-27
- General
- A new theme:
theme-chalk
- Accessibility of the following components are improved: Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload
- Added TypeScript typings
- All existing icons are redesigned. Some new icons are added
- Added a series of breakpoint-based utility classes that hide elements when the viewport size meets certain conditions
- Added layout components: Container, Header, Aside, Main, Footer
- Now you can configure component sizes globally. When importing Element, you can add a global config object with a
size
prop to configure default sizes for all components.
- A new theme:
- Button
- Added
round
attribute. It's used for round-cornered Buttons #6643
- Added
- TimeSelect
- Now can be navigated by
Up
andDown
, and hittingEnter
selects the time #6023
- Now can be navigated by
- TimePicker
- Now can be navigated by arrow keys, and hitting
Enter
selects the time #6050 - Added
start-placeholder
andend-placeholder
. They're placeholders for the two input boxes in range mode #7169 - Added
arrow-control
attribute to spin the time with arrows #7438
- Now can be navigated by arrow keys, and hitting
- 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 inlazy
mode #6235
- Tag
- Added
size
attribute #7203
- Added
- Datepicker
- Now
timeFormat
can format the TimePicker when type is set todatetimerange
#6052 - Added
start-placeholder
andend-placeholder
. They're placeholders for the two input boxes in range mode #7169 - Added
value-format
attribute to customize the format of the binding value, #7367 - Added
unlink-panels
attribute to unlink the two date panels when selecting a date range
- Now
- MessageBox
- Added
closeOnHashChange
attribute #6043 - Added
center
attribute so that the content can be centered #7029 - Added
roundButton
attribute to display round Buttons #7029 - Added
dangerouslyUseHTMLString
attribute. When set totrue
,message
will be parsed as HTML string* #6043 - Added
inputType
attribute to assign type for the inner input box, #7651
- Added
- 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
- Added
- ColorPicker
- Now you can type colors in the input box #6167
- Added
size
anddisabled
attributes #7026 - Added
popper-class
attribute #7351
- Message
- Now color of the icons can be overridden by CSS #6207
- Added
dangerouslyUseHTMLString
attribute. When set totrue
,message
will be parsed as HTML string* #6207 - Added
center
attribute so that the content can be centered #6875
- Notification
- Added
position
attribute to configure where Notification pops up #6231 - Added
dangerouslyUseHTMLString
attribute. When set totrue
,message
will be parsed as HTML string* #6231 - Added
showClose
attribute to hide the close button #6402
- Added
- Rate
- Added
show-score
attribute to determine if current score is displayed #6295
- Added
- Tabs
- Added
tab-position
attribute #6096
- Added
- Radio
- Added
border
andsize
attributes #6690
- Added
- Checkbox
- Added
border
andsize
attributes #6690
- Added
- Alert
- Added
center
attribute so that the content can be centered #6876
- Added
- Menu
- Added
background-color
,text-color
andactive-text-color
attributes #7064 - Added
open
andclose
methods to open and close SubMenu programmatically, #7412
- Added
- Form
- Added
inline-message
attribute to determine if the validation message is displayed in inline style #7032 - Added
status-icon
attribute to display a feedback icon when validated #7032 - Form and FormItem now have a
size
attribute. Inner components will inherit this size if not specified on themselves, #7428 validate
method will now return a promise if the callback is omitted, #7405- Added
clearValidate
method for clearing validating results for all form items, #7623
- Added
- Input
- Added
suffix
andprefix
named slots,suffixIcon
andprefixIcon
attributes to add contents inside the input box #7032
- Added
- Breadcrumb
- Added
separator-class
attribute to support icons as item separators #7203
- Added
- Steps
- Added
simple
attribute to activate simple-styled Steps #7274
- Added
- Pagination
- Added
prev-text
andnext-text
attributes to customize texts of previous page and next page #7005
- Added
- Loading
- Now you can customize spinner icon and background color with
spinner
andbackground
prop, #7390
- Now you can customize spinner icon and background color with
- Autocomplete
- Added
debounce
attribute, #7413
- Added
- Upload
- Added
limit
andon-exceed
attributes to limit the amount of files, #7405
- Added
- DateTimePicker
- Added
time-arrow-control
attribute to activatearrow-control
of the nesting TimePicker, #7438
- Added
- Layout
- Added a new breakpoint
xl
for viewport wider than 1920px
- Added a new breakpoint
- Table
- Added
span-method
attribute for merging cells - Added
clearSort
method to clear sorting programmatically - Added
clearFilter
method to clear filter programmatically - For expandable rows, when a row is expanded, a
.expanded
class will be added to its class list, so that you can customize its style - Added
size
attribute - Added
toggleRowExpansion
method to expand or collapse expandable rows programmatically - Added
cell-class-name
attribute to assign class name for cells - 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 acceptsobject[key]
notations - Added
index
attribute for TableColumn to customize row indices
- Added
- Select
- Added
reserve-keyword
attribute for reserving current search keyword after selecting an option
- Added
- 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
- Fixed
- 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
- Fixed
- Dialog
- Fixed texts having blurry edges when opening and closing nesting dropdowns #6088
- Select
- Improved performance. Now Vue dev-tool won't crash when a large number of Selects are destroyed #6151
- Table
- Fixed a bug that Table remains hiding when its parent element appears from
display: none
- Fixed Table expanding its width when its parent element has
display: flex
- Fixed a bug that fixed columns of a Table with
append
slot would disappear when data is dynamically fetched - Fixed
expand-row-keys
attribute not working with initial value - Fixed filter failing when
data
updates - Fixed a calculation error of fixed columns layout with grouped headers
- Fixed a dynamic
max-height
bug - Fixed some style calculation errors
- Fixed a bug that Table remains hiding when its parent element appears from
- General
- Removed
theme-default
- Compatible with Vue 2.5.2+ and IE 10+
change
event of form components andcurrent-change
event of Pagination now only trigger on user interactionsize
attribute of Button and form components now acceptmedium
,small
andmini
- To facilitate the use of third-party icons,
icon
attribute of Button and Steps,prefix-icon
andsuffix-icon
attributes of Input now require a full class name
- Removed
- Dialog
- Removed
size
attribute. Now the size of Dialog can be configured bywidth
andfullscreen
- Now the visibility of Dialog cannot be controlled by
v-model
- Removed
- Rate
text-template
is renamed toscore-template
- Dropdown
menu-align
is renamed toplacement
. Now it supports more positions
- Transfer
footer-format
is renamed toformat
- Switch
- Attributes starting with
on-*
will be parsed to events in JSX, making allon-*
attributes of Switch not able to work in JSX. Soon-*
attributes are renamed toactive-*
, and accordinglyoff-*
attributes are renamed toinactive-*
. This change affects the following attributes:on-icon-class
,off-icon-class
,on-text
,off-text
,on-color
,off-color
,on-value
,off-value
active-text
andinactive-text
attributes now don't have default values
- Attributes starting with
- Tag
type
attribute now acceptssuccess
,info
,warning
anddanger
- Menu
- Removed
theme
attribute. The color of Menu can be configured usingbackground-color
,text-color
andactive-text-color
- Removed
- Input
- Removed
icon
attribute. Now the suffix icon can be configured usingsuffix-icon
attribute orsuffix
named slot - Removed
on-icon-click
attribute andclick
event. Now to add click handler on icons, please use named slots change
event now behaves like the native input element, which triggers only on blur or pressing enter. If you need to respond to user input in real time, you can useinput
event.
- Removed
- Autocomplete
- Removed
custom-item
attribute. Now the template of input suggestions can be customized usingscoped slot
- Removed
props
attribute. Now you can usevalue-key
attribute to designate key name of the input suggestion object for display
- Removed
- Steps
- Removed
center
attribute - Now the Steps will fill its parent container by default
- Removed
- DatePicker
- The params of DatePicker's
change
event is now the binding value itself. Its format is controlled byvalue-format
- The params of DatePicker's
- Table
- Removed support for customizing column template using
inline-template
sort-method
now aligns withArray.sort
. It should return a number instead of a booleanappend
slot is moved outside thetbody
element to avoid multiple renderingexpand
event is renamed toexpand-change
- The params of
row-class-name
androw-style
method is now an object
- Removed support for customizing column template using
* Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks. So when dangerouslyUseHTMLString
is on, please make sure the content of message
is trusted, and never assign message
to user-provided content.