@vuetify/nightly 4.0.0-dev-20230511.0 → 4.0.0-dev-20230512.0

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -19,57 +19,58 @@ 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, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
-import { genericComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
+import { computed, nextTick, onBeforeMount, ref, shallowRef, toRef, Transition, watch } from 'vue';
+import { genericComponent, propsFactory, toPhysical, useRender } from "../../util/index.mjs"; // Types
 const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
+export const makeVNavigationDrawerProps = propsFactory({
+  color: String,
+  disableResizeWatcher: Boolean,
+  disableRouteWatcher: Boolean,
+  expandOnHover: Boolean,
+  floating: Boolean,
+  modelValue: {
+    type: Boolean,
+    default: null
+  },
+  permanent: Boolean,
+  rail: {
+    type: Boolean,
+    default: null
+  },
+  railWidth: {
+    type: [Number, String],
+    default: 56
+  },
+  scrim: {
+    type: [String, Boolean],
+    default: true
+  },
+  image: String,
+  temporary: Boolean,
+  touchless: Boolean,
+  width: {
+    type: [Number, String],
+    default: 256
+  },
+  location: {
+    type: String,
+    default: 'start',
+    validator: value => locations.includes(value)
+  },
+  sticky: Boolean,
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeElevationProps(),
+  ...makeLayoutItemProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({
+    tag: 'nav'
+  }),
+  ...makeThemeProps()
+}, 'v-navigation-drawer');
 export const VNavigationDrawer = genericComponent()({
   name: 'VNavigationDrawer',
-  props: {
-    color: String,
-    disableResizeWatcher: Boolean,
-    disableRouteWatcher: Boolean,
-    expandOnHover: Boolean,
-    floating: Boolean,
-    modelValue: {
-      type: Boolean,
-      default: null
-    },
-    permanent: Boolean,
-    rail: {
-      type: Boolean,
-      default: null
-    },
-    railWidth: {
-      type: [Number, String],
-      default: 56
-    },
-    scrim: {
-      type: [String, Boolean],
-      default: true
-    },
-    image: String,
-    temporary: Boolean,
-    touchless: Boolean,
-    width: {
-      type: [Number, String],
-      default: 256
-    },
-    location: {
-      type: String,
-      default: 'start',
-      validator: value => locations.includes(value)
-    },
-    sticky: Boolean,
-    ...makeBorderProps(),
-    ...makeComponentProps(),
-    ...makeElevationProps(),
-    ...makeLayoutItemProps(),
-    ...makeRoundedProps(),
-    ...makeTagProps({
-      tag: 'nav'
-    }),
-    ...makeThemeProps()
-  },
+  props: makeVNavigationDrawerProps(),
   emits: {
     'update:modelValue': val => true,
     'update:rail': val => true
@@ -108,7 +109,7 @@ export const VNavigationDrawer = genericComponent()({
       ssrBootStyles
     } = useSsrBoot();
     const rootEl = ref();
-    const isHovering = ref(false);
+    const isHovering = shallowRef(false);
     const width = computed(() => {
       return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
     });

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

@@ -1 +1 @@
-{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","nextTick","onBeforeMount","ref","toRef","Transition","watch","genericComponent","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","_ref","attrs","emit","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","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","VList","bgColor","onMouseenter","onMouseleave","hasImage","_createVNode","_Fragment","_mergeProps","class","style","prepend","append","onClick"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\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, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue'\nimport { genericComponent, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string\n}\n\nexport type VNavigationDrawerSlots = {\n  default: []\n  prepend: []\n  append: []\n  image: [VNavigationDrawerImageSlot]\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\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: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\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    ...makeComponentProps(),\n    ...makeElevationProps(),\n    ...makeLayoutItemProps(),\n    ...makeRoundedProps(),\n    ...makeTagProps({ tag: 'nav' }),\n    ...makeThemeProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, 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.expandOnHover && props.rail != null) {\n      watch(isHovering, val => emit('update:rail', !val))\n    }\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => 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, 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      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    function onMouseenter () {\n      isHovering.value = true\n    }\n    function onMouseleave () {\n      isHovering.value = false\n    }\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\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              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\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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"}
+{"version":3,"file":"VNavigationDrawer.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","makeLayoutItemProps","useLayoutItem","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","nextTick","onBeforeMount","ref","shallowRef","toRef","Transition","watch","genericComponent","propsFactory","toPhysical","useRender","locations","makeVNavigationDrawerProps","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","VNavigationDrawer","name","props","emits","val","setup","_ref","attrs","emit","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","layoutItemScrimStyles","id","order","parseInt","elementSize","active","disableTransitions","absolute","isStuck","stickyStyles","scrimColor","scrimStyles","opacity","transition","undefined","VList","bgColor","onMouseenter","onMouseleave","hasImage","_createVNode","_Fragment","_mergeProps","class","style","prepend","append","onClick"],"sources":["../../../src/components/VNavigationDrawer/VNavigationDrawer.tsx"],"sourcesContent":["// Styles\nimport './VNavigationDrawer.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\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, nextTick, onBeforeMount, ref, shallowRef, toRef, Transition, watch } from 'vue'\nimport { genericComponent, propsFactory, toPhysical, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VNavigationDrawerImageSlot = {\n  image: string | undefined\n}\n\nexport type VNavigationDrawerSlots = {\n  default: []\n  prepend: []\n  append: []\n  image: [VNavigationDrawerImageSlot]\n}\n\nconst locations = ['start', 'end', 'left', 'right', 'top', 'bottom'] as const\n\nexport const makeVNavigationDrawerProps = propsFactory({\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: {\n    type: Boolean as PropType<boolean | null>,\n    default: null,\n  },\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  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeLayoutItemProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'nav' }),\n  ...makeThemeProps(),\n}, 'v-navigation-drawer')\n\nexport const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({\n  name: 'VNavigationDrawer',\n\n  props: makeVNavigationDrawerProps(),\n\n  emits: {\n    'update:modelValue': (val: boolean) => true,\n    'update:rail': (val: boolean) => true,\n  },\n\n  setup (props, { attrs, emit, 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 = shallowRef(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.expandOnHover && props.rail != null) {\n      watch(isHovering, val => emit('update:rail', !val))\n    }\n\n    if (!props.disableResizeWatcher) {\n      watch(isTemporary, val => !props.permanent && (nextTick(() => 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, 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      ...layoutItemScrimStyles.value,\n    }))\n\n    provideDefaults({\n      VList: {\n        bgColor: 'transparent',\n      },\n    })\n\n    function onMouseenter () {\n      isHovering.value = true\n    }\n    function onMouseleave () {\n      isHovering.value = false\n    }\n\n    useRender(() => {\n      const hasImage = (slots.image || props.image)\n\n      return (\n        <>\n          <props.tag\n            ref={ rootEl }\n            onMouseenter={ onMouseenter }\n            onMouseleave={ onMouseleave }\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              props.class,\n            ]}\n            style={[\n              backgroundColorStyles.value,\n              layoutItemStyles.value,\n              dragStyles.value,\n              ssrBootStyles.value,\n              stickyStyles.value,\n              props.style,\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/index.d.mts

@@ -6,82 +6,100 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
 }
 
 type VNavigationDrawerImageSlot = {
-    image: string;
+    image: string | undefined;
 };
 declare const VNavigationDrawer: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            absolute: boolean;
-            location: "end" | "start" | "left" | "top" | "bottom" | "right";
-            width: string | number;
-            order: string | number;
-            style: vue.StyleValue;
-            temporary: boolean;
-            tag: string;
-            sticky: boolean;
-            rounded: string | number | boolean;
-            floating: boolean;
-            modelValue: boolean | null;
-            scrim: string | boolean;
-            touchless: boolean;
-            disableResizeWatcher: boolean;
-            disableRouteWatcher: boolean;
-            expandOnHover: boolean;
-            permanent: boolean;
-            rail: boolean | null;
-            railWidth: string | number;
-        }> & Omit<{
-            absolute: boolean;
-            location: "end" | "start" | "left" | "top" | "bottom" | "right";
-            width: string | number;
-            order: string | number;
-            style: vue.StyleValue;
-            temporary: boolean;
-            tag: string;
-            sticky: boolean;
-            floating: boolean;
-            modelValue: boolean | null;
-            scrim: string | boolean;
-            touchless: boolean;
-            disableResizeWatcher: boolean;
-            disableRouteWatcher: boolean;
-            expandOnHover: boolean;
-            permanent: boolean;
-            rail: boolean | null;
-            railWidth: string | number;
-        } & {
+        $props: {
+            absolute?: boolean | undefined;
+            location?: "end" | "start" | "left" | "top" | "bottom" | "right" | undefined;
+            width?: string | number | undefined;
+            order?: string | number | undefined;
+            style?: vue.StyleValue | undefined;
+            temporary?: boolean | undefined;
+            tag?: string | undefined;
+            sticky?: boolean | undefined;
+            rounded?: string | number | boolean | undefined;
+            floating?: boolean | undefined;
+            modelValue?: boolean | null | undefined;
+            scrim?: string | boolean | undefined;
+            touchless?: boolean | undefined;
+            disableResizeWatcher?: boolean | undefined;
+            disableRouteWatcher?: boolean | undefined;
+            expandOnHover?: boolean | undefined;
+            permanent?: boolean | undefined;
+            rail?: boolean | null | undefined;
+            railWidth?: string | number | undefined;
+            key?: string | number | symbol | undefined;
             name?: string | undefined;
             border?: string | number | boolean | undefined;
             color?: string | undefined;
             image?: string | undefined;
             class?: any;
-            elevation?: string | number | undefined;
-            theme?: string | undefined;
-            rounded?: string | number | boolean | undefined;
-        } & {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 image?: ((args_0: VNavigationDrawerImageSlot) => vue.VNodeChild) | undefined;
             };
+            elevation?: string | number | undefined;
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            theme?: string | undefined;
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
                 append?: false | (() => vue.VNodeChild) | undefined;
                 image?: false | ((args_0: VNavigationDrawerImageSlot) => vue.VNodeChild) | undefined;
             } | undefined;
-        } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-            "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
-            "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
             "v-slot:image"?: false | ((args_0: VNavigationDrawerImageSlot) => vue.VNodeChild) | undefined;
-        } & {
+            "v-slot:append"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:prepend"?: false | (() => vue.VNodeChild) | undefined;
             "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
             "onUpdate:rail"?: ((val: boolean) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "absolute" | "location" | "width" | "order" | "style" | "temporary" | "tag" | "sticky" | "rounded" | "floating" | "modelValue" | "scrim" | "touchless" | "disableResizeWatcher" | "disableRouteWatcher" | "expandOnHover" | "permanent" | "rail" | "railWidth">;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -89,10 +107,21 @@ declare const VNavigationDrawer: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            prepend?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            append?: (() => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
+            image?: ((args_0: VNavigationDrawerImageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | undefined;
         }>;
-        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null;
         $emit: ((event: "update:modelValue", val: boolean) => void) & ((event: "update:rail", val: boolean) => void);
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -145,7 +174,7 @@ declare const VNavigationDrawer: {
             "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
             "onUpdate:rail"?: ((val: boolean) => any) | undefined;
         }, {
-            isStuck: vue.Ref<boolean | "top" | "bottom">;
+            isStuck: vue.ShallowRef<boolean | "top" | "bottom">;
         }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
             'update:modelValue': (val: boolean) => true;
             'update:rail': (val: boolean) => true;
@@ -169,7 +198,20 @@ declare const VNavigationDrawer: {
             permanent: boolean;
             rail: boolean | null;
             railWidth: string | number;
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            prepend: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            append: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+            image: (args_0: VNavigationDrawerImageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -184,7 +226,7 @@ declare const VNavigationDrawer: {
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof nextTick;
@@ -239,7 +281,7 @@ declare const VNavigationDrawer: {
         "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
         "onUpdate:rail"?: ((val: boolean) => any) | undefined;
     } & vue.ShallowUnwrapRef<{
-        isStuck: vue.Ref<boolean | "top" | "bottom">;
+        isStuck: vue.ShallowRef<boolean | "top" | "bottom">;
     }> & {} & vue.ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -294,7 +336,7 @@ declare const VNavigationDrawer: {
     "onUpdate:modelValue"?: ((val: boolean) => any) | undefined;
     "onUpdate:rail"?: ((val: boolean) => any) | undefined;
 }, {
-    isStuck: vue.Ref<boolean | "top" | "bottom">;
+    isStuck: vue.ShallowRef<boolean | "top" | "bottom">;
 }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
     'update:modelValue': (val: boolean) => true;
     'update:rail': (val: boolean) => true;
@@ -318,7 +360,20 @@ declare const VNavigationDrawer: {
     permanent: boolean;
     rail: boolean | null;
     railWidth: string | number;
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    prepend: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    append: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    image: (args_0: VNavigationDrawerImageSlot) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     theme: StringConstructor;
     tag: Omit<{
         type: StringConstructor;

package/lib/components/VNavigationDrawer/sticky.mjs

@@ -1,13 +1,14 @@
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import { convertToUnit } from "../../util/index.mjs";
+// Utilities
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue';
+import { convertToUnit } from "../../util/index.mjs"; // Types
 export function useSticky(_ref) {
   let {
     rootEl,
     isSticky,
     layoutItemStyles
   } = _ref;
-  const isStuck = ref(false);
-  const stuckPosition = ref(0);
+  const isStuck = shallowRef(false);
+  const stuckPosition = shallowRef(0);
   const stickyStyles = computed(() => {
     const side = typeof isStuck.value === 'boolean' ? 'top' : isStuck.value;
     return [isSticky.value ? {
@@ -43,18 +44,24 @@ export function useSticky(_ref) {
     const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
     const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
     const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
+    const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue('--v-body-scroll-y')) || 0;
     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;
+      stuckPosition.value = window.scrollY + rect.top - bodyScroll;
       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';
+      if (!bodyScroll) {
+        stuckPosition.value = rect.top + top;
+        isStuck.value = 'top';
+      } else if (isStuck.value !== 'top') {
+        stuckPosition.value = -top + bodyScroll + layoutTop;
+        isStuck.value = 'top';
+      }
     }
     lastScrollTop = window.scrollY;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"sticky.mjs","names":["computed","onBeforeUnmount","onMounted","ref","watch","convertToUnit","useSticky","_ref","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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"}
+{"version":3,"file":"sticky.mjs","names":["computed","onBeforeUnmount","onMounted","shallowRef","watch","convertToUnit","useSticky","_ref","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","bodyScroll","getComputedStyle","getPropertyValue"],"sources":["../../../src/components/VNavigationDrawer/sticky.ts"],"sourcesContent":["// Utilities\nimport { computed, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'\nimport { convertToUnit } from '@/util'\n\n// Types\nimport type { CSSProperties, Ref } from 'vue'\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 = shallowRef<boolean | 'top' | 'bottom'>(false)\n  const stuckPosition = shallowRef(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    const bodyScroll = parseFloat(getComputedStyle(rootEl.value!).getPropertyValue('--v-body-scroll-y')) || 0\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 - bodyScroll\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      if (!bodyScroll) {\n        stuckPosition.value = rect.top + top\n        isStuck.value = 'top'\n      } else if (isStuck.value !== 'top') {\n        stuckPosition.value = -top + bodyScroll + layoutTop\n        isStuck.value = 'top'\n      }\n    }\n\n    lastScrollTop = window.scrollY\n  }\n\n  return { isStuck, stickyStyles }\n}\n"],"mappings":"AAAA;AACA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,SAAS,EAAEC,UAAU,EAAEC,KAAK,QAAQ,KAAK;AAAA,SACpEC,aAAa,gCAEtB;AASA,OAAO,SAASC,SAASA,CAAAC,IAAA,EAAuD;EAAA,IAArD;IAAEC,MAAM;IAAEC,QAAQ;IAAEC;EAA8B,CAAC,GAAAH,IAAA;EAC5E,MAAMI,OAAO,GAAGR,UAAU,CAA6B,KAAK,CAAC;EAC7D,MAAMS,aAAa,GAAGT,UAAU,CAAC,CAAC,CAAC;EAEnC,MAAMU,YAAY,GAAGb,QAAQ,CAAC,MAAM;IAClC,MAAMc,IAAI,GAAG,OAAOH,OAAO,CAACI,KAAK,KAAK,SAAS,GAAG,KAAK,GAAGJ,OAAO,CAACI,KAAK;IACvE,OAAO,CACLN,QAAQ,CAACM,KAAK,GAAG;MAAEC,GAAG,EAAE,MAAM;MAAEC,MAAM,EAAE,MAAM;MAAEC,MAAM,EAAEC;IAAU,CAAC,GAAGA,SAAS,EAC/ER,OAAO,CAACI,KAAK,GACT;MAAE,CAACD,IAAI,GAAGT,aAAa,CAACO,aAAa,CAACG,KAAK;IAAE,CAAC,GAC9C;MAAEC,GAAG,EAAEN,gBAAgB,CAACK,KAAK,CAACC;IAAI,CAAC,CACxC;EACH,CAAC,CAAC;EAEFd,SAAS,CAAC,MAAM;IACdE,KAAK,CAACK,QAAQ,EAAEW,GAAG,IAAI;MACrB,IAAIA,GAAG,EAAE;QACPC,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEC,QAAQ,EAAE;UAAEC,OAAO,EAAE;QAAK,CAAC,CAAC;MAChE,CAAC,MAAM;QACLH,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;MAChD;IACF,CAAC,EAAE;MAAEG,SAAS,EAAE;IAAK,CAAC,CAAC;EACzB,CAAC,CAAC;EAEFzB,eAAe,CAAC,MAAM;IACpB0B,QAAQ,CAACF,mBAAmB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;EAClD,CAAC,CAAC;EAEF,IAAIK,aAAa,GAAG,CAAC;EACrB,SAASL,QAAQA,CAAA,EAAI;IACnB,MAAMM,SAAS,GAAGD,aAAa,GAAGP,MAAM,CAACS,OAAO,GAAG,IAAI,GAAG,MAAM;IAChE,MAAMC,IAAI,GAAGvB,MAAM,CAACO,KAAK,CAAEiB,qBAAqB,EAAE;IAClD,MAAMC,SAAS,GAAGC,UAAU,CAACxB,gBAAgB,CAACK,KAAK,CAACC,GAAG,IAAI,CAAC,CAAC;IAC7D,MAAMA,GAAG,GAAGK,MAAM,CAACS,OAAO,GAAGK,IAAI,CAACC,GAAG,CAAC,CAAC,EAAExB,aAAa,CAACG,KAAK,GAAGkB,SAAS,CAAC;IACzE,MAAMhB,MAAM,GACVc,IAAI,CAACb,MAAM,GACXiB,IAAI,CAACC,GAAG,CAACxB,aAAa,CAACG,KAAK,EAAEkB,SAAS,CAAC,GACxCZ,MAAM,CAACS,OAAO,GACdT,MAAM,CAACgB,WAAW;IACpB,MAAMC,UAAU,GAAGJ,UAAU,CAACK,gBAAgB,CAAC/B,MAAM,CAACO,KAAK,CAAE,CAACyB,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC;IAEzG,IAAIT,IAAI,CAACb,MAAM,GAAGG,MAAM,CAACgB,WAAW,GAAGJ,SAAS,EAAE;MAChDtB,OAAO,CAACI,KAAK,GAAG,KAAK;MACrBH,aAAa,CAACG,KAAK,GAAGkB,SAAS;IACjC,CAAC,MAAM,IACJJ,SAAS,KAAK,IAAI,IAAIlB,OAAO,CAACI,KAAK,KAAK,QAAQ,IAChDc,SAAS,KAAK,MAAM,IAAIlB,OAAO,CAACI,KAAK,KAAK,KAAM,EACjD;MACAH,aAAa,CAACG,KAAK,GAAGM,MAAM,CAACS,OAAO,GAAGC,IAAI,CAACf,GAAG,GAAGsB,UAAU;MAC5D3B,OAAO,CAACI,KAAK,GAAG,IAAI;IACtB,CAAC,MAAM,IAAIc,SAAS,KAAK,MAAM,IAAIZ,MAAM,IAAI,CAAC,EAAE;MAC9CL,aAAa,CAACG,KAAK,GAAG,CAAC;MACvBJ,OAAO,CAACI,KAAK,GAAG,QAAQ;IAC1B,CAAC,MAAM,IAAIc,SAAS,KAAK,IAAI,IAAIb,GAAG,IAAI,CAAC,EAAE;MACzC,IAAI,CAACsB,UAAU,EAAE;QACf1B,aAAa,CAACG,KAAK,GAAGgB,IAAI,CAACf,GAAG,GAAGA,GAAG;QACpCL,OAAO,CAACI,KAAK,GAAG,KAAK;MACvB,CAAC,MAAM,IAAIJ,OAAO,CAACI,KAAK,KAAK,KAAK,EAAE;QAClCH,aAAa,CAACG,KAAK,GAAG,CAACC,GAAG,GAAGsB,UAAU,GAAGL,SAAS;QACnDtB,OAAO,CAACI,KAAK,GAAG,KAAK;MACvB;IACF;IAEAa,aAAa,GAAGP,MAAM,CAACS,OAAO;EAChC;EAEA,OAAO;IAAEnB,OAAO;IAAEE;EAAa,CAAC;AAClC"}

package/lib/components/VNavigationDrawer/touch.mjs

@@ -1,6 +1,6 @@
 // Composables
 import { useVelocity } from "../../composables/touch.mjs"; // Utilities
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue';
 
 // Types
 
@@ -35,9 +35,9 @@ export function useTouch(_ref) {
     getVelocity
   } = useVelocity();
   let maybeDragging = false;
-  const isDragging = ref(false);
-  const dragProgress = ref(0);
-  const offset = ref(0);
+  const isDragging = shallowRef(false);
+  const dragProgress = shallowRef(0);
+  const offset = shallowRef(0);
   let start;
   function getOffset(pos, active) {
     return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'top' ? pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);