This repository was archived by the owner on Mar 27, 2025. It is now read-only.
File tree Expand file tree Collapse file tree 2 files changed +27
-8
lines changed
apps/playground/src/components/Comps
packages/bootstrap-vue-next/src/components Expand file tree Collapse file tree 2 files changed +27
-8
lines changed Original file line number Diff line number Diff line change 119
119
</BPopover >
120
120
</BCol >
121
121
<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
+ >
123
127
<BPopover
124
128
:target =" () => popoverManualButtonRef"
125
129
manual
131
135
</BCol >
132
136
<BCol >
133
137
<BPopover placement =" auto" >
134
- <template #title >
135
- Auto placement
136
- </template >
138
+ <template #title > Auto placement </template >
137
139
<template #target >
138
140
<BButton id =" popover-target-1" >Hover Me</BButton >
139
141
</template >
208
210
</BPopover >
209
211
</BCol >
210
212
<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 " >
212
214
<div v-for =" (_, i) in Array(20)" :key =" i" style =" height : 100px " >
213
215
<BPopover v-bind =" vari" >
214
216
jee
219
221
</div >
220
222
</div >
221
223
</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 >
222
236
</BRow >
223
237
</BContainer >
224
238
</template >
225
239
226
240
<script setup lang="ts">
227
241
import {ref } from ' vue'
228
- import type { BPopoverPlacement } from ' bootstrap-vue-next/src/types' ;
242
+ import type {BPopoverPlacement } from ' bootstrap-vue-next/src/types'
229
243
230
244
const popoverInput = ref (' foo' )
231
245
const popoverRef = ref (null )
Original file line number Diff line number Diff line change @@ -146,6 +146,7 @@ const props = withDefaults(
146
146
inline ?: Booleanish
147
147
tooltip ?: Booleanish
148
148
html ?: Booleanish
149
+ noninteractive ?: Booleanish
149
150
}>(),
150
151
{
151
152
floatingMiddleware: undefined ,
@@ -173,6 +174,7 @@ const props = withDefaults(
173
174
html: false ,
174
175
reference: null ,
175
176
target: null ,
177
+ noninteractive: false ,
176
178
}
177
179
)
178
180
@@ -224,6 +226,7 @@ const hideBoolean = useBooleanish(() => props.hide)
224
226
const realtimeBoolean = useBooleanish (() => props .realtime )
225
227
const inlineBoolean = useBooleanish (() => props .inline )
226
228
const tooltipBoolean = useBooleanish (() => props .tooltip )
229
+ const noninteractiveBoolean = useBooleanish (() => props .noninteractive )
227
230
const isHtml = useBooleanish (() => props .html )
228
231
const hidden = ref (false )
229
232
@@ -418,10 +421,12 @@ const hideFn = (e: Event) => {
418
421
if (
419
422
e ?.type === ' click' ||
420
423
(e ?.type === ' update:modelValue' && manualBoolean .value ) ||
421
- (isOutside .value &&
424
+ (! noninteractiveBoolean .value &&
425
+ isOutside .value &&
422
426
triggerIsOutside .value &&
423
427
! element .value ?.contains (document ?.activeElement ) &&
424
- ! trigger .value ?.contains (document ?.activeElement ))
428
+ ! trigger .value ?.contains (document ?.activeElement )) ||
429
+ (noninteractiveBoolean .value && triggerIsOutside .value )
425
430
) {
426
431
showState .value = false
427
432
nextTick (() => {
You can’t perform that action at this time.
0 commit comments