vuetify 3.1.2 → 3.1.3

package/lib/components/VMenu/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Ref, VNodeChild } from 'vue';
+import { Ref, EffectScope, VNodeChild } from 'vue';
 
 interface ScrollStrategyData {
     root: Ref<HTMLElement | undefined>;
@@ -8,7 +8,7 @@ interface ScrollStrategyData {
     isActive: Ref<boolean>;
     updateLocation: Ref<((e: Event) => void) | undefined>;
 }
-declare type ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps$1) => void;
+declare type ScrollStrategyFn = (data: ScrollStrategyData, props: StrategyProps$1, scope: EffectScope) => void;
 declare const scrollStrategies: {
     none: null;
     close: typeof closeScrollStrategy;
@@ -21,7 +21,24 @@ interface StrategyProps$1 {
 }
 declare function closeScrollStrategy(data: ScrollStrategyData): void;
 declare function blockScrollStrategy(data: ScrollStrategyData, props: StrategyProps$1): void;
-declare function repositionScrollStrategy(data: ScrollStrategyData): void;
+declare function repositionScrollStrategy(data: ScrollStrategyData, props: StrategyProps$1, scope: EffectScope): void;
+
+declare class Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    constructor({ x, y, width, height }: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    });
+    get top(): number;
+    get bottom(): number;
+    get left(): number;
+    get right(): number;
+}
 
 declare const block: readonly ["top", "bottom"];
 declare const inline: readonly ["start", "end", "left", "right"];
@@ -69,7 +86,13 @@ interface StrategyProps {
 }
 declare function staticLocationStrategy(): void;
 declare function connectedLocationStrategy(data: LocationStrategyData, props: StrategyProps, contentStyles: Ref<Record<string, string>>): {
-    updateLocation: () => void;
+    updateLocation: () => {
+        available: {
+            x: number;
+            y: number;
+        };
+        contentBox: Box;
+    } | undefined;
 };
 
 declare type OverlaySlots = MakeSlots<{
@@ -112,7 +135,7 @@ declare const VMenu: {
             locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                 updateLocation: (e: Event) => void;
             } | undefined);
-            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             closeOnBack: boolean;
             contained: boolean;
             noClickAnimation: boolean;
@@ -210,12 +233,12 @@ declare const VMenu: {
                 } | undefined);
             };
             scrollStrategy: Omit<{
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                 default: string;
                 validator: (val: any) => boolean;
             }, "type" | "default"> & {
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
-                default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
+                default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             };
             closeOnBack: {
                 type: BooleanConstructor;
@@ -342,12 +365,12 @@ declare const VMenu: {
                 } | undefined);
             };
             scrollStrategy: Omit<{
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                 default: string;
                 validator: (val: any) => boolean;
             }, "type" | "default"> & {
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
-                default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
+                default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             };
             closeOnBack: {
                 type: BooleanConstructor;
@@ -392,7 +415,7 @@ declare const VMenu: {
                 locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                     updateLocation: (e: Event) => void;
                 } | undefined);
-                scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+                scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
                 closeOnBack: boolean;
                 contained: boolean;
                 noClickAnimation: boolean;
@@ -409,7 +432,7 @@ declare const VMenu: {
                 };
                 theme: StringConstructor;
                 scrollStrategy: {
-                    type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                    type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                     default: string;
                     validator: (val: any) => boolean;
                 };
@@ -503,7 +526,7 @@ declare const VMenu: {
                 };
                 theme: StringConstructor;
                 scrollStrategy: {
-                    type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                    type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                     default: string;
                     validator: (val: any) => boolean;
                 };
@@ -603,7 +626,7 @@ declare const VMenu: {
                 locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                     updateLocation: (e: Event) => void;
                 } | undefined);
-                scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+                scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
                 closeOnBack: boolean;
                 contained: boolean;
                 noClickAnimation: boolean;
@@ -640,7 +663,7 @@ declare const VMenu: {
             };
             theme: StringConstructor;
             scrollStrategy: {
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                 default: string;
                 validator: (val: any) => boolean;
             };
@@ -774,7 +797,7 @@ declare const VMenu: {
             locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                 updateLocation: (e: Event) => void;
             } | undefined);
-            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             closeOnBack: boolean;
             contained: boolean;
             noClickAnimation: boolean;
@@ -892,12 +915,12 @@ declare const VMenu: {
             } | undefined);
         };
         scrollStrategy: Omit<{
-            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
             default: string;
             validator: (val: any) => boolean;
         }, "type" | "default"> & {
-            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
-            default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
+            default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
         };
         closeOnBack: {
             type: BooleanConstructor;
@@ -942,7 +965,7 @@ declare const VMenu: {
             locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                 updateLocation: (e: Event) => void;
             } | undefined);
-            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             closeOnBack: boolean;
             contained: boolean;
             noClickAnimation: boolean;
@@ -959,7 +982,7 @@ declare const VMenu: {
             };
             theme: StringConstructor;
             scrollStrategy: {
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                 default: string;
                 validator: (val: any) => boolean;
             };
@@ -1053,7 +1076,7 @@ declare const VMenu: {
             };
             theme: StringConstructor;
             scrollStrategy: {
-                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+                type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
                 default: string;
                 validator: (val: any) => boolean;
             };
@@ -1153,7 +1176,7 @@ declare const VMenu: {
             locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
                 updateLocation: (e: Event) => void;
             } | undefined);
-            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+            scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
             closeOnBack: boolean;
             contained: boolean;
             noClickAnimation: boolean;
@@ -1190,7 +1213,7 @@ declare const VMenu: {
         };
         theme: StringConstructor;
         scrollStrategy: {
-            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
             default: string;
             validator: (val: any) => boolean;
         };
@@ -1392,12 +1415,12 @@ declare const VMenu: {
         } | undefined);
     };
     scrollStrategy: Omit<{
-        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
         default: string;
         validator: (val: any) => boolean;
     }, "type" | "default"> & {
-        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
-        default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
+        default: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
     };
     closeOnBack: {
         type: BooleanConstructor;
@@ -1442,7 +1465,7 @@ declare const VMenu: {
         locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
             updateLocation: (e: Event) => void;
         } | undefined);
-        scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+        scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
         closeOnBack: boolean;
         contained: boolean;
         noClickAnimation: boolean;
@@ -1459,7 +1482,7 @@ declare const VMenu: {
         };
         theme: StringConstructor;
         scrollStrategy: {
-            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
             default: string;
             validator: (val: any) => boolean;
         };
@@ -1553,7 +1576,7 @@ declare const VMenu: {
         };
         theme: StringConstructor;
         scrollStrategy: {
-            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+            type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
             default: string;
             validator: (val: any) => boolean;
         };
@@ -1653,7 +1676,7 @@ declare const VMenu: {
         locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
             updateLocation: (e: Event) => void;
         } | undefined);
-        scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+        scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
         closeOnBack: boolean;
         contained: boolean;
         noClickAnimation: boolean;
@@ -1690,7 +1713,7 @@ declare const VMenu: {
     };
     theme: StringConstructor;
     scrollStrategy: {
-        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition">;
+        type: vue.PropType<"none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition">;
         default: string;
         validator: (val: any) => boolean;
     };
@@ -1824,7 +1847,7 @@ declare const VMenu: {
     locationStrategy: "connected" | "static" | ((data: LocationStrategyData, props: StrategyProps, contentStyles: vue.Ref<Record<string, string>>) => {
         updateLocation: (e: Event) => void;
     } | undefined);
-    scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1) => void) | "reposition";
+    scrollStrategy: "none" | "block" | "close" | ((data: ScrollStrategyData, props: StrategyProps$1, scope: vue.EffectScope) => void) | "reposition";
     closeOnBack: boolean;
     contained: boolean;
     noClickAnimation: boolean;

package/lib/components/VNavigationDrawer/VNavigationDrawer.css

@@ -25,6 +25,10 @@
 .v-navigation-drawer--rounded {
   border-radius: 4px;
 }
+.v-navigation-drawer--top {
+  top: 0;
+  border-bottom-width: thin;
+}
 .v-navigation-drawer--bottom {
   left: 0;
   border-top-width: thin;

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -20,7 +20,7 @@ import { useSticky } from "./sticky.mjs";
 import { useTouch } from "./touch.mjs"; // Utilities
 import { computed, nextTick, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
 import { convertToUnit, defineComponent, toPhysical, useRender } from "../../util/index.mjs"; // Types
-const locations = ['start', 'end', 'left', 'right', 'bottom'];
+const locations = ['start', 'end', 'left', 'right', 'top', 'bottom'];
 export const VNavigationDrawer = defineComponent({
   name: 'VNavigationDrawer',
   props: {

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","provideDefaults","useBackgroundColor","useDisplay","useProxiedModel","useRouter","useRtl","useSsrBoot","useSticky","useTouch","computed","nextTick","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","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","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, nextTick, 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: {\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    ...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, 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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"}
+{"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","nextTick","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","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","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, nextTick, 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', 'top', '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: {\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    ...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, 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

@@ -23,6 +23,10 @@
   &--rounded
     @include tools.rounded($navigation-drawer-rounded-border-radius)
 
+  &--top
+    top: 0
+    border-bottom-width: $navigation-drawer-border-thin-width
+
   &--bottom
     left: 0
     border-top-width: $navigation-drawer-border-thin-width

package/lib/components/VNavigationDrawer/index.d.ts

@@ -57,7 +57,7 @@ declare const VNavigationDrawer: vue.DefineComponent<{
         default: number;
     };
     location: {
-        type: PropType<"end" | "start" | "left" | "bottom" | "right">;
+        type: PropType<"end" | "start" | "left" | "top" | "bottom" | "right">;
         default: string;
         validator: (value: any) => boolean;
     };
@@ -123,7 +123,7 @@ declare const VNavigationDrawer: vue.DefineComponent<{
         default: number;
     };
     location: {
-        type: PropType<"end" | "start" | "left" | "bottom" | "right">;
+        type: PropType<"end" | "start" | "left" | "top" | "bottom" | "right">;
         default: string;
         validator: (value: any) => boolean;
     };
@@ -133,7 +133,7 @@ declare const VNavigationDrawer: vue.DefineComponent<{
     "onUpdate:rail"?: ((val: boolean) => any) | undefined;
 }, {
     absolute: boolean;
-    location: "end" | "start" | "left" | "bottom" | "right";
+    location: "end" | "start" | "left" | "top" | "bottom" | "right";
     width: string | number;
     order: string | number;
     temporary: boolean;

package/lib/components/VNavigationDrawer/touch.mjs

@@ -28,7 +28,7 @@ export function useTouch(_ref) {
     window.removeEventListener('touchmove', onTouchmove);
     window.removeEventListener('touchend', onTouchend);
   });
-  const isHorizontal = computed(() => position.value !== 'bottom');
+  const isHorizontal = computed(() => ['left', 'right'].includes(position.value));
   const {
     addMovement,
     endTouch,
@@ -40,11 +40,11 @@ export function useTouch(_ref) {
   const offset = ref(0);
   let start;
   function getOffset(pos, active) {
-    return (position.value === 'left' ? pos : position.value === 'right' ? document.documentElement.clientWidth - pos : position.value === 'bottom' ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
+    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);
   }
   function getProgress(pos) {
     let limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
+    const progress = position.value === 'left' ? (pos - offset.value) / width.value : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === 'top' ? (pos - offset.value) / width.value : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
     return limit ? Math.max(0, Math.min(1, progress)) : progress;
   }
   function onTouchstart(e) {
@@ -52,8 +52,8 @@ export function useTouch(_ref) {
     const touchX = e.changedTouches[0].clientX;
     const touchY = e.changedTouches[0].clientY;
     const touchZone = 25;
-    const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
-    const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
+    const inTouchZone = position.value === 'left' ? touchX < touchZone : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone : position.value === 'top' ? touchY < touchZone : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone : oops();
+    const inElement = isActive.value && (position.value === 'left' ? touchX < width.value : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value : position.value === 'top' ? touchY < width.value : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value : oops());
     if (inTouchZone || inElement || isActive.value && isTemporary.value) {
       maybeDragging = true;
       start = [touchX, touchY];
@@ -105,6 +105,7 @@ export function useTouch(_ref) {
       isActive.value = velocity.direction === ({
         left: 'right',
         right: 'left',
+        top: 'down',
         bottom: 'up'
       }[position.value] || oops());
     } else {
@@ -113,7 +114,7 @@ export function useTouch(_ref) {
   }
   const dragStyles = computed(() => {
     return isDragging.value ? {
-      transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
+      transform: position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
       transition: 'none'
     } : undefined;
   });

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

@@ -1 +1 @@
-{"version":3,"file":"touch.mjs","names":["useVelocity","computed","onBeforeUnmount","onMounted","ref","useTouch","isActive","isTemporary","width","touchless","position","window","addEventListener","onTouchstart","passive","onTouchmove","onTouchend","removeEventListener","isHorizontal","value","addMovement","endTouch","getVelocity","maybeDragging","isDragging","dragProgress","offset","start","getOffset","pos","active","document","documentElement","clientWidth","clientHeight","oops","getProgress","limit","progress","Math","max","min","e","touchX","changedTouches","clientX","touchY","clientY","touchZone","inTouchZone","inElement","cancelable","dx","abs","dy","thresholdMet","preventDefault","velocity","identifier","vx","x","vy","y","direction","left","right","bottom","dragStyles","transform","transition","undefined","Error"],"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"sourcesContent":["// Composables\nimport { useVelocity } from '@/composables/touch'\n\n// Utilities\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport function useTouch ({ isActive, isTemporary, width, touchless, position }: {\n  isActive: Ref<boolean>\n  isTemporary: Ref<boolean>\n  width: Ref<number>\n  touchless: Ref<boolean>\n  position: Ref<'left' | 'right' | 'bottom'>\n}) {\n  onMounted(() => {\n    window.addEventListener('touchstart', onTouchstart, { passive: true })\n    window.addEventListener('touchmove', onTouchmove, { passive: false })\n    window.addEventListener('touchend', onTouchend, { passive: true })\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('touchstart', onTouchstart)\n    window.removeEventListener('touchmove', onTouchmove)\n    window.removeEventListener('touchend', onTouchend)\n  })\n\n  const isHorizontal = computed(() => position.value !== 'bottom')\n\n  const { addMovement, endTouch, getVelocity } = useVelocity()\n  let maybeDragging = false\n  const isDragging = ref(false)\n  const dragProgress = ref(0)\n  const offset = ref(0)\n  let start: [number, number] | undefined\n\n  function getOffset (pos: number, active: boolean): number {\n    return (\n      position.value === 'left' ? pos\n      : position.value === 'right' ? document.documentElement.clientWidth - pos\n      : position.value === 'bottom' ? document.documentElement.clientHeight - pos\n      : oops()\n    ) - (active ? width.value : 0)\n  }\n\n  function getProgress (pos: number, limit = true): number {\n    const progress = (\n      position.value === 'left' ? (pos - offset.value) / width.value\n      : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value\n      : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value\n      : oops()\n    )\n    return limit ? Math.max(0, Math.min(1, progress)) : progress\n  }\n\n  function onTouchstart (e: TouchEvent) {\n    if (touchless.value) return\n\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    const touchZone = 25\n    const inTouchZone: boolean =\n      position.value === 'left' ? touchX < touchZone\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone\n      : oops()\n\n    const inElement: boolean = isActive.value && (\n      position.value === 'left' ? touchX < width.value\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value\n      : oops()\n    )\n\n    if (\n      inTouchZone ||\n      inElement ||\n      (isActive.value && isTemporary.value)\n    ) {\n      maybeDragging = true\n      start = [touchX, touchY]\n\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)\n      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)\n\n      endTouch(e)\n      addMovement(e)\n    }\n  }\n\n  function onTouchmove (e: TouchEvent) {\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    if (maybeDragging) {\n      if (!e.cancelable) {\n        maybeDragging = false\n        return\n      }\n\n      const dx = Math.abs(touchX - start![0])\n      const dy = Math.abs(touchY - start![1])\n\n      const thresholdMet = isHorizontal.value\n        ? dx > dy && dx > 3\n        : dy > dx && dy > 3\n\n      if (thresholdMet) {\n        isDragging.value = true\n        maybeDragging = false\n      } else if ((isHorizontal.value ? dy : dx) > 3) {\n        maybeDragging = false\n      }\n    }\n\n    if (!isDragging.value) return\n\n    e.preventDefault()\n    addMovement(e)\n\n    const progress = getProgress(isHorizontal.value ? touchX : touchY, false)\n    dragProgress.value = Math.max(0, Math.min(1, progress))\n\n    if (progress > 1) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true)\n    } else if (progress < 0) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false)\n    }\n  }\n\n  function onTouchend (e: TouchEvent) {\n    maybeDragging = false\n\n    if (!isDragging.value) return\n\n    addMovement(e)\n\n    isDragging.value = false\n\n    const velocity = getVelocity(e.changedTouches[0].identifier)\n    const vx = Math.abs(velocity.x)\n    const vy = Math.abs(velocity.y)\n    const thresholdMet = isHorizontal.value\n      ? vx > vy && vx > 400\n      : vy > vx && vy > 3\n\n    if (thresholdMet) {\n      isActive.value = velocity.direction === ({\n        left: 'right',\n        right: 'left',\n        bottom: 'up',\n      }[position.value] || oops())\n    } else {\n      isActive.value = dragProgress.value > 0.5\n    }\n  }\n\n  const dragStyles = computed(() => {\n    return isDragging.value ? {\n      transform:\n        position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))`\n        : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))`\n        : oops(),\n      transition: 'none',\n    } : undefined\n  })\n\n  return {\n    isDragging,\n    dragProgress,\n    dragStyles,\n  }\n}\n\nfunction oops (): never {\n  throw new Error()\n}\n"],"mappings":"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"}
+{"version":3,"file":"touch.mjs","names":["useVelocity","computed","onBeforeUnmount","onMounted","ref","useTouch","isActive","isTemporary","width","touchless","position","window","addEventListener","onTouchstart","passive","onTouchmove","onTouchend","removeEventListener","isHorizontal","includes","value","addMovement","endTouch","getVelocity","maybeDragging","isDragging","dragProgress","offset","start","getOffset","pos","active","document","documentElement","clientWidth","clientHeight","oops","getProgress","limit","progress","Math","max","min","e","touchX","changedTouches","clientX","touchY","clientY","touchZone","inTouchZone","inElement","cancelable","dx","abs","dy","thresholdMet","preventDefault","velocity","identifier","vx","x","vy","y","direction","left","right","top","bottom","dragStyles","transform","transition","undefined","Error"],"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"sourcesContent":["// Composables\nimport { useVelocity } from '@/composables/touch'\n\n// Utilities\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\n// Types\nimport type { Ref } from 'vue'\n\nexport function useTouch ({ isActive, isTemporary, width, touchless, position }: {\n  isActive: Ref<boolean>\n  isTemporary: Ref<boolean>\n  width: Ref<number>\n  touchless: Ref<boolean>\n  position: Ref<'left' | 'right' | 'top' | 'bottom'>\n}) {\n  onMounted(() => {\n    window.addEventListener('touchstart', onTouchstart, { passive: true })\n    window.addEventListener('touchmove', onTouchmove, { passive: false })\n    window.addEventListener('touchend', onTouchend, { passive: true })\n  })\n\n  onBeforeUnmount(() => {\n    window.removeEventListener('touchstart', onTouchstart)\n    window.removeEventListener('touchmove', onTouchmove)\n    window.removeEventListener('touchend', onTouchend)\n  })\n\n  const isHorizontal = computed(() => ['left', 'right'].includes(position.value))\n\n  const { addMovement, endTouch, getVelocity } = useVelocity()\n  let maybeDragging = false\n  const isDragging = ref(false)\n  const dragProgress = ref(0)\n  const offset = ref(0)\n  let start: [number, number] | undefined\n\n  function getOffset (pos: number, active: boolean): number {\n    return (\n      position.value === 'left' ? pos\n      : position.value === 'right' ? document.documentElement.clientWidth - pos\n      : position.value === 'top' ? pos\n      : position.value === 'bottom' ? document.documentElement.clientHeight - pos\n      : oops()\n    ) - (active ? width.value : 0)\n  }\n\n  function getProgress (pos: number, limit = true): number {\n    const progress = (\n      position.value === 'left' ? (pos - offset.value) / width.value\n      : position.value === 'right' ? (document.documentElement.clientWidth - pos - offset.value) / width.value\n      : position.value === 'top' ? (pos - offset.value) / width.value\n      : position.value === 'bottom' ? (document.documentElement.clientHeight - pos - offset.value) / width.value\n      : oops()\n    )\n    return limit ? Math.max(0, Math.min(1, progress)) : progress\n  }\n\n  function onTouchstart (e: TouchEvent) {\n    if (touchless.value) return\n\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    const touchZone = 25\n    const inTouchZone: boolean =\n      position.value === 'left' ? touchX < touchZone\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - touchZone\n      : position.value === 'top' ? touchY < touchZone\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - touchZone\n      : oops()\n\n    const inElement: boolean = isActive.value && (\n      position.value === 'left' ? touchX < width.value\n      : position.value === 'right' ? touchX > document.documentElement.clientWidth - width.value\n      : position.value === 'top' ? touchY < width.value\n      : position.value === 'bottom' ? touchY > document.documentElement.clientHeight - width.value\n      : oops()\n    )\n\n    if (\n      inTouchZone ||\n      inElement ||\n      (isActive.value && isTemporary.value)\n    ) {\n      maybeDragging = true\n      start = [touchX, touchY]\n\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value)\n      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY)\n\n      endTouch(e)\n      addMovement(e)\n    }\n  }\n\n  function onTouchmove (e: TouchEvent) {\n    const touchX = e.changedTouches[0].clientX\n    const touchY = e.changedTouches[0].clientY\n\n    if (maybeDragging) {\n      if (!e.cancelable) {\n        maybeDragging = false\n        return\n      }\n\n      const dx = Math.abs(touchX - start![0])\n      const dy = Math.abs(touchY - start![1])\n\n      const thresholdMet = isHorizontal.value\n        ? dx > dy && dx > 3\n        : dy > dx && dy > 3\n\n      if (thresholdMet) {\n        isDragging.value = true\n        maybeDragging = false\n      } else if ((isHorizontal.value ? dy : dx) > 3) {\n        maybeDragging = false\n      }\n    }\n\n    if (!isDragging.value) return\n\n    e.preventDefault()\n    addMovement(e)\n\n    const progress = getProgress(isHorizontal.value ? touchX : touchY, false)\n    dragProgress.value = Math.max(0, Math.min(1, progress))\n\n    if (progress > 1) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true)\n    } else if (progress < 0) {\n      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false)\n    }\n  }\n\n  function onTouchend (e: TouchEvent) {\n    maybeDragging = false\n\n    if (!isDragging.value) return\n\n    addMovement(e)\n\n    isDragging.value = false\n\n    const velocity = getVelocity(e.changedTouches[0].identifier)\n    const vx = Math.abs(velocity.x)\n    const vy = Math.abs(velocity.y)\n    const thresholdMet = isHorizontal.value\n      ? vx > vy && vx > 400\n      : vy > vx && vy > 3\n\n    if (thresholdMet) {\n      isActive.value = velocity.direction === ({\n        left: 'right',\n        right: 'left',\n        top: 'down',\n        bottom: 'up',\n      }[position.value] || oops())\n    } else {\n      isActive.value = dragProgress.value > 0.5\n    }\n  }\n\n  const dragStyles = computed(() => {\n    return isDragging.value ? {\n      transform:\n        position.value === 'left' ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'right' ? `translateX(calc(100% - ${dragProgress.value * width.value}px))`\n        : position.value === 'top' ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))`\n        : position.value === 'bottom' ? `translateY(calc(100% - ${dragProgress.value * width.value}px))`\n        : oops(),\n      transition: 'none',\n    } : undefined\n  })\n\n  return {\n    isDragging,\n    dragProgress,\n    dragStyles,\n  }\n}\n\nfunction oops (): never {\n  throw new Error()\n}\n"],"mappings":"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"}