@vuetify/nightly 3.0.0-alpha.11 → 3.0.0-beta.0

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -1,4 +1,4 @@
-import { createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
 import "./VNavigationDrawer.css"; // Composables
 
@@ -7,19 +7,22 @@ import { makeElevationProps, useElevation } from "../../composables/elevation.mj
 import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
+import { useBackgroundColor } from "../../composables/color.mjs";
 import { useDisplay } from "../../composables/display.mjs";
 import { useProxiedModel } from "../../composables/proxiedModel.mjs";
-import { makeThemeProps, useTheme } from "../../composables/theme.mjs";
-import { useBackgroundColor } from "../../composables/color.mjs"; // Utilities
+import { useRouter } from "../../composables/router.mjs";
+import { useTouch } from "./touch.mjs"; // Utilities
 
-import { computed, onBeforeMount, ref, toRef, watch } from 'vue';
-import { defineComponent } from "../../util/index.mjs"; // Types
+import { computed, onBeforeMount, ref, toRef, Transition, watch } from 'vue';
+import { convertToUnit, defineComponent } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VNavigationDrawer = defineComponent({
   name: 'VNavigationDrawer',
   props: {
     color: String,
     disableResizeWatcher: Boolean,
+    disableRouteWatcher: Boolean,
     expandOnHover: Boolean,
     floating: Boolean,
     modelValue: {
@@ -34,6 +37,7 @@ export default defineComponent({
     },
     image: String,
     temporary: Boolean,
+    touchless: Boolean,
     width: {
       type: [Number, String],
       default: 256
@@ -52,16 +56,21 @@ export default defineComponent({
     }),
     ...makeThemeProps()
   },
+  emits: {
+    'update:modelValue': val => true
+  },
 
-  setup(props, {
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
     const {
       themeClasses
-    } = useTheme(props);
+    } = provideTheme(props);
     const {
       borderClasses
-    } = useBorder(props, 'v-navigation-drawer');
+    } = useBorder(props);
     const {
       backgroundColorClasses,
       backgroundColorStyles
@@ -74,31 +83,78 @@ export default defineComponent({
     } = useDisplay();
     const {
       roundedClasses
-    } = useRounded(props, 'v-navigation-drawer');
+    } = useRounded(props);
+    const router = useRouter();
     const isActive = useProxiedModel(props, 'modelValue');
     const isHovering = ref(false);
     const width = computed(() => {
-      return props.rail && props.expandOnHover && isHovering.value ? props.width : Number(props.rail ? props.railWidth : props.width);
+      return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
     });
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
-    const layoutStyles = useLayoutItem(props.name, toRef(props, 'priority'), toRef(props, 'position'), computed(() => isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value), width, isActive);
 
     if (!props.disableResizeWatcher) {
-      watch(mobile, val => !props.permanent && (isActive.value = !val));
+      watch(isTemporary, val => !props.permanent && (isActive.value = !val));
+    }
+
+    if (!props.disableRouteWatcher && router) {
+      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false));
     }
 
-    watch(props, val => {
-      if (val.permanent) isActive.value = true;
+    watch(() => props.permanent, val => {
+      if (val) isActive.value = true;
     });
     onBeforeMount(() => {
-      if (props.modelValue != null) return;
+      if (props.modelValue != null || isTemporary.value) return;
       isActive.value = props.permanent || !mobile.value;
     });
+    const rootEl = ref();
+    const {
+      isDragging,
+      dragProgress,
+      dragStyles
+    } = useTouch({
+      isActive,
+      isTemporary,
+      width,
+      touchless: toRef(props, 'touchless'),
+      position: toRef(props, 'position')
+    });
+    const layoutSize = computed(() => {
+      const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
+      return isDragging.value ? size * dragProgress.value : size;
+    });
+    const {
+      layoutItemStyles,
+      layoutRect,
+      layoutItemScrimStyles
+    } = useLayoutItem({
+      id: props.name,
+      priority: computed(() => parseInt(props.priority, 10)),
+      position: toRef(props, 'position'),
+      layoutSize,
+      elementSize: width,
+      active: computed(() => isActive.value || isDragging.value),
+      disableTransitions: computed(() => isDragging.value),
+      absolute: toRef(props, 'absolute')
+    });
+    const scrimStyles = computed(() => ({ ...(isDragging.value ? {
+        opacity: dragProgress.value * 0.2,
+        transition: 'none'
+      } : undefined),
+      ...(layoutRect.value ? {
+        left: convertToUnit(layoutRect.value.left),
+        right: convertToUnit(layoutRect.value.right),
+        top: convertToUnit(layoutRect.value.top),
+        bottom: convertToUnit(layoutRect.value.bottom)
+      } : undefined),
+      ...layoutItemScrimStyles.value
+    }));
     return () => {
       var _slots$image, _slots$prepend, _slots$default, _slots$append;
 
       const hasImage = slots.image || props.image;
-      return _createVNode(props.tag, {
+      return _createVNode(_Fragment, null, [_createVNode(props.tag, _mergeProps({
+        "ref": rootEl,
         "onMouseenter": () => isHovering.value = true,
         "onMouseleave": () => isHovering.value = false,
         "class": ['v-navigation-drawer', {
@@ -110,10 +166,10 @@ export default defineComponent({
           'v-navigation-drawer--rail': props.rail,
           'v-navigation-drawer--start': props.position === 'left',
           'v-navigation-drawer--temporary': isTemporary.value,
-          'v-navigation-drawer--absolute': props.absolute
+          'v-navigation-drawer--active': isActive.value
         }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value],
-        "style": [backgroundColorStyles.value, layoutStyles.value]
-      }, {
+        "style": [backgroundColorStyles.value, layoutItemStyles.value, dragStyles.value]
+      }, attrs), {
         default: () => [hasImage && _createVNode("div", {
           "class": "v-navigation-drawer__img"
         }, [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots, {
@@ -121,15 +177,22 @@ export default defineComponent({
         }) : _createVNode("img", {
           "src": props.image,
           "alt": ""
-        }, null, 8, ["src"])]), slots.prepend && _createVNode("div", {
+        }, null)]), slots.prepend && _createVNode("div", {
           "class": "v-navigation-drawer__prepend"
         }, [(_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)]), _createVNode("div", {
           "class": "v-navigation-drawer__content"
         }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), slots.append && _createVNode("div", {
           "class": "v-navigation-drawer__append"
-        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])],
-        _: 1
-      }, 8, ["onMouseenter", "onMouseleave", "class", "style"]);
+        }, [(_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)])]
+      }), _createVNode(Transition, {
+        "name": "fade-transition"
+      }, {
+        default: () => [isTemporary.value && (isDragging.value || isActive.value) && _createVNode("div", {
+          "class": "v-navigation-drawer__scrim",
+          "style": scrimStyles.value,
+          "onClick": () => isActive.value = false
+        }, null)]
+      })]);
     };
   }
 

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

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

package/lib/components/VNavigationDrawer/VNavigationDrawer.sass

@@ -10,28 +10,26 @@
   height: $navigation-drawer-height
   max-width: 100%
   pointer-events: auto
-  top: 0
   transition-duration: $navigation-drawer-transition-duration
   transition-property: $navigation-drawer-transition-property
   transition-timing-function: $navigation-drawer-transition-timing-function
   will-change: $navigation-drawer-will-change
-  position: fixed
+  position: absolute
 
   @include tools.border($navigation-drawer-border...)
   @include tools.elevation($navigation-drawer-elevation)
   @include tools.rounded($navigation-drawer-border-radius)
   @include tools.theme($navigation-drawer-theme...)
 
-  &--absolute
-    position: absolute
-
-  &--floating
-    border-color: transparent
-
   &--rounded
     @include tools.rounded($navigation-drawer-rounded-border-radius)
 
+  &--bottom
+    left: 0
+    border-top-width: $navigation-drawer-border-thin-width
+
   &--start
+    top: 0
     border-inline-end-width: $navigation-drawer-border-thin-width
 
     @include tools.ltr()
@@ -43,6 +41,7 @@
       right: 0
 
   &--end
+    top: 0
     border-inline-start-width: $navigation-drawer-border-thin-width
 
     @include tools.ltr()
@@ -53,6 +52,9 @@
       left: 0
       right: auto
 
+  &--floating
+    border: none
+
   &--temporary
     @include tools.elevation($navigation-drawer-temporary-elevation)
 
@@ -75,3 +77,12 @@
     height: $navigation-drawer-img-height
     object-fit: $navigation-drawer-img-object-fit
     width: $navigation-drawer-img-width
+
+.v-navigation-drawer__scrim
+  position: absolute
+  width: 100%
+  height: 100%
+  background: black
+  opacity: .2
+  transition: opacity $navigation-drawer-transition-duration $navigation-drawer-transition-timing-function
+  z-index: 1

package/lib/components/VNavigationDrawer/_variables.scss

@@ -8,7 +8,7 @@ $navigation-drawer-border-radius: map.get(settings.$rounded, '0') !default;
 $navigation-drawer-border-style: settings.$border-style-root !default;
 $navigation-drawer-border-thin-width: thin !default;
 $navigation-drawer-border-width: 0 !default;
-$navigation-drawer-color: rgb(var(--v-theme-on-surface)) !default;
+$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $navigation-drawer-content-height: 100% !default;
 $navigation-drawer-content-overflow-x: hidden !default;
 $navigation-drawer-content-overflow-y: auto !default;

package/lib/components/VNavigationDrawer/index.mjs

@@ -1,2 +1,2 @@
-export { default as VNavigationDrawer } from "./VNavigationDrawer.mjs";
+export { VNavigationDrawer } from "./VNavigationDrawer.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VNavigationDrawer/index.ts"],"names":["default","VNavigationDrawer"],"mappings":"SAASA,OAAO,IAAIC,iB","sourcesContent":["export { default as VNavigationDrawer } from './VNavigationDrawer'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VNavigationDrawer/index.ts"],"names":["VNavigationDrawer"],"mappings":"SAASA,iB","sourcesContent":["export { VNavigationDrawer } from './VNavigationDrawer'\n"],"file":"index.mjs"}

package/lib/components/VNavigationDrawer/touch.mjs

@@ -0,0 +1,139 @@
+import { useVelocity } from "../../composables/touch.mjs";
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+export function useTouch(_ref) {
+  let {
+    isActive,
+    isTemporary,
+    width,
+    touchless,
+    position
+  } = _ref;
+  onMounted(() => {
+    window.addEventListener('touchstart', onTouchstart, {
+      passive: true
+    });
+    window.addEventListener('touchmove', onTouchmove, {
+      passive: false
+    });
+    window.addEventListener('touchend', onTouchend, {
+      passive: true
+    });
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener('touchstart', onTouchstart);
+    window.removeEventListener('touchmove', onTouchmove);
+    window.removeEventListener('touchend', onTouchend);
+  });
+  const isHorizontal = computed(() => position.value !== 'bottom');
+  const {
+    addMovement,
+    endTouch,
+    getVelocity
+  } = useVelocity();
+  let maybeDragging = false;
+  const isDragging = ref(false);
+  const dragProgress = ref(0);
+  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);
+  }
+
+  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();
+    return limit ? Math.max(0, Math.min(1, progress)) : progress;
+  }
+
+  function onTouchstart(e) {
+    if (touchless.value) return;
+    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());
+
+    if (inTouchZone || inElement || isActive.value && isTemporary.value) {
+      maybeDragging = true;
+      start = [touchX, touchY];
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
+      dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
+      endTouch(e);
+      addMovement(e);
+    }
+  }
+
+  function onTouchmove(e) {
+    const touchX = e.changedTouches[0].clientX;
+    const touchY = e.changedTouches[0].clientY;
+
+    if (maybeDragging) {
+      if (!e.cancelable) {
+        maybeDragging = false;
+        return;
+      }
+
+      const dx = Math.abs(touchX - start[0]);
+      const dy = Math.abs(touchY - start[1]);
+      const thresholdMet = isHorizontal.value ? dx > dy && dx > 3 : dy > dx && dy > 3;
+
+      if (thresholdMet) {
+        isDragging.value = true;
+        maybeDragging = false;
+      } else if ((isHorizontal.value ? dy : dx) > 3) {
+        maybeDragging = false;
+      }
+    }
+
+    if (!isDragging.value) return;
+    e.preventDefault();
+    addMovement(e);
+    const progress = getProgress(isHorizontal.value ? touchX : touchY, false);
+    dragProgress.value = Math.max(0, Math.min(1, progress));
+
+    if (progress > 1) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, true);
+    } else if (progress < 0) {
+      offset.value = getOffset(isHorizontal.value ? touchX : touchY, false);
+    }
+  }
+
+  function onTouchend(e) {
+    maybeDragging = false;
+    if (!isDragging.value) return;
+    addMovement(e);
+    isDragging.value = false;
+    const velocity = getVelocity(e.changedTouches[0].identifier);
+    const vx = Math.abs(velocity.x);
+    const vy = Math.abs(velocity.y);
+    const thresholdMet = isHorizontal.value ? vx > vy && vx > 400 : vy > vx && vy > 3;
+
+    if (thresholdMet) {
+      isActive.value = velocity.direction === ({
+        left: 'right',
+        right: 'left',
+        bottom: 'up'
+      }[position.value] || oops());
+    } else {
+      isActive.value = dragProgress.value > 0.5;
+    }
+  }
+
+  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(),
+      transition: 'none'
+    } : undefined;
+  });
+  return {
+    isDragging,
+    dragProgress,
+    dragStyles
+  };
+}
+
+function oops() {
+  throw new Error();
+}
+//# sourceMappingURL=touch.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/VNavigationDrawer/touch.ts"],"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"],"mappings":"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","sourcesContent":["import { useVelocity } from '@/composables/touch'\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\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"],"file":"touch.mjs"}

package/lib/components/VNoSsr/VNoSsr.mjs

@@ -1,25 +1,17 @@
-// Utilities
-import { defineComponent, IN_BROWSER } from "../../util/index.mjs";
-import { onMounted, ref } from 'vue';
+// Composables
+import { useHydration } from "../../composables/hydration.mjs"; // Utilities
 
-function doesHydrate(fn) {
-  var _document$querySelect;
-
-  if (!IN_BROWSER) return; // @ts-expect-error
-
-  return (_document$querySelect = document.querySelector('#app')) != null && _document$querySelect.__vue_app__ ? fn() : onMounted(fn);
-}
-
-export default defineComponent({
+import { defineComponent } from "../../util/index.mjs";
+import { ref } from 'vue';
+export const VNoSsr = defineComponent({
   name: 'VNoSsr',
 
-  setup(_, {
-    slots
-  }) {
+  setup(_, _ref) {
+    let {
+      slots
+    } = _ref;
     const show = ref(false);
-    doesHydrate(() => {
-      show.value = true;
-    });
+    useHydration(() => show.value = true);
     return () => {
       var _slots$default;
 

package/lib/components/VNoSsr/VNoSsr.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VNoSsr/VNoSsr.tsx"],"names":["defineComponent","IN_BROWSER","onMounted","ref","doesHydrate","fn","document","querySelector","__vue_app__","name","setup","_","slots","show","value","default"],"mappings":"AAAA;SACSA,e,EAAiBC,U;AAC1B,SAASC,SAAT,EAAoBC,GAApB,QAA+B,KAA/B;;AAEA,SAASC,WAAT,CAAsBC,EAAtB,EAAsC;AAAA;;AACpC,MAAI,CAACJ,UAAL,EAAiB,OADmB,CAEpC;;AACA,SAAO,yBAAAK,QAAQ,CAACC,aAAT,CAAuB,MAAvB,oCAAgCC,WAAhC,GAA8CH,EAAE,EAAhD,GAAqDH,SAAS,CAACG,EAAD,CAArE;AACD;;AAED,eAAeL,eAAe,CAAC;AAC7BS,EAAAA,IAAI,EAAE,QADuB;;AAG7BC,EAAAA,KAAK,CAAEC,CAAF,EAAK;AAAEC,IAAAA;AAAF,GAAL,EAAgB;AACnB,UAAMC,IAAI,GAAGV,GAAG,CAAC,KAAD,CAAhB;AAEAC,IAAAA,WAAW,CAAC,MAAM;AAChBS,MAAAA,IAAI,CAACC,KAAL,GAAa,IAAb;AACD,KAFU,CAAX;AAIA,WAAO;AAAA;;AAAA,aAAMD,IAAI,CAACC,KAAL,uBAAcF,KAAK,CAACG,OAApB,qBAAc,oBAAAH,KAAK,CAAnB,CAAN;AAAA,KAAP;AACD;;AAX4B,CAAD,CAA9B","sourcesContent":["// Utilities\nimport { defineComponent, IN_BROWSER } from '@/util'\nimport { onMounted, ref } from 'vue'\n\nfunction doesHydrate (fn: () => void) {\n  if (!IN_BROWSER) return\n  // @ts-expect-error\n  return document.querySelector('#app')?.__vue_app__ ? fn() : onMounted(fn)\n}\n\nexport default defineComponent({\n  name: 'VNoSsr',\n\n  setup (_, { slots }) {\n    const show = ref(false)\n\n    doesHydrate(() => {\n      show.value = true\n    })\n\n    return () => show.value && slots.default?.()\n  },\n\n})\n"],"file":"VNoSsr.mjs"}
+{"version":3,"sources":["../../../src/components/VNoSsr/VNoSsr.tsx"],"names":["useHydration","defineComponent","ref","VNoSsr","name","setup","_","slots","show","value","default"],"mappings":"AAAA;SACSA,Y,2CAET;;SACSC,e;AACT,SAASC,GAAT,QAAoB,KAApB;AAEA,OAAO,MAAMC,MAAM,GAAGF,eAAe,CAAC;AACpCG,EAAAA,IAAI,EAAE,QAD8B;;AAGpCC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnB,UAAMC,IAAI,GAAGN,GAAG,CAAC,KAAD,CAAhB;AAEAF,IAAAA,YAAY,CAAC,MAAOQ,IAAI,CAACC,KAAL,GAAa,IAArB,CAAZ;AAEA,WAAO;AAAA;;AAAA,aAAMD,IAAI,CAACC,KAAL,uBAAcF,KAAK,CAACG,OAApB,qBAAc,oBAAAH,KAAK,CAAnB,CAAN;AAAA,KAAP;AACD;;AATmC,CAAD,CAA9B","sourcesContent":["// Composables\nimport { useHydration } from '@/composables/hydration'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { ref } from 'vue'\n\nexport const VNoSsr = defineComponent({\n  name: 'VNoSsr',\n\n  setup (_, { slots }) {\n    const show = ref(false)\n\n    useHydration(() => (show.value = true))\n\n    return () => show.value && slots.default?.()\n  },\n\n})\n"],"file":"VNoSsr.mjs"}

package/lib/components/VNoSsr/index.mjs

@@ -1,2 +1,2 @@
-export { default as VNoSsr } from "./VNoSsr.mjs";
+export { VNoSsr } from "./VNoSsr.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VNoSsr/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VNoSsr/index.ts"],"names":["default","VNoSsr"],"mappings":"SAASA,OAAO,IAAIC,M","sourcesContent":["export { default as VNoSsr } from './VNoSsr'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VNoSsr/index.ts"],"names":["VNoSsr"],"mappings":"SAASA,M","sourcesContent":["export { VNoSsr } from './VNoSsr'\n"],"file":"index.mjs"}