From a9272c1e07d8c603885af056425321d310be55d4 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Mon, 15 Apr 2024 16:01:49 -0500
Subject: [PATCH] fix(VSpeedDial): position prop styling and transition delay

---
 .../src/labs/VSpeedDial/VSpeedDial.sass       | 22 ++++++++++++
 .../src/labs/VSpeedDial/VSpeedDial.tsx        | 34 ++++++++++++++++---
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass
index 246934877a3f..15d31532152c 100644
--- a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass
@@ -1,2 +1,24 @@
 .v-speed-dial__content
   gap: 8px
+
+  &.v-overlay__content
+    &.v-speed-dial__content--end,
+    &.v-speed-dial__content--end-center,
+    &.v-speed-dial__content--right,
+    &.v-speed-dial__content--right-center
+      flex-direction: row
+
+    &.v-speed-dial__content--left,
+    &.v-speed-dial__content--left-center,
+    &.v-speed-dial__content--start,
+    &.v-speed-dial__content--start-center
+      flex-direction: row-reverse
+
+    &.v-speed-dial__content--top,
+    &.v-speed-dial__content--top-center
+      flex-direction: column-reverse
+
+  > *
+    @for $i from 1 through 10
+      &:nth-child(#{$i})
+        transition-delay: 0.05s * ($i - 1)
diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
index 9ea635f84aed..883e0cd83dee 100644
--- a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
+++ b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.tsx
@@ -7,19 +7,27 @@ import { makeVMenuProps, VMenu } from '@/components/VMenu/VMenu'
 
 // Composables
 import { makeComponentProps } from '@/composables/component'
-import { makeTransitionProps, MaybeTransition } from '@/composables/transition'
+import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
+import type { ComputedRef } from 'vue'
 import type { OverlaySlots } from '@/components/VOverlay/VOverlay'
+import type { Anchor } from '@/util'
 
 export const makeVSpeedDialProps = propsFactory({
   ...makeComponentProps(),
-  ...makeVMenuProps({ offset: 8, minWidth: 0, location: 'top center' as const }),
-  ...makeTransitionProps({ transition: 'fade-transition' }),
+  ...makeVMenuProps({
+    offset: 8,
+    minWidth: 0,
+    openDelay: 0,
+    closeDelay: 100,
+    location: 'top center' as const,
+    transition: 'scale-transition',
+  }),
 }, 'VSpeedDial')
 
 export const VSpeedDial = genericComponent<OverlaySlots>()({
@@ -30,6 +38,16 @@ export const VSpeedDial = genericComponent<OverlaySlots>()({
   setup (props, { slots }) {
     const menuRef = ref<VMenu>()
 
+    const location = computed(() => {
+      const [y, x = 'center'] = props.location.split(' ')
+
+      return `${y} ${x}`
+    }) as ComputedRef<Anchor>
+
+    const locationClasses = computed(() => ({
+      [`v-speed-dial__content--${location.value.replace(' ', '-')}`]: true,
+    }))
+
     useRender(() => {
       const menuProps = VMenu.filterProps(props)
 
@@ -38,8 +56,13 @@ export const VSpeedDial = genericComponent<OverlaySlots>()({
           { ...menuProps }
           class={ props.class }
           style={ props.style }
-          contentClass="v-speed-dial__content"
+          contentClass={[
+            'v-speed-dial__content',
+            locationClasses.value,
+          ]}
+          location={ location.value }
           ref={ menuRef }
+          transition="fade-transition"
         >
           {{
             ...slots,
@@ -55,6 +78,7 @@ export const VSpeedDial = genericComponent<OverlaySlots>()({
                   appear
                   group
                   transition={ props.transition }
+                  mode="out-in"
                 >
                   { slots.default?.(slotProps) }
                 </MaybeTransition>