Skip to content

Commit 7b4003d

Browse files
mrholekmrholek
committed
refactor(CToast): update transitions
1 parent e07b767 commit 7b4003d

File tree

3 files changed

+63
-89
lines changed

3 files changed

+63
-89
lines changed

‎packages/coreui-vue/src/components/toast/CToast.ts

+45-68
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue'
2-
3-
import { executeAfterTransition } from '../../utils/transition'
1+
import { defineComponent, h, onMounted, provide, ref, Transition } from 'vue'
42

53
import { Color } from '../props'
64

@@ -45,10 +43,7 @@ const CToast = defineComponent({
4543
/**
4644
* Toggle the visibility of component.
4745
*/
48-
visible: {
49-
type: Boolean,
50-
default: true,
51-
},
46+
visible: Boolean,
5247
},
5348
emits: [
5449
/**
@@ -61,51 +56,23 @@ const CToast = defineComponent({
6156
'show',
6257
],
6358
setup(props, { slots, emit }) {
64-
const visible = ref(props.visible)
65-
let timeout = 0
66-
67-
const updateVisible = (v: boolean) => {
68-
visible.value = v
69-
}
70-
provide('updateVisible', updateVisible)
59+
const timeout = ref(0)
60+
const visible = ref()
7161

72-
const handleBeforeEnter = (el: RendererElement) => {
73-
el.classList.add('showing')
62+
const updateVisible = (_visible: boolean) => {
63+
visible.value = _visible
7464
}
7565

76-
const handleEnter = (el: RendererElement, done: () => void) => {
77-
executeAfterTransition(() => done(), el as HTMLElement)
78-
el.classList.add('show')
79-
setTimeout(() => {
80-
el.classList.remove('showing')
81-
}, 1)
82-
83-
if (props.index) {
84-
emit('show', props.index)
85-
} else {
86-
emit('show')
87-
}
88-
}
89-
90-
const handleLeave = (el: RendererElement, done: () => void) => {
91-
executeAfterTransition(() => done(), el as HTMLElement)
92-
el.classList.add('showing')
93-
}
94-
95-
const handleAfterLeave = (el: RendererElement) => {
96-
el.classList.remove('show')
97-
el.classList.add('hide')
98-
if (props.index) {
99-
emit('close', props.index)
100-
} else {
101-
emit('close')
102-
}
103-
}
66+
provide('updateVisible', updateVisible)
10467

10568
onMounted(() => {
69+
if (props.visible) {
70+
visible.value = props.visible
71+
}
72+
10673
if (props.autohide) {
107-
clearTimeout(timeout)
108-
timeout = window.setTimeout(() => {
74+
clearTimeout(timeout.value)
75+
timeout.value = window.setTimeout(() => {
10976
visible.value = false
11077
emit('close')
11178
}, props.delay)
@@ -117,29 +84,39 @@ const CToast = defineComponent({
11784
Transition,
11885
{
11986
appear: true,
120-
onBeforeEnter: (el) => handleBeforeEnter(el),
121-
onEnter: (el, done) => handleEnter(el, done),
122-
onLeave: (el, done) => handleLeave(el, done),
123-
onAfterLeave: (el) => handleAfterLeave(el),
87+
enterFromClass: '',
88+
enterActiveClass: 'show showing',
89+
enterToClass: 'show',
90+
leaveFromClass: 'show',
91+
leaveActiveClass: 'show showing',
92+
leaveToClass: 'show',
93+
onAfterEnter: (el) => {
94+
el.classList.add('show')
95+
props.index ? emit('show', props.index) : emit('show')
96+
},
97+
onAfterLeave: () => {
98+
props.index ? emit('close', props.index) : emit('close')
99+
},
100+
},
101+
{
102+
default: () =>
103+
visible.value &&
104+
h(
105+
'div',
106+
{
107+
class: [
108+
'toast fade',
109+
{
110+
[`bg-${props.color}`]: props.color,
111+
},
112+
],
113+
'aria-live': 'assertive',
114+
'aria-atomic': true,
115+
role: 'alert',
116+
},
117+
slots.default && slots.default(),
118+
),
124119
},
125-
() =>
126-
visible.value &&
127-
h(
128-
'div',
129-
{
130-
class: [
131-
'toast fade',
132-
{
133-
[`bg-${props.color}`]: props.color,
134-
},
135-
],
136-
'aria-live': 'assertive',
137-
'aria-atomic': true,
138-
role: 'alert',
139-
ref: 'toastRef',
140-
},
141-
slots.default && slots.default(),
142-
),
143120
)
144121
},
145122
})

‎packages/docs/api/toast/CToast.api.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import CToast from '@coreui/vue/src/components/toast/CToast'
1616
| **dismissible** | Optionally add a close button to component and allow it to self dismiss. | boolean | - | true |
1717
| **index** | index of the component. | number | - | - |
1818
| **title** | Title node for your component. | string | - | - |
19-
| **visible** | Toggle the visibility of component. | boolean | - | true |
19+
| **visible** | Toggle the visibility of component. | boolean | - | - |
2020

2121
#### Events
2222

‎packages/docs/components/toast.md

+17-20
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ To encourage extensible and predictable toasts, we recommend a header and body.
2323
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
2424

2525
::: demo
26-
<CToast :autohide="false">
26+
<CToast :autohide="false" visible>
2727
<CToastHeader closeButton>
2828
<svg
2929
class="rounded me-2"
@@ -42,9 +42,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
4242
<CToastBody>Hello, world! This is a toast message.</CToastBody>
4343
</CToast>
4444
:::
45-
4645
```vue
47-
<CToast :autohide="false">
46+
<CToast :autohide="false" visible>
4847
<CToastHeader closeButton>
4948
<svg
5049
class="rounded me-2"
@@ -67,7 +66,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
6766
:::demo
6867
<CButton color="primary" @click="createToast">Send a toast</CButton>
6968
<CToaster placement="top-end">
70-
<CToast v-for="(toast, index) in toasts">
69+
<CToast v-for="(toast, index) in toasts" visible>
7170
<CToastHeader closeButton>
7271
<span class="me-auto fw-bold">{{toast.title}}</span>
7372
<small>7 min ago</small>
@@ -81,7 +80,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
8180
```vue
8281
<template>
8382
<CButton color="primary" @click="createToast">Send a toast</CButton>
84-
<CToaster placement="top-end">
83+
<CToaster placement="top-end" visible>
8584
<CToast v-for="(toast, index) in toasts">
8685
<CToastHeader closeButton>
8786
<span class="me-auto fw-bold">{{toast.title}}</span>
@@ -136,7 +135,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
136135
Toasts are slightly translucent to blend in with what's below them.
137136

138137
::: demo-dark
139-
<CToast :autohide="false">
138+
<CToast :autohide="false" visible>
140139
<CToastHeader closeButton>
141140
<svg
142141
class="rounded me-2"
@@ -157,7 +156,7 @@ Toasts are slightly translucent to blend in with what's below them.
157156
:::
158157

159158
```vue
160-
<CToast :autohide="false">
159+
<CToast :autohide="false" visible>
161160
<CToastHeader closeButton>
162161
<svg
163162
class="rounded me-2"
@@ -182,8 +181,8 @@ Toasts are slightly translucent to blend in with what's below them.
182181
You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.
183182

184183
::: demo
185-
<CToaster class="position-relative">
186-
<CToast :autohide="false">
184+
<CToaster class="position-relative" >
185+
<CToast :autohide="false" visible>
187186
<CToastHeader closeButton>
188187
<svg
189188
class="rounded me-2"
@@ -201,7 +200,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
201200
</CToastHeader>
202201
<CToastBody>Hello, world! This is a toast message.</CToastBody>
203202
</CToast>
204-
<CToast :autohide="false">
203+
<CToast :autohide="false" visible>
205204
<CToastHeader closeButton>
206205
<svg
207206
class="rounded me-2"
@@ -224,7 +223,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
224223

225224
```vue
226225
<CToaster>
227-
<CToast :autohide="false">
226+
<CToast :autohide="false" visible>
228227
<CToastHeader closeButton>
229228
<svg
230229
class="rounded me-2"
@@ -242,7 +241,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
242241
</CToastHeader>
243242
<CToastBody>Hello, world! This is a toast message.</CToastBody>
244243
</CToast>
245-
<CToast :autohide="false">
244+
<CToast :autohide="false" visible>
246245
<CToastHeader closeButton>
247246
<svg
248247
class="rounded me-2"
@@ -268,16 +267,15 @@ You can stack toasts by wrapping them in a toast container, which will verticall
268267
Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/4.0/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/4.0/utilities/flex) to adjust the layout.
269268

270269
::: demo
271-
<CToast :autohide="false" class="align-items-center">
272-
270+
<CToast :autohide="false" class="align-items-center" visible>
273271
<div class="d-flex">
274272
<CToastBody>Hello, world! This is a toast message.</CToastBody>
275273
<CToastClose class="me-2 m-auto"/>
276274
</div>
277275
</CToast>
278276
:::
279277
```vue
280-
<CToast :autohide="false" class="align-items-center">
278+
<CToast :autohide="false" class="align-items-center" visible>
281279
<div class="d-flex">
282280
<CToastBody>Hello, world! This is a toast message.</CToastBody>
283281
<CToastClose class="me-2 m-auto"/>
@@ -288,7 +286,7 @@ Customize your toasts by removing sub-components, tweaking them with [utilities]
288286
Alternatively, you can also add additional controls and components to toasts.
289287

290288
::: demo
291-
<CToast :autohide="false" class="align-items-center">
289+
<CToast :autohide="false" class="align-items-center" visible>
292290
<CToastBody>
293291
Hello, world! This is a toast message.
294292
<div class="mt-2 pt-2 border-top">
@@ -301,7 +299,7 @@ Alternatively, you can also add additional controls and components to toasts.
301299
</CToast>
302300
:::
303301
```vue
304-
<CToast :autohide="false" class="align-items-center">
302+
<CToast :autohide="false" class="align-items-center" visible>
305303
<CToastBody>
306304
Hello, world! This is a toast message.
307305
<div class="mt-2 pt-2 border-top">
@@ -319,16 +317,15 @@ Alternatively, you can also add additional controls and components to toasts.
319317
Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/docs/4.0/utilities/colors) and [background](https://coreui.io/docs/4.0//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
320318

321319
::: demo
322-
<CToast :autohide="false" color="primary" class="text-white align-items-center">
323-
320+
<CToast :autohide="false" color="primary" class="text-white align-items-center" visible>
324321
<div class="d-flex">
325322
<CToastBody>Hello, world! This is a toast message.</CToastBody>
326323
<CToastClose class="me-2 m-auto" white />
327324
</div>
328325
</CToast>
329326
:::
330327
```vue
331-
<CToast :autohide="false" color="primary" class="text-white align-items-center">
328+
<CToast :autohide="false" color="primary" class="text-white align-items-center" visible>
332329
<div class="d-flex">
333330
<CToastBody>Hello, world! This is a toast message.</CToastBody>
334331
<CToastClose class="me-2 m-auto" white />

0 commit comments

Comments
 (0)