diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx index 57b37d248fb..da15eeb5104 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx @@ -13,6 +13,7 @@ import { makeBorderProps, useBorder } from '@/composables/border' import { useBackgroundColor } from '@/composables/color' import { makeComponentProps } from '@/composables/component' import { provideDefaults } from '@/composables/defaults' +import { makeDelayProps, useDelay } from '@/composables/delay' import { makeDisplayProps, useDisplay } from '@/composables/display' import { makeElevationProps, useElevation } from '@/composables/elevation' import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout' @@ -84,6 +85,7 @@ export const makeVNavigationDrawerProps = propsFactory({ ...makeBorderProps(), ...makeComponentProps(), + ...makeDelayProps(), ...makeDisplayProps(), ...makeElevationProps(), ...makeLayoutItemProps(), @@ -118,6 +120,10 @@ export const VNavigationDrawer = genericComponent()({ const rootEl = ref() const isHovering = shallowRef(false) + const { runOpenDelay, runCloseDelay } = useDelay(props, value => { + isHovering.value = value + }) + const width = computed(() => { return (props.rail && props.expandOnHover && isHovering.value) ? Number(props.width) @@ -201,13 +207,6 @@ export const VNavigationDrawer = genericComponent()({ }, }) - function onMouseenter () { - isHovering.value = true - } - function onMouseleave () { - isHovering.value = false - } - useRender(() => { const hasImage = (slots.image || props.image) @@ -215,8 +214,8 @@ export const VNavigationDrawer = genericComponent()({ <>