@vuetify/nightly 3.0.0-alpha.8 → 3.0.0-beta.3

package/lib/components/VMenu/VMenu.sass

@@ -1,73 +1,19 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-menu
-  display: none
-
-  &--attached
-    display: inline
-
-  &__content
-    position: absolute
-    display: inline-block
-    max-width: 80%
-    overflow-y: auto
-    overflow-x: hidden
-    contain: content
-    // This is required for an issue on Chrome 65
-    // that prevents scrolling after a menu is opened
-    will-change: transform
-    +elevation($menu-content-elevation)
-    +radius($menu-content-border-radius)
-
-    &--active
-      pointer-events: none
-
-    &--auto
-      .v-list-item
-        transition-property: transform, opacity
-        transition-duration: .3s
-        transition-timing-function: map-get($transition, 'fast-in-fast-out')
-
-    &--fixed
-      position: fixed
-
-    & > .card
-      contain: content
-      backface-visibility: hidden
-
-  > .v-menu__content
-    max-width: none
-
-  &-transition
-    &-enter
-      .v-list-item
-        min-width: 0
-        pointer-events: none
-    &-enter-to
-      .v-list-item
-        transition-delay: .1s
-
-    &-leave-active,
-    &-leave-to
-      pointer-events: none
-
-    &-enter,
-    &-leave-to
-      opacity: 0
-
-    &-enter-active,
-    &-leave-active
-      transition: all .3s map-get($transition, 'fast-in-fast-out')
-
-.v-menu-transition-enter
-  &.v-menu__content--auto
-    transition: none !important
-
-    .v-list-item
-      opacity: 0
-      transform: translateY(-15px)
-
-    .v-list-item--active
-      opacity: 1
-      transform: none !important
-      pointer-events: auto
+  .v-overlay__content
+    display: flex
+    flex-direction: column
+    @include tools.rounded($menu-content-border-radius)
+
+    > .v-card,
+    > .v-sheet,
+    > .v-list
+      background: rgb(var(--v-theme-surface))
+      border-radius: inherit
+      overflow: auto
+      height: 100%
+
+      @include tools.elevation($menu-elevation)

package/lib/components/VMenu/_variables.scss

@@ -1,4 +1,4 @@
-@import '../../styles/styles.sass';
+@use '../../styles/settings';
 
-$menu-content-border-radius: $border-radius-root !default;
-$menu-content-elevation: 8 !default;
+$menu-elevation: 8 !default;
+$menu-content-border-radius: settings.$border-radius-root !default;

package/lib/components/VMenu/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VMenu/index.ts"],"names":["VMenu"],"mappings":"OAAOA,K;AAEP,SAASA,KAAT;AACA,eAAeA,KAAf","sourcesContent":["import VMenu from './VMenu'\n\nexport { VMenu }\nexport default VMenu\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VMenu"],"sources":["../../../src/components/VMenu/index.ts"],"sourcesContent":["export { VMenu } from './VMenu'\n"],"mappings":"SAASA,K"}

package/lib/components/VMenu/shared.mjs

@@ -0,0 +1,2 @@
+export const VMenuSymbol = Symbol.for('vuetify:v-menu');
+//# sourceMappingURL=shared.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shared.mjs","names":["VMenuSymbol","Symbol","for"],"sources":["../../../src/components/VMenu/shared.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\ninterface MenuProvide {\n  register (): void\n  unregister (): void\n  closeParents (): void\n}\n\nexport const VMenuSymbol: InjectionKey<MenuProvide> = Symbol.for('vuetify:v-menu')\n"],"mappings":"AAQA,OAAO,MAAMA,WAAsC,GAAGC,MAAM,CAACC,GAAP,CAAW,gBAAX,CAA/C"}

package/lib/components/VMessages/VMessages.css

@@ -0,0 +1,16 @@
+.v-messages {
+  flex: 1 1 auto;
+  font-size: 12px;
+  min-height: 14px;
+  min-width: 1px;
+  opacity: var(--v-medium-emphasis-opacity);
+  position: relative;
+}
+.v-messages__message {
+  line-height: 12px;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  hyphens: auto;
+  transition-duration: 150ms;
+}

package/lib/components/VMessages/VMessages.mjs

@@ -1,53 +1,54 @@
-// @ts-nocheck
-
-/* eslint-disable */
+import { createVNode as _createVNode } from "vue";
 // Styles
-import "./VMessages.sass"; // Mixins
-
-import Colorable from "../../mixins/colorable/index.mjs";
-import Themeable from "../../mixins/themeable/index.mjs"; // Types
+import "./VMessages.css"; // Components
 
-import mixins from "../../util/mixins.mjs"; // Utilities
+import { VSlideYTransition } from "../transitions/index.mjs"; // Composables
 
-import { getSlot } from "../../util/helpers.mjs";
-/* @vue/component */
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs";
+import { useTextColor } from "../../composables/color.mjs"; // Utilities
 
-export default mixins(Colorable, Themeable).extend({
-  name: 'v-messages',
+import { defineComponent, wrapInArray } from "../../util/index.mjs";
+import { computed } from 'vue';
+export const VMessages = defineComponent({
+  name: 'VMessages',
   props: {
-    value: {
-      type: Array,
+    active: Boolean,
+    color: String,
+    messages: {
+      type: [Array, String],
       default: () => []
-    }
-  },
-  methods: {
-    genChildren() {
-      return this.$createElement('transition-group', {
-        staticClass: 'v-messages__wrapper',
-        attrs: {
-          name: 'message-transition',
-          tag: 'div'
-        }
-      }, this.value.map(this.genMessage));
     },
-
-    genMessage(message, key) {
-      return this.$createElement('div', {
-        staticClass: 'v-messages__message',
-        key
-      }, getSlot(this, 'default', {
-        message,
-        key
-      }) || [message]);
-    }
-
+    ...makeTransitionProps({
+      transition: {
+        component: VSlideYTransition,
+        leaveAbsolute: true,
+        group: true
+      }
+    })
   },
 
-  render(h) {
-    return h('div', this.setTextColor(this.color, {
-      staticClass: 'v-messages',
-      class: this.themeClasses
-    }), [this.genChildren()]);
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const messages = computed(() => wrapInArray(props.messages));
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(computed(() => props.color));
+    return () => _createVNode(MaybeTransition, {
+      "transition": props.transition,
+      "tag": "div",
+      "class": ['v-messages', textColorClasses.value],
+      "style": textColorStyles.value
+    }, {
+      default: () => [props.active && messages.value.map((message, i) => _createVNode("div", {
+        "class": "v-messages__message",
+        "key": `${i}-${messages.value}`
+      }, [slots.message ? slots.message({
+        message
+      }) : message]))]
+    });
   }
 
 });

package/lib/components/VMessages/VMessages.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VMessages/VMessages.ts"],"names":["Colorable","Themeable","mixins","getSlot","extend","name","props","value","type","Array","default","methods","genChildren","$createElement","staticClass","attrs","tag","map","genMessage","message","key","render","h","setTextColor","color","class","themeClasses"],"mappings":"AAAA;;AACA;AAEA;AACA,0B,CAEA;;OACOA,S;OACAC,S,0CAEP;;OAGOC,M,+BAEP;;SACSC,O;AAET;;AACA,eAAeD,MAAM,CAACF,SAAD,EAAYC,SAAZ,CAAN,CAA6BG,MAA7B,CAAoC;AACjDC,EAAAA,IAAI,EAAE,YAD2C;AAGjDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,KAAK,EAAE;AACLC,MAAAA,IAAI,EAAEC,KADD;AAELC,MAAAA,OAAO,EAAE,MAAO;AAFX;AADF,GAH0C;AAUjDC,EAAAA,OAAO,EAAE;AACPC,IAAAA,WAAW,GAAI;AACb,aAAO,KAAKC,cAAL,CAAoB,kBAApB,EAAwC;AAC7CC,QAAAA,WAAW,EAAE,qBADgC;AAE7CC,QAAAA,KAAK,EAAE;AACLV,UAAAA,IAAI,EAAE,oBADD;AAELW,UAAAA,GAAG,EAAE;AAFA;AAFsC,OAAxC,EAMJ,KAAKT,KAAL,CAAWU,GAAX,CAAe,KAAKC,UAApB,CANI,CAAP;AAOD,KATM;;AAUPA,IAAAA,UAAU,CAAEC,OAAF,EAAmBC,GAAnB,EAAgC;AACxC,aAAO,KAAKP,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE,qBADmB;AAEhCM,QAAAA;AAFgC,OAA3B,EAGJjB,OAAO,CAAC,IAAD,EAAO,SAAP,EAAkB;AAAEgB,QAAAA,OAAF;AAAWC,QAAAA;AAAX,OAAlB,CAAP,IAA8C,CAACD,OAAD,CAH1C,CAAP;AAID;;AAfM,GAVwC;;AA4BjDE,EAAAA,MAAM,CAAEC,CAAF,EAAY;AAChB,WAAOA,CAAC,CAAC,KAAD,EAAQ,KAAKC,YAAL,CAAkB,KAAKC,KAAvB,EAA8B;AAC5CV,MAAAA,WAAW,EAAE,YAD+B;AAE5CW,MAAAA,KAAK,EAAE,KAAKC;AAFgC,KAA9B,CAAR,EAGJ,CAAC,KAAKd,WAAL,EAAD,CAHI,CAAR;AAID;;AAjCgD,CAApC,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VMessages.sass'\n\n// Mixins\nimport Colorable from '../../mixins/colorable'\nimport Themeable from '../../mixins/themeable'\n\n// Types\nimport { VNode } from 'vue'\nimport { PropValidator } from 'vue/types/options'\nimport mixins from '../../util/mixins'\n\n// Utilities\nimport { getSlot } from '../../util/helpers'\n\n/* @vue/component */\nexport default mixins(Colorable, Themeable).extend({\n  name: 'v-messages',\n\n  props: {\n    value: {\n      type: Array,\n      default: () => ([]),\n    } as PropValidator<string[]>,\n  },\n\n  methods: {\n    genChildren () {\n      return this.$createElement('transition-group', {\n        staticClass: 'v-messages__wrapper',\n        attrs: {\n          name: 'message-transition',\n          tag: 'div',\n        },\n      }, this.value.map(this.genMessage))\n    },\n    genMessage (message: string, key: number) {\n      return this.$createElement('div', {\n        staticClass: 'v-messages__message',\n        key,\n      }, getSlot(this, 'default', { message, key }) || [message])\n    },\n  },\n\n  render (h): VNode {\n    return h('div', this.setTextColor(this.color, {\n      staticClass: 'v-messages',\n      class: this.themeClasses,\n    }), [this.genChildren()])\n  },\n})\n"],"file":"VMessages.mjs"}
+{"version":3,"file":"VMessages.mjs","names":["VSlideYTransition","makeTransitionProps","MaybeTransition","useTextColor","defineComponent","wrapInArray","computed","VMessages","name","props","active","Boolean","color","String","messages","type","Array","default","transition","component","leaveAbsolute","group","setup","slots","textColorClasses","textColorStyles","value","map","message","i"],"sources":["../../../src/components/VMessages/VMessages.tsx"],"sourcesContent":["// Styles\nimport './VMessages.sass'\n\n// Components\nimport { VSlideYTransition } from '@/components/transitions'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { defineComponent, wrapInArray } from '@/util'\nimport { computed } from 'vue'\nimport type { PropType } from 'vue'\n\nexport const VMessages = defineComponent({\n  name: 'VMessages',\n\n  props: {\n    active: Boolean,\n    color: String,\n    messages: {\n      type: [Array, String] as PropType<string | string[]>,\n      default: () => ([]),\n    },\n\n    ...makeTransitionProps({\n      transition: {\n        component: VSlideYTransition,\n        leaveAbsolute: true,\n        group: true,\n      },\n    }),\n  },\n\n  setup (props, { slots }) {\n    const messages = computed(() => wrapInArray(props.messages))\n    const { textColorClasses, textColorStyles } = useTextColor(computed(() => props.color))\n\n    return () => (\n      <MaybeTransition\n        transition={ props.transition }\n        tag=\"div\"\n        class={[\n          'v-messages',\n          textColorClasses.value,\n        ]}\n        style={ textColorStyles.value }\n      >\n        { props.active && (\n          messages.value.map((message, i) => (\n            <div\n              class=\"v-messages__message\"\n              key={ `${i}-${messages.value}` }\n            >\n              { slots.message ? slots.message({ message }) : message }\n            </div>\n          ))\n        ) }\n      </MaybeTransition>\n    )\n  },\n})\n"],"mappings":";AAAA;AACA,yB,CAEA;;SACSA,iB,oCAET;;SACSC,mB,EAAqBC,e;SACrBC,Y,uCAET;;SACSC,e,EAAiBC,W;AAC1B,SAASC,QAAT,QAAyB,KAAzB;AAGA,OAAO,MAAMC,SAAS,GAAGH,eAAe,CAAC;EACvCI,IAAI,EAAE,WADiC;EAGvCC,KAAK,EAAE;IACLC,MAAM,EAAEC,OADH;IAELC,KAAK,EAAEC,MAFF;IAGLC,QAAQ,EAAE;MACRC,IAAI,EAAE,CAACC,KAAD,EAAQH,MAAR,CADE;MAERI,OAAO,EAAE,MAAO;IAFR,CAHL;IAQL,GAAGhB,mBAAmB,CAAC;MACrBiB,UAAU,EAAE;QACVC,SAAS,EAAEnB,iBADD;QAEVoB,aAAa,EAAE,IAFL;QAGVC,KAAK,EAAE;MAHG;IADS,CAAD;EARjB,CAHgC;;EAoBvCC,KAAK,CAAEb,KAAF,QAAoB;IAAA,IAAX;MAAEc;IAAF,CAAW;IACvB,MAAMT,QAAQ,GAAGR,QAAQ,CAAC,MAAMD,WAAW,CAACI,KAAK,CAACK,QAAP,CAAlB,CAAzB;IACA,MAAM;MAAEU,gBAAF;MAAoBC;IAApB,IAAwCtB,YAAY,CAACG,QAAQ,CAAC,MAAMG,KAAK,CAACG,KAAb,CAAT,CAA1D;IAEA,OAAO;MAAA,cAEUH,KAAK,CAACS,UAFhB;MAAA,OAGC,KAHD;MAAA,SAII,CACL,YADK,EAELM,gBAAgB,CAACE,KAFZ,CAJJ;MAAA,SAQKD,eAAe,CAACC;IARrB;MAAA,gBAUDjB,KAAK,CAACC,MAAN,IACAI,QAAQ,CAACY,KAAT,CAAeC,GAAf,CAAmB,CAACC,OAAD,EAAUC,CAAV;QAAA,SAET,qBAFS;QAAA,OAGR,GAAEA,CAAE,IAAGf,QAAQ,CAACY,KAAM;MAHd,IAKbH,KAAK,CAACK,OAAN,GAAgBL,KAAK,CAACK,OAAN,CAAc;QAAEA;MAAF,CAAd,CAAhB,GAA6CA,OALhC,EAAnB,CAXC;IAAA,EAAP;EAsBD;;AA9CsC,CAAD,CAAjC"}

package/lib/components/VMessages/VMessages.sass

@@ -1,25 +1,20 @@
-@import './_variables.scss'
+@forward './variables'
+@use '../../styles/settings'
+@use './variables' as *
 
-/* Theme */
-+theme(v-messages) using ($material)
-  color: map-deep-get($material, 'text', 'secondary')
 
 .v-messages
   flex: 1 1 auto
   font-size: $messages-font-size
   min-height: $messages-min-height
   min-width: 1px // Ensure takes up space with no messages and inside of flex
+  opacity: var(--v-medium-emphasis-opacity)
   position: relative
 
-  +ltr()
-    text-align: left
-
-  +rtl()
-    text-align: right
-
   &__message
     line-height: $messages-line-height
     word-break: break-word
     overflow-wrap: break-word
     word-wrap: break-word
     hyphens: auto
+    transition-duration: $messages-transition-duration

package/lib/components/VMessages/_variables.scss

@@ -1,5 +1,6 @@
-@import '../../styles/styles.sass';
-
+// Defaults
+$messages-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default;
 $messages-font-size: 12px !default;
 $messages-line-height: $messages-font-size !default;
 $messages-min-height: 14px !default;
+$messages-transition-duration: 150ms !default;

package/lib/components/VMessages/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VMessages/index.ts"],"names":["VMessages"],"mappings":"OAAOA,S;AAEP,SAASA,SAAT;AACA,eAAeA,SAAf","sourcesContent":["import VMessages from './VMessages'\n\nexport { VMessages }\nexport default VMessages\n"],"file":"index.mjs"}
+{"version":3,"file":"index.mjs","names":["VMessages"],"sources":["../../../src/components/VMessages/index.ts"],"sourcesContent":["export { VMessages } from './VMessages'\n"],"mappings":"SAASA,S"}

package/lib/components/VNavigationDrawer/VNavigationDrawer.css

@@ -0,0 +1,93 @@
+.v-navigation-drawer {
+  -webkit-overflow-scrolling: touch;
+  background: rgb(var(--v-theme-surface));
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 100%;
+  pointer-events: auto;
+  transition-duration: 0.2s;
+  transition-property: box-shadow, transform, visibility, width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform;
+  position: absolute;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-navigation-drawer--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-navigation-drawer--rounded {
+  border-radius: 4px;
+}
+.v-navigation-drawer--bottom {
+  left: 0;
+  border-top-width: thin;
+}
+.v-navigation-drawer--start {
+  top: 0;
+  border-inline-end-width: thin;
+}
+.v-navigation-drawer--start.v-locale--is-ltr, .v-locale--is-ltr .v-navigation-drawer--start {
+  left: 0;
+  right: auto;
+}
+.v-navigation-drawer--start.v-locale--is-rtl, .v-locale--is-rtl .v-navigation-drawer--start {
+  left: auto;
+  right: 0;
+}
+.v-navigation-drawer--end {
+  top: 0;
+  border-inline-start-width: thin;
+}
+.v-navigation-drawer--end.v-locale--is-ltr, .v-locale--is-ltr .v-navigation-drawer--end {
+  left: auto;
+  right: 0;
+}
+.v-navigation-drawer--end.v-locale--is-rtl, .v-locale--is-rtl .v-navigation-drawer--end {
+  left: 0;
+  right: auto;
+}
+.v-navigation-drawer--floating {
+  border: none;
+}
+.v-navigation-drawer--temporary {
+  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+
+.v-navigation-drawer__content {
+  flex: 0 1 auto;
+  height: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.v-navigation-drawer__img {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+.v-navigation-drawer__img img {
+  height: inherit;
+  object-fit: cover;
+  width: inherit;
+}
+
+.v-navigation-drawer__scrim {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.2;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+}

package/lib/components/VNavigationDrawer/VNavigationDrawer.mjs

@@ -1,26 +1,30 @@
-import { createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
 // Styles
-import "./VNavigationDrawer.sass"; // Composables
+import "./VNavigationDrawer.css"; // Composables
 
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 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, defineComponent, onBeforeMount, ref, toRef, watch } from 'vue';
-import { makeProps } from "../../util/makeProps.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: makeProps({
+  props: {
     color: String,
     disableResizeWatcher: Boolean,
+    disableRouteWatcher: Boolean,
     expandOnHover: Boolean,
+    floating: Boolean,
     modelValue: {
       type: Boolean,
       default: null
@@ -33,11 +37,12 @@ export default defineComponent({
     },
     image: String,
     temporary: Boolean,
+    touchless: Boolean,
     width: {
       type: [Number, String],
       default: 256
     },
-    position: {
+    location: {
       type: String,
       default: 'left',
       validator: value => ['left', 'right', 'bottom'].includes(value)
@@ -50,17 +55,22 @@ export default defineComponent({
       tag: 'nav'
     }),
     ...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
@@ -73,45 +83,93 @@ export default defineComponent({
     } = useDisplay();
     const {
       roundedClasses
-    } = useRounded(props, 'v-navigation-drawer');
-    const isActive = useProxiedModel(props, 'modelValue');
+    } = useRounded(props);
+    const router = useRouter();
+    const isActive = useProxiedModel(props, 'modelValue', null, v => !!v);
     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));
     }
 
-    watch(props, val => {
-      if (val.permanent) isActive.value = true;
+    if (!props.disableRouteWatcher && router) {
+      watch(router.currentRoute, () => isTemporary.value && (isActive.value = false));
+    }
+
+    watch(() => props.permanent, val => {
+      if (val) isActive.value = true;
     });
     onBeforeMount(() => {
-      if (props.modelValue != null) return;
-      isActive.value = !mobile.value;
+      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, 'location')
+    });
+    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,
+      order: computed(() => parseInt(props.order, 10)),
+      position: toRef(props, 'location'),
+      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', {
-          'v-navigation-drawer--bottom': props.position === 'bottom',
-          'v-navigation-drawer--end': props.position === 'right',
+          'v-navigation-drawer--bottom': props.location === 'bottom',
+          'v-navigation-drawer--end': props.location === 'right',
           'v-navigation-drawer--expand-on-hover': props.expandOnHover,
+          'v-navigation-drawer--floating': props.floating,
           'v-navigation-drawer--is-hovering': isHovering.value,
           'v-navigation-drawer--rail': props.rail,
-          'v-navigation-drawer--start': props.position === 'left',
+          'v-navigation-drawer--start': props.location === '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, {
@@ -119,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)]
+      })]);
     };
   }