@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

package/src/directives/color/__tests__/color.spec.ts

@@ -1,5 +1,5 @@
 // Vue
-import Vue from 'vue'
+import { h, defineComponent } from 'vue'
 
 // Directives
 import Color from '../'
@@ -7,33 +7,53 @@ import Color from '../'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('color.ts', () => {
-  let mountFunction: () => Wrapper<Vue>
+  let mountFunction: (directive?: any) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (directive = {}) => {
-      return mount(Vue.component('test', {
+      const TestComponent = defineComponent({
         directives: { Color },
         data: () => ({
           color: '',
         }),
-        render (h) {
-          return h('div', {
-            directives: [{
-              ...directive,
-              value: this.color,
-            }],
-          })
-        },
-      }), {
-        mocks: {
-          $vuetify: {
-            theme: {
-              currentTheme: {
-                primary: '#1976d2',
+        template: `<div v-color${directive.arg ? `:${directive.arg}` : ''}${Object.keys(directive.modifiers || {}).length ? '.' + Object.keys(directive.modifiers).join('.') : ''}="color"></div>`,
+      })
+
+      return mount(TestComponent, {
+        global: {
+          config: {
+            globalProperties: {
+              $vuetify: {
+                theme: {
+                  currentTheme: {
+                    primary: '#1976d2',
+                  },
+                },
+              },
+            },
+          },
+          mocks: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
+              },
+            },
+          },
+          provide: {
+            $vuetify: {
+              theme: {
+                currentTheme: {
+                  primary: '#1976d2',
+                },
               },
             },
           },
@@ -47,23 +67,23 @@ describe('color.ts', () => {
       name: 'color',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(0, 17, 255)')
     expect(wrapper.element.style.borderColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(255, 255, 0)')
     expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(244, 67, 54)')
     expect(wrapper.element.style.borderColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(239, 83, 80)')
     expect(wrapper.element.style.borderColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.backgroundColor).toEqual('rgb(25, 118, 210)')
     expect(wrapper.element.style.borderColor).toEqual('#1976d2')
   })
@@ -74,23 +94,23 @@ describe('color.ts', () => {
       arg: 'text',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.color).toEqual('rgb(0, 17, 255)')
     expect(wrapper.element.style.caretColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgba(0, 1, 2, 0.5)' })
+    await wrapper.setData({ color: 'rgba(0, 1, 2, 0.5)' })
     expect(wrapper.element.style.color).toEqual('rgba(0, 1, 2, 0.5)')
     expect(wrapper.element.style.caretColor).toEqual('rgba(0, 1, 2, 0.5)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.color).toEqual('rgb(244, 67, 54)')
     expect(wrapper.element.style.caretColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.color).toEqual('rgb(239, 83, 80)')
     expect(wrapper.element.style.caretColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.color).toEqual('rgb(25, 118, 210)')
     expect(wrapper.element.style.caretColor).toEqual('#1976d2')
   })
@@ -101,19 +121,19 @@ describe('color.ts', () => {
       arg: 'border',
     })
 
-    wrapper.setData({ color: '#01f' })
+    await wrapper.setData({ color: '#01f' })
     expect(wrapper.element.style.borderColor).toEqual('#01f')
 
-    wrapper.setData({ color: 'rgb(255, 255, 0)' })
+    await wrapper.setData({ color: 'rgb(255, 255, 0)' })
     expect(wrapper.element.style.borderColor).toEqual('rgb(255, 255, 0)')
 
-    wrapper.setData({ color: 'red' })
+    await wrapper.setData({ color: 'red' })
     expect(wrapper.element.style.borderColor).toEqual('#f44336')
 
-    wrapper.setData({ color: 'red lighten-1' })
+    await wrapper.setData({ color: 'red lighten-1' })
     expect(wrapper.element.style.borderColor).toEqual('#ef5350')
 
-    wrapper.setData({ color: 'primary' })
+    await wrapper.setData({ color: 'primary' })
     expect(wrapper.element.style.borderColor).toEqual('#1976d2')
   })
 
@@ -124,7 +144,7 @@ describe('color.ts', () => {
       modifiers: { top: true, right: true, left: true },
     })
 
-    wrapper.setData({ color: '#fff' })
+    await wrapper.setData({ color: '#fff' })
     expect(wrapper.element.style.borderTopColor).toEqual('#fff')
     expect(wrapper.element.style.borderRightColor).toEqual('#fff')
     expect(wrapper.element.style.borderLeftColor).toEqual('#fff')

package/src/directives/color/index.ts

@@ -73,7 +73,11 @@ function updateColor (
   binding: VNodeDirective,
   node: VNode
 ) {
-  const currentTheme = node.context!.$vuetify.theme.currentTheme
+  const vuetify = (binding as any).instance?.$vuetify ||
+                  node.appContext?.config?.globalProperties?.$vuetify ||
+                  node.appContext?.provides?.$vuetify
+
+  const currentTheme = vuetify?.theme?.currentTheme
 
   if (binding.arg === undefined) {
     setBackgroundColor(el, binding.value, currentTheme)
@@ -97,8 +101,8 @@ function update (
 }
 
 export const Color = {
-  bind: updateColor,
-  update,
+  mounted: updateColor,
+  updated: update,
 }
 
 export default Color

package/src/directives/intersect/__tests__/intersect.spec.ts

@@ -2,25 +2,25 @@
 import Intersect from '../'
 
 describe('intersect', () => {
-  it('should bind event on inserted', () => {
+  it('should bind event on mounted', () => {
     const callback = jest.fn()
     const el = document.createElement('div')
     document.body.appendChild(el)
 
-    Intersect.inserted(el, {
+    Intersect.mounted(el, {
       value: callback,
       modifiers: { quiet: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Intersect.unbind(el, {
+    Intersect.unmounted(el, {
       value: callback,
       modifiers: { quiet: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe[1]).toBeFalsy()
   })
@@ -32,10 +32,10 @@ describe('intersect', () => {
 
     const callback = jest.fn()
 
-    Intersect.inserted(el, {
+    Intersect.mounted(el, {
       value: callback,
       modifiers: { once: true },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect(callback).toHaveBeenCalledTimes(0)
     expect((el as any)._observe[1]).toBeTruthy()

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/__tests__/mutate.spec.ts

@@ -27,20 +27,21 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect(el._mutate).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    expect(el._mutate[1]).toBeFalsy()
+    const uid = Object.keys(el._mutate)[0]
+    expect(el._mutate[uid]).toBeFalsy()
   })
 
   it('should fire event on mutation', () => {
@@ -48,19 +49,20 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 
   it('should fire event once', () => {
@@ -68,17 +70,19 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
       modifiers: {
         once: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1]).toBeFalsy()
+    // Once modifier should remove the observer
+    expect(Object.keys(el._mutate)).toHaveLength(0)
 
     document.body.removeChild(el)
   })
@@ -88,7 +92,7 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: {
         options: {
           attributes: false,
@@ -96,16 +100,17 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: {
         options: {
           attributes: false,
@@ -113,7 +118,7 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -121,29 +126,30 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 })

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