feat(VMenu): port to v3 (#14030)

fixes #3303 fixes #5310 fixes #9753 fixes #10578 fixes #11818 fixes #12110
vuetifyjs · Aug 11, 2021 · 9a896ac · 9a896ac
1 parent 00e5391
commit 9a896ac
Show file tree

Hide file tree

Showing 30 changed files with 583 additions and 1,245 deletions.
diff --git a/packages/vuetify/src/components/VCard/VCard.sass b/packages/vuetify/src/components/VCard/VCard.sass
@@ -166,10 +166,6 @@
   opacity: 0
   transition: opacity 0.2s ease-in-out
 
-// VDialog
-.v-card
-  .v-dialog .v-overlay__content > &
-    border-radius: inherit
-    overflow: hidden
-
-    @include elevation($card-dialog-elevation)
+  + .v-card-media
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
diff --git a/packages/vuetify/src/components/VCard/_variables.scss b/packages/vuetify/src/components/VCard/_variables.scss
@@ -98,6 +98,3 @@ $card-variants: (
   $card-plain-opacity,
   'v-card'
 );
-
-// VDialog
-$card-dialog-elevation: 24 !default;
diff --git a/packages/vuetify/src/components/VDialog/VDialog.sass b/packages/vuetify/src/components/VDialog/VDialog.sass
@@ -3,6 +3,8 @@
 // Block
 .v-dialog
   z-index: $dialog-z-index
+  align-items: center
+  justify-content: center
 
   .v-overlay__content
     max-height: $dialog-overlay-content-max-height
@@ -14,6 +16,13 @@
     @media #{$dialog-overlay-content-mobile-breakpoint}
       max-width: $dialog-overlay-content-mobile-max-width
 
+    > .v-card,
+    > .v-sheet
+      border-radius: inherit
+      overflow: hidden
+
+      @include elevation($dialog-elevation)
+
     > .v-card
       > .v-card-avatar
         padding: $dialog-card-avatar-padding

diff --git a/packages/vuetify/src/components/VDialog/_variables.scss b/packages/vuetify/src/components/VDialog/_variables.scss
@@ -1,5 +1,6 @@
 // Defaults
-$dialog-z-index: 2400 !default;
+$dialog-elevation: 24 !default;
+$dialog-z-index: $dialog-elevation * 100 !default;
 $dialog-card-avatar-padding: 0 !default;
 $dialog-card-header-padding: 14px 24px 0 !default;
 $dialog-card-header-text-padding-top: 10px !default;

diff --git a/packages/vuetify/src/components/VLayout/VLayout.sass b/packages/vuetify/src/components/VLayout/VLayout.sass
@@ -5,8 +5,6 @@
   position: relative
   display: flex
   flex: 1 1 auto
-  overflow: auto
-  z-index: 0
 
   &--full-height
     --v-scrollbar-offset: inherit

diff --git a/packages/vuetify/src/components/VMenu/VMenu.sass b/packages/vuetify/src/components/VMenu/VMenu.sass
@@ -1,70 +1,22 @@
-@import './_variables.scss'
+@import './index'
 
 .v-menu
-  display: none
-
-  &--attached
-    display: inline
-
-  &__content
-    position: absolute
-    display: inline-block
-    max-width: 80%
-    overflow-y: auto
-    overflow-x: hidden
-    contain: content
-    +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
+  z-index: $menu-z-index
+
+  .v-overlay__content
+    display: flex
+    flex-direction: column
+    @include rounded($menu-content-border-radius)
+
+    > .v-card,
+    > .v-sheet
+      background: rgb(var(--v-theme-surface))
+      border-radius: inherit
+      overflow: auto
+      height: 100%
+
+      &::before
+        border-radius: inherit
+        z-index: -1
+        @include absolute
+        @include elevation($menu-elevation)