@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -8,7 +8,7 @@ import Color from '../'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('color.ts', () => {
@@ -21,9 +21,13 @@ describe('color.ts', () => {
       const TestComponent = defineComponent({
         directives: { Color },
         data: () => ({
-          color: '',
+          color: ''
         }),
-        template: `<div v-color${directive.arg ? `:${directive.arg}` : ''}${Object.keys(directive.modifiers || {}).length ? '.' + Object.keys(directive.modifiers).join('.') : ''}="color"></div>`,
+        template:
+          '<div v-color' +
+          (directive.arg ? ':' + directive.arg : '') +
+          (Object.keys(directive.modifiers || {}).length ? '.' + Object.keys(directive.modifiers).join('.') : '') +
+          '="color"></div>'
       })
 
       return mount(TestComponent, {
@@ -33,38 +37,38 @@ describe('color.ts', () => {
               $vuetify: {
                 theme: {
                   currentTheme: {
-                    primary: '#1976d2',
-                  },
-                },
-              },
-            },
+                    primary: '#1976d2'
+                  }
+                }
+              }
+            }
           },
           mocks: {
             $vuetify: {
               theme: {
                 currentTheme: {
-                  primary: '#1976d2',
-                },
-              },
-            },
+                  primary: '#1976d2'
+                }
+              }
+            }
           },
           provide: {
             $vuetify: {
               theme: {
                 currentTheme: {
-                  primary: '#1976d2',
-                },
-              },
-            },
-          },
-        },
+                  primary: '#1976d2'
+                }
+              }
+            }
+          }
+        }
       })
     }
   })
 
   it('should set background color', async () => {
     const wrapper = mountFunction({
-      name: 'color',
+      name: 'color'
     })
 
     await wrapper.setData({ color: '#01f' })
@@ -91,7 +95,7 @@ describe('color.ts', () => {
   it('should set text color', async () => {
     const wrapper = mountFunction({
       name: 'color',
-      arg: 'text',
+      arg: 'text'
     })
 
     await wrapper.setData({ color: '#01f' })
@@ -118,7 +122,7 @@ describe('color.ts', () => {
   it('should set border color', async () => {
     const wrapper = mountFunction({
       name: 'color',
-      arg: 'border',
+      arg: 'border'
     })
 
     await wrapper.setData({ color: '#01f' })
@@ -141,7 +145,7 @@ describe('color.ts', () => {
     const wrapper = mountFunction({
       name: 'color',
       arg: 'border',
-      modifiers: { top: true, right: true, left: true },
+      modifiers: { top: true, right: true, left: true }
     })
 
     await wrapper.setData({ color: '#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)
@@ -102,7 +103,7 @@ function update (
 
 export const Color = {
   mounted: updateColor,
-  updated: update,
+  updated: update
 }
 
 export default Color

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

@@ -9,7 +9,7 @@ describe('intersect', () => {
 
     Intersect.mounted(el, {
       value: callback,
-      modifiers: { quiet: true },
+      modifiers: { quiet: true }
     } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe).toBeTruthy()
@@ -19,7 +19,7 @@ describe('intersect', () => {
 
     Intersect.unmounted(el, {
       value: callback,
-      modifiers: { quiet: true },
+      modifiers: { quiet: true }
     } as any, { ctx: { uid: 1 } } as any)
 
     expect((el as any)._observe[1]).toBeFalsy()
@@ -34,7 +34,7 @@ describe('intersect', () => {
 
     Intersect.mounted(el, {
       value: callback,
-      modifiers: { once: true },
+      modifiers: { once: true }
     } as any, { ctx: { uid: 1 } } as any)
 
     expect(callback).toHaveBeenCalledTimes(0)

package/src/directives/intersect/index.ts

@@ -57,6 +57,7 @@ function mounted (
       // initted, invoke the user callback
       if (
         handler &&
+        typeof handler === 'function' &&
         (!modifiers.quiet || _observe.init) &&
         (!modifiers.once || isIntersecting || _observe.init)
       ) {
@@ -106,7 +107,7 @@ export const Intersect: ObjectDirective<
 > = {
   mounted,
   updated,
-  unmounted,
+  unmounted
 }
 
 export default Intersect

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

@@ -28,7 +28,7 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
-      value: callback,
+      value: callback
     } as any, { ctx: { uid: 1 } } as any)
 
     expect(el._mutate).toBeTruthy()
@@ -37,7 +37,7 @@ describe('mutate.ts', () => {
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
-      value: callback,
+      value: callback
     } as any, { ctx: { uid: 1 } } as any)
 
     const uid = Object.keys(el._mutate)[0]
@@ -50,7 +50,7 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
-      value: callback,
+      value: callback
     } as any, { ctx: { uid: 1 } } as any)
 
     const uid = Object.keys(el._mutate)[0]
@@ -61,7 +61,7 @@ describe('mutate.ts', () => {
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
-      value: callback,
+      value: callback
     } as any, { ctx: { uid: 1 } } as any)
   })
 
@@ -73,8 +73,8 @@ describe('mutate.ts', () => {
     Mutate.mounted(el, {
       value: callback,
       modifiers: {
-        once: true,
-      },
+        once: true
+      }
     } as any, { ctx: { uid: 1 } } as any)
 
     const uid = Object.keys(el._mutate)[0]
@@ -96,10 +96,10 @@ describe('mutate.ts', () => {
       value: {
         options: {
           attributes: false,
-          subtree: true,
+          subtree: true
         },
-        handler: callback,
-      },
+        handler: callback
+      }
     } as any, { ctx: { uid: 1 } } as any)
 
     const uid = Object.keys(el._mutate)[0]
@@ -114,10 +114,10 @@ describe('mutate.ts', () => {
       value: {
         options: {
           attributes: false,
-          subtree: true,
+          subtree: true
         },
-        handler: callback,
-      },
+        handler: callback
+      }
     } as any, { ctx: { uid: 1 } } as any)
   })
 
@@ -131,8 +131,8 @@ describe('mutate.ts', () => {
       modifiers: {
         attr: true,
         child: true,
-        sub: true,
-      },
+        sub: true
+      }
     } as any, { ctx: { uid: 1 } } as any)
 
     const uid = Object.keys(el._mutate)[0]
@@ -148,8 +148,8 @@ describe('mutate.ts', () => {
       modifiers: {
         attr: true,
         child: true,
-        sub: true,
-      },
+        sub: true
+      }
     } as any, { ctx: { uid: 1 } } as any)
   })
 })

package/src/directives/mutate/index.ts

@@ -35,18 +35,18 @@ function mounted (
       : hasModifiers
         ? {
           // If we have modifiers, use only those provided
-          attributes: modifierKeys.attr,
-          childList: modifierKeys.child,
-          subtree: modifierKeys.sub,
-          characterData: modifierKeys.char,
-        }
+            attributes: modifierKeys.attr,
+            childList: modifierKeys.child,
+            subtree: modifierKeys.sub,
+            characterData: modifierKeys.char
+          }
         : {
           // Defaults to everything on
-          attributes: true,
-          childList: true,
-          subtree: true,
-          characterData: true,
-        }
+            attributes: true,
+            childList: true,
+            subtree: true,
+            characterData: true
+          }
 
   const observer = new MutationObserver(
     (mutationsList: MutationRecord[], observer: MutationObserver) => {
@@ -78,7 +78,7 @@ function unmounted (
 
 export const Mutate = {
   mounted,
-  unmounted,
+  unmounted
 }
 
 export default Mutate

package/src/directives/resize/index.ts

@@ -30,7 +30,7 @@ function mounted (
   el._onResize = Object(el._onResize)
   el._onResize![vnode.ctx!.uid] = {
     callback,
-    options,
+    options
   }
 
   if (!binding.modifiers || !binding.modifiers.quiet) {
@@ -54,7 +54,7 @@ function unmounted (
 
 export const Resize: ObjectDirective = {
   mounted,
-  unmounted,
+  unmounted
 }
 
 export default Resize

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

@@ -6,7 +6,7 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h, defineComponent, withDirectives } from 'vue'
 
@@ -22,16 +22,16 @@ describe('ripple.ts', () => {
       const testComponent = defineComponent({
         render () {
           return withDirectives(h('div'), [[Ripple, true]])
-        },
+        }
       })
 
       return mount(testComponent, {
         global: {
           directives: {
-            ripple: Ripple,
-          },
+            ripple: Ripple
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -50,23 +50,23 @@ describe('ripple.ts', () => {
   it('should update element property reactively', async () => {
     const testComponent = defineComponent({
       directives: {
-        Ripple,
+        Ripple
       },
       props: {
         ripple: {
           type: Boolean,
-          default: false,
-        },
+          default: false
+        }
       },
       render () {
         return withDirectives(h('div'), [[Ripple, this.ripple]])
-      },
+      }
     })
 
     const wrapper = mount(testComponent, {
       props: {
-        ripple: true,
-      },
+        ripple: true
+      }
     })
 
     const div = wrapper.find('div')
@@ -127,7 +127,7 @@ describe('ripple.ts', () => {
   it('should only ripple on one element', () => {
     const wrapper = mount({
       directives: { Ripple },
-      template: '<div v-ripple><div class="child" v-ripple></div></div>',
+      template: '<div v-ripple><div class="child" v-ripple></div></div>'
     })
 
     const child = wrapper.find('.child').element

package/src/directives/ripple/index.ts

@@ -6,7 +6,8 @@ import { consoleWarn } from '../../util/console'
 import { keyCodes } from '../../util/helpers'
 import makeDirectiveActivatable from '../../util/make-directive-activatable'
 // Types
-import { VNode, VNodeDirective, nextTick } from 'vue'
+import { VNode, nextTick } from 'vue'
+import type { VNodeDirective } from '../../types/vue-internal'
 
 type VuetifyRippleEvent = (MouseEvent | TouchEvent | KeyboardEvent) & { rippleStop?: boolean }
 
@@ -142,7 +143,7 @@ const ripples = {
         if (animation.parentNode?.parentNode === el) el.removeChild(animation.parentNode)
       }, 300)
     }, delay)
-  },
+  }
 }
 
 function isRippleEnabled (value: any): value is true {
@@ -336,7 +337,7 @@ function update (el: HTMLElement, binding: VNodeDirective) {
 export const Ripple = {
   mounted: directive,
   unmounted: unbind,
-  updated: update,
+  updated: update
 }
 
 export default makeDirectiveActivatable(Ripple)

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

@@ -17,11 +17,11 @@ describe('scroll.ts', () => {
     binding = {
       value: jest.fn(),
       modifiers: {},
-      arg: null,
+      arg: null
     } as DirectiveBinding
     el = {
       addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
+      removeEventListener: jest.fn()
     }
   })
 
@@ -35,7 +35,7 @@ describe('scroll.ts', () => {
     expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
-      target: window,
+      target: window
     })
 
     unmounted(el, binding, vnode)
@@ -69,7 +69,7 @@ describe('scroll.ts', () => {
     expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
-      target,
+      target
     })
 
     unmounted(el, binding, vnode)
@@ -89,7 +89,7 @@ describe('scroll.ts', () => {
     expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
-      target: undefined,
+      target: undefined
     })
 
     unmounted(el, binding, vnode)
@@ -114,7 +114,7 @@ describe('scroll.ts', () => {
     expect(el._onScroll[1]).toEqual({
       handler,
       target: window,
-      options: { passive: true },
+      options: { passive: true }
     })
 
     binding.value = { handler, options: { passive: false } }
@@ -124,7 +124,7 @@ describe('scroll.ts', () => {
     expect(el._onScroll[1]).toEqual({
       handler,
       target: window,
-      options: { passive: false },
+      options: { passive: false }
     })
   })
 })

package/src/directives/scroll/index.ts

@@ -21,7 +21,7 @@ function mounted (
   const { self = false } = binding.modifiers || {}
   const value = binding.value
   const options = (typeof value === 'object' && value.options) || {
-    passive: true,
+    passive: true
   }
   const handler =
     typeof value === 'function' || 'handleEvent' in value
@@ -43,7 +43,7 @@ function mounted (
     handler,
     options,
     // Don't reference self
-    target: self ? undefined : target,
+    target: self ? undefined : target
   }
 }
 
@@ -62,7 +62,7 @@ function unmounted (
 
 export const Scroll: ObjectDirective = {
   mounted,
-  unmounted,
+  unmounted
 }
 
 export default Scroll

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

@@ -6,7 +6,7 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h, defineComponent, withDirectives } from 'vue'
 import { touch } from '../../../../test'
@@ -19,9 +19,9 @@ describe('touch.ts', () => {
   beforeEach(() => {
     mountFunction = (value = {}) => {
       return mount(defineComponent({
-        render() {
+        render () {
           return withDirectives(h('div'), [[Touch, value]])
-        },
+        }
       }))
     }
   })

package/src/directives/touch/index.ts

@@ -75,13 +75,13 @@ function createHandlers (value: TouchHandlers): TouchStoredHandlers {
     down: value.down,
     start: value.start,
     move: value.move,
-    end: value.end,
+    end: value.end
   }
 
   return {
     touchstart: (e: TouchEvent) => touchstart(e, wrapper),
     touchend: (e: TouchEvent) => touchend(e, wrapper),
-    touchmove: (e: TouchEvent) => touchmove(e, wrapper),
+    touchmove: (e: TouchEvent) => touchmove(e, wrapper)
   }
 }
 
@@ -129,7 +129,7 @@ function unmounted (
 
 export const Touch: ObjectDirective<HTMLElement, TouchValue> = {
   mounted,
-  unmounted,
+  unmounted
 }
 
 export default makeDirectiveActivatable(Touch)

package/src/framework.ts

@@ -1,14 +1,14 @@
 import { install } from './install'
 
 // Types
-import Vue from 'vue'
+import type { ComponentPublicInstance } from 'vue'
 import {
   UserVuetifyPreset,
-  VuetifyPreset,
+  VuetifyPreset
 } from 'vuetify/types/services/presets'
 import {
   VuetifyService,
-  VuetifyServiceContract,
+  VuetifyServiceContract
 } from 'vuetify/types/services'
 
 // Services
@@ -22,11 +22,11 @@ export default class Vuetify {
   static version = __VUETIFY_VERSION__
 
   static config = {
-    silent: false,
+    silent: false
   }
 
   public framework: Dictionary<VuetifyServiceContract> = {
-    isHydrating: false,
+    isHydrating: false
   } as any
 
   public installed: string[] = []
@@ -45,13 +45,12 @@ export default class Vuetify {
     this.use(services.Icons)
     this.use(services.Lang)
     this.use(services.Theme)
-
   }
 
   // Called on the new vuetify instance
   // bootstrap in install beforeCreate
   // Exposes ssrContext if available
-  init (root: Vue, ssrContext?: object) {
+  init (root: ComponentPublicInstance, ssrContext?: object) {
     this.installed.forEach(property => {
       const service = this.framework[property]