@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-alpha10

package/src/mixins/overlayable/index.ts

@@ -55,7 +55,7 @@ export default defineComponent({
     },
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeOverlay()
   },
 
@@ -71,11 +71,12 @@ export default defineComponent({
       }
       const wrapper = {
         data() {
-          return { value: false }
+          return { value: false, zIndex: undefined }
         },
         render() {
           return h(VOverlay, {
-            value: this.value,
+            modelValue: this.value,
+            zIndex: this.zIndex,
             ...props
           })
         }
@@ -142,8 +143,6 @@ export default defineComponent({
           this.overlayApp.unmount()
           this.overlayApp = null
           this.overlay = null
-          console.log('destroyed')
-
         })
 
         // Cancel animation frame in case

package/src/mixins/proxyable/index.ts

@@ -13,11 +13,6 @@ export function factory (
   return defineComponent({
     name: 'proxyable',
 
-    model: {
-      prop,
-      event,
-    },
-
     props: {
       [prop]: {
         required: false,

package/src/mixins/translatable/index.ts

@@ -23,7 +23,7 @@ export default defineComponent({
     },
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('scroll', this.translate, false)
     window.removeEventListener('resize', this.translate, false)
   },

package/src/mixins/validatable/index.ts

@@ -214,7 +214,7 @@ export default baseMixins.extend({
         this.$emit('update:error', val)
       }
     },
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },
@@ -227,7 +227,7 @@ export default baseMixins.extend({
     this.form && this.form.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.form && this.form.unregister(this)
   },
 

package/src/services/breakpoint/index.ts

@@ -1,3 +1,6 @@
+import { reactive } from 'vue'
+
+
 // Extensions
 import { Service } from '../service'
 
@@ -72,6 +75,8 @@ export class Breakpoint extends Service implements IBreakpoint {
     this.mobileBreakpoint = mobileBreakpoint
     this.scrollBarWidth = scrollBarWidth
     this.thresholds = thresholds
+
+    return reactive(this)
   }
 
   public init () {

package/src/styles/generic/_transitions.scss

@@ -11,11 +11,11 @@
 
 // Component specific transitions
 .carousel-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     position: absolute;
     top: 0;
     transform: translate(-100%, 0);
@@ -23,11 +23,11 @@
 }
 
 .carousel-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     position: absolute;
     top: 0;
     transform: translate(100%, 0);
@@ -40,24 +40,24 @@
     pointer-events: none !important;
   }
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: scale(0.5);
     opacity: 0;
   }
 
-  &-enter-to, &-leave {
+  &-enter-to, &-leave-from {
     opacity: 1;
   }
 }
 
 .dialog-bottom-transition {
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: translateY(100%);
   }
 }
 
 .dialog-top-transition {
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: translateY(-100%);
   }
 }
@@ -69,12 +69,12 @@
     transition: .3s map-get($transition, 'linear-out-slow-in');
   }
 
-  &-enter,
+  &-enter-from,
   &-leave-to {
     opacity: 0;
   }
 
-  &-leave,
+  &-leave-from,
   &-leave-active,
   &-leave-to {
     position: absolute !important;
@@ -82,7 +82,7 @@
 }
 
 .picker-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(0, 100%);
   }
 
@@ -92,7 +92,7 @@
 }
 
 .picker-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(0, -100%);
   }
 
@@ -103,11 +103,11 @@
 
 .picker-title-transition {
   &-enter-to,
-  &-leave {
+  &-leave-from {
     transform: translate(0, 0);
   }
 
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
@@ -116,7 +116,7 @@
     transform: translate(100%, 0);
   }
 
-  &-leave,
+  &-leave-from,
   &-leave-to,
   &-leave-active {
     position: absolute !important;
@@ -124,11 +124,11 @@
 }
 
 .tab-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(100%, 0);
   }
 
-  &-leave, &-leave-active {
+  &-leave-from, &-leave-active {
     position: absolute;
     top: 0;
   }
@@ -140,11 +140,11 @@
 }
 
 .tab-reverse-transition {
-  &-enter {
+  &-enter-from {
     transform: translate(-100%, 0);
   }
 
-  &-leave, &-leave-to {
+  &-leave-from, &-leave-to {
     top: 0;
     position: absolute;
     transform: translate(100%, 0);
@@ -163,7 +163,7 @@
 .scale-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0);
   }
@@ -172,7 +172,7 @@
 .scale-rotate-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0) rotate(-45deg);
   }
@@ -181,7 +181,7 @@
 .scale-rotate-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave, &-leave-to {
+  &-enter-from, &-leave-from, &-leave-to {
     opacity: 0;
     transform: scale(0) rotate(45deg);
   }
@@ -190,12 +190,12 @@
 .message-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(-15px);
   }
 
-  &-leave, &-leave-active {
+  &-leave-from, &-leave-active {
     position: absolute;
   }
 }
@@ -203,7 +203,7 @@
 .slide-y-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(-15px);
   }
@@ -212,7 +212,7 @@
 .slide-y-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateY(15px);
   }
@@ -221,11 +221,11 @@
 .scroll-y-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateY(-15px);
   }
 
@@ -237,11 +237,11 @@
 .scroll-y-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateY(15px);
   }
 
@@ -253,11 +253,11 @@
 .scroll-x-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateX(-15px);
   }
 
@@ -269,11 +269,11 @@
 .scroll-x-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
   }
 
-  &-enter {
+  &-enter-from {
     transform: translateX(15px);
   }
 
@@ -285,7 +285,7 @@
 .slide-x-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateX(-15px);
   }
@@ -294,7 +294,7 @@
 .slide-x-reverse-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0;
     transform: translateX(15px);
   }
@@ -303,7 +303,7 @@
 .fade-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     opacity: 0 !important;
   }
 }
@@ -311,7 +311,7 @@
 .fab-transition {
   @include transition-default();
 
-  &-enter, &-leave-to {
+  &-enter-from, &-leave-to {
     transform: scale(0) rotate(-45deg);
   }
 }