Skip to content

Commit f5f92ef

Browse files
mrholekmrholek
committed
feat(usePopper): add a new composable
1 parent e1f39f9 commit f5f92ef

File tree

4 files changed

+85
-77
lines changed

4 files changed

+85
-77
lines changed

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

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
2-
import { createPopper, Placement } from '@popperjs/core'
2+
import type { Placement } from '@popperjs/core'
33

4+
import { usePopper } from '../../composables'
45
import type { Placements, Triggers } from '../../types'
56
import { executeAfterTransition } from '../../utils/transition'
67
import { getRTLPlacement } from '../../utils'
@@ -105,14 +106,39 @@ const CPopover = defineComponent({
105106
setup(props, { attrs, slots, emit }) {
106107
const togglerRef = ref()
107108
const popoverRef = ref()
108-
const popper = ref()
109109
const visible = ref(props.visible)
110+
const { initPopper, destroyPopper } = usePopper()
111+
110112
const delay =
111113
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
112114

115+
const popperConfig = {
116+
modifiers: [
117+
{
118+
name: 'arrow',
119+
options: {
120+
element: '.popover-arrow',
121+
},
122+
},
123+
{
124+
name: 'flip',
125+
options: {
126+
fallbackPlacements: props.fallbackPlacements,
127+
},
128+
},
129+
{
130+
name: 'offset',
131+
options: {
132+
offset: props.offset,
133+
},
134+
},
135+
],
136+
placement: getRTLPlacement(props.placement, togglerRef.value),
137+
}
138+
113139
const handleEnter = (el: RendererElement, done: () => void) => {
114140
emit('show')
115-
initPopper()
141+
initPopper(togglerRef.value, popoverRef.value, popperConfig)
116142
el.classList.add('show')
117143
executeAfterTransition(() => done(), el as HTMLElement)
118144
}
@@ -140,41 +166,6 @@ const CPopover = defineComponent({
140166
}, delay.hide)
141167
}
142168

143-
const initPopper = () => {
144-
if (togglerRef.value) {
145-
popper.value = createPopper(togglerRef.value, popoverRef.value, {
146-
placement: getRTLPlacement(props.placement, togglerRef.value),
147-
modifiers: [
148-
{
149-
name: 'arrow',
150-
options: {
151-
element: '.popover-arrow',
152-
},
153-
},
154-
{
155-
name: 'flip',
156-
options: {
157-
fallbackPlacements: props.fallbackPlacements,
158-
},
159-
},
160-
{
161-
name: 'offset',
162-
options: {
163-
offset: props.offset,
164-
},
165-
},
166-
],
167-
})
168-
}
169-
}
170-
171-
const destroyPopper = () => {
172-
if (popper.value) {
173-
popper.value.destroy()
174-
}
175-
popper.value = undefined
176-
}
177-
178169
return () => [
179170
h(
180171
Teleport,

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

Lines changed: 29 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
2-
import { createPopper, Placement } from '@popperjs/core'
2+
import type { Placement } from '@popperjs/core'
33

4+
import { usePopper } from '../../composables'
45
import type { Placements, Triggers } from '../../types'
56
import { executeAfterTransition } from '../../utils/transition'
67
import { getRTLPlacement } from '../../utils'
@@ -101,14 +102,39 @@ const CTooltip = defineComponent({
101102
setup(props, { attrs, slots, emit }) {
102103
const togglerRef = ref()
103104
const tooltipRef = ref()
104-
const popper = ref()
105105
const visible = ref(props.visible)
106+
const { initPopper, destroyPopper } = usePopper()
107+
106108
const delay =
107109
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
108110

111+
const popperConfig = {
112+
modifiers: [
113+
{
114+
name: 'arrow',
115+
options: {
116+
element: '.tooltip-arrow',
117+
},
118+
},
119+
{
120+
name: 'flip',
121+
options: {
122+
fallbackPlacements: props.fallbackPlacements,
123+
},
124+
},
125+
{
126+
name: 'offset',
127+
options: {
128+
offset: props.offset,
129+
},
130+
},
131+
],
132+
placement: getRTLPlacement(props.placement, togglerRef.value),
133+
}
134+
109135
const handleEnter = (el: RendererElement, done: () => void) => {
110136
emit('show')
111-
initPopper()
137+
initPopper(togglerRef.value, tooltipRef.value, popperConfig)
112138
el.classList.add('show')
113139
executeAfterTransition(() => done(), el as HTMLElement)
114140
}
@@ -136,41 +162,6 @@ const CTooltip = defineComponent({
136162
}, delay.hide)
137163
}
138164

139-
const initPopper = () => {
140-
if (togglerRef.value) {
141-
popper.value = createPopper(togglerRef.value, tooltipRef.value, {
142-
placement: getRTLPlacement(props.placement, togglerRef.value),
143-
modifiers: [
144-
{
145-
name: 'arrow',
146-
options: {
147-
element: '.tooltip-arrow',
148-
},
149-
},
150-
{
151-
name: 'flip',
152-
options: {
153-
fallbackPlacements: props.fallbackPlacements,
154-
},
155-
},
156-
{
157-
name: 'offset',
158-
options: {
159-
offset: props.offset,
160-
},
161-
},
162-
],
163-
})
164-
}
165-
}
166-
167-
const destroyPopper = () => {
168-
if (popper.value) {
169-
popper.value.destroy()
170-
}
171-
popper.value = undefined
172-
}
173-
174165
return () => [
175166
h(
176167
Teleport,

‎packages/coreui-vue/src/composables/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import { useColorModes } from './useColorModes'
2+
import { usePopper } from './usePopper'
23

3-
export { useColorModes }
4+
export { useColorModes, usePopper }

‎packages/coreui-vue/src/composables/usePopper.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ref } from 'vue'
2+
import { createPopper } from '@popperjs/core'
3+
import type { Instance, Options } from '@popperjs/core'
4+
5+
export const usePopper = () => {
6+
const _popper = ref<Instance>()
7+
8+
const initPopper = (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => {
9+
_popper.value = createPopper(reference, popper, options)
10+
}
11+
12+
const destroyPopper = () => {
13+
if (_popper.value) {
14+
_popper.value.destroy()
15+
}
16+
17+
_popper.value = undefined
18+
}
19+
20+
return {
21+
popper: _popper.value,
22+
initPopper,
23+
destroyPopper,
24+
}
25+
}

0 commit comments

Comments
 (0)