@vuetify/nightly 3.0.0-beta.6 → 3.0.0-beta.9

package/lib/components/VMenu/VMenu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VMenu.mjs","names":["VDialogTransition","VOverlay","makeTransitionProps","useForwardRef","useProxiedModel","useScopeId","computed","inject","provide","ref","watch","genericComponent","getUid","useRender","VMenuSymbol","VMenu","name","inheritAttrs","props","modelValue","Boolean","id","String","transition","component","emits","value","setup","attrs","slots","isActive","scopeId","uid","overlay","parent","openChildren","register","unregister","closeParents","setTimeout","val","onClickOutside","default","activator"],"sources":["../../../src/components/VMenu/VMenu.tsx"],"sourcesContent":["// Styles\nimport './VMenu.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\nimport { useForwardRef } from '@/composables/forwardRef'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, inject, provide, ref, watch } from 'vue'\nimport { genericComponent, getUid, useRender } from '@/util'\nimport { VMenuSymbol } from './shared'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VMenu = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VMenu',\n\n  inheritAttrs: false,\n\n  props: {\n    // TODO\n    // disableKeys: Boolean,\n    modelValue: Boolean,\n    id: String,\n\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = getUid()\n    const id = computed(() => props.id || `v-menu-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const parent = inject(VMenuSymbol, null)\n    let openChildren = 0\n    provide(VMenuSymbol, {\n      register () {\n        ++openChildren\n      },\n      unregister () {\n        --openChildren\n      },\n      closeParents () {\n        setTimeout(() => {\n          if (!openChildren) {\n            isActive.value = false\n            parent?.closeParents()\n          }\n        }, 40)\n      },\n    })\n\n    watch(isActive, val => {\n      val ? parent?.register() : parent?.unregister()\n    })\n\n    function onClickOutside () {\n      parent?.closeParents()\n    }\n\n    useRender(() => (\n      <VOverlay\n        ref={ overlay }\n        v-model={ isActive.value }\n        class={[\n          'v-menu',\n        ]}\n        transition={ props.transition }\n        absolute\n        closeOnContentClick\n        locationStrategy=\"connected\"\n        scrollStrategy=\"reposition\"\n        scrim={ false }\n        openDelay=\"300\"\n        closeDelay=\"250\"\n        activatorProps={{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(isActive.value),\n          'aria-owns': id.value,\n        }}\n        onClick:outside={ onClickOutside }\n        { ...scopeId }\n        { ...attrs }\n        v-slots={{\n          default: slots.default,\n          activator: slots.activator,\n        }}\n      />\n    ))\n\n    return useForwardRef({ id }, overlay)\n  },\n})\n\nexport type VMenu = InstanceType<typeof VMenu>\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,iB;SACAC,Q,iCAET;;SACSC,mB;SACAC,a;SACAC,e;SACAC,U,yCAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,GAApC,EAAyCC,KAAzC,QAAsD,KAAtD;SACSC,gB,EAAkBC,M,EAAQC,S;SAC1BC,W,wBAET;;AAGA,OAAO,MAAMC,KAAK,GAAGJ,gBAAgB,GAEhC;EACHK,IAAI,EAAE,OADH;EAGHC,YAAY,EAAE,KAHX;EAKHC,KAAK,EAAE;IACL;IACA;IACAC,UAAU,EAAEC,OAHP;IAILC,EAAE,EAAEC,MAJC;IAML,GAAGpB,mBAAmB,CAAC;MACrBqB,UAAU,EAAE;QAAEC,SAAS,EAAExB;MAAb;IADS,CAAD;EANjB,CALJ;EAgBHyB,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAoB;EADpC,CAhBJ;;EAoBHC,KAAK,CAAET,KAAF,QAA2B;IAAA,IAAlB;MAAEU,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,QAAQ,GAAG1B,eAAe,CAACc,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAM;MAAEa;IAAF,IAAc1B,UAAU,EAA9B;IAEA,MAAM2B,GAAG,GAAGpB,MAAM,EAAlB;IACA,MAAMS,EAAE,GAAGf,QAAQ,CAAC,MAAMY,KAAK,CAACG,EAAN,IAAa,UAASW,GAAI,EAAjC,CAAnB;IAEA,MAAMC,OAAO,GAAGxB,GAAG,EAAnB;IAEA,MAAMyB,MAAM,GAAG3B,MAAM,CAACO,WAAD,EAAc,IAAd,CAArB;IACA,IAAIqB,YAAY,GAAG,CAAnB;IACA3B,OAAO,CAACM,WAAD,EAAc;MACnBsB,QAAQ,GAAI;QACV,EAAED,YAAF;MACD,CAHkB;;MAInBE,UAAU,GAAI;QACZ,EAAEF,YAAF;MACD,CANkB;;MAOnBG,YAAY,GAAI;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACJ,YAAL,EAAmB;YACjBL,QAAQ,CAACJ,KAAT,GAAiB,KAAjB;YACAQ,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;UACD;QACF,CALS,EAKP,EALO,CAAV;MAMD;;IAdkB,CAAd,CAAP;IAiBA5B,KAAK,CAACoB,QAAD,EAAWU,GAAG,IAAI;MACrBA,GAAG,GAAGN,MAAH,oBAAGA,MAAM,CAAEE,QAAR,EAAH,GAAwBF,MAAxB,oBAAwBA,MAAM,CAAEG,UAAR,EAA3B;IACD,CAFI,CAAL;;IAIA,SAASI,cAAT,GAA2B;MACzBP,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;IACD;;IAEDzB,SAAS,CAAC;MAAA,OAEAoB,OAFA;MAAA,cAGIH,QAAQ,CAACJ,KAHb;MAAA,iCAGII,QAAQ,CAACJ,KAHb;MAAA,SAIC,CACL,QADK,CAJD;MAAA,cAOOR,KAAK,CAACK,UAPb;MAAA;MAAA;MAAA,oBAUW,WAVX;MAAA,kBAWS,YAXT;MAAA,SAYE,KAZF;MAAA,aAaI,KAbJ;MAAA,cAcK,KAdL;MAAA,kBAeU;QACd,iBAAiB,MADH;QAEd,iBAAiBD,MAAM,CAACQ,QAAQ,CAACJ,KAAV,CAFT;QAGd,aAAaL,EAAE,CAACK;MAHF,CAfV;MAAA,mBAoBYe;IApBZ,GAqBDV,OArBC,EAsBDH,KAtBC,GAuBG;MACPc,OAAO,EAAEb,KAAK,CAACa,OADR;MAEPC,SAAS,EAAEd,KAAK,CAACc;IAFV,CAvBH,CAAD,CAAT;IA8BA,OAAOxC,aAAa,CAAC;MAAEkB;IAAF,CAAD,EAASY,OAAT,CAApB;EACD;;AAvFE,CAFgC,CAA9B"}
+{"version":3,"file":"VMenu.mjs","names":["VDialogTransition","VOverlay","makeTransitionProps","forwardRefs","useProxiedModel","useScopeId","computed","inject","provide","ref","watch","genericComponent","getUid","useRender","VMenuSymbol","VMenu","name","inheritAttrs","props","modelValue","Boolean","id","String","transition","component","emits","value","setup","attrs","slots","isActive","scopeId","uid","overlay","parent","openChildren","register","unregister","closeParents","setTimeout","val","onClickOutside","default","activator"],"sources":["../../../src/components/VMenu/VMenu.tsx"],"sourcesContent":["// Styles\nimport './VMenu.sass'\n\n// Components\nimport { VDialogTransition } from '@/components/transitions'\nimport { VOverlay } from '@/components/VOverlay'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\nimport { forwardRefs } from '@/composables/forwardRefs'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useScopeId } from '@/composables/scopeId'\n\n// Utilities\nimport { computed, inject, provide, ref, watch } from 'vue'\nimport { genericComponent, getUid, useRender } from '@/util'\nimport { VMenuSymbol } from './shared'\n\n// Types\nimport type { OverlaySlots } from '@/components/VOverlay/VOverlay'\n\nexport const VMenu = genericComponent<new () => {\n  $slots: OverlaySlots\n}>()({\n  name: 'VMenu',\n\n  inheritAttrs: false,\n\n  props: {\n    // TODO\n    // disableKeys: Boolean,\n    modelValue: Boolean,\n    id: String,\n\n    ...makeTransitionProps({\n      transition: { component: VDialogTransition },\n    } as const),\n  },\n\n  emits: {\n    'update:modelValue': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'modelValue')\n    const { scopeId } = useScopeId()\n\n    const uid = getUid()\n    const id = computed(() => props.id || `v-menu-${uid}`)\n\n    const overlay = ref<VOverlay>()\n\n    const parent = inject(VMenuSymbol, null)\n    let openChildren = 0\n    provide(VMenuSymbol, {\n      register () {\n        ++openChildren\n      },\n      unregister () {\n        --openChildren\n      },\n      closeParents () {\n        setTimeout(() => {\n          if (!openChildren) {\n            isActive.value = false\n            parent?.closeParents()\n          }\n        }, 40)\n      },\n    })\n\n    watch(isActive, val => {\n      val ? parent?.register() : parent?.unregister()\n    })\n\n    function onClickOutside () {\n      parent?.closeParents()\n    }\n\n    useRender(() => (\n      <VOverlay\n        ref={ overlay }\n        v-model={ isActive.value }\n        class={[\n          'v-menu',\n        ]}\n        transition={ props.transition }\n        absolute\n        closeOnContentClick\n        locationStrategy=\"connected\"\n        scrollStrategy=\"reposition\"\n        scrim={ false }\n        openDelay=\"300\"\n        closeDelay=\"250\"\n        activatorProps={{\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(isActive.value),\n          'aria-owns': id.value,\n        }}\n        onClick:outside={ onClickOutside }\n        { ...scopeId }\n        { ...attrs }\n        v-slots={{\n          default: slots.default,\n          activator: slots.activator,\n        }}\n      />\n    ))\n\n    return forwardRefs({ id }, overlay)\n  },\n})\n\nexport type VMenu = InstanceType<typeof VMenu>\n"],"mappings":";AAAA;AACA,qB,CAEA;;SACSA,iB;SACAC,Q,iCAET;;SACSC,mB;SACAC,W;SACAC,e;SACAC,U,yCAET;;AACA,SAASC,QAAT,EAAmBC,MAAnB,EAA2BC,OAA3B,EAAoCC,GAApC,EAAyCC,KAAzC,QAAsD,KAAtD;SACSC,gB,EAAkBC,M,EAAQC,S;SAC1BC,W,wBAET;;AAGA,OAAO,MAAMC,KAAK,GAAGJ,gBAAgB,GAEhC;EACHK,IAAI,EAAE,OADH;EAGHC,YAAY,EAAE,KAHX;EAKHC,KAAK,EAAE;IACL;IACA;IACAC,UAAU,EAAEC,OAHP;IAILC,EAAE,EAAEC,MAJC;IAML,GAAGpB,mBAAmB,CAAC;MACrBqB,UAAU,EAAE;QAAEC,SAAS,EAAExB;MAAb;IADS,CAAD;EANjB,CALJ;EAgBHyB,KAAK,EAAE;IACL,qBAAsBC,KAAD,IAAoB;EADpC,CAhBJ;;EAoBHC,KAAK,CAAET,KAAF,QAA2B;IAAA,IAAlB;MAAEU,KAAF;MAASC;IAAT,CAAkB;IAC9B,MAAMC,QAAQ,GAAG1B,eAAe,CAACc,KAAD,EAAQ,YAAR,CAAhC;IACA,MAAM;MAAEa;IAAF,IAAc1B,UAAU,EAA9B;IAEA,MAAM2B,GAAG,GAAGpB,MAAM,EAAlB;IACA,MAAMS,EAAE,GAAGf,QAAQ,CAAC,MAAMY,KAAK,CAACG,EAAN,IAAa,UAASW,GAAI,EAAjC,CAAnB;IAEA,MAAMC,OAAO,GAAGxB,GAAG,EAAnB;IAEA,MAAMyB,MAAM,GAAG3B,MAAM,CAACO,WAAD,EAAc,IAAd,CAArB;IACA,IAAIqB,YAAY,GAAG,CAAnB;IACA3B,OAAO,CAACM,WAAD,EAAc;MACnBsB,QAAQ,GAAI;QACV,EAAED,YAAF;MACD,CAHkB;;MAInBE,UAAU,GAAI;QACZ,EAAEF,YAAF;MACD,CANkB;;MAOnBG,YAAY,GAAI;QACdC,UAAU,CAAC,MAAM;UACf,IAAI,CAACJ,YAAL,EAAmB;YACjBL,QAAQ,CAACJ,KAAT,GAAiB,KAAjB;YACAQ,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;UACD;QACF,CALS,EAKP,EALO,CAAV;MAMD;;IAdkB,CAAd,CAAP;IAiBA5B,KAAK,CAACoB,QAAD,EAAWU,GAAG,IAAI;MACrBA,GAAG,GAAGN,MAAH,oBAAGA,MAAM,CAAEE,QAAR,EAAH,GAAwBF,MAAxB,oBAAwBA,MAAM,CAAEG,UAAR,EAA3B;IACD,CAFI,CAAL;;IAIA,SAASI,cAAT,GAA2B;MACzBP,MAAM,QAAN,YAAAA,MAAM,CAAEI,YAAR;IACD;;IAEDzB,SAAS,CAAC;MAAA,OAEAoB,OAFA;MAAA,cAGIH,QAAQ,CAACJ,KAHb;MAAA,iCAGII,QAAQ,CAACJ,KAHb;MAAA,SAIC,CACL,QADK,CAJD;MAAA,cAOOR,KAAK,CAACK,UAPb;MAAA;MAAA;MAAA,oBAUW,WAVX;MAAA,kBAWS,YAXT;MAAA,SAYE,KAZF;MAAA,aAaI,KAbJ;MAAA,cAcK,KAdL;MAAA,kBAeU;QACd,iBAAiB,MADH;QAEd,iBAAiBD,MAAM,CAACQ,QAAQ,CAACJ,KAAV,CAFT;QAGd,aAAaL,EAAE,CAACK;MAHF,CAfV;MAAA,mBAoBYe;IApBZ,GAqBDV,OArBC,EAsBDH,KAtBC,GAuBG;MACPc,OAAO,EAAEb,KAAK,CAACa,OADR;MAEPC,SAAS,EAAEd,KAAK,CAACc;IAFV,CAvBH,CAAD,CAAT;IA8BA,OAAOxC,WAAW,CAAC;MAAEkB;IAAF,CAAD,EAASY,OAAT,CAAlB;EACD;;AAvFE,CAFgC,CAA9B"}

package/lib/components/VNavigationDrawer/VNavigationDrawer.css

@@ -7,7 +7,7 @@
   max-width: 100%;
   pointer-events: auto;
   transition-duration: 0.2s;
-  transition-property: box-shadow, transform, visibility, width;
+  transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform;
   position: absolute;
@@ -29,29 +29,17 @@
   left: 0;
   border-top-width: thin;
 }
-.v-navigation-drawer--start {
+.v-navigation-drawer--left {
   top: 0;
-  border-inline-end-width: thin;
-}
-.v-navigation-drawer--start.v-locale--is-ltr, .v-locale--is-ltr .v-navigation-drawer--start {
   left: 0;
   right: auto;
+  border-right-width: thin;
 }
-.v-navigation-drawer--start.v-locale--is-rtl, .v-locale--is-rtl .v-navigation-drawer--start {
-  left: auto;
-  right: 0;
-}
-.v-navigation-drawer--end {
+.v-navigation-drawer--right {
   top: 0;
-  border-inline-start-width: thin;
-}
-.v-navigation-drawer--end.v-locale--is-ltr, .v-locale--is-ltr .v-navigation-drawer--end {
   left: auto;
   right: 0;
-}
-.v-navigation-drawer--end.v-locale--is-rtl, .v-locale--is-rtl .v-navigation-drawer--end {
-  left: 0;
-  right: auto;
+  border-left-width: thin;
 }
 .v-navigation-drawer--floating {
   border: none;
@@ -59,6 +47,13 @@
 .v-navigation-drawer--temporary {
   box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
+.v-navigation-drawer--sticky {
+  height: auto;
+  transition: box-shadow, transform, visibility, width, height, left, right;
+}
+.v-navigation-drawer .v-list {
+  overflow: hidden;
+}
 
 .v-navigation-drawer__content {
   flex: 0 1 auto;

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -8,16 +8,20 @@ import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
 import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { provideDefaults } from "../../composables/defaults.mjs";
 import { useBackgroundColor } from "../../composables/color.mjs";
 import { useDisplay } from "../../composables/display.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
 import { useRouter } from "../../composables/router.mjs";
+import { useRtl } from "../../composables/index.mjs";
 import { useSsrBoot } from "../../composables/ssrBoot.mjs";
+import { useSticky } from "./sticky.mjs";
 import { useTouch } from "./touch.mjs"; // Utilities
 
 import { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
-import { convertToUnit, defineComponent, useRender } from "../../util/index.mjs"; // Types
+import { convertToUnit, defineComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
 
+const locations = ['start', 'end', 'left', 'right', 'bottom'];
 export const VNavigationDrawer = defineComponent({
   name: 'VNavigationDrawer',
   props: {
@@ -34,7 +38,11 @@ export const VNavigationDrawer = defineComponent({
     rail: Boolean,
     railWidth: {
       type: [Number, String],
-      default: 72
+      default: 56
+    },
+    scrim: {
+      type: [String, Boolean],
+      default: true
     },
     image: String,
     temporary: Boolean,
@@ -45,9 +53,10 @@ export const VNavigationDrawer = defineComponent({
     },
     location: {
       type: String,
-      default: 'left',
-      validator: value => ['left', 'right', 'bottom'].includes(value)
+      default: 'start',
+      validator: value => locations.includes(value)
     },
+    sticky: Boolean,
     ...makeBorderProps(),
     ...makeElevationProps(),
     ...makeLayoutItemProps(),
@@ -66,6 +75,9 @@ export const VNavigationDrawer = defineComponent({
       attrs,
       slots
     } = _ref;
+    const {
+      isRtl
+    } = useRtl();
     const {
       themeClasses
     } = provideTheme(props);
@@ -87,14 +99,19 @@ export const VNavigationDrawer = defineComponent({
     } = useRounded(props);
     const router = useRouter();
     const isActive = useProxiedModel(props, 'modelValue', null, v => !!v);
-    const isHovering = ref(false);
     const {
       ssrBootStyles
     } = useSsrBoot();
+    const rootEl = ref();
+    const isHovering = ref(false);
     const width = computed(() => {
       return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
     });
+    const location = computed(() => {
+      return toPhysical(props.location, isRtl.value);
+    });
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
+    const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== 'bottom');
 
     if (!props.disableResizeWatcher) {
       watch(isTemporary, val => !props.permanent && (isActive.value = !val));
@@ -111,7 +128,6 @@ export const VNavigationDrawer = defineComponent({
       if (props.modelValue != null || isTemporary.value) return;
       isActive.value = props.permanent || !mobile.value;
     });
-    const rootEl = ref();
     const {
       isDragging,
       dragProgress,
@@ -121,7 +137,7 @@ export const VNavigationDrawer = defineComponent({
       isTemporary,
       width,
       touchless: toRef(props, 'touchless'),
-      position: toRef(props, 'location')
+      position: location
     });
     const layoutSize = computed(() => {
       const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
@@ -134,13 +150,25 @@ export const VNavigationDrawer = defineComponent({
     } = useLayoutItem({
       id: props.name,
       order: computed(() => parseInt(props.order, 10)),
-      position: toRef(props, 'location'),
+      position: location,
       layoutSize,
       elementSize: width,
       active: computed(() => isActive.value || isDragging.value),
       disableTransitions: computed(() => isDragging.value),
-      absolute: toRef(props, 'absolute')
+      absolute: computed(() => // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      props.absolute || isSticky.value && typeof isStuck.value !== 'string')
+    });
+    const {
+      isStuck,
+      stickyStyles
+    } = useSticky({
+      rootEl,
+      isSticky,
+      layoutItemStyles
     });
+    const scrimColor = useBackgroundColor(computed(() => {
+      return typeof props.scrim === 'string' ? props.scrim : null;
+    }));
     const scrimStyles = computed(() => ({ ...(isDragging.value ? {
         opacity: dragProgress.value * 0.2,
         transition: 'none'
@@ -153,6 +181,11 @@ export const VNavigationDrawer = defineComponent({
       } : undefined),
       ...layoutItemScrimStyles.value
     }));
+    provideDefaults({
+      VList: {
+        bgColor: 'transparent'
+      }
+    });
     useRender(() => {
       var _slots$image, _slots$prepend, _slots$default, _slots$append;
 
@@ -161,18 +194,16 @@ export const VNavigationDrawer = defineComponent({
         "ref": rootEl,
         "onMouseenter": () => isHovering.value = true,
         "onMouseleave": () => isHovering.value = false,
-        "class": ['v-navigation-drawer', {
-          'v-navigation-drawer--bottom': props.location === 'bottom',
-          'v-navigation-drawer--end': props.location === 'right',
+        "class": ['v-navigation-drawer', `v-navigation-drawer--${location.value}`, {
           'v-navigation-drawer--expand-on-hover': props.expandOnHover,
           'v-navigation-drawer--floating': props.floating,
           'v-navigation-drawer--is-hovering': isHovering.value,
           'v-navigation-drawer--rail': props.rail,
-          'v-navigation-drawer--start': props.location === 'left',
           'v-navigation-drawer--temporary': isTemporary.value,
-          'v-navigation-drawer--active': isActive.value
+          'v-navigation-drawer--active': isActive.value,
+          'v-navigation-drawer--sticky': isSticky.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value]
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value, ssrBootStyles.value, stickyStyles.value]
       }, attrs), {
         default: () => [hasImage && _createVNode("div", {
           "key": "image",
@@ -192,14 +223,16 @@ export const VNavigationDrawer = defineComponent({
       }), _createVNode(Transition, {
         "name": "fade-transition"
       }, {
-        default: () => [isTemporary.value && (isDragging.value || isActive.value) && _createVNode("div", {
-          "class": "v-navigation-drawer__scrim",
-          "style": scrimStyles.value,
+        default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && _createVNode("div", {
+          "class": ['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value],
+          "style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
           "onClick": () => isActive.value = false
         }, null)]
       })]);
     });
-    return {};
+    return {
+      isStuck
+    };
   }
 
 });

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useSsrBoot","useTouch","computed","onBeforeMount","ref","toRef","Transition","watch","convertToUnit","defineComponent","useRender","VNavigationDrawer","name","props","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","image","temporary","touchless","width","location","validator","value","includes","tag","emits","val","setup","attrs","slots","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","mobile","roundedClasses","router","isActive","v","isHovering","ssrBootStyles","isTemporary","currentRoute","rootEl","isDragging","dragProgress","dragStyles","position","layoutSize","size","layoutItemStyles","layoutRect","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","scrimStyles","opacity","transition","undefined","left","right","top","bottom","hasImage","prepend","append"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useDisplay } from '@/composables/display'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRouter } from '@/composables/router'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useTouch } from './touch'\n\n// Utilities\nimport { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue'\nimport { convertToUnit, defineComponent, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport const VNavigationDrawer = defineComponent({\n  name: 'VNavigationDrawer',\n\n  props: {\n    color: String,\n    disableResizeWatcher: Boolean,\n    disableRouteWatcher: Boolean,\n    expandOnHover: Boolean,\n    floating: Boolean,\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    permanent: Boolean,\n    rail: Boolean,\n    railWidth: {\n      type: [Number, String],\n      default: 72,\n    },\n    image: String,\n    temporary: Boolean,\n    touchless: Boolean,\n    width: {\n      type: [Number, String],\n      default: 256,\n    },\n    location: {\n      type: String as PropType<'left' | 'right' | 'bottom'>,\n      default: 'left',\n      validator: (value: any) => ['left', 'right', 'bottom'].includes(value),\n    },\n\n    ...makeBorderProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'nav' }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { mobile } = useDisplay()\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const isHovering = ref(false)\n    const { ssrBootStyles } = useSsrBoot()\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (isActive.value = !val))\n    }\n\n    if (!props.disableRouteWatcher && router) {\n      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false))\n    }\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    onBeforeMount(() => {\n      if (props.modelValue != null || isTemporary.value) return\n\n      isActive.value = props.permanent || !mobile.value\n    })\n\n    const rootEl = ref<HTMLElement>()\n\n    const { isDragging, dragProgress, dragStyles } = useTouch({\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: toRef(props, 'location'),\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n    const { layoutItemStyles, layoutRect, layoutItemScrimStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: toRef(props, 'location'),\n      layoutSize,\n      elementSize: width,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: toRef(props, 'absolute'),\n    })\n\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutRect.value ? {\n        left: convertToUnit(layoutRect.value.left),\n        right: convertToUnit(layoutRect.value.right),\n        top: convertToUnit(layoutRect.value.top),\n        bottom: convertToUnit(layoutRect.value.bottom),\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ () => (isHovering.value = true) }\n            onMouseleave={ () => (isHovering.value = false) }\n            class={[\n              'v-navigation-drawer',\n              {\n                'v-navigation-drawer--bottom': props.location === 'bottom',\n                'v-navigation-drawer--end': props.location === 'right',\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--start': props.location === 'left',\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--active': isActive.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n            ]}\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { slots.image\n                  ? slots.image?.({ image: props.image })\n                  : (<img src={ props.image } alt=\"\" />)\n                }\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && (\n              <div\n                class=\"v-navigation-drawer__scrim\"\n                style={ scrimStyles.value }\n                onClick={ () => isActive.value = false }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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"}
+{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","onBeforeMount","ref","toRef","Transition","watch","convertToUnit","defineComponent","toPhysical","useRender","locations","VNavigationDrawer","name","props","color","String","disableResizeWatcher","Boolean","disableRouteWatcher","expandOnHover","floating","modelValue","type","default","permanent","rail","railWidth","Number","scrim","image","temporary","touchless","width","location","validator","value","includes","sticky","tag","emits","val","setup","attrs","slots","isRtl","themeClasses","borderClasses","backgroundColorClasses","backgroundColorStyles","elevationClasses","mobile","roundedClasses","router","isActive","v","ssrBootStyles","rootEl","isHovering","isTemporary","isSticky","currentRoute","isDragging","dragProgress","dragStyles","position","layoutSize","size","layoutItemStyles","layoutRect","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","left","right","top","bottom","VList","bgColor","hasImage","prepend","append"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { provideDefaults } from '@/composables/defaults'\nimport { useBackgroundColor } from '@/composables/color'\nimport { useDisplay } from '@/composables/display'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { useRouter } from '@/composables/router'\nimport { useRtl } from '@/composables'\nimport { useSsrBoot } from '@/composables/ssrBoot'\nimport { useSticky } from './sticky'\nimport { useTouch } from './touch'\n\n// Utilities\nimport { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue'\nimport { convertToUnit, defineComponent, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nconst locations = ['start', 'end', 'left', 'right', 'bottom'] as const\n\nexport const VNavigationDrawer = defineComponent({\n  name: 'VNavigationDrawer',\n\n  props: {\n    color: String,\n    disableResizeWatcher: Boolean,\n    disableRouteWatcher: Boolean,\n    expandOnHover: Boolean,\n    floating: Boolean,\n    modelValue: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    permanent: Boolean,\n    rail: Boolean,\n    railWidth: {\n      type: [Number, String],\n      default: 56,\n    },\n    scrim: {\n      type: [String, Boolean],\n      default: true,\n    },\n    image: String,\n    temporary: Boolean,\n    touchless: Boolean,\n    width: {\n      type: [Number, String],\n      default: 256,\n    },\n    location: {\n      type: String as PropType<typeof locations[number]>,\n      default: 'start',\n      validator: (value: any) => locations.includes(value),\n    },\n    sticky: Boolean,\n\n    ...makeBorderProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'nav' }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const { isRtl } = useRtl()\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n    const { elevationClasses } = useElevation(props)\n    const { mobile } = useDisplay()\n    const { roundedClasses } = useRounded(props)\n    const router = useRouter()\n    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v)\n    const { ssrBootStyles } = useSsrBoot()\n\n    const rootEl = ref<HTMLElement>()\n    const isHovering = ref(false)\n\n    const width = computed(() => {\n      return (props.rail && props.expandOnHover && isHovering.value)\n        ? Number(props.width)\n        : Number(props.rail ? props.railWidth : props.width)\n    })\n    const location = computed(() => {\n      return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'\n    })\n    const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))\n    const isSticky = computed(() =>\n      props.sticky &&\n      !isTemporary.value &&\n      location.value !== 'bottom'\n    )\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (isActive.value = !val))\n    }\n\n    if (!props.disableRouteWatcher && router) {\n      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false))\n    }\n\n    watch(() => props.permanent, val => {\n      if (val) isActive.value = true\n    })\n\n    onBeforeMount(() => {\n      if (props.modelValue != null || isTemporary.value) return\n\n      isActive.value = props.permanent || !mobile.value\n    })\n\n    const { isDragging, dragProgress, dragStyles } = useTouch({\n      isActive,\n      isTemporary,\n      width,\n      touchless: toRef(props, 'touchless'),\n      position: location,\n    })\n\n    const layoutSize = computed(() => {\n      const size = isTemporary.value ? 0\n        : props.rail && props.expandOnHover ? Number(props.railWidth)\n        : width.value\n\n      return isDragging.value ? size * dragProgress.value : size\n    })\n\n    const { layoutItemStyles, layoutRect, layoutItemScrimStyles } = useLayoutItem({\n      id: props.name,\n      order: computed(() => parseInt(props.order, 10)),\n      position: location,\n      layoutSize,\n      elementSize: width,\n      active: computed(() => isActive.value || isDragging.value),\n      disableTransitions: computed(() => isDragging.value),\n      absolute: computed(() =>\n        // eslint-disable-next-line @typescript-eslint/no-use-before-define\n        props.absolute || (isSticky.value && typeof isStuck.value !== 'string')\n      ),\n    })\n\n    const { isStuck, stickyStyles } = useSticky({ rootEl, isSticky, layoutItemStyles })\n\n    const scrimColor = useBackgroundColor(computed(() => {\n      return typeof props.scrim === 'string' ? props.scrim : null\n    }))\n    const scrimStyles = computed(() => ({\n      ...isDragging.value ? {\n        opacity: dragProgress.value * 0.2,\n        transition: 'none',\n      } : undefined,\n      ...layoutRect.value ? {\n        left: convertToUnit(layoutRect.value.left),\n        right: convertToUnit(layoutRect.value.right),\n        top: convertToUnit(layoutRect.value.top),\n        bottom: convertToUnit(layoutRect.value.bottom),\n      } : undefined,\n      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ () => (isHovering.value = true) }\n            onMouseleave={ () => (isHovering.value = false) }\n            class={[\n              'v-navigation-drawer',\n              `v-navigation-drawer--${location.value}`,\n              {\n                'v-navigation-drawer--expand-on-hover': props.expandOnHover,\n                'v-navigation-drawer--floating': props.floating,\n                'v-navigation-drawer--is-hovering': isHovering.value,\n                'v-navigation-drawer--rail': props.rail,\n                'v-navigation-drawer--temporary': isTemporary.value,\n                'v-navigation-drawer--active': isActive.value,\n                'v-navigation-drawer--sticky': isSticky.value,\n              },\n              themeClasses.value,\n              backgroundColorClasses.value,\n              borderClasses.value,\n              elevationClasses.value,\n              roundedClasses.value,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n            ]}\n            { ...attrs }\n          >\n            { hasImage && (\n              <div key=\"image\" class=\"v-navigation-drawer__img\">\n                { slots.image\n                  ? slots.image?.({ image: props.image })\n                  : (<img src={ props.image } alt=\"\" />)\n                }\n              </div>\n            )}\n\n            { slots.prepend && (\n              <div class=\"v-navigation-drawer__prepend\">\n                { slots.prepend?.() }\n              </div>\n            )}\n\n            <div class=\"v-navigation-drawer__content\">\n              { slots.default?.() }\n            </div>\n\n            { slots.append && (\n              <div class=\"v-navigation-drawer__append\">\n                { slots.append?.() }\n              </div>\n            )}\n          </props.tag>\n\n          <Transition name=\"fade-transition\">\n            { isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && (\n              <div\n                class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}\n                style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}\n                onClick={ () => isActive.value = false }\n              />\n            )}\n          </Transition>\n        </>\n      )\n    })\n\n    return {\n      isStuck,\n    }\n  },\n})\n\nexport type VNavigationDrawer = InstanceType<typeof VNavigationDrawer>\n"],"mappings":"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"}

package/lib/components/VNavigationDrawer/VNavigationDrawer.sass

@@ -27,29 +27,17 @@
     left: 0
     border-top-width: $navigation-drawer-border-thin-width
 
-  &--start
+  &--left
     top: 0
-    border-inline-end-width: $navigation-drawer-border-thin-width
-
-    @include tools.ltr()
-      left: 0
-      right: auto
-
-    @include tools.rtl()
-      left: auto
-      right: 0
+    left: 0
+    right: auto
+    border-right-width: $navigation-drawer-border-thin-width
 
-  &--end
+  &--right
     top: 0
-    border-inline-start-width: $navigation-drawer-border-thin-width
-
-    @include tools.ltr()
-      left: auto
-      right: 0
-
-    @include tools.rtl()
-      left: 0
-      right: auto
+    left: auto
+    right: 0
+    border-left-width: $navigation-drawer-border-thin-width
 
   &--floating
     border: none
@@ -57,6 +45,13 @@
   &--temporary
     @include tools.elevation($navigation-drawer-temporary-elevation)
 
+  &--sticky
+    height: auto
+    transition: box-shadow, transform, visibility, width, height, left, right
+
+  .v-list
+    overflow: hidden
+
 .v-navigation-drawer__content
   flex: 0 1 auto
   height: $navigation-drawer-content-height

package/lib/components/VNavigationDrawer/_variables.scss

@@ -21,7 +21,7 @@ $navigation-drawer-overflow-scrolling: touch !default;
 $navigation-drawer-rounded-border-radius: settings.$border-radius-root !default;
 $navigation-drawer-temporary-elevation: 16 !default;
 $navigation-drawer-transition-duration: 0.2s !default;
-$navigation-drawer-transition-property: box-shadow, transform, visibility, width !default;
+$navigation-drawer-transition-property: box-shadow, transform, visibility, width, height, left, right, top, bottom !default;
 $navigation-drawer-transition-timing-function: settings.$standard-easing !default;
 $navigation-drawer-will-change: transform !default;
 

package/lib/components/VNavigationDrawer/sticky.mjs

@@ -0,0 +1,72 @@
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { convertToUnit } from "../../util/index.mjs";
+export function useSticky(_ref) {
+  let {
+    rootEl,
+    isSticky,
+    layoutItemStyles
+  } = _ref;
+  const isStuck = ref(false);
+  const stuckPosition = ref(0);
+  const stickyStyles = computed(() => {
+    const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
+    return [isSticky.value ? {
+      top: 'auto',
+      bottom: 'auto',
+      height: undefined
+    } : undefined, isStuck.value ? {
+      [side]: convertToUnit(stuckPosition.value)
+    } : {
+      top: layoutItemStyles.value.top
+    }];
+  });
+  onMounted(() => {
+    watch(isSticky, val => {
+      if (val) {
+        window.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+      } else {
+        window.removeEventListener('scroll', onScroll);
+      }
+    }, {
+      immediate: true
+    });
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener('scroll', onScroll);
+  });
+  let lastScrollTop = 0;
+
+  function onScroll() {
+    var _layoutItemStyles$val;
+
+    const direction = lastScrollTop > window.scrollY ? 'up' : 'down';
+    const rect = rootEl.value.getBoundingClientRect();
+    const layoutTop = parseFloat((_layoutItemStyles$val = layoutItemStyles.value.top) != null ? _layoutItemStyles$val : 0);
+    const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
+    const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
+
+    if (rect.height < window.innerHeight - layoutTop) {
+      isStuck.value = 'top';
+      stuckPosition.value = layoutTop;
+    } else if (direction === 'up' && isStuck.value === 'bottom' || direction === 'down' && isStuck.value === 'top') {
+      stuckPosition.value = window.scrollY + rect.top;
+      isStuck.value = true;
+    } else if (direction === 'down' && bottom <= 0) {
+      stuckPosition.value = 0;
+      isStuck.value = 'bottom';
+    } else if (direction === 'up' && top <= 0) {
+      stuckPosition.value = rect.top + top;
+      isStuck.value = 'top';
+    }
+
+    lastScrollTop = window.scrollY;
+  }
+
+  return {
+    isStuck,
+    stickyStyles
+  };
+}
+//# sourceMappingURL=sticky.mjs.map

package/lib/components/VNavigationDrawer/sticky.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky.mjs","names":["computed","onBeforeUnmount","onMounted","ref","watch","convertToUnit","useSticky","rootEl","isSticky","layoutItemStyles","isStuck","stuckPosition","stickyStyles","side","value","top","bottom","height","undefined","val","window","addEventListener","onScroll","passive","removeEventListener","immediate","document","lastScrollTop","direction","scrollY","rect","getBoundingClientRect","layoutTop","parseFloat","Math","max","innerHeight"],"sources":["../../../src/components/VNavigationDrawer/sticky.ts"],"sourcesContent":["import type { CSSProperties, Ref } from 'vue'\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { convertToUnit } from '@/util'\n\ninterface StickyProps {\n  rootEl: Ref<HTMLElement | undefined>\n  isSticky: Ref<boolean>\n  layoutItemStyles: Ref<CSSProperties>\n}\n\nexport function useSticky ({ rootEl, isSticky, layoutItemStyles }: StickyProps) {\n  const isStuck = ref<boolean | 'top' | 'bottom'>(false)\n  const stuckPosition = ref(0)\n\n  const stickyStyles = computed(() => {\n    const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value\n    return [\n      isSticky.value ? { top: 'auto', bottom: 'auto', height: undefined } : undefined,\n      isStuck.value\n        ? { [side]: convertToUnit(stuckPosition.value) }\n        : { top: layoutItemStyles.value.top },\n    ]\n  })\n\n  onMounted(() => {\n    watch(isSticky, val => {\n      if (val) {\n        window.addEventListener('scroll', onScroll, { passive: true })\n      } else {\n        window.removeEventListener('scroll', onScroll)\n      }\n    }, { immediate: true })\n  })\n\n  onBeforeUnmount(() => {\n    document.removeEventListener('scroll', onScroll)\n  })\n\n  let lastScrollTop = 0\n  function onScroll () {\n    const direction = lastScrollTop > window.scrollY ? 'up' : 'down'\n    const rect = rootEl.value!.getBoundingClientRect()\n    const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0)\n    const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop)\n    const bottom =\n      rect.height +\n      Math.max(stuckPosition.value, layoutTop) -\n      window.scrollY -\n      window.innerHeight\n\n    if (rect.height < window.innerHeight - layoutTop) {\n      isStuck.value = 'top'\n      stuckPosition.value = layoutTop\n    } else if (\n      (direction === 'up' && isStuck.value === 'bottom') ||\n      (direction === 'down' && isStuck.value === 'top')\n    ) {\n      stuckPosition.value = window.scrollY + rect.top\n      isStuck.value = true\n    } else if (direction === 'down' && bottom <= 0) {\n      stuckPosition.value = 0\n      isStuck.value = 'bottom'\n    } else if (direction === 'up' && top <= 0) {\n      stuckPosition.value = rect.top + top\n      isStuck.value = 'top'\n    }\n\n    lastScrollTop = window.scrollY\n  }\n\n  return { isStuck, stickyStyles }\n}\n"],"mappings":"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"}

package/lib/components/VOverlay/VOverlay.mjs

@@ -112,7 +112,8 @@ export const VOverlay = genericComponent()({
       return typeof props.scrim === 'string' ? props.scrim : null;
     }));
     const {
-      isTop,
+      globalTop,
+      localTop,
       stackStyles
     } = useStack(isActive, toRef(props, 'zIndex'));
     const {
@@ -122,7 +123,7 @@ export const VOverlay = genericComponent()({
       contentEvents
     } = useActivator(props, {
       isActive,
-      isTop
+      isTop: localTop
     });
     const {
       dimensionStyles
@@ -155,7 +156,7 @@ export const VOverlay = genericComponent()({
     }
 
     function closeConditional() {
-      return isActive.value && isTop.value;
+      return isActive.value && globalTop.value;
     }
 
     IN_BROWSER && watch(isActive, val => {
@@ -169,7 +170,7 @@ export const VOverlay = genericComponent()({
     });
 
     function onKeydown(e) {
-      if (e.key === 'Escape' && isTop.value) {
+      if (e.key === 'Escape' && globalTop.value) {
         if (!props.persistent) {
           isActive.value = false;
         } else animateClick();
@@ -179,7 +180,7 @@ export const VOverlay = genericComponent()({
     const router = useRouter();
     useToggleScope(() => props.closeOnBack, () => {
       useBackButton(router, next => {
-        if (isTop.value && isActive.value) {
+        if (globalTop.value && isActive.value) {
           next(false);
           if (!props.persistent) isActive.value = false;else animateClick();
         } else {
@@ -267,7 +268,8 @@ export const VOverlay = genericComponent()({
       activatorEl,
       animateClick,
       contentEl,
-      isTop,
+      globalTop,
+      localTop,
       updateLocation
     };
   }