diff --git a/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass b/packages/vuetify/src/labs/VSpeedDial/VSpeedDial.sass index 246934877a3..15d31532152 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 9ea635f84ae..883e0cd83de 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()({ @@ -30,6 +38,16 @@ export const VSpeedDial = genericComponent()({ setup (props, { slots }) { const menuRef = ref() + const location = computed(() => { + const [y, x = 'center'] = props.location.split(' ') + + return `${y} ${x}` + }) as ComputedRef + + 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()({ { ...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()({ appear group transition={ props.transition } + mode="out-in" > { slots.default?.(slotProps) }