Skip to content
This repository was archived by the owner on Mar 27, 2025. It is now read-only.

Commit cd8cbec

Browse files
committed
feat(BPopover): add noninteractive prop
1 parent d25ff1e commit cd8cbec

File tree

2 files changed

+27
-8
lines changed

2 files changed

+27
-8
lines changed

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

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,11 @@
119119
</BPopover>
120120
</BCol>
121121
<BCol>
122-
<BButton ref="popoverManualButtonRef" @click="manualClickPopoverExample = !manualClickPopoverExample" >Manual popover showing</BButton>
122+
<BButton
123+
ref="popoverManualButtonRef"
124+
@click="manualClickPopoverExample = !manualClickPopoverExample"
125+
>Manual popover showing</BButton
126+
>
123127
<BPopover
124128
:target="() => popoverManualButtonRef"
125129
manual
@@ -131,9 +135,7 @@
131135
</BCol>
132136
<BCol>
133137
<BPopover placement="auto">
134-
<template #title>
135-
Auto placement
136-
</template>
138+
<template #title> Auto placement </template>
137139
<template #target>
138140
<BButton id="popover-target-1">Hover Me</BButton>
139141
</template>
@@ -208,7 +210,7 @@
208210
</BPopover>
209211
</BCol>
210212
<BCol>
211-
<div style="height: 50vh; width: 400px; overflow-y: scroll; padding: 5em;">
213+
<div style="height: 50vh; width: 400px; overflow-y: scroll; padding: 5em">
212214
<div v-for="(_, i) in Array(20)" :key="i" style="height: 100px">
213215
<BPopover v-bind="vari">
214216
jee
@@ -219,13 +221,25 @@
219221
</div>
220222
</div>
221223
</BCol>
224+
<BCol>
225+
<div style="height: 50vh; width: 400px; overflow-y: scroll; padding: 5em">
226+
<div v-for="(_, i) in Array(20)" :key="i" style="height: 100px">
227+
<BPopover v-bind="vari" noninteractive>
228+
jee
229+
<template #target>
230+
<BButton>hover / focus noninteractive</BButton>
231+
</template>
232+
</BPopover>
233+
</div>
234+
</div>
235+
</BCol>
222236
</BRow>
223237
</BContainer>
224238
</template>
225239

226240
<script setup lang="ts">
227241
import {ref} from 'vue'
228-
import type { BPopoverPlacement } from 'bootstrap-vue-next/src/types';
242+
import type {BPopoverPlacement} from 'bootstrap-vue-next/src/types'
229243
230244
const popoverInput = ref('foo')
231245
const popoverRef = ref(null)

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ const props = withDefaults(
146146
inline?: Booleanish
147147
tooltip?: Booleanish
148148
html?: Booleanish
149+
noninteractive?: Booleanish
149150
}>(),
150151
{
151152
floatingMiddleware: undefined,
@@ -173,6 +174,7 @@ const props = withDefaults(
173174
html: false,
174175
reference: null,
175176
target: null,
177+
noninteractive: false,
176178
}
177179
)
178180
@@ -224,6 +226,7 @@ const hideBoolean = useBooleanish(() => props.hide)
224226
const realtimeBoolean = useBooleanish(() => props.realtime)
225227
const inlineBoolean = useBooleanish(() => props.inline)
226228
const tooltipBoolean = useBooleanish(() => props.tooltip)
229+
const noninteractiveBoolean = useBooleanish(() => props.noninteractive)
227230
const isHtml = useBooleanish(() => props.html)
228231
const hidden = ref(false)
229232
@@ -418,10 +421,12 @@ const hideFn = (e: Event) => {
418421
if (
419422
e?.type === 'click' ||
420423
(e?.type === 'update:modelValue' && manualBoolean.value) ||
421-
(isOutside.value &&
424+
(!noninteractiveBoolean.value &&
425+
isOutside.value &&
422426
triggerIsOutside.value &&
423427
!element.value?.contains(document?.activeElement) &&
424-
!trigger.value?.contains(document?.activeElement))
428+
!trigger.value?.contains(document?.activeElement)) ||
429+
(noninteractiveBoolean.value && triggerIsOutside.value)
425430
) {
426431
showState.value = false
427432
nextTick(() => {

0 commit comments

Comments
 (0)