@dimailn/vuetify 2.7.2-alpha5 → 2.7.2-alpha51

package/src/mixins/mouse/index.ts

@@ -1,4 +1,5 @@
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
+import { upperFirst } from '../../util/helpers'
 
 export type MouseHandler = (e: MouseEvent | TouchEvent) => any
 
@@ -12,6 +13,7 @@ export type MouseEvents = {
     prevent?: boolean
     button?: number
     result?: any
+    originalKey?: string
   }
 }
 
@@ -19,9 +21,8 @@ export type MouseEventsMap = {
   [event: string]: MouseHandler | MouseHandler[]
 }
 
-function mapEventName(str) {
-  let newStr = "on" + str;
-  return newStr.charAt(0).toUpperCase() + newStr.slice(1);
+function mapEventName (str: string): string {
+  return `on${upperFirst(str)}`
 }
 
 export default defineComponent({
@@ -32,13 +33,15 @@ export default defineComponent({
       const listeners = Object.keys(this.$attrs)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {
-          acc[key] = { event: key.slice(0, -suffix.length) }
+          const eventName = suffix ? key.slice(0, -suffix.length) : key
+          const cleanEventName = eventName.startsWith('on') ? eventName.slice(2).toLowerCase() : eventName.toLowerCase()
+          acc[cleanEventName] = { event: cleanEventName, originalKey: key }
           return acc
         }, {} as MouseEvents)
 
       return this.getMouseEventHandlers({
         ...listeners,
-        ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false },
+        ['contextmenu' + suffix]: { event: 'contextmenu', prevent: true, result: false }
       }, getData, eventFirst)
     },
     getMouseEventHandlers (events: MouseEvents, getData: MouseHandler, eventFirst = false): MouseEventsMap {
@@ -47,7 +50,8 @@ export default defineComponent({
       for (const event in events) {
         const eventOptions = events[event]
 
-        if (!this.$attrs[mapEventName(event)]) continue
+        const attrName = eventOptions.originalKey || (event.includes(':') ? event : mapEventName(event))
+        if (!this.$attrs[attrName]) continue
 
         // TODO somehow pull in modifiers
 
@@ -84,7 +88,7 @@ export default defineComponent({
                 currentTarget.dispatchEvent(new TouchEvent(e.type, {
                   changedTouches: e.changedTouches as unknown as Touch[],
                   targetTouches: e.targetTouches as unknown as Touch[],
-                  touches: e.touches as unknown as Touch[],
+                  touches: e.touches as unknown as Touch[]
                 }))
                 return
               }
@@ -115,6 +119,6 @@ export default defineComponent({
       }
 
       return on
-    },
-  },
+    }
+  }
 })

package/src/mixins/overlayable/__tests__/overlayable.spec.ts

@@ -2,36 +2,37 @@
 import Overlayable from '../index'
 
 // Utilities
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount, MountingOptions, VueWrapper, enableAutoUnmount } from '@vue/test-utils'
 import { waitAnimationFrame } from '../../../../test'
+import { defineComponent, h, nextTick } from 'vue'
 
 describe('Overlayable.ts', () => {
-  const Mock = Overlayable.extend({
+  enableAutoUnmount(afterEach)
+
+  const Mock = defineComponent({
+    mixins: [Overlayable],
     data: () => ({
-      isActive: false,
+      isActive: false
     }),
-
-    render: h => h('div'),
+    render: () => h('div')
   })
 
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
   })
 
-  type Instance = InstanceType<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof Mock>;
+  let mountFunction: (options?: MountingOptions<any>) => VueWrapper<any>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(Mock, {
-        mocks: {
-          $vuetify: { breakpoint: {} },
+        global: {
+          mocks: {
+            $vuetify: { breakpoint: {} }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -46,7 +47,7 @@ describe('Overlayable.ts', () => {
     expect(wrapper.vm.overlay).toBeTruthy()
 
     wrapper.vm.removeOverlay()
-    // Simular overlay being rapidly opened/closed
+    // Simulate overlay being rapidly opened/closed
     wrapper.vm.overlay.value = true
 
     const event = new Event('transitionend')
@@ -74,11 +75,26 @@ describe('Overlayable.ts', () => {
     expect(wrapper.vm.overlay).toBeFalsy()
   })
 
+  it('should remove overlay app container after close', async () => {
+    const wrapper = mountFunction()
+
+    wrapper.vm.genOverlay()
+    await waitAnimationFrame()
+
+    expect(document.querySelectorAll('[data-v-app]')).toHaveLength(1)
+
+    wrapper.vm.removeOverlay()
+    wrapper.vm.overlay.$el.dispatchEvent(new Event('transitionend'))
+
+    expect(wrapper.vm.overlay).toBeFalsy()
+    expect(document.querySelectorAll('[data-v-app]')).toHaveLength(0)
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/8473
   it('should get root element z-index if activeIndex is not available', async () => {
     const wrapper = mountFunction()
 
-    wrapper.vm.$el.style.zIndex = 8
+    wrapper.vm.$el.style.zIndex = '8'
 
     wrapper.vm.genOverlay()
 
@@ -88,24 +104,134 @@ describe('Overlayable.ts', () => {
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8142
-  it('should not update overlay state if not active', () => {
+  it('should not update overlay state if not active', async () => {
     const cb = jest.fn()
     const wrapper = mountFunction({
-      methods: {
-        removeOverlay: cb,
-        genOVerlay: cb,
-      },
+      global: {
+        mocks: {
+          $vuetify: { breakpoint: {} }
+        }
+      }
     })
 
-    wrapper.setProps({ hideOverlay: true })
-    wrapper.setProps({ hideOverlay: false })
+    // Mock the methods
+    wrapper.vm.removeOverlay = cb
+    wrapper.vm.genOverlay = cb
+
+    await wrapper.setProps({ hideOverlay: true })
+    await wrapper.setProps({ hideOverlay: false })
 
     expect(cb).not.toHaveBeenCalled()
 
-    wrapper.setData({ isActive: true })
-    wrapper.setProps({ hideOverlay: true })
-    wrapper.setProps({ hideOverlay: false })
+    wrapper.vm.isActive = true
+    await nextTick()
+
+    await wrapper.setProps({ hideOverlay: true })
+    await wrapper.setProps({ hideOverlay: false })
+
+    expect(cb).toHaveBeenCalledTimes(2)
+  })
+
+  describe('stale overlay ref after DOM detach', () => {
+    /** Как у VNavigationDrawer: showOverlay управляет genOverlay/removeOverlay */
+    const DrawerLike = defineComponent({
+      mixins: [Overlayable],
+      data: () => ({
+        isActive: false,
+        isMobile: false,
+        temporary: false
+      }),
+      computed: {
+        showOverlay (): boolean {
+          return this.isActive && (this.isMobile || this.temporary)
+        }
+      },
+      watch: {
+        showOverlay (val: boolean) {
+          if (val) this.genOverlay()
+          else this.removeOverlay()
+        }
+      },
+      render: () => h('div', { class: 'drawer-host' })
+    })
+
+    let mountDrawerLike: (options?: MountingOptions<any>) => VueWrapper<any>
 
-    expect(cb).toHaveBeenCalledTimes(1)
+    beforeEach(() => {
+      document.body.innerHTML = ''
+      document.body.setAttribute('data-app', 'true')
+
+      mountDrawerLike = (options = {}) => mount(DrawerLike, {
+        global: {
+          mocks: {
+            $vuetify: { breakpoint: {} }
+          }
+        },
+        ...options
+      })
+    })
+
+    it('genOverlay пересоздаёт оверлей если узел отцеплён от DOM', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      wrapper.vm.overlay!.$el.parentNode!.remove()
+
+      wrapper.vm.genOverlay()
+      await waitAnimationFrame()
+
+      expect(app.querySelector('.v-overlay--active')).toBeTruthy()
+      expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
+    })
+
+    it('повторное открытие дровера восстанавливает оверлей в [data-app]', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      wrapper.vm.overlay!.$el.parentNode!.remove()
+
+      wrapper.vm.isActive = false
+      await nextTick()
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      expect(app.querySelector('.v-overlay--active')).toBeTruthy()
+      expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
+    })
+
+    it('showOverlay true→true не вызывает genOverlay после потери [data-app]', async () => {
+      const genOverlay = jest.fn()
+      const removeOverlay = jest.fn()
+
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.genOverlay = genOverlay
+      wrapper.vm.removeOverlay = removeOverlay
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+
+      genOverlay.mockClear()
+      removeOverlay.mockClear()
+
+      document.body.innerHTML = ''
+      document.body.setAttribute('data-app', 'true')
+
+      expect(wrapper.vm.showOverlay).toBe(true)
+      expect(genOverlay).not.toHaveBeenCalled()
+      expect(removeOverlay).not.toHaveBeenCalled()
+    })
   })
 })

package/src/mixins/overlayable/index.ts

@@ -7,11 +7,11 @@ import {
   addOnceEventListener,
   addPassiveEventListener,
   getZIndex,
-  composedPath,
+  composedPath
 } from '../../util/helpers'
 
 // Types
-import {defineComponent, App, createApp, h} from 'vue'
+import { defineComponent, App, createApp, h } from 'vue'
 
 interface Toggleable extends App {
   isActive?: boolean
@@ -36,13 +36,14 @@ export default defineComponent({
   props: {
     hideOverlay: Boolean,
     overlayColor: String,
-    overlayOpacity: [Number, String],
+    overlayOpacity: [Number, String]
   },
 
   data () {
     return {
       animationFrame: 0,
       overlay: null as InstanceType<typeof VOverlay> | null,
+      overlayApp: null as App<Element> | null
     }
   },
 
@@ -52,17 +53,17 @@ export default defineComponent({
 
       if (value) this.removeOverlay()
       else this.genOverlay()
-    },
+    }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeOverlay()
   },
 
   methods: {
     createOverlay () {
       // Create a container element
-      const container = document.createElement('div');
+      const container = document.createElement('div')
 
       const props = {
         absolute: this.absolute,
@@ -70,12 +71,13 @@ export default defineComponent({
         opacity: this.overlayOpacity
       }
       const wrapper = {
-        data() {
-          return { value: false }
+        data () {
+          return { value: false, zIndex: undefined }
         },
-        render() {
+        render () {
           return h(VOverlay, {
             modelValue: this.value,
+            zIndex: this.zIndex,
             ...props
           })
         }
@@ -91,18 +93,18 @@ export default defineComponent({
       const overlayApp = createApp(wrapper)
 
       // Mount the app to the container
-      const overlayInstance = overlayApp.mount(container);
+      const overlayInstance = overlayApp.mount(container)
 
       // Determine the parent element
       const parent = this.absolute
         ? this.$el.parentNode
-        : document.querySelector('[data-app]');
+        : document.querySelector('[data-app]')
 
       if (parent) {
-        parent.insertBefore(container, parent.firstChild);
+        parent.insertBefore(container, parent.firstChild)
       }
 
-      this.overlay = overlayInstance;
+      this.overlay = overlayInstance
       this.overlayApp = overlayApp
     },
     genOverlay () {
@@ -110,7 +112,17 @@ export default defineComponent({
 
       if (this.hideOverlay) return
 
-      if (!this.overlay) this.createOverlay()
+      if (!this.overlay?.$el?.isConnected) {
+        if (this.overlay) {
+          cancelAnimationFrame(this.animationFrame)
+          const container = this.overlay.$el?.parentNode as HTMLElement | null
+          this.overlayApp?.unmount()
+          this.overlayApp = null
+          if (container?.parentNode) container.parentNode.removeChild(container)
+          this.overlay = null
+        }
+        this.createOverlay()
+      }
 
       this.animationFrame = requestAnimationFrame(() => {
         if (!this.overlay) return
@@ -129,6 +141,15 @@ export default defineComponent({
     /** removeOverlay(false) will not restore the scollbar afterwards */
     removeOverlay (showScroll = true) {
       if (this.overlay) {
+        if (!this.overlay.$el?.isConnected) {
+          cancelAnimationFrame(this.animationFrame)
+          this.overlayApp?.unmount()
+          this.overlayApp = null
+          this.overlay = null
+          showScroll && this.showScroll()
+          return
+        }
+
         addOnceEventListener(this.overlay.$el, 'transitionend', () => {
           if (
             !this.overlay ||
@@ -138,9 +159,15 @@ export default defineComponent({
             this.isActive
           ) return
 
-          this.overlay.$el.parentNode.removeChild(this.overlay.$el)
-          this.overlayApp.unmount()
+          const overlayContainer = this.overlay.$el.parentNode as HTMLElement | null
+
+          this.overlayApp?.unmount()
           this.overlayApp = null
+
+          if (overlayContainer?.parentNode) {
+            overlayContainer.parentNode.removeChild(overlayContainer)
+          }
+
           this.overlay = null
         })
 
@@ -165,9 +192,9 @@ export default defineComponent({
         const up = [keyCodes.up, keyCodes.pageup]
         const down = [keyCodes.down, keyCodes.pagedown]
 
-        if (up.includes(e.keyCode)) {
+        if (up.includes(e.keyCode as typeof keyCodes.up | typeof keyCodes.pageup)) {
           (e as any).deltaY = -1
-        } else if (down.includes(e.keyCode)) {
+        } else if (down.includes(e.keyCode as typeof keyCodes.down | typeof keyCodes.pagedown)) {
           (e as any).deltaY = 1
         } else {
           return
@@ -258,6 +285,6 @@ export default defineComponent({
       document.documentElement!.classList.remove('overflow-y-hidden')
       window.removeEventListener('wheel', this.scrollListener)
       window.removeEventListener('keydown', this.scrollListener)
-    },
-  },
+    }
+  }
 })

package/src/mixins/picker/index.ts

@@ -8,7 +8,7 @@ import Themeable from '../themeable'
 
 // Utils
 import mixins from '../../util/mixins'
-import { getSlot } from '../../util/helpers'
+import { getSlot, hasSlotContent, flattenSlotContent } from '../../util/helpers'
 
 // Types
 import { VNode, h } from 'vue'
@@ -29,8 +29,8 @@ export default mixins(
     noTitle: Boolean,
     width: {
       type: [Number, String],
-      default: 290,
-    },
+      default: 290
+    }
   },
 
   methods: {
@@ -41,23 +41,26 @@ export default mixins(
       return null
     },
     genPickerActionsSlot () {
-      return this.$slots.default ? this.$slots.default({
+      return getSlot(this, 'default', {
         save: (this as any).save,
-        cancel: (this as any).cancel,
-      }) : getSlot(this)
+        cancel: (this as any).cancel
+      })
     },
     genPicker (staticClass: string) {
-      const children = {}
+      const children: Record<string, any> = {}
 
       if (!this.noTitle) {
         const title = this.genPickerTitle()
-        title && (children.title = title)
+        title && (children.title = () => [title])
       }
 
       const body = this.genPickerBody()
-      body && (children.default = body)
+      body && (children.default = () => [body])
 
-      children.actions = (h('template', {}, [this.genPickerActionsSlot()]))
+      const actions = this.genPickerActionsSlot()
+      if (hasSlotContent(actions)) {
+        children.actions = () => flattenSlotContent(actions)
+      }
 
       return h(VPicker, {
         class: staticClass,
@@ -71,6 +74,6 @@ export default mixins(
         width: this.width,
         noTitle: this.noTitle
       }, children)
-    },
-  },
+    }
+  }
 })

package/src/mixins/picker-button/index.ts

@@ -6,7 +6,8 @@ import mixins from '../../util/mixins'
 import { kebabCase } from '../../util/helpers'
 
 // Types
-import { VNodeChildren, h } from 'vue'
+import type { VNodeChildren } from '../../types/vue-internal'
+import { h } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -29,10 +30,10 @@ export default mixins(
       return h('div', {
         class: [`v-picker__title__btn ${staticClass}`.trim(), {
           'v-picker__title__btn--active': active,
-          'v-picker__title__btn--readonly': readonly,
+          'v-picker__title__btn--readonly': readonly
         }],
-        ...((active || readonly) ? {} : { onClick }),
+        ...((active || readonly) ? {} : { onClick })
       }, Array.isArray(content) ? content : [content])
-    },
-  },
+    }
+  }
 })

package/src/mixins/positionable/index.ts

@@ -1,6 +1,6 @@
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
+import type { Component } from 'vue'
 import { filterObjectOnKeys } from '../../util/helpers'
-import { OptionsVue, VueConstructor } from 'vue/types/vue'
 
 const availableProps = {
   absolute: Boolean,
@@ -8,18 +8,18 @@ const availableProps = {
   fixed: Boolean,
   left: Boolean,
   right: Boolean,
-  top: Boolean,
+  top: Boolean
 }
 type props = Record<keyof typeof availableProps, boolean>
 
-export type Positionable<S extends keyof props> = VueConstructor<Vue & { [P in S]: boolean }, { [P in S]: BooleanConstructor }>
+export type Positionable<S extends keyof props> = Component
 
 export function factory <S extends keyof props> (selected?: S[]): Positionable<S>
-export function factory (selected: undefined): OptionsVue<Vue, {}, {}, {}, props, typeof availableProps>
+export function factory (selected: undefined): Component
 export function factory (selected: any[] = []): any {
   return defineComponent({
     name: 'positionable',
-    props: selected.length ? filterObjectOnKeys(availableProps, selected) : availableProps,
+    props: selected.length ? filterObjectOnKeys(availableProps, selected) : availableProps
   })
 }
 

package/src/mixins/proxyable/__tests__/proxyable.spec.ts

@@ -3,15 +3,20 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('proxyable.ts', () => {
-  const Mock = Proxyable.extend({
-    render: h => h('div'),
-  })
+  enableAutoUnmount(afterEach)
+
+  const Mock = {
+    mixins: [Proxyable],
+    template: '<div></div>'
+  }
 
   type Instance = InstanceType<typeof Mock>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
   beforeEach(() => {
     mountFunction = (options?: MountOptions<Instance>) => {
       return mount(Mock, options)
@@ -19,46 +24,42 @@ describe('proxyable.ts', () => {
   })
 
   it('should watch prop and emit event', async () => {
-    const change = jest.fn()
     const wrapper = mountFunction({
-      propsData: { value: 'foo' },
+      props: { modelValue: 'foo' }
     })
 
-    wrapper.vm.$on('change', change)
-
     expect(wrapper.vm.internalValue).toBe('foo')
 
     // Change by prop
-    wrapper.setProps({ value: 'bar' })
+    await wrapper.setProps({ modelValue: 'bar' })
 
     expect(wrapper.vm.internalValue).toBe('bar')
-    expect(change).not.toHaveBeenCalled()
+    expect(wrapper.emitted()).toEqual({})
 
     // Change internal
     wrapper.vm.internalValue = 'fizzbuzz'
 
     expect(wrapper.vm.internalValue).toBe('fizzbuzz')
 
-    expect(change).toHaveBeenCalledWith('fizzbuzz')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['fizzbuzz'])
   })
 
-  it('should use provided prop and event arguments', () => {
-    const input = jest.fn()
+  it('should use provided prop and event arguments', async () => {
     const wrapper = mount({
       mixins: [Proxy('input', 'update:input-value')],
-      render: h => h('div'),
+      template: '<div></div>'
     }, {
-      propsData: {
-        input: 'foo',
-      },
+      props: {
+        input: 'foo'
+      }
     })
 
-    wrapper.vm.$on('update:input-value', input)
-
     expect(wrapper.vm.input).toBe('foo')
 
     wrapper.vm.internalValue = 'bar'
 
-    expect(input).toHaveBeenCalledWith('bar')
+    expect(wrapper.emitted('update:input-value')).toBeTruthy()
+    expect(wrapper.emitted('update:input-value')?.[0]).toEqual(['bar'])
   })
 })