8000 Merge pull request #1460 from xvaara/popover-type-fix · bootstrap-vue/bootstrap-vue-next@d6f971b · GitHub
[go: up one dir, main page]
Skip to content < 8000 div data-target="react-partial.reactRoot">
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit d6f971b

Browse files
xvaaraxvaara
auth 8000 ored
Merge pull request bootstrap-vue-next#1460 from xvaara/popover-type-fix
clear up Popover target & reference props
2 parents 0f87c88 + afaa3bf commit d6f971b

File tree

3 files changed

+38
-60
lines changed

3 files changed

+38
-60
lines changed

‎apps/playground/src/components/Comps/TPopover.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,7 @@
100100
</BCol>
101101
<BCol>
102102
<BButton ref="popoverRef">Hover popover by ref with ref target</BButton>
103-
<BPopover
104-
:target="() => popoverRef"
105-
:reference="() => popoverContainerRef"
106-
placement="right"
107-
>
103+
<BPopover :target="popoverRef" :reference="popoverContainerRef" placement="right">
108104
<template #title>
109105
Popover
110106
<em>Title</em>
@@ -125,7 +121,7 @@
125121
>Manual popover showing</BButton
126122
>
127123
<BPopover
128-
:target="() => popoverManualButtonRef"
124+
:target="popoverManualButtonRef"
129125
manual
130126
:model-value="manualClickPopoverExample"
131127
placement="right"

‎packages/bootstrap-vue-next/src/components/BPopover.vue

Lines changed: 35 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -80,19 +80,20 @@ import {
8080
type ComponentPublicInstance,
8181
computed,
8282
type CSSProperties,
83+
type MaybeRef,
8384
nextTick,
8485
onBeforeUnmount,
8586
onMounted,
8687
readonly,
8788
ref,
8889
toRef,
90+
unref,
8991
type VNode,
9092
watch,
9193
watchEffect,
9294
} from 'vue'
9395
import {useBooleanish, useId} from '../composables'
9496
import type {Booleanish, BPopoverPlacement, ClassValue, ColorVariant} from '../types'
95-
9697
defineOptions({
9798
inheritAttrs: false,
9899
})
@@ -101,20 +102,12 @@ const props = withDefaults(
101102
defineProps<{
102103
modelValue?: Booleanish
103104
container?: string | ComponentPublicInstance<HTMLElement> | HTMLElement | undefined
104-
target?:
105-
| (() => HTMLElement | VNode)
106-
| string
107-
| ComponentPublicInstance<HTMLElement>
108-
| HTMLSpanElement
109-
| HTMLElement
110-
| null
111-
reference?:
112-
| (() => HTMLElement | VNode)
113-
| string
114-
| ComponentPublicInstance<HTMLElement>
115-
| HTMLSpanElement
116-
| HTMLElement
117-
| null
105+
target?: MaybeRef<
106+
string | ComponentPublicInstance<HTMLElement> | HTMLSpanElement | HTMLElement | null
107+
>
108+
reference?: MaybeRef<
109+
string | ComponentPublicInstance<HTMLElement> | HTMLSpanElement | HTMLElement | null
110+
>
118111
content?: string
119112
id?: string
120113
title?: string
@@ -231,39 +224,6 @@ const arrow = ref<HTMLElement | null>(null)
231224
const trigger = ref<HTMLElement | null>(null)
232225
const placeholder = ref<HTMLElement | null>(null)
233226
234-
const cleanElementProp = (
235-
target:
236-
| (() => HTMLElement | VNode)
237-
| string
238-
| ComponentPublicInstance<HTMLElement>
239-
| HTMLElement
240-
| undefined
241-
): HTMLElement | string | undefined => {
242-
if (typeof target === 'string') {
243-
return target
244-
}
245-
if (target instanceof HTMLElement) {
246-
return target
247-
// eslint-disable-next-line
248-
}
249-
if (typeof target === 'function')
250-
return (target() as ComponentPublicInstance<HTMLElement>).$el
251-
? (target() as ComponentPublicInstance<HTMLElement>).$el
252-
: target()
253-
if (typeof target !== 'undefined')
254-
return (target as ComponentPublicInstance<HTMLElement>).$el as HTMLElement
255-
return undefined
256-
}
257-
258-
const getElement = (element: HTMLElement | string | undefined): HTMLElement | undefined => {
259-
if (!element) return undefined
260-
if (typeof element === 'string') {
261-
const idElement = document.getElementById(element)
262-
return idElement ? idElement : undefined
263-
}
264-
return element
265-
}
266-
267227
const sanitizedTitle = computed(() =>
268228
props.title ? sanitizeHtml(props.title, DefaultAllowlist) : ''
269229
)
@@ -434,9 +394,12 @@ const hideFn = (e: Event) => {
434394
emit('hidden', buildTriggerableEvent('hidden'))
435395
})
436396
} else {
437-
setTimeout(() => {
438-
hideFn(e)
439-
}, delay < 50 ? 50 : delay )
397+
setTimeout(
398+
() => {
399+
hideFn(e)
400+
},
401+
delay < 50 ? 50 : delay
402+
)
440403
}
441404
}, delay)
442405
}
@@ -447,11 +410,28 @@ defineExpose({
447410
toggle,
448411
})
449412
413+
const getElement = (
414+
target: MaybeRef<
415+
string | ComponentPublicInstance<HTMLElement> | HTMLSpanElement | HTMLElement | null
416+
>
417+
): HTMLElement | undefined => {
418+
const element = unref(target)
419+
if (!element) return undefined
420+
if (typeof element === 'string') {
421+
const idElement = document.getElementById(element)
422+
return idElement ? idElement : undefined
423+
}
424+
if ((element as ComponentPublicInstance<HTMLElement>).$el) {
425+
return (element as ComponentPublicInstance<HTMLElement>).$el as HTMLElement
426+
}
427+
return element
428+
}
429+
450430
const bind = () => {
451431
// TODO: is this the best way to bind the events?
452432
// we place a span and get the next element sibling fo rthe listeners
453433
if (props.target) {
454-
const elem = getElement(cleanElementProp(props.target))
434+
const elem = getElement(props.target)
455435
if (elem) {
456436
trigger.value = elem
457437
} else {
@@ -462,7 +442,7 @@ const bind = () => {
462442
trigger.value = placeholder.value?.nextElementSibling as HTMLElement
463443
}
464444
if (props.reference) {
465-
const elem = getElement(cleanElementProp(props.reference))
445+
const elem = getElement(props.reference)
466446
if (elem) {
467447
targetTrigger.value = elem
468448
} else {
@@ -503,8 +483,10 @@ onClickOutside(
503483
)
504484
505485
watch([() => props.click, () => props.target, () => props.reference], () => {
486+
console.log('change')
506487
unbind()
507488
bind()
489+
// update()
508490
})
509491
510492
onMounted(bind)

‎packages/bootstrap-vue-next/src/utils/floatingUi.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const resolveContent = (
8080
}
8181

8282
export const resolveDirectiveProps = (binding: DirectiveBinding, el: HTMLElement) => ({
83-
target: () => el,
83+
target: el,
8484
modelValue: binding.modifiers.show,
8585
inline: binding.modifiers.inline,
8686
click: binding.modifiers.click,

0 commit comments

Comments
 (0)
0