@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-alpha20

package/src/mixins/detachable/index.ts

@@ -27,9 +27,9 @@ function validateAttachTarget (val: any) {
 
 function removeActivator (activator: VNode[]) {
   activator.forEach(node => {
-    node.elm &&
-    node.elm.parentNode &&
-    node.elm.parentNode.removeChild(node.elm)
+    node.el &&
+    node.el.parentNode &&
+    node.el.parentNode.removeChild(node.el)
   })
 }
 
@@ -94,7 +94,7 @@ export default mixins<options &
     this.isActive = false
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (
       this.$refs.content &&
       this.$refs.content.parentNode
@@ -103,7 +103,7 @@ export default mixins<options &
     }
   },
 
-  destroyed () {
+  unmounted () {
     if (this.activatorNode) {
       const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
       if (this.$el.isConnected) {

package/src/mixins/groupable/index.ts

@@ -57,7 +57,7 @@ export function factory<T extends string, C extends VueConstructor | null = null
       this[namespace] && (this[namespace] as any).register(this)
     },
 
-    beforeDestroy () {
+    beforeUnmount () {
       this[namespace] && (this[namespace] as any).unregister(this)
     },
 

package/src/mixins/intersectable/index.ts

@@ -23,10 +23,10 @@ export default function intersectable (options: { onVisible: string[] }) {
       }, vnode)
     },
 
-    destroyed () {
+    unmounted () {
       const {vnode} = getCurrentInstance()
 
-      Intersect.unbind(this.$el as HTMLElement, {
+      Intersect.unmounted(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
       }, vnode)

package/src/mixins/menuable/index.ts

@@ -199,7 +199,7 @@ export default baseMixins.extend({
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.hasWindow) {
       window.removeEventListener('resize', this.updateDimensions, false)
     }

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/selectable/index.ts

@@ -7,7 +7,7 @@ import Comparable from '../comparable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import {h} from 'vue'
+import { h } from 'vue'
 
 export function prevent (e: Event) {
   e.preventDefault()
@@ -21,11 +21,6 @@ export default mixins(
 ).extend({
   name: 'selectable',
 
-  model: {
-    prop: 'inputValue',
-    event: 'change',
-  },
-
   props: {
     id: String,
     value: null as any,
@@ -97,7 +92,7 @@ export default mixins(
       if (!label) return label
 
       // Label shouldn't cause the input to focus
-      label!.onClick = prevent
+      label!.onClick = this.onClick
 
       return label
     },
@@ -121,6 +116,7 @@ export default mixins(
       })
     },
     onClick (e: Event) {
+      e.preventDefault()
       this.onChange()
       this.$emit('click', e)
     },

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);
   }
 }