@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-alpha21

package/src/mixins/activatable/index.ts

@@ -62,7 +62,7 @@ export default baseMixins.extend({
     this.addActivatorEvents()
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeActivatorEvents()
   },
 
@@ -88,14 +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
     },
@@ -167,7 +171,7 @@ 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.isActivatable !== undefined || vm.isMenuable !== undefined)

package/src/mixins/applicationable/index.ts

@@ -28,7 +28,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
           : this.callUpdate()
       },
       applicationProperty (newVal, oldVal) {
-        this.$vuetify.application.unregister(this._uid, oldVal)
+        this.$vuetify.application.unregister(this.$.uid, oldVal)
       },
     },
 
@@ -51,7 +51,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
       this.removeApplication()
     },
 
-    destroyed () {
+    unmounted () {
       this.removeApplication()
     },
 
@@ -60,7 +60,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
         if (!this.app) return
 
         this.$vuetify.application.register(
-          this._uid,
+          this.$.uid,
           this.applicationProperty,
           this.updateApplication()
         )
@@ -69,7 +69,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
         if (!force && !this.app) return
 
         this.$vuetify.application.unregister(
-          this._uid,
+          this.$.uid,
           this.applicationProperty
         )
       },

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) {
@@ -126,7 +126,8 @@ export default mixins<options &
 
   methods: {
     getScopeIdAttrs () {
-      const scopeId = getObjectValueByPath(this.$vnode, 'context.$options._scopeId')
+      // В Vue 3 $vnode больше не существует, используем современный способ
+      const scopeId = this.$options._scopeId || this.$options.__scopeId
 
       return scopeId && {
         [scopeId]: '',

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

package/src/util/__tests__/helpers.spec.ts

@@ -1,4 +1,3 @@
-import Vue from 'vue/dist/vue.common.js'
 import {
   deepEqual,
   getNestedValue,
@@ -10,6 +9,7 @@ import {
   humanReadableFileSize,
   sortItems,
   createSimpleFunctional,
+  normalizeClasses,
 } from '../helpers'
 import { mount } from '@vue/test-utils'
 
@@ -379,3 +379,64 @@ describe('helpers', () => {
     expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
   })
 })
+
+describe('normalizeClasses', () => {
+  it('should return empty object for undefined input', () => {
+    expect(normalizeClasses(undefined)).toEqual({})
+  })
+
+  it('should return empty object for null input', () => {
+    expect(normalizeClasses(null as any)).toEqual({})
+  })
+
+  it('should normalize string classes', () => {
+    expect(normalizeClasses('class1 class2 class3')).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle string with extra spaces', () => {
+    expect(normalizeClasses('  class1   class2  ')).toEqual({
+      class1: true,
+      class2: true
+    })
+  })
+
+  it('should return object as is', () => {
+    const classes = { class1: true, class2: false }
+    expect(normalizeClasses(classes)).toBe(classes)
+  })
+
+  it('should normalize array of strings', () => {
+    expect(normalizeClasses(['class1', 'class2', 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should normalize array of objects', () => {
+    expect(normalizeClasses([{ class1: true }, { class2: false }])).toEqual({
+      class1: true,
+      class2: false
+    })
+  })
+
+  it('should normalize mixed array', () => {
+    expect(normalizeClasses(['class1', { class2: true }, 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle empty string', () => {
+    expect(normalizeClasses('')).toEqual({})
+  })
+
+  it('should handle string with only spaces', () => {
+    expect(normalizeClasses('   ')).toEqual({})
+  })
+})

package/src/util/helpers.ts

@@ -531,4 +531,45 @@ export function normalizeAttrs (attrs) {
   }
 
   return obj
-}
+}
+
+/**
+ * Нормализует классы из различных форматов в объект
+ * @param classes - классы в виде строки, объекта или массива
+ * @returns объект с нормализованными классами
+ */
+export function normalizeClasses (classes: string | Record<string, any> | Array<string | Record<string, any>> | undefined): Record<string, any> {
+  if (!classes) return {}
+
+  if (typeof classes === 'object' && !Array.isArray(classes)) {
+    return classes
+  }
+
+  if (typeof classes === 'string') {
+    const trimmed = classes.trim()
+    if (!trimmed) return {}
+
+    return trimmed.split(/\s+/).reduce((acc, cls) => {
+      acc[cls] = true
+      return acc
+    }, {} as Record<string, any>)
+  }
+
+  if (Array.isArray(classes)) {
+    return classes.reduce((acc, cls) => {
+      if (typeof cls === 'string') {
+        const trimmed = cls.trim()
+        if (trimmed) {
+          trimmed.split(/\s+/).forEach(className => {
+            acc[className] = true
+          })
+        }
+      } else if (cls && typeof cls === 'object') {
+        Object.assign(acc, cls)
+      }
+      return acc
+    }, {} as Record<string, any>)
+  }
+
+  return {}
+}