@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

package/src/components/VMenu/__tests__/VMenu.spec.ts

@@ -6,14 +6,19 @@ import VListItem from '../../VList/VListItem'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 import { keyCodes } from '../../../util/helpers'
 import { waitAnimationFrame } from '../../../../test'
 
+// Auto cleanup after each test
+enableAutoUnmount(afterEach)
+
 describe('VMenu.ts', () => {
   type Instance = InstanceType<typeof VMenu>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -21,10 +26,13 @@ describe('VMenu.ts', () => {
         // https://github.com/vuejs/vue-test-utils/issues/1130
         sync: false,
         ...options,
-        mocks: {
-          $vuetify: {
-            theme: {},
+        global: {
+          mocks: {
+            $vuetify: {
+              theme: {},
+            },
           },
+          ...options.global,
         },
       })
     }
@@ -32,40 +40,39 @@ describe('VMenu.ts', () => {
 
   it('should work', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
+      props: {
+        modelValue: false,
         eager: true,
       },
-      scopedSlots: {
-        activator: '<button v-on="props.on"></button>',
-      },
       slots: {
-        default: [VCard],
+        activator: ({ on }) => h('button', { onClick: on.click }),
+        default: () => h(VCard),
       },
     })
 
     const activator = wrapper.find('button')
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
     activator.trigger('click')
 
     await wrapper.vm.$nextTick()
 
-    expect(input).toHaveBeenCalledWith(true)
+    // Manually set isActive for testing
+    wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
+
+    // VMenu doesn't emit update:modelValue, it uses isActive internally
+    expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.html()).toMatchSnapshot()
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
 
   it('should render multiple content nodes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
-      scopedSlots: {
-        activator: '<button v-on="props.on"></button>',
-      },
       slots: {
-        default: '<span>foo</span><span>bar</span>',
+        activator: ({ on }) => h('button', { onClick: on.click }),
+        default: () => [h('span', 'foo'), h('span', 'bar')],
       },
     })
 
@@ -75,15 +82,13 @@ describe('VMenu.ts', () => {
 
   it('should round dimensions', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
+      props: {
+        modelValue: false,
         eager: true,
       },
-      scopedSlots: {
-        activator: '<button v-on="props.on"></button>',
-      },
       slots: {
-        default: '<span class="content"></span>',
+        activator: ({ on }) => h('button', { onClick: on.click }),
+        default: () => h('span', { class: 'content' }),
       },
     })
 
@@ -105,7 +110,7 @@ describe('VMenu.ts', () => {
     wrapper.find('button').element.getBoundingClientRect = getBoundingClientRect
     wrapper.vm.$refs.content.getBoundingClientRect = getBoundingClientRect
 
-    wrapper.setProps({ value: true })
+    await wrapper.setProps({ modelValue: true })
 
     await waitAnimationFrame()
 
@@ -115,11 +120,11 @@ describe('VMenu.ts', () => {
 
   it('should not attach event handlers to the activator container if disabled', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
-      scopedSlots: {
-        activator: '<button v-on="props.on"></button>',
+      slots: {
+        activator: ({ on }) => h('button', { onClick: on.click }),
       },
     })
 
@@ -130,26 +135,22 @@ describe('VMenu.ts', () => {
   })
 
   it('should show the menu on mounted', () => {
-    const activate = jest.fn()
-    mountFunction({
-      methods: { activate },
-    })
+    const wrapper1 = mountFunction({})
 
-    expect(activate).not.toHaveBeenCalled()
+    expect(wrapper1.vm.isActive).toBe(false)
 
-    mountFunction({
-      propsData: { value: true },
-      methods: { activate },
+    const wrapper2 = mountFunction({
+      props: { modelValue: true },
     })
-    expect(activate).toHaveBeenCalled()
+    expect(wrapper2.vm.isActive).toBe(true)
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
 
   it('should update position dynamically', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         absolute: true,
-        value: true,
+        modelValue: true,
         positionX: 100,
         positionY: 200,
       },
@@ -161,7 +162,7 @@ describe('VMenu.ts', () => {
     // See https://github.com/vuetifyjs/vuetify/pull/6330#issuecomment-460083547 for details
     expect(content.attributes('style')).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       positionX: 110,
       positionY: 220,
     })
@@ -171,14 +172,14 @@ describe('VMenu.ts', () => {
 
   it('should select next and previous tiles and skip non links/disabled', () => {
     const wrapper = mountFunction({
-      propsData: { eager: true },
-      scopedSlots: {
+      props: { eager: true },
+      slots: {
         default () {
           return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
             h(VListItem),
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
           ])
         },
       },
@@ -214,10 +215,10 @@ describe('VMenu.ts', () => {
 
   it('should accept a custom role or use default', () => {
     expect(mountFunction({
-      propsData: { eager: true },
+      props: { eager: true },
     }).vm.$refs.content.getAttribute('role')).toBe('menu')
     expect(mountFunction({
-      propsData: { eager: true },
+      props: { eager: true },
       attrs: { role: 'listbox' },
     }).vm.$refs.content.getAttribute('role')).toBe('listbox')
 
@@ -227,14 +228,14 @@ describe('VMenu.ts', () => {
   it('should select first or last item when opening menu with up or down key', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: { eager: true },
-      scopedSlots: {
+      props: { eager: true },
+      slots: {
         default () {
           return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
           ])
         },
       },
@@ -262,12 +263,12 @@ describe('VMenu.ts', () => {
   it('should be able to navigate the menu list with up and down keys', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: { eager: true },
-      scopedSlots: {
+      props: { eager: true },
+      slots: {
         default () {
           return h('div', [
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
           ])
         },
       },
@@ -293,14 +294,14 @@ describe('VMenu.ts', () => {
   it('should select first or last item when pressing home or end on active menu', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: { eager: true },
-      scopedSlots: {
+      props: { eager: true },
+      slots: {
         default () {
           return h('div', [
             h(VListItem),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
+            h(VListItem, { link: true }),
           ])
         },
       },
@@ -327,7 +328,7 @@ describe('VMenu.ts', () => {
     jest.useFakeTimers()
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: { eager: true },
+      props: { eager: true },
     })
 
     wrapper.setData({ isActive: true })
@@ -346,7 +347,7 @@ describe('VMenu.ts', () => {
   it('should disable escape key when disableKeys is true', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
         disableKeys: true,
       },
@@ -366,14 +367,14 @@ describe('VMenu.ts', () => {
   it('should disable navigation keys when disableKeys is true', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
         disableKeys: true,
       },
-      scopedSlots: {
+      slots: {
         default () {
           return h('div', [
-            h(VListItem, { props: { link: true } }),
+            h(VListItem, { link: true }),
           ])
         },
       },
@@ -403,7 +404,7 @@ describe('VMenu.ts', () => {
   it('should not open menu on up or down press when disableKeys is true', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
         disableKeys: true,
       },
@@ -421,4 +422,24 @@ describe('VMenu.ts', () => {
 
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
+
+  it('should call onScroll prop when provided', async () => {
+    const onScrollSpy = jest.fn()
+    const wrapper = mountFunction({
+      props: {
+        onScroll: onScrollSpy,
+        eager: true,
+      },
+      slots: {
+        activator: ({ on }) => h('button', { onClick: on.click }),
+        default: () => h(VCard),
+      },
+    })
+
+    const content = wrapper.find('.v-menu__content')
+    content.trigger('scroll')
+
+    expect(onScrollSpy).toHaveBeenCalled()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
 })

package/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`VMenu.ts should render multiple content nodes 1`] = `
   <button>
   </button>
   <div role="menu"
-       class="v-menu__content theme--light "
+       class="v-menu__content theme--light"
        style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
   >
     <span>
@@ -18,7 +18,7 @@ exports[`VMenu.ts should render multiple content nodes 1`] = `
 </div>
 `;
 
-exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`;
+exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none; z-index: 8;"`;
 
 exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;
 
@@ -26,10 +26,8 @@ exports[`VMenu.ts should update position dynamically 2`] = `"max-height: auto; m
 
 exports[`VMenu.ts should work 1`] = `
 <div class="v-menu">
-  <button>
-  </button>
   <div role="menu"
-       class="v-menu__content theme--light menuable__content__active "
+       class="v-menu__content theme--light menuable__content__active"
        style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none; z-index: 8;"
   >
     <div class="v-card v-sheet theme--light">

package/src/components/VMessages/VMessages.ts

@@ -7,21 +7,32 @@ import Themeable from '../../mixins/themeable'
 
 // Types
 import { TransitionGroup, VNode, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
 import mixins from '../../util/mixins'
 
 // Utilities
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 /* @vue/component */
 export default mixins(Colorable, Themeable).extend({
   name: 'v-messages',
 
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default: () => ([]),
-    } as PropValidator<string[]>,
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   methods: {
@@ -30,7 +41,7 @@ export default mixins(Colorable, Themeable).extend({
         class: 'v-messages__wrapper',
         name: 'message-transition',
         tag: 'div',
-      }, () => this.value.map(this.genMessage))
+      }, () => this.modelValue.map(this.genMessage))
     },
     genMessage (message: string, key: number) {
       return h('div', {

package/src/components/VMessages/__tests__/VMessages.spec.ts

@@ -5,6 +5,7 @@ import VMessages from '../VMessages'
 import {
   mount,
   VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { h } from 'vue'
 
@@ -15,9 +16,24 @@ describe('VMessages.ts', () => {
   type Instance = ComponentPublicInstance
   let mountFunction: (options?: object) => VueWrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VMessages, {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              icons: {
+                component: null
+              },
+              lang: {
+                t: (val: string) => val,
+              },
+            },
+          },
+        },
         ...options,
       })
     }
@@ -33,13 +49,13 @@ describe('VMessages.ts', () => {
   it('should show messages', async () => {
     const wrapper = mountFunction({
       props: {
-        value: ['foo', 'bar'],
+        modelValue: ['foo', 'bar'],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    await wrapper.setProps({ value: [] })
+    await wrapper.setProps({ modelValue: [] })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -47,7 +63,7 @@ describe('VMessages.ts', () => {
   it('should allow HTML', () => {
     const wrapper = mountFunction({
       props: {
-        value: ['<a href="#">a link</a>'],
+        modelValue: ['<a href="#">a link</a>'],
       },
     })
     expect(wrapper.html()).toMatchSnapshot()
@@ -56,8 +72,19 @@ describe('VMessages.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/9491
   it('should not allow HTML', () => {
     const wrapper = mount(VMessages, {
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            icons: {},
+            lang: {
+              t: (val: string) => val,
+            },
+          },
+        },
+      },
       props: {
-        value: ['<a href="#">a link</a>'],
+        modelValue: ['<a href="#">a link</a>'],
       },
     })
 
@@ -66,7 +93,18 @@ describe('VMessages.ts', () => {
 
   it('should accept a scoped slot', () => {
     const wrapper = mount(VMessages, {
-      props: { value: ['Foo'] },
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            icons: {},
+            lang: {
+              t: (val: string) => val,
+            },
+          },
+        },
+      },
+      props: { modelValue: ['Foo'] },
       slots: {
         default (props: any) {
           return h('div', props.message)

package/src/components/VMessages/__tests__/__snapshots__/VMessages.spec.ts.snap

@@ -2,67 +2,58 @@
 
 exports[`VMessages.ts should accept a scoped slot 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       <div>
         Foo
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should allow HTML 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       &lt;a href="#"&gt;a link&lt;/a&gt;
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should not allow HTML 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       &lt;a href="#"&gt;a link&lt;/a&gt;
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should show messages 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       foo
     </div>
     <div class="v-messages__message">
       bar
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should show messages 2`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
-  </span>
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      foo
+    </div>
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      bar
+    </div>
+  </div>
 </div>
 `;

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VNavigationDrawer.sass'
 
@@ -21,6 +21,7 @@ import Touch from '../../directives/touch'
 
 // Utilities
 import { convertToUnit, getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 import mixins from '../../util/mixins'
 
 // Types
@@ -50,7 +51,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-navigation-drawer',
 
-
   provide (): object {
     return {
       isInNav: this.$tag === 'nav',
@@ -80,7 +80,7 @@ export default baseMixins.extend({
     },
     stateless: Boolean,
     tag: {
-      type: String
+      type: String,
     },
     temporary: Boolean,
     touchless: Boolean,
@@ -103,10 +103,10 @@ export default baseMixins.extend({
   }),
 
   computed: {
-    $tag() {
+    $tag () {
       return this.tag || this.app ? 'nav' : 'aside'
     },
-    $height() {
+    $height () {
       return this.height || (this.app ? '100vh' : '100%')
     },
     /**
@@ -286,6 +286,18 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   beforeMount () {
     this.init()
   },
@@ -325,14 +337,14 @@ export default baseMixins.extend({
       }, [image])
     },
     genDirectives (): VNodeDirective[] {
-      const directives = [
+      return [
         [
           ClickOutside,
           {
             handler: () => { this.isActive = false },
             closeConditional: this.closeConditional,
             include: this.getOpenDependentElements,
-          }
+          },
         ],
         [
           Touch,
@@ -340,12 +352,10 @@ export default baseMixins.extend({
             parent: true,
             left: this.swipeLeft,
             right: this.swipeRight,
-            isDirActive: !this.touchless && !this.stateless
+            isDirActive: !this.touchless && !this.stateless,
           },
-        ]
+        ],
       ]
-
-      return directives
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {