Skip to content

Commit cd2728a

Browse files
warmthseawarmthsea
authored
Revert "feat(components): [alert] add open and auto-close functionality with delay (element-plus#20533,element-plus#22028)" (element-plus#22560)
* Revert "fix(components): [alert] show immediately when `showAfter` not needed (element-plus#22028)" This reverts commit 229a0a1. * Revert "feat(components): [alert] add open and auto-close functionality with delays (element-plus#20533)" * chore: update deprecated * docs: update remark
1 parent 8e5f8b7 commit cd2728a

File tree

5 files changed

+44
-142
lines changed

5 files changed

+44
-142
lines changed

‎docs/en-US/component/alert.md‎

Lines changed: 17 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -75,38 +75,30 @@ alert/icon-description
7575

7676
:::
7777

78-
## With Delayed Attributes ^(2.10.0)
79-
80-
:::demo At last, this is an example with delayed attributes.
81-
82-
alert/delayed
83-
84-
:::
85-
8678
## Alert API
8779

8880
### Attributes
8981

90-
| Name | Description | Type | Default |
91-
| -------------------- | ---------------------------------------- | -------------------------------------------------------------------------- | ------- |
92-
| title | alert title. | ^[string] | — |
93-
| type | alert type. | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error'` | info |
94-
| description | descriptive text. | ^[string] | — |
95-
| closable | whether alert can be dismissed. | ^[boolean] | true |
96-
| center | whether content is placed in the center. | ^[boolean] | false |
97-
| close-text | customized close button text. | ^[string] | — |
98-
| show-icon | whether a type icon is displayed. | ^[boolean] | false |
99-
| effect | theme style. | ^[enum]`'light' \| 'dark'` | light |
100-
| show-after ^(2.10.0) | delay of appearance, in millisecond | ^[number] | 0 |
101-
| hide-after ^(2.10.0) | delay of disappear, in millisecond | ^[number] | 200 |
102-
| auto-close ^(2.10.0) | timeout in milliseconds to hide alert | ^[number] | 0 |
82+
| Name | Description | Type | Default |
83+
| ---------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | ------- |
84+
| title | alert title. | ^[string] | — |
85+
| type | alert type. | ^[enum]`'primary' (2.9.11) \| 'success' \| 'warning' \| 'info' \| 'error' ` | info |
86+
| description | descriptive text. | ^[string] | — |
87+
| closable | whether alert can be dismissed. | ^[boolean] | true |
88+
| center | whether content is placed in the center. | ^[boolean] | false |
89+
| close-text | customized close button text. | ^[string] | — |
90+
| show-icon | whether a type icon is displayed. | ^[boolean] | false |
91+
| effect | theme style. | ^[enum]`'light' \| 'dark'` | light |
92+
| show-after ^(2.10.0) ^(deprecated) | delay of appearance, in millisecond | ^[number] | 0 |
93+
| hide-after ^(2.10.0) ^(deprecated) | delay of disappear, in millisecond | ^[number] | 200 |
94+
| auto-close ^(2.10.0) ^(deprecated) | timeout in milliseconds to hide alert | ^[number] | 0 |
10395

10496
### Events
10597

106-
| Name | Description | Type |
107-
| -------------- | ----------------------------- | ------------------------------------ |
108-
| open ^(2.10.0) | trigger when alert is opened. | ^[Function]`() => void` |
109-
| close | trigger when alert is closed. | ^[Function]`(event?: Event) => void` |
98+
| Name | Description | Type |
99+
| --------------------------- | ----------------------------- | ---------------------------------------- |
100+
| close | trigger when alert is closed. | ^[Function]`(event: MouseEvent) => void` |
101+
| open ^(2.10.0)^(deprecated) | trigger when alert is opened. | ^[Function]`() => void` |
110102

111103
### Slots
112104

‎docs/examples/alert/delayed.vue‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎packages/components/alert/__tests__/alert.test.tsx‎

Lines changed: 1 addition & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { mount } from '@vue/test-utils'
2-
import { describe, expect, test, vi } from 'vitest'
2+
import { describe, expect, test } from 'vitest'
33
import { TypeComponentsMap } from '@element-plus/utils'
4-
import { rAF } from '@element-plus/test-utils/tick'
54
import Alert from '../src/alert.vue'
65

76
const AXIOM = 'Rem is the best girl'
@@ -51,53 +50,4 @@ describe('Alert.vue', () => {
5150
await closeBtn.trigger('click')
5251
expect(wrapper.emitted()).toBeDefined()
5352
})
54-
55-
test('should delay of appearance', () => {
56-
vi.useFakeTimers()
57-
const onOpen = vi.fn()
58-
mount(<Alert title={AXIOM} showAfter={100} onOpen={onOpen} />)
59-
60-
expect(onOpen).toHaveBeenCalledTimes(0)
61-
vi.advanceTimersByTime(100)
62-
expect(onOpen).toHaveBeenCalledTimes(1)
63-
vi.useRealTimers()
64-
})
65-
66-
test('should delay of disappear', () => {
67-
vi.useFakeTimers()
68-
const onClose = vi.fn()
69-
const wrapper = mount(
70-
<Alert title={AXIOM} hideAfter={100} onClose={onClose} />
71-
)
72-
73-
expect(onClose).toHaveBeenCalledTimes(0)
74-
wrapper.vm.onClose()
75-
vi.advanceTimersByTime(100)
76-
expect(onClose).toHaveBeenCalledTimes(1)
77-
vi.useRealTimers()
78-
})
79-
80-
test('should disappear automatically', () => {
81-
vi.useFakeTimers()
82-
const onClose = vi.fn()
83-
mount(<Alert title={AXIOM} autoClose={100} onClose={onClose} />)
84-
85-
expect(onClose).toHaveBeenCalledTimes(0)
86-
vi.advanceTimersByTime(100)
87-
expect(onClose).toHaveBeenCalledTimes(1)
88-
vi.useRealTimers()
89-
})
90-
91-
test('should open immediately when not using show-after, issue #22012', async () => {
92-
const wrapper = mount(<Alert title={AXIOM} style={{ display: 'none' }} />)
93-
94-
expect(wrapper.vm.visible).toBeTruthy()
95-
expect(wrapper.find('.el-alert').attributes('style')).toContain(
96-
'display: none'
97-
)
98-
await rAF()
99-
expect(wrapper.find('.el-alert').attributes('style')).toContain(
100-
'display: none'
101-
)
102-
})
10353
})

‎packages/components/alert/src/alert.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import { useDelayedToggleProps } from '@element-plus/hooks'
2-
import {
3-
TypeComponentsMap,
4-
buildProps,
5-
isUndefined,
6-
keysOf,
7-
} from '@element-plus/utils'
1+
import { TypeComponentsMap, buildProps, keysOf } from '@element-plus/utils'
82

93
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'
104

@@ -57,17 +51,26 @@ export const alertProps = buildProps({
5751
values: alertEffects,
5852
default: 'light',
5953
},
60-
...useDelayedToggleProps,
6154
/**
62-
* @description delay of appearance, in millisecond
55+
* @deprecated Removed after 2.11.8.
56+
* @description delay of appearance, in millisecond, not valid in controlled mode
6357
*/
6458
showAfter: Number,
59+
/**
60+
* @deprecated Removed after 2.11.8.
61+
* @description delay of disappear, in millisecond, not valid in controlled mode
62+
*/
63+
hideAfter: Number,
64+
/**
65+
* @deprecated Removed after 2.11.8.
66+
* @description disappear automatically, in millisecond, not valid in controlled mode
67+
*/
68+
autoClose: Number,
6569
} as const)
6670
export type AlertProps = ExtractPropTypes<typeof alertProps>
6771
export type AlertPropsPublic = __ExtractPublicPropTypes<typeof alertProps>
6872

6973
export const alertEmits = {
70-
open: () => true,
71-
close: (evt?: Event) => isUndefined(evt) || evt instanceof Event,
74+
close: (evt: MouseEvent) => evt instanceof MouseEvent,
7275
}
7376
export type AlertEmits = typeof alertEmits

‎packages/components/alert/src/alert.vue‎

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
>
3535
{{ closeText }}
3636
</div>
37-
<el-icon v-else :class="ns.e('close-btn')" @click="onClose">
37+
<el-icon v-else :class="ns.e('close-btn')" @click="close">
3838
<Close />
3939
</el-icon>
4040
</template>
@@ -44,15 +44,14 @@
4444
</template>
4545

4646
<script lang="ts" setup>
47-
import { computed, ref, toRef, useSlots } from 'vue'
47+
import { computed, ref, useSlots } from 'vue'
4848
import { ElIcon } from '@element-plus/components/icon'
4949
import {
5050
TypeComponents,
5151
TypeComponentsMap,
52-
isClient,
53-
isUndefined,
52+
debugWarn,
5453
} from '@element-plus/utils'
55-
import { useDelayedToggle, useNamespace } from '@element-plus/hooks'
54+
import { useNamespace } from '@element-plus/hooks'
5655
import { alertEmits, alertProps } from './alert'
5756
5857
const { Close } = TypeComponents
@@ -67,31 +66,21 @@ const slots = useSlots()
6766
6867
const ns = useNamespace('alert')
6968
70-
const visible = ref(isUndefined(props.showAfter))
69+
const visible = ref(true)
7170
7271
const iconComponent = computed(() => TypeComponentsMap[props.type])
7372
7473
const hasDesc = computed(() => !!(props.description || slots.default))
7574
76-
const open = () => {
77-
visible.value = true
78-
emit('open')
79-
}
80-
81-
const close = (event?: Event) => {
75+
const close = (evt: MouseEvent) => {
8276
visible.value = false
83-
emit('close', event)
77+
emit('close', evt)
8478
}
8579
86-
const { onOpen, onClose } = useDelayedToggle({
87-
showAfter: toRef(props, 'showAfter', 0),
88-
hideAfter: toRef(props, 'hideAfter'),
89-
autoClose: toRef(props, 'autoClose'),
90-
open,
91-
close,
92-
})
93-
94-
if (isClient) {
95-
onOpen()
80+
if (props.showAfter || props.hideAfter || props.autoClose) {
81+
debugWarn(
82+
'el-alert',
83+
'The `show-after`, `hide-after`, and `auto-close` attributes were removed after 2.11.8. Please use `v-if` and `v-show` to manually replace them, visit: https://github.com/element-plus/element-plus/pull/22560'
84+
)
9685
}
9786
</script>

0 commit comments

Comments
 (0)