Skip to content

Commit e1f39f9

Browse files
mrholekmrholek
committed
feat(CPopover, CTooltip): add the delay property to enable the delay for the hide and show animations
1 parent ecbd65e commit e1f39f9

File tree

2 files changed

+60
-14
lines changed

2 files changed

+60
-14
lines changed

‎packages/coreui-vue/src/components/popover/CPopover.ts

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CPopover = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content: String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
* @since 4.9.0-beta.2
28+
*/
29+
delay: {
30+
type: [Number, Object] as PropType<number | { show: number; hide: number }>,
31+
default: 0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -98,6 +107,8 @@ const CPopover = defineComponent({
98107
const popoverRef = ref()
99108
const popper = ref()
100109
const visible = ref(props.visible)
110+
const delay =
111+
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
101112

102113
const handleEnter = (el: RendererElement, done: () => void) => {
103114
emit('show')
@@ -115,9 +126,18 @@ const CPopover = defineComponent({
115126
}, el as HTMLElement)
116127
}
117128

118-
const handleToggle = (event: Event) => {
129+
const toggleVisible = (event: Event, _visible: boolean) => {
119130
togglerRef.value = event.target
120-
visible.value = !visible.value
131+
if (_visible) {
132+
setTimeout(() => {
133+
visible.value = true
134+
}, delay.show)
135+
return
136+
}
137+
138+
setTimeout(() => {
139+
visible.value = false
140+
}, delay.hide)
121141
}
122142

123143
const initPopper = () => {
@@ -208,11 +228,14 @@ const CPopover = defineComponent({
208228
slots.toggler &&
209229
slots.toggler({
210230
on: {
211-
click: (event: Event) => props.trigger.includes('click') && handleToggle(event),
212-
blur: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
213-
focus: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
214-
mouseenter: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
215-
mouseleave: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
231+
click: (event: Event) =>
232+
props.trigger.includes('click') && toggleVisible(event, !visible.value),
233+
blur: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, false),
234+
focus: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, true),
235+
mouseenter: (event: Event) =>
236+
props.trigger.includes('hover') && toggleVisible(event, true),
237+
mouseleave: (event: Event) =>
238+
props.trigger.includes('hover') && toggleVisible(event, false),
216239
},
217240
}),
218241
]

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CTooltip = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content: String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
* @since 4.9.0-beta.2
28+
*/
29+
delay: {
30+
type: [Number, Object] as PropType<number | { show: number; hide: number }>,
31+
default: 0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -94,6 +103,8 @@ const CTooltip = defineComponent({
94103
const tooltipRef = ref()
95104
const popper = ref()
96105
const visible = ref(props.visible)
106+
const delay =
107+
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
97108

98109
const handleEnter = (el: RendererElement, done: () => void) => {
99110
emit('show')
@@ -111,9 +122,18 @@ const CTooltip = defineComponent({
111122
}, el as HTMLElement)
112123
}
113124

114-
const handleToggle = (event: Event) => {
125+
const toggleVisible = (event: Event, _visible: boolean) => {
115126
togglerRef.value = event.target
116-
visible.value = !visible.value
127+
if (_visible) {
128+
setTimeout(() => {
129+
visible.value = true
130+
}, delay.show)
131+
return
132+
}
133+
134+
setTimeout(() => {
135+
visible.value = false
136+
}, delay.hide)
117137
}
118138

119139
const initPopper = () => {
@@ -196,11 +216,14 @@ const CTooltip = defineComponent({
196216
slots.toggler &&
197217
slots.toggler({
198218
on: {
199-
click: (event: Event) => props.trigger.includes('click') && handleToggle(event),
200-
blur: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
201-
focus: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
202-
mouseenter: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
203-
mouseleave: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
219+
click: (event: Event) =>
220+
props.trigger.includes('click') && toggleVisible(event, !visible.value),
221+
blur: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, false),
222+
focus: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, true),
223+
mouseenter: (event: Event) =>
224+
props.trigger.includes('hover') && toggleVisible(event, true),
225+
mouseleave: (event: Event) =>
226+
props.trigger.includes('hover') && toggleVisible(event, false),
204227
},
205228
}),
206229
]

0 commit comments

Comments
 (0)