@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-alpha11

package/src/mixins/activatable/index.ts

@@ -62,10 +62,16 @@ export default baseMixins.extend({
     this.addActivatorEvents()
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeActivatorEvents()
   },
 
+  computed: {
+    isActivatable() {
+      return true
+    }
+  },
+
   methods: {
     addActivatorEvents () {
       if (
@@ -82,15 +88,18 @@ export default baseMixins.extend({
       }
     },
     genActivator () {
-      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
+      let node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
         attrs: {
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
         }
-
       })) || []
 
-      this.activatorNode = node
+      node = Array.isArray(node) ? node : [node]
+
+      this.activatorNode = node.flatMap(node => {
+        return node.type === Symbol.for('v-fgt') ? node.children : node
+      })
 
       return node
     },
@@ -162,11 +171,10 @@ export default baseMixins.extend({
         // Use the contents of the activator slot
         // There's either only one element in it or we
         // don't have a click event to use as a last resort
-        const vm = this.activatorNode[0].component.ctx
+        const vm = this.activatorNode[0].component?.ctx
         if (
           vm &&
-          vm.$options.mixins && //                         Activatable is indirectly used via Menuable
-          vm.$options.mixins.some((m: any) => m.options && ['activatable', 'menuable'].includes(m.options.name))
+          (vm.isActivatable !== undefined || vm.isMenuable !== undefined)
         ) {
           // Activator is actually another activatible component, use its activator (#8846)
           activator = (vm as any).getActivator()
@@ -216,6 +224,6 @@ export default baseMixins.extend({
       this.activatorElement = null
       this.getActivator()
       this.addActivatorEvents()
-    },
+    }
   },
 })

package/src/mixins/applicationable/index.ts

@@ -51,7 +51,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
       this.removeApplication()
     },
 
-    destroyed () {
+    unmounted () {
       this.removeApplication()
     },
 

package/src/mixins/binds-attrs/index.ts

@@ -9,7 +9,7 @@ function makeWatcher (property: string): ThisType<Vue> & ((val: any, oldVal: any
   return function (this: Vue, val, oldVal) {
     for (const attr in oldVal) {
       if (!Object.prototype.hasOwnProperty.call(val, attr)) {
-        this.$delete(this.$data[property], attr)
+        delete this.$data[property][attr]
       }
     }
     for (const attr in val) {

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

@@ -133,6 +133,9 @@ export default baseMixins.extend({
   }),
 
   computed: {
+    isMenuable() {
+      return true
+    },
     computedLeft () {
       const a = this.dimensions.activator
       const c = this.dimensions.content
@@ -196,7 +199,7 @@ export default baseMixins.extend({
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.hasWindow) {
       window.removeEventListener('resize', this.updateDimensions, false)
     }

package/src/mixins/mouse/index.ts

@@ -29,7 +29,6 @@ export default defineComponent({
 
   methods: {
     getDefaultMouseEventHandlers (suffix: string, getData: MouseHandler, eventFirst = false): MouseEventsMap {
-      console.log(this.$attrs)
       const listeners = Object.keys(this.$attrs)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {

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

@@ -21,11 +21,6 @@ export default mixins(
 ).extend({
   name: 'selectable',
 
-  model: {
-    prop: 'inputValue',
-    event: 'change',
-  },
-
   props: {
     id: String,
     value: null as any,

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