Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BOffcanvas backdrop blur and shadow #1814

Merged
merged 1 commit into from Mar 19, 2024
Merged

BOffcanvas backdrop blur and shadow #1814

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 8 additions & 2 deletions packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue
View file
Open in desktop
Expand Up @@ -57,6 +57,7 @@
</BTransition>
<slot name="backdrop">
<BOverlay
:blur="backdropBlur"
:variant="backdropVariant"
:show="showBackdrop"
fixed
Expand All @@ -72,7 +73,7 @@
import {onKeyStroke, useEventListener, useFocus, useVModel} from '@vueuse/core'
import {computed, nextTick, ref, type RendererElement, toRef} from 'vue'
import {useId, useSafeScrollLock} from '../../composables'
import type {AttrsValue, ButtonVariant, ClassValue, ColorVariant} from '../../types'
import type {AttrsValue, ButtonVariant, ClassValue, ColorVariant, Size} from '../../types'
import {BvTriggerableEvent, isEmptySlot} from '../../utils'
import BButton from '../BButton/BButton.vue'
import BCloseButton from '../BButton/BCloseButton.vue'
Expand All @@ -94,7 +95,8 @@ defineOptions({
const props = withDefaults(
defineProps<{
backdrop?: boolean
backdropVariant?: ColorVariant | null
backdropBlur?: string
VividLemon marked this conversation as resolved.
Show resolved Hide resolved
backdropVariant?: ColorVariant | 'white' | 'transparent' | null
bodyAttrs?: Readonly<AttrsValue>
bodyClass?: ClassValue
bodyScrolling?: boolean
Expand All @@ -115,6 +117,7 @@ const props = withDefaults(
// Then in components that use individual props (BImg)
// Make them just use prop placement
placement?: 'top' | 'bottom' | 'start' | 'end'
shadow?: Size | boolean
teleportDisabled?: boolean
teleportTo?: string | RendererElement | null | undefined
title?: string
Expand All @@ -123,6 +126,7 @@ const props = withDefaults(
}>(),
{
backdrop: true,
backdropBlur: undefined,
backdropVariant: 'dark',
bodyAttrs: undefined,
bodyClass: undefined,
Expand All @@ -141,6 +145,7 @@ const props = withDefaults(
noHeader: false,
noHeaderClose: false,
placement: 'start',
shadow: false,
teleportDisabled: false,
teleportTo: 'body',
title: undefined,
Expand Down Expand Up @@ -228,6 +233,7 @@ const computedClasses = computed(() => [
`offcanvas-${props.placement}`,
{
show: modelValue.value && isActive.value === true,
[`shadow-${props.shadow}`]: !!props.shadow,
},
])

Expand Down