☝️ Breaking Change List

Question

☝️ Breaking Change List

zazzaz opened this issue 4 years ago · comments

zazzaz commented 4 years ago

Here is the list of breaking changes from Element 2.x to Element Plus

This issue is outdated, please see
本 issue 已过时，请查看以下

zazzaz · Answer 1 · Wed Aug 19 2020 17:48:02 GMT+0800 (China Standard Time)

Time Picker

Attributes

Delete picker-options option (Move to top-level options separately)
Delete picker-options.format (Use the only picker format)
Delete picker-options.selectableRange (New selectableRange API )
~~5. Delete value-format option, out-put binding value will always be a Date Object, use dayjs(value).format() instead~~
Add disabledHours(for range picker type start | end) disabledMinutes disabledSeconds APIs

Doc

Update editable description (prevent mobile device virtual keyboard)

6. remove is-range, and export saparate component
TimePicker TimeRangePicker

bastarder · Answer 2 · Thu Aug 20 2020 16:38:21 GMT+0800 (China Standard Time)

Timeline

Attributes

Delete reverse (You should update data to reverse time-line，not bind props reverse)

Jeremy · Answer 3 · Mon Aug 24 2020 14:49:56 GMT+0800 (China Standard Time)

Tooltip

Attributes

popperOptions: since we have replaced the previous version to @popperjs/core v2, the popperOptions are completely different from v1.

--- popper.js parameters
+++ once the user has provided this option, the popper is under the user's control, `Popper` will not initialize `popper` from the default options anymore, all attributes such as `offset` will not be effective

offset

--- default: 0
+++ default: 12

xiaoeyu · Answer 4 · Sat Sep 05 2020 00:11:33 GMT+0800 (China Standard Time)

Popconfirm

Attributes

event onConfirm is replaced by confirm
event onCancel is replaced by cancel

zazzaz · Answer 5 · Mon Sep 14 2020 15:06:25 GMT+0800 (China Standard Time)

Calendar

Attributes

value / v-model Date Object only
range Date Object only, do not have to be start day of week / end day of week
remove first-day-of-week, use Day.js locale instead
slot data add date (JS Date)

Doc

Set Global Day.js locale in Doc site
How to set Day.js locale

zazzaz · Answer 6 · Fri Sep 18 2020 18:38:44 GMT+0800 (China Standard Time)

Date Picker

Attributes

remove first-day-of-week, use Day.js locale instead
Delete picker-options option (Move to top-level options separately)
Add shortcut option, change accepted values [{text, value}]
Add disabledDate option
defaultTime option accept Date object

Doc

Update editable description

6. remove type, and export saparate component
Date(s)Picker(time) - DateRangePicker(time)
MonthPicker - MonthRangePicker
WeekPicker
YearPicker

Herrington Darkholme · Answer 7 · Sat Oct 03 2020 20:16:33 GMT+0800 (China Standard Time)

Form

validate now returns a promise that reject invalidFields instead of a single boolean if no callback is provided.
the library now assumes Promise is always available and users should provide a sensible polyfill if they need ever to support deprecate browsers at all.

zazzaz · Answer 8 · Thu Nov 05 2020 17:05:01 GMT+0800 (China Standard Time)

Locale

Default language English
Locale file name in lower case
setting locale vie Locale-Provider

zazzaz · Answer 9 · Mon Dec 07 2020 15:43:39 GMT+0800 (China Standard Time)

TimePicker

Attributes

Delete picker-options option (Move to top-level options separately)

Edsolater · Answer 10 · Fri Dec 18 2020 16:11:59 GMT+0800 (China Standard Time)

Date Picker

Attributes
1. remove first-day-of-week, use Day.js locale instead

2. Delete picker-options option (Move to top-level options separately)

3. Add shortcut option, change accepted values [{text, value}]

4. Add disabledDate option

5. defaultTime option accept Date object

6. remove `type`, and export saparate component
Date(s)Picker(time) - DateRangePicker(time)
MonthPicker - MonthRangePicker
WeekPicker
YearPicker

Doc

Update editable description

there should be an example about how to set locale on Day.js which may affect element-plus as metioned。

Grubby520 · Answer 11 · Tue Dec 22 2020 10:57:39 GMT+0800 (China Standard Time)

Time Picker

Attributes

Delete picker-options option (Move to top-level options separately)

Delete picker-options.format (Use the only picker format)

Delete picker-options.selectableRange (New selectableRange API )

Delete value-format option, out-put binding value will always be a Date Object

emove is-range, and export saparate component

TimePicker TimeRangePicker

Add disabledHours(for range picker type start | end) disabledMinutes disabledSeconds APIs

Doc

Update editable description (prevent mobile device virtual keyboard)

Attributes “value-format” ，has it been cancelled? how to format values?

on the field of hope · Answer 12 · Tue Dec 22 2020 15:03:39 GMT+0800 (China Standard Time)

Time Picker

Attributes

Delete picker-options option (Move to top-level options separately)

Delete picker-options.format (Use the only picker format)

Delete picker-options.selectableRange (New selectableRange API )

Delete value-format option, out-put binding value will always be a Date Object

emove is-range, and export saparate component

TimePicker TimeRangePicker

Add disabledHours(for range picker type start | end) disabledMinutes disabledSeconds APIs

Doc

Update editable description (prevent mobile device virtual keyboard)

In demo code, there is still 'is-range' and works correctly. It seems that the summary has some mistake. Will there be a comprehensive and accurate migration guide in the near future?

on the field of hope · Answer 13 · Tue Dec 22 2020 15:42:03 GMT+0800 (China Standard Time)

Popconfirm

Attributes

event onConfirm is replaced by confirm

event onCancel is replaced by cancel

there seems does not change.

xiaoeyu · Answer 14 · Tue Dec 22 2020 16:13:46 GMT+0800 (China Standard Time)

yes, just changed the method name

on the field of hope · Answer 15 · Tue Dec 22 2020 17:02:31 GMT+0800 (China Standard Time)

Timeline

Attributes

Delete reverse (You should update data to reverse time-line，not bind props reverse)

can we achieve reverse by judging the vnode type and its children? Anyway, keeping functions stable is good for elementui users

zazzaz · Answer 16 · Wed Dec 23 2020 16:34:42 GMT+0800 (China Standard Time)

In the demo code, there is still 'is-range' and works correctly. It seems that the summary has some mistakes. Will there be a comprehensive and accurate migration guide in the near future?

@attacking The split component plan is canceled and deleted above, cause this will increase a huge bundle size.

zazzaz · Answer 17 · Wed Dec 23 2020 16:35:36 GMT+0800 (China Standard Time)

there should be an example about how to set locale on Day.js which may affect element-plus as metioned。

@edsolater Yes, updated here #1096

Jeremy · Answer 18 · Tue Jan 26 2021 11:38:40 GMT+0800 (China Standard Time)

Since before this PR #1354, the API is kind of confusing, for instance:
show-after indicates when the trigger event occurred, tooltip and popover will appear after show-after time.
But hide-after indicates the tooltip popover should be auto closed after hide-after time.
In this PR we adjust the semantics for hide-after which means after hide-after time the popups should be disappear from the screen. Also a new API auto-close for indicating closing the popups after auto-close time popups right after show event occurred.

So here is the API changes #1354

Tooltip Popover PopConfirm

open-delay changed to show-after
close-delay changed to hide-after
hide-after changed to auto-close

resofevalley · Answer 19 · Tue Feb 02 2021 11:46:14 GMT+0800 (China Standard Time)

[Vue warn]: Failed to resolve component: el-affix

Jeremy · Answer 20 · Tue Feb 02 2021 11:53:11 GMT+0800 (China Standard Time)

[Vue warn]: Failed to resolve component: el-affix

Please DO NOT REPORT ISSUES HERE, open an individual one with specific description, thank you very much.

iamkun · Answer 21 · Tue Jun 08 2021 12:36:25 GMT+0800 (China Standard Time)

Dialog

1. visible change to v-model

云游君 · Answer 22 · Mon Jul 12 2021 22:10:37 GMT+0800 (China Standard Time)

Theme-chalk

add $--colors as root color map
$--color-primary-light-1 change to
- sass: map.get($--colors, 'primary', 'light-1')
- css: var(--el-color-primary-light-1)

Similar $--color-success-light / $--color-warning-lighter.

#2504

kooriookami · Answer 23 · Wed Jul 14 2021 14:40:24 GMT+0800 (China Standard Time)

Form

float layout changed to flex layout.

Row

float layout changed to flex layout.
Remove prop type="flex".

Jeremy · Answer 24 · Wed Aug 25 2021 14:57:47 GMT+0800 (China Standard Time)

Theme-chalk

-background-color -> -bg-color
-font-color -> -text-color

Example:

$--button-font-color will change to $--button-text-color
$--button-background-color will change to $--button-bg-color

Similiar to tailwindcss

Kevin Deng 三咲智子 · Answer 27 · Thu Oct 28 2021 07:05:57 GMT+0800 (China Standard Time)

Build

#4018

Remove packages in npm
For webpack 4, please refer to vueuse/vueuse#718 (comment)
/index must be added to the end of path like element-plus/es/components/button/style -> element-plus/es/components/button/style/index

#4058

Remove ResizeObserver polyfill.

Jeremy · Answer 28 · Thu Oct 28 2021 09:23:58 GMT+0800 (China Standard Time)

cc @adaex @YunYouJun Could you guys please add the breaking change for icon-font in here?

Aex · Answer 29 · Thu Oct 28 2021 12:52:24 GMT+0800 (China Standard Time)

Deprecation of FontIcon

Font Icon was replaced with Inline Vue SVG component. #3492

Before

<template>
  <el-button type="primary" icon="el-icon-search">Search</el-button>
</template>

After

After this change, you can use the icon attribute to add icon. You can pass either string for the component name (registered in advance) or the component itself which is a SVG Vue component. Element Plus has provided a set of icon that you can find at icon.

<script setup lang="ts">
import { Search } from '@element-plus/icons'
</script>
<template>
  <el-button type="primary" :icon="Search">Search</el-button>
</template>

You can pass down a Vue component for getting one of your desired icon, it dramatically increased the scalability for all components with icons, you can also apply actions to your Vue component, for example:

<script setup>
import { MyIcon } from 'some/icon/lib'
</script>
<template>
  <el-button :icon="MyIcon"></el-button>
</template>

You can checkout the table below to know the API changes

Component Name	API before change	API after change
Avatar	icon (string)	icon (string / Component)
Button	icon (string)	icon (string / Component)
DatePicker	prefix-icon (string)	prefix-icon (string / Component)
DatePicker	clear-icon (string)	clear-icon (string / Component)
Input	prefix-icon (string)	prefix-icon (string / Component)
Input	suffix-icon (string)	suffix-icon (string / Component)
MessageBox	icon-class (string)	icon (string / Component)
Message	icon-class (string)	icon (string / Component)
Notification	icon-class (string)	icon (string / Component)
PageHeader	icon (string)	icon (string / Component)
Select	clear-icon (string)	clear-icon (string / Component)
VirtualizedSelect	clear-icon (string)	clear-icon (string / Component)
TimePicker	prefix-icon (string)	prefix-icon (string / Component)
TimePicker	clear-icon (string)	clear-icon (string / Component)
TimeSelect	prefix-icon (string)	prefix-icon (string / Component)
TimeSelect	clear-icon (string)	clear-icon (string / Component)
Timeline	icon (string)	icon (string / Component)
Tree	icon-class (string)	icon (string / Component)

You can find more #4060.

Kevin Deng 三咲智子 · Answer 30 · Mon Jan 24 2022 07:17:20 GMT+0800 (China Standard Time)

移除全局配置 app.config.globalProperties.$ELEMENT | Remove global config app.config.globalProperties.$ELEMENT #4793

关于 app.config.globalProperties.$ELEMENT，也是从 Element UI 遗留下来的代码。使用 Vue 3 建议使用 inject 的方式去传递全局配置。新方式支持配置 reactive 可变。

About app.config.globalProperties.$ELEMENT, it is also the code left over from Element UI. With Vue 3, it is recommended to use inject to pass the global configuration. The new way supports reactive configuration.

Kevin Deng 三咲智子 · Answer 31 · Wed Jan 26 2022 20:24:17 GMT+0800 (China Standard Time)

This issue is outdated, please see

☝️ Breaking Change List

Time Picker

Attributes

Doc

Timeline

Attributes

Tooltip

Attributes

Popconfirm

Attributes

Calendar

Attributes

Doc

Date Picker

Attributes

Doc

Form

Locale

TimePicker

Attributes

Date Picker

Attributes

Doc

Time Picker

Attributes

Doc

Time Picker

Attributes

Doc

Popconfirm

Attributes

Timeline

Attributes

Tooltip Popover PopConfirm

Dialog

Theme-chalk

Form

Row

Menu

Menu

Theme-chalk

Build

Deprecation of FontIcon

Before

After