diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass index bc021f39018..e7ea46cdee2 100644 --- a/packages/vuetify/src/components/VSnackbar/VSnackbar.sass +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.sass @@ -8,9 +8,6 @@ margin: $snackbar-wrapper-margin margin-inline-end: calc(#{$snackbar-wrapper-margin} + var(--v-scrollbar-offset)) - &:not(.v-snackbar--centered):not(.v-snackbar--top) - align-items: flex-end - &__wrapper align-items: center display: flex @@ -67,6 +64,24 @@ align-self: flex-end margin-bottom: $snackbar-vertical-action-margin-bottom + &--center + align-items: center + justify-content: center + + &--top + align-items: flex-start + + &--bottom + align-items: flex-end + + &--left, + &--start + justify-content: flex-start + + &--right, + &--end + justify-content: flex-end + .v-snackbar-transition &-enter-active, &-leave-active diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx index 242232da9e8..229531c91f8 100644 --- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx +++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx @@ -9,7 +9,7 @@ import { VProgressLinear } from '@/components/VProgressLinear' // Composables import { forwardRefs } from '@/composables/forwardRefs' -import { makeLocationProps, useLocation } from '@/composables/location' +import { makeLocationProps } from '@/composables/location' import { makePositionProps, usePosition } from '@/composables/position' import { useProxiedModel } from '@/composables/proxiedModel' import { makeRoundedProps, useRounded } from '@/composables/rounded' @@ -18,7 +18,7 @@ import { makeThemeProps, provideTheme } from '@/composables/theme' import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant' // Utilities -import { mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch } from 'vue' +import { computed, mergeProps, nextTick, onMounted, onScopeDispose, ref, shallowRef, watch } from 'vue' import { genericComponent, omit, propsFactory, refElement, useRender } from '@/util' type VSnackbarSlots = { @@ -95,7 +95,6 @@ export const VSnackbar = genericComponent()({ setup (props, { slots }) { const isActive = useProxiedModel(props, 'modelValue') - const { locationStyles } = useLocation(props) const { positionClasses } = usePosition(props) const { scopeId } = useScopeId() const { themeClasses } = provideTheme(props) @@ -146,6 +145,14 @@ export const VSnackbar = genericComponent()({ startTimeout() } + const locationClasses = computed(() => { + return props.location.split(' ').reduce((acc, loc) => { + acc[`v-snackbar--${loc}`] = true + + return acc + }, {} as Record) + }) + useRender(() => { const overlayProps = VOverlay.filterProps(props) const hasContent = !!(slots.default || slots.text || props.text) @@ -161,6 +168,7 @@ export const VSnackbar = genericComponent()({ 'v-snackbar--timer': !!props.timer, 'v-snackbar--vertical': props.vertical, }, + locationClasses.value, positionClasses.value, props.class, ]} @@ -176,7 +184,6 @@ export const VSnackbar = genericComponent()({ variantClasses.value, ], style: [ - locationStyles.value, colorStyles.value, ], onPointerenter,