@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts

@@ -11,10 +11,10 @@ function bootstrap (args?: object) {
   const binding = {
     value: {
       handler: jest.fn(),
-      ...args,
-    },
+      ...args
+    }
   } as any
-  const vnode = { context: { _uid: 1 } } as any
+  const vnode = { ctx: { uid: 1 } } as any
 
   let shadowClickHandler
   let outsideClickHandler
@@ -38,7 +38,7 @@ function bootstrap (args?: object) {
   jest.spyOn(window.document, 'removeEventListener')
   jest.spyOn(shadowRoot, 'removeEventListener')
 
-  ClickOutside.inserted(shadowEl as HTMLElement, binding, vnode)
+  ClickOutside.mounted(shadowEl as HTMLElement, binding, vnode)
 
   return {
     binding,
@@ -50,7 +50,7 @@ function bootstrap (args?: object) {
     shadowClickHandler,
     outsideClickHandler,
     shadowMousedownHandler,
-    outsideMousedownHandler,
+    outsideMousedownHandler
   }
 }
 
@@ -59,7 +59,7 @@ describe('click-outside.js within the Shadow DOM', () => {
     const { outsideClickHandler, shadowEl, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
 
-    ClickOutside.unbind(shadowEl, binding, vnode)
+    ClickOutside.unmounted(shadowEl, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
   })
 
@@ -67,7 +67,7 @@ describe('click-outside.js within the Shadow DOM', () => {
     const { shadowClickHandler, shadowRoot, shadowEl, binding, vnode } = bootstrap()
     expect(shadowRoot.addEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
 
-    ClickOutside.unbind(shadowEl, binding, vnode)
+    ClickOutside.unmounted(shadowEl, binding, vnode)
     expect(shadowRoot.removeEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
   })
 

package/src/directives/click-outside/__tests__/click-outside.spec.ts

@@ -8,10 +8,10 @@ function bootstrap (args?: object) {
   const binding = {
     value: {
       handler: jest.fn(),
-      ...args,
-    },
+      ...args
+    }
   } as any
-  const vnode = { context: { _uid: 1 } } as any
+  const vnode = { ctx: { uid: 1 } } as any
 
   let clickHandler
   let mousedownHandler
@@ -21,7 +21,7 @@ function bootstrap (args?: object) {
   })
   jest.spyOn(window.document, 'removeEventListener')
 
-  ClickOutside.inserted(el as HTMLElement, binding, vnode)
+  ClickOutside.mounted(el as HTMLElement, binding, vnode)
 
   return {
     binding,
@@ -29,7 +29,7 @@ function bootstrap (args?: object) {
     callback: binding.value.handler,
     el: el as HTMLElement,
     clickHandler,
-    mousedownHandler,
+    mousedownHandler
   }
 }
 
@@ -38,7 +38,7 @@ describe('click-outside', () => {
     const { clickHandler, el, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
 
-    ClickOutside.unbind(el, binding, vnode)
+    ClickOutside.unmounted(el, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
   })
 
@@ -78,7 +78,7 @@ describe('click-outside', () => {
   it('should not call the callback when clicked in elements', async () => {
     const { clickHandler, callback, el } = bootstrap({
       closeConditional: () => true,
-      include: () => [el],
+      include: () => [el]
     })
 
     clickHandler({ target: document.createElement('div') })

package/src/directives/click-outside/index.ts

@@ -1,5 +1,5 @@
 import { attachedRoot } from '../../util/dom'
-import { VNodeDirective } from 'vue/types/vnode'
+import type { VNodeDirective } from '../../types/vue-internal'
 import { VNode } from 'vue'
 
 interface ClickOutsideBindingArgs {
@@ -8,7 +8,7 @@ interface ClickOutsideBindingArgs {
   include?: () => HTMLElement[]
 }
 
-interface ClickOutsideDirective extends VNodeDirective {
+type ClickOutsideDirective = VNodeDirective & {
   value?: ((e: Event) => void) | ClickOutsideBindingArgs
 }
 
@@ -90,13 +90,13 @@ export const ClickOutside = {
 
     if (!el._clickOutside) {
       el._clickOutside = {
-        lastMousedownWasOutside: true,
+        lastMousedownWasOutside: true
       }
     }
 
     el._clickOutside[vnode.ctx.uid] = {
       onClick,
-      onMousedown,
+      onMousedown
     }
   },
 
@@ -113,7 +113,7 @@ export const ClickOutside = {
     })
 
     delete el._clickOutside[vnode.ctx.uid]
-  },
+  }
 }
 
 export default ClickOutside

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,63 +7,87 @@ 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: '',
+          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'
+                }
+              }
+            }
+          }
+        }
       })
     }
   })
 
   it('should set background color', async () => {
     const wrapper = mountFunction({
-      name: 'color',
+      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')
   })
@@ -71,26 +95,26 @@ describe('color.ts', () => {
   it('should set text color', async () => {
     const wrapper = mountFunction({
       name: 'color',
-      arg: 'text',
+      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')
   })
@@ -98,22 +122,22 @@ describe('color.ts', () => {
   it('should set border color', async () => {
     const wrapper = mountFunction({
       name: 'color',
-      arg: 'border',
+      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')
   })
 
@@ -121,10 +145,10 @@ describe('color.ts', () => {
     const wrapper = mountFunction({
       name: 'color',
       arg: 'border',
-      modifiers: { top: true, right: true, left: true },
+      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

@@ -2,13 +2,14 @@
 import {
   classToHex,
   isCssColor,
-  parseGradient,
+  parseGradient
 } from '../../util/colorUtils'
 import colors from '../../util/colors'
 
 // Types
 import { VuetifyThemeVariant } from 'types/services/theme'
-import { VNode, VNodeDirective } from 'vue'
+import type { VNode } from 'vue'
+import type { VNodeDirective } from '../../types/vue-internal'
 
 interface BorderModifiers {
   top?: Boolean
@@ -20,7 +21,7 @@ interface BorderModifiers {
 function setTextColor (
   el: HTMLElement,
   color: string,
-  currentTheme: Partial<VuetifyThemeVariant>,
+  currentTheme: Partial<VuetifyThemeVariant>
 ) {
   const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color
 
@@ -31,7 +32,7 @@ function setTextColor (
 function setBackgroundColor (
   el: HTMLElement,
   color: string,
-  currentTheme: Partial<VuetifyThemeVariant>,
+  currentTheme: Partial<VuetifyThemeVariant>
 ) {
   const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color
 
@@ -43,7 +44,7 @@ function setBorderColor (
   el: HTMLElement,
   color: string,
   currentTheme: Partial<VuetifyThemeVariant>,
-  modifiers?: BorderModifiers,
+  modifiers?: BorderModifiers
 ) {
   const cssColor = !isCssColor(color) ? classToHex(color, colors, currentTheme) : color
 
@@ -61,7 +62,7 @@ function setBorderColor (
 function setGradientColor (
   el: HTMLElement,
   gradient: string,
-  currentTheme: Partial<VuetifyThemeVariant>,
+  currentTheme: Partial<VuetifyThemeVariant>
 ) {
   el.style.backgroundImage = `linear-gradient(${
     parseGradient(gradient, colors, currentTheme)
@@ -73,7 +74,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 +102,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)
+      modifiers: { quiet: true }
+    } 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)
+      modifiers: { quiet: true }
+    } 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)
+      modifiers: { once: true }
+    } 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,74 @@
-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 &&
+        typeof handler === 'function' &&
+        (!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 +76,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 +100,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