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

Commit cb3464d

Browse files
committed
refactor(BModal): use BOverlay internally
feat(BModal): add prop backdropVariant to customize the backdrop feat(BOffcanvas): wrap backdrop in a slot so you can customize it further
1 parent d39371c commit cb3464d

File tree

2 files changed

+33
-10
lines changed

2 files changed

+33
-10
lines changed

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,16 @@
8181
</div>
8282
</div>
8383
</div>
84-
<slot v-if="!hideBackdropBoolean" name="backdrop">
85-
<div class="modal-backdrop fade show" @click="hide('backdrop')" />
84+
<slot name="backdrop">
85+
<BOverlay
86+
:variant="computedBackdropVariant"
87+
:show="modelValueBoolean"
88+
no-spinner
89+
fixed
90+
no-wrap
91+
blur="0px"
92+
@click="hide('backdrop')"
93+
/>
8694
</slot>
8795
</div>
8896
</BTransition>
@@ -98,6 +106,7 @@ import {BvTriggerableEvent, isEmptySlot} from '../utils'
98106
import BButton from './BButton/BButton.vue'
99107
import BCloseButton from './BButton/BCloseButton.vue'
100108
import BTransition from './BTransition/BTransition.vue'
109+
import BOverlay from './BOverlay/BOverlay.vue'
101110
102111
defineOptions({
103112
inheritAttrs: false,
@@ -161,8 +170,10 @@ const props = withDefaults(
161170
teleportDisabled?: Booleanish
162171
teleportTo?: string | RendererElement | null | undefined
163172
bodyScrolling?: Booleanish
173+
backdropVariant?: ColorVariant | null
164174
}>(),
165175
{
176+
backdropVariant: undefined,
166177
bodyBgVariant: null,
167178
bodyClass: undefined,
168179
bodyTextVariant: null,
@@ -309,6 +320,14 @@ const lazyShowing = computed(
309320
(lazyBoolean.value === true && modelValueBoolean.value === true)
310321
)
311322
323+
const computedBackdropVariant = computed(() =>
324+
props.backdropVariant !== undefined
325+
? props.backdropVariant
326+
: hideBackdropBoolean.value
327+
? 'transparent'
328+
: 'dark'
329+
)
330+
312331
const hasHeaderCloseSlot = computed(() => !isEmptySlot(slots['header-close']))
313332
314333
const modalDialogClasses = computed(() => [

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,14 +51,16 @@
5151
</template>
5252
</div>
5353
</BTransition>
54-
<BOverlay
55-
:variant="backdropVariant"
56-
:show="showBackdrop"
57-
:fixed="true"
58-
no-wrap
59-
:no-spinner="true"
60-
@click="hide('backdrop')"
61-
/>
54+
<slot name="backdrop">
55+
<BOverlay
56+
:variant="backdropVariant"
57+
:show="showBackdrop"
58+
fixed
59+
no-wrap
60+
no-spinner
61+
@click="hide('backdrop')"
62+
/>
63+
</slot>
6264
</Teleport>
6365
</template>
6466

@@ -163,6 +165,8 @@ defineSlots<{
163165
hide: (trigger?: string) => void
164166
// eslint-disable-next-line @typescript-eslint/no-explicit-any
165167
}) => any
168+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
169+
backdrop?: (props: Record<string, never>) => any
166170
}>()
167171
168172
const slots = useSlots()

0 commit comments

Comments
 (0)