fix(VSnackbar): support custom transition

fixes #15474
vuetifyjs · Apr 21, 2024 · b9a7d69 · b9a7d69
1 parent f0f0fa0
commit b9a7d69
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git 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
@@ -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<VSnackbarSlots>()({
 
   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<VSnackbarSlots>()({
       startTimeout()
     }
 
+    const locationClasses = computed(() => {
+      return props.location.split(' ').reduce((acc, loc) => {
+        acc[`v-snackbar--${loc}`] = true
+
+        return acc
+      }, {} as Record<string, any>)
+    })
+
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props)
       const hasContent = !!(slots.default || slots.text || props.text)
@@ -161,6 +168,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
               'v-snackbar--timer': !!props.timer,
               'v-snackbar--vertical': props.vertical,
             },
+            locationClasses.value,
             positionClasses.value,
             props.class,
           ]}
@@ -176,7 +184,6 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
               variantClasses.value,
             ],
             style: [
-              locationStyles.value,
               colorStyles.value,
             ],
             onPointerenter,