@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/directives/intersect/index.ts

@@ -1,55 +1,73 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { VNode } from 'vue'
+import { DirectiveBinding, ObjectDirective, VNode } from 'vue'
 
 type ObserveHandler = (
   entries: IntersectionObserverEntry[],
   observer: IntersectionObserver,
-  isIntersecting: boolean,
-) => void
+  isIntersecting: boolean
+) => void;
 
-interface ObserveVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value?: ObserveHandler | { handler: ObserveHandler, options?: IntersectionObserverInit }
+interface ObserveDirectiveBinding
+  extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+  value?:
+    | ObserveHandler
+    | { handler: ObserveHandler, options?: IntersectionObserverInit }
   modifiers?: {
     once?: boolean
     quiet?: boolean
   }
 }
 
-function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
-  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return
+// Расширяем HTMLElement для хранения данных наблюдателя
+declare global {
+  interface HTMLElement {
+    _observe?: Record<
+      number,
+      { init: boolean, observer: IntersectionObserver }
+    >
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
+  if (typeof window === 'undefined' || !('IntersectionObserver' in window)) { return }
 
   const modifiers = binding.modifiers || {}
   const value = binding.value
-  const { handler, options } = typeof value === 'object'
-    ? value
-    : { handler: value, options: {} }
-  const observer = new IntersectionObserver((
-    entries: IntersectionObserverEntry[] = [],
-    observer: IntersectionObserver
-  ) => {
-    const _observe = el._observe?.[vnode.ctx!.uid]
-    if (!_observe) return // Just in case, should never fire
-
-    const isIntersecting = entries.some(entry => entry.isIntersecting)
-
-    // If is not quiet or has already been
-    // initted, invoke the user callback
-    if (
-      handler && (
-        !modifiers.quiet ||
-        _observe.init
-      ) && (
-        !modifiers.once ||
-        isIntersecting ||
-        _observe.init
-      )
-    ) {
-      handler(entries, observer, isIntersecting)
-    }
-
-    if (isIntersecting && modifiers.once) unbind(el, binding, vnode)
-    else _observe.init = true
-  }, options)
+  const { handler, options } =
+    typeof value === 'object' && value !== null && 'handler' in value
+      ? value
+      : { handler: value, options: {} }
+
+  if (!handler) return
+
+  const observer = new IntersectionObserver(
+    (
+      entries: IntersectionObserverEntry[] = [],
+      observer: IntersectionObserver
+    ) => {
+      const _observe = el._observe?.[vnode.ctx!.uid]
+      if (!_observe) return // Just in case, should never fire
+
+      const isIntersecting = entries.some(entry => entry.isIntersecting)
+
+      // If is not quiet or has already been
+      // initted, invoke the user callback
+      if (
+        handler &&
+        (!modifiers.quiet || _observe.init) &&
+        (!modifiers.once || isIntersecting || _observe.init)
+      ) {
+        handler(entries, observer, isIntersecting)
+      }
+
+      if (isIntersecting && modifiers.once) unmounted(el, binding, vnode)
+      else _observe.init = true
+    },
+    options
+  )
 
   el._observe = Object(el._observe)
   el._observe![vnode.ctx!.uid] = { init: false, observer }
@@ -57,7 +75,23 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
   observer.observe(el)
 }
 
-function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
+function updated (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
+  // Если значение изменилось, пересоздаем observer
+  if (binding.value !== binding.oldValue) {
+    unmounted(el, binding, vnode)
+    mounted(el, binding, vnode)
+  }
+}
+
+function unmounted (
+  el: HTMLElement,
+  binding: ObserveDirectiveBinding,
+  vnode: VNode
+) {
   const observe = el._observe?.[vnode.ctx!.uid]
   if (!observe) return
 
@@ -65,9 +99,14 @@ function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode)
   delete el._observe![vnode.ctx!.uid]
 }
 
-export const Intersect = {
-  mounted: inserted,
-  unmounted: unbind,
+export const Intersect: ObjectDirective<
+  HTMLElement,
+  | ObserveHandler
+  | { handler: ObserveHandler, options?: IntersectionObserverInit }
+> = {
+  mounted,
+  updated,
+  unmounted,
 }
 
 export default Intersect

package/src/directives/mutate/index.ts

@@ -1,75 +1,84 @@
-import { VNode, VNodeDirective } from 'vue'
+import { DirectiveBinding, VNode } from 'vue'
 
 type MutateHandler = (
   mutationsList: MutationRecord[],
-  observer: MutationObserver,
-) => void
+  observer: MutationObserver
+) => void;
 
-interface MutateVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value?: MutateHandler | { handler: MutateHandler, options?: MutationObserverInit }
-  modifiers?: {
-    once?: boolean
-    attr?: boolean
-    child?: boolean
-    sub?: boolean
-    char?: boolean
-  }
-}
+type MutateValue =
+  | MutateHandler
+  | { handler: MutateHandler, options?: MutationObserverInit };
+
+type MutateModifiers = {
+  once?: boolean
+  attr?: boolean
+  child?: boolean
+  sub?: boolean
+  char?: boolean
+};
 
-function inserted (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
-  const modifiers = binding.modifiers || {}
+function mounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<MutateValue>,
+  vnode: VNode
+) {
+  const modifiers = (binding.modifiers as MutateModifiers) || {}
   const value = binding.value
   const callback = typeof value === 'object' ? value.handler : value!
   const { once, ...modifierKeys } = modifiers
   const hasModifiers = Object.keys(modifierKeys).length > 0
 
   // Options take top priority
-  const options = typeof value === 'object' && value.options
-    ? value.options
-    : hasModifiers
-      // If we have modifiers, use only those provided
-      ? {
-        attributes: modifierKeys.attr,
-        childList: modifierKeys.child,
-        subtree: modifierKeys.sub,
-        characterData: modifierKeys.char,
-      }
-      // Defaults to everything on
-      : {
-        attributes: true,
-        childList: true,
-        subtree: true,
-        characterData: true,
-      }
+  const options =
+    typeof value === 'object' && value.options
+      ? value.options
+      : hasModifiers
+        ? {
+          // If we have modifiers, use only those provided
+          attributes: modifierKeys.attr,
+          childList: modifierKeys.child,
+          subtree: modifierKeys.sub,
+          characterData: modifierKeys.char,
+        }
+        : {
+          // Defaults to everything on
+          attributes: true,
+          childList: true,
+          subtree: true,
+          characterData: true,
+        }
 
-  const observer = new MutationObserver((
-    mutationsList: MutationRecord[],
-    observer: MutationObserver
-  ) => {
-    /* istanbul ignore if */
-    if (!el._mutate) return // Just in case, should never fire
+  const observer = new MutationObserver(
+    (mutationsList: MutationRecord[], observer: MutationObserver) => {
+      /* istanbul ignore if */
+      if (!el._mutate) return // Just in case, should never fire
 
-    callback(mutationsList, observer)
+      callback(mutationsList, observer)
 
-    // If has the once modifier, unbind
-    once && unbind(el, binding, vnode)
-  })
+      // If has the once modifier, unbind
+      once && unmounted(el, binding, vnode)
+    }
+  )
 
   observer.observe(el, options)
   el._mutate = Object(el._mutate)
-  el._mutate![vnode.context!._uid] = { observer }
+  el._mutate![vnode.ctx!.uid] = { observer }
 }
 
-function unbind (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
-  if (!el._mutate?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<MutateValue>,
+  vnode: VNode
+) {
+  if (!el._mutate?.[vnode.ctx!.uid]) return
 
-  el._mutate[vnode.context!._uid]!.observer.disconnect()
-  delete el._mutate[vnode.context!._uid]
+  el._mutate[vnode.ctx!.uid]!.observer.disconnect()
+  delete el._mutate[vnode.ctx!.uid]
 }
 
 export const Mutate = {
-  inserted,
-  unbind,
+  mounted,
+  unmounted,
 }
 
 export default Mutate

package/src/directives/resize/index.ts

@@ -1,19 +1,34 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { VNode } from 'vue'
+import { DirectiveBinding, ObjectDirective, VNode } from 'vue'
 
-interface ResizeVNodeDirective extends VNodeDirective {
-  value?: () => void
+interface ResizeDirectiveBinding extends DirectiveBinding {
+  value: () => void
   options?: boolean | AddEventListenerOptions
 }
 
-function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  const callback = binding.value!
+declare global {
+  interface HTMLElement {
+    _onResize?: Record<
+      number,
+      {
+        callback: () => void
+        options: boolean | AddEventListenerOptions
+      }
+    >
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  const callback = binding.value
   const options = binding.options || { passive: true }
 
   window.addEventListener('resize', callback, options)
 
   el._onResize = Object(el._onResize)
-  el._onResize![vnode.context!._uid] = {
+  el._onResize![vnode.ctx!.uid] = {
     callback,
     options,
   }
@@ -23,19 +38,23 @@ function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  if (!el._onResize?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onResize?.[vnode.ctx!.uid]) return
 
-  const { callback, options } = el._onResize[vnode.context!._uid]!
+  const { callback, options } = el._onResize[vnode.ctx!.uid]!
 
   window.removeEventListener('resize', callback, options)
 
-  delete el._onResize[vnode.context!._uid]
+  delete el._onResize[vnode.ctx!.uid]
 }
 
-export const Resize = {
-  inserted,
-  unbind,
+export const Resize: ObjectDirective = {
+  mounted,
+  unmounted,
 }
 
 export default Resize

package/src/directives/scroll/index.ts

@@ -1,21 +1,32 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { DirectiveOptions, VNode } from 'vue'
-
-interface ScrollVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value: EventListener | {
-    handler: EventListener
-    options?: boolean | AddEventListenerOptions
-  } | EventListenerObject & { options?: boolean | AddEventListenerOptions }
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
+
+interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
+  value:
+    | EventListener
+    | {
+        handler: EventListener
+        options?: boolean | AddEventListenerOptions
+      }
+    | (EventListenerObject & { options?: boolean | AddEventListenerOptions })
   modifiers?: {
     self?: boolean
   }
 }
 
-function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
+function mounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
   const { self = false } = binding.modifiers || {}
   const value = binding.value
-  const options = (typeof value === 'object' && value.options) || { passive: true }
-  const handler = typeof value === 'function' || 'handleEvent' in value ? value : value.handler
+  const options = (typeof value === 'object' && value.options) || {
+    passive: true,
+  }
+  const handler =
+    typeof value === 'function' || 'handleEvent' in value
+      ? value
+      : value.handler
 
   const target = self
     ? el
@@ -28,7 +39,8 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   target.addEventListener('scroll', handler, options)
 
   el._onScroll = Object(el._onScroll)
-  el._onScroll![vnode.context!._uid] = {
+  // В Vue 3 используем vnode.ctx.uid вместо vnode.context._uid
+  el._onScroll![vnode.ctx!.uid] = {
     handler,
     options,
     // Don't reference self
@@ -36,18 +48,22 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
-  if (!el._onScroll?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onScroll?.[vnode.ctx!.uid]) return
 
-  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]!
+  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll[vnode.context!._uid]
+  delete el._onScroll[vnode.ctx!.uid]
 }
 
-export const Scroll = {
-  inserted,
-  unbind,
-} as DirectiveOptions
+export const Scroll: ObjectDirective = {
+  mounted,
+  unmounted,
+}
 
 export default Scroll

package/src/directives/touch/index.ts

@@ -1,4 +1,4 @@
-import { VNodeDirective, VNode } from 'vue/types/vnode'
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
 import { keys } from '../../util/helpers'
 import { TouchHandlers, TouchValue, TouchWrapper } from 'vuetify/types'
 import makeDirectiveActivatable from '../../util/make-directive-activatable'
@@ -9,10 +9,6 @@ export interface TouchStoredHandlers {
   touchmove: (e: TouchEvent) => void
 }
 
-interface TouchVNodeDirective extends VNodeDirective {
-  value?: TouchValue
-}
-
 const handleGesture = (wrapper: TouchWrapper) => {
   const { touchstartX, touchendX, touchstartY, touchendY } = wrapper
   const dirRatio = 0.5
@@ -21,13 +17,19 @@ const handleGesture = (wrapper: TouchWrapper) => {
   wrapper.offsetY = touchendY - touchstartY
 
   if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
-    wrapper.left && (touchendX < touchstartX - minDistance) && wrapper.left(wrapper)
-    wrapper.right && (touchendX > touchstartX + minDistance) && wrapper.right(wrapper)
+    wrapper.left &&
+      touchendX < touchstartX - minDistance &&
+      wrapper.left(wrapper)
+    wrapper.right &&
+      touchendX > touchstartX + minDistance &&
+      wrapper.right(wrapper)
   }
 
   if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
-    wrapper.up && (touchendY < touchstartY - minDistance) && wrapper.up(wrapper)
-    wrapper.down && (touchendY > touchstartY + minDistance) && wrapper.down(wrapper)
+    wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper)
+    wrapper.down &&
+      touchendY > touchstartY + minDistance &&
+      wrapper.down(wrapper)
   }
 }
 
@@ -36,8 +38,7 @@ function touchstart (event: TouchEvent, wrapper: TouchWrapper) {
   wrapper.touchstartX = touch.clientX
   wrapper.touchstartY = touch.clientY
 
-  wrapper.start &&
-    wrapper.start(Object.assign(event, wrapper))
+  wrapper.start && wrapper.start(Object.assign(event, wrapper))
 }
 
 function touchend (event: TouchEvent, wrapper: TouchWrapper) {
@@ -45,8 +46,7 @@ function touchend (event: TouchEvent, wrapper: TouchWrapper) {
   wrapper.touchendX = touch.clientX
   wrapper.touchendY = touch.clientY
 
-  wrapper.end &&
-    wrapper.end(Object.assign(event, wrapper))
+  wrapper.end && wrapper.end(Object.assign(event, wrapper))
 
   handleGesture(wrapper)
 }
@@ -85,39 +85,49 @@ function createHandlers (value: TouchHandlers): TouchStoredHandlers {
   }
 }
 
-function inserted (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode) {
-  const value = binding.value!
+function mounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const value = binding.value
   const target = value.parent ? el.parentElement : el
   const options = value.options || { passive: true }
 
   // Needed to pass unit tests
   if (!target) return
 
-  const handlers = createHandlers(binding.value!)
+  const handlers = createHandlers(binding.value)
   target._touchHandlers = Object(target._touchHandlers)
-  target._touchHandlers![vnode.ctx.uid] = handlers
+  target._touchHandlers![vnode.ctx!.uid] = handlers
 
   keys(handlers).forEach(eventName => {
-    target.addEventListener(eventName, handlers[eventName] as EventListener, options)
+    target.addEventListener(
+      eventName,
+      handlers[eventName] as EventListener,
+      options
+    )
   })
 }
 
-function unbind (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode) {
-  const target = binding.value!.parent ? el.parentElement : el
+function unmounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const target = binding.value.parent ? el.parentElement : el
   if (!target || !target._touchHandlers) return
 
-  const handlers = target._touchHandlers[vnode.ctx.uid]
+  const handlers = target._touchHandlers[vnode.ctx!.uid]
   keys(handlers).forEach(eventName => {
     target.removeEventListener(eventName, handlers[eventName])
   })
-  delete target._touchHandlers[vnode.ctx.uid]
+  delete target._touchHandlers[vnode.ctx!.uid]
 }
 
-export const Touch = {
-  mounted: inserted,
-  unmounted: unbind,
+export const Touch: ObjectDirective<HTMLElement, TouchValue> = {
+  mounted,
+  unmounted,
 }
 
-
-
 export default makeDirectiveActivatable(Touch)

package/src/install.ts

@@ -1,17 +1,18 @@
 import { createApp, reactive } from 'vue'
 import { VuetifyUseOptions } from 'vuetify/types'
 import { consoleError } from './util/console'
+import { legacyEventsMixin } from './util/legacyEventsMixin'
 
 export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOptions = {}) {
   // if ((install as any).installed) return
   // (install as any).installed = true
 
-//   if (OurVue !== Vue) {
-//     consoleError(`Multiple instances of Vue detected
-// See https://github.com/vuetifyjs/vuetify/issues/4068
+  //   if (OurVue !== Vue) {
+  //     consoleError(`Multiple instances of Vue detected
+  // See https://github.com/vuetifyjs/vuetify/issues/4068
 
-// If you're seeing "$attrs is readonly", it's caused by this`)
-//   }
+  // If you're seeing "$attrs is readonly", it's caused by this`)
+  //   }
 
   const components = args.components || {}
   const directives = args.directives || {}
@@ -22,7 +23,6 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
     Vue.directive(name, directive)
   }
 
-
   (function registerComponents (components: any) {
     if (components) {
       for (const key in components) {
@@ -43,6 +43,9 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
   Vue.$_vuetify_installed = true
 
   Vue.mixin({
+    computed: {
+      ...legacyEventsMixin.computed,
+    },
     beforeCreate () {
       const options = this.$options as any
 
@@ -70,32 +73,7 @@ export function install (Vue: ReturnType<typeof createApp>, args: VuetifyUseOpti
       }
     },
     methods: {
-      $emitLegacy(eventName, args) {
-        if(!this.eventsLegacy || !this.eventsLegacy[eventName]) return
-
-
-        this.eventsLegacy[eventName].forEach(listener => listener(args))
-      },
-      $on(eventName, listener) {
-        this.eventsLegacy ||= {}
-        this.eventsLegacy[eventName] ||= []
-        this.eventsLegacy[eventName].push(listener)
-        // console.warn("$on is not available")
-      },
-      $off(eventName, listener) {
-        this.eventsLegacy[eventName] = this.eventsLegacy[eventName].filter(_listener => _listener !== listener)
-        // console.warn('$off is not available')
-      }
+      ...legacyEventsMixin.methods,
     },
-    computed: {
-      $listeners() {
-        const names = Object.keys(this.$attrs).filter(name => name.startsWith('on'))
-
-        return names.reduce((listeners, name) => {
-          listeners[name] = this.$attrs[name]
-          return listeners
-        }, {})
-      }
-    }
   })
 }