@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

package/src/components/VList/__tests__/__snapshots__/VListGroup.spec.ts.snap

@@ -2,16 +2,15 @@
 
 exports[`VListGroup.ts should render component and match snapshot 1`] = `
 <div class="v-list-group">
-  <div tabindex="0"
-       aria-expanded="false"
+  <div aria-expanded="false"
        role="button"
-       class="v-list-group__header v-list-item v-list-item--link theme--light"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light v-list-group__header"
   >
-    <div class="v-list-item__icon v-list-group__header__append-icon">
+    <div class="v-list-item__icon v-list-group__header__append-icon v-list-group__header__append-icon">
       <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+         class="v-icon notranslate mdi mdi-chevron-down theme--light"
       >
-        $expand
       </i>
     </div>
   </div>

package/src/components/VList/__tests__/__snapshots__/VListItem.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`VListItem.ts should render with <a> when using href prop 1`] = `
 <a tabindex="0"
-   href="http://www.google.com"
    class="v-list-item v-list-item--link theme--light"
+   href="http://www.google.com"
 >
 </a>
 `;

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

@@ -2,30 +2,27 @@
 import VMain from '../VMain'
 
 // Utilities
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 
 describe('VMain.ts', () => {
-  type Instance = InstanceType<typeof VMain>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => any
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VMain, {
         ...options,
-        mocks: {
-          $vuetify: {
-            application: {
-              bar: 24,
-              top: 64,
-              left: 256,
-              right: 256,
-              footer: 48,
-              insetFooter: 32,
-              bottom: 56,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                bar: 24,
+                top: 64,
+                left: 256,
+                right: 256,
+                footer: 48,
+                insetFooter: 32,
+                bottom: 56,
+              },
             },
           },
         },
@@ -38,4 +35,61 @@ describe('VMain.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should render custom tag', () => {
+    const wrapper = mountFunction({
+      props: {
+        tag: 'div'
+      }
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+  })
+
+  it('should apply correct styles based on vuetify application', () => {
+    const wrapper = mountFunction()
+    const mainElement = wrapper.element
+
+    expect(mainElement.style.paddingTop).toBe('88px') // 64 + 24
+    expect(mainElement.style.paddingRight).toBe('256px')
+    expect(mainElement.style.paddingBottom).toBe('136px') // 48 + 32 + 56
+    expect(mainElement.style.paddingLeft).toBe('256px')
+  })
+
+  it('should render with slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>Test content</div>'
+      }
+    })
+
+    expect(wrapper.html()).toContain('Test content')
+  })
+
+  it('should render with complex slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          '<div>First item</div>',
+          '<div>Second item</div>'
+        ]
+      }
+    })
+
+    expect(wrapper.html()).toContain('First item')
+    expect(wrapper.html()).toContain('Second item')
+  })
+
+  it('should have correct CSS classes', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.classes()).toContain('v-main')
+    expect(wrapper.find('.v-main__wrap').exists()).toBe(true)
+  })
+
+  it('should render with default tag', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.element.tagName).toBe('MAIN')
+  })
 })

package/src/components/VMenu/VMenu.ts

@@ -1,4 +1,4 @@
-import {h, Transition, vShow, withDirectives} from 'vue'
+import { h, Transition, vShow, withDirectives } from 'vue'
 // Styles
 import './VMenu.sass'
 
@@ -84,6 +84,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['keydown'],
+
   data () {
     return {
       calculatedTopAuto: 0,
@@ -301,7 +303,7 @@ export default baseMixins.extend({
       const listeners = Menuable.methods.genActivatorListeners.call(this)
 
       if (!this.disableKeys) {
-        listeners.keydown = this.onKeyDown
+        listeners.onKeydown = this.onKeyDown;
       }
 
       return listeners

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

@@ -4,15 +4,16 @@ import VMessages from '../VMessages'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // Types
-import { ExtractVue } from '../../../util/mixins'
+import type { ComponentPublicInstance } from 'vue'
 
 describe('VMessages.ts', () => {
-  type Instance = ExtractVue<typeof VMessages>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -25,27 +26,27 @@ describe('VMessages.ts', () => {
   it('should have a default array', () => {
     const wrapper = mountFunction()
 
-    expect(Array.isArray(wrapper.vm.value)).toBe(true)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.v-messages').exists()).toBe(true)
   })
 
   it('should show messages', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: ['foo', 'bar'],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: [] })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ value: [] })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should allow HTML', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: ['<a href="#">a link</a>'],
       },
     })
@@ -55,7 +56,7 @@ describe('VMessages.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/9491
   it('should not allow HTML', () => {
     const wrapper = mount(VMessages, {
-      propsData: {
+      props: {
         value: ['<a href="#">a link</a>'],
       },
     })
@@ -65,9 +66,9 @@ describe('VMessages.ts', () => {
 
   it('should accept a scoped slot', () => {
     const wrapper = mount(VMessages, {
-      propsData: { value: ['Foo'] },
-      scopedSlots: {
-        default (props) {
+      props: { value: ['Foo'] },
+      slots: {
+        default (props: any) {
           return h('div', props.message)
         },
       },

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -50,11 +50,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-navigation-drawer',
 
-  directives: {
-    ClickOutside,
-    Resize,
-    Touch,
-  },
 
   provide (): object {
     return {
@@ -96,6 +91,8 @@ export default baseMixins.extend({
     modelValue: null as unknown as PropType<any>,
   },
 
+  emits: ['update:modelValue', 'transitionend', 'update:mini-variant'],
+
   data: () => ({
     isMouseover: false,
     touchArea: {

package/src/components/VOtpInput/VOtpInput.ts

@@ -31,9 +31,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-otp-input',
 
-  directives: {
-    ripple,
-  },
 
   inheritAttrs: false,
 
@@ -49,6 +46,8 @@ export default baseMixins.extend({
     plain: Boolean,
   },
 
+  emits: ['blur', 'focus', 'change', 'keydown', 'finish'],
+
   data: () => ({
     initialValue: null,
     isBooted: false,
@@ -56,9 +55,45 @@ export default baseMixins.extend({
   }),
 
   computed: {
-    outlined (): Boolean {
+    outlined (): boolean {
       return !this.plain
     },
+    fullWidth (): boolean {
+      return false
+    },
+    prefix (): boolean {
+      return false
+    },
+    isSingle (): boolean {
+      return true
+    },
+    isSolo (): boolean {
+      return false
+    },
+    soloInverted (): boolean {
+      return false
+    },
+    flat (): boolean {
+      return false
+    },
+    filled (): boolean {
+      return false
+    },
+    isEnclosed (): boolean {
+      return this.outlined
+    },
+    reverse (): boolean {
+      return false
+    },
+    placeholder (): string {
+      return ''
+    },
+    rounded (): boolean {
+      return false
+    },
+    shaped (): boolean {
+      return false
+    },
     classes (): object {
       return {
         ...VInput.computed.classes.call(this),

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -24,6 +24,8 @@ export default defineComponent({
     segmented: Boolean,
   },
 
+  emits: ['change'],
+
   computed: {
     classes (): object {
       return {

package/src/components/VOverlay/VOverlay.ts

@@ -22,6 +22,8 @@ export default mixins(
 ).extend({
   name: 'v-overlay',
 
+  emits: ['update:modelValue'],
+
   props: {
     absolute: Boolean,
     color: {

package/src/components/VPagination/VPagination.ts

@@ -25,7 +25,6 @@ export default mixins(
 ).extend({
   name: 'v-pagination',
 
-  directives: { Resize },
 
   props: {
     circle: Boolean,
@@ -72,6 +71,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue', 'next', 'previous'],
+
   data () {
     return {
       maxButtons: 0,

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

@@ -5,9 +5,9 @@ exports[`VParallax.ts should render 1`] = `
      style="height: 500px;"
 >
   <div class="v-parallax__image-container">
-    <img alt
-         class="v-parallax__image"
+    <img class="v-parallax__image"
          style="display: block; opacity: 0; transform: translate(-50%, 0px);"
+         alt
     >
   </div>
   <div class="v-parallax__content">
@@ -20,9 +20,9 @@ exports[`VParallax.ts should use alt tag when supplied 1`] = `
      style="height: 500px;"
 >
   <div class="v-parallax__image-container">
-    <img alt="name"
-         class="v-parallax__image"
-         style="display: block; opacity: 1; transform: translate(-50%, 0px);"
+    <img class="v-parallax__image"
+         style="display: block; opacity: 0; transform: translate(-50%, 0px);"
+         alt="name"
     >
   </div>
   <div class="v-parallax__content">
@@ -35,9 +35,9 @@ exports[`VParallax.ts should use empty alt tag when not supplied 1`] = `
      style="height: 500px;"
 >
   <div class="v-parallax__image-container">
-    <img alt
-         class="v-parallax__image"
-         style="display: block; opacity: 1; transform: translate(-50%, 0px);"
+    <img class="v-parallax__image"
+         style="display: block; opacity: 0; transform: translate(-50%, 0px);"
+         alt
     >
   </div>
   <div class="v-parallax__content">

package/src/components/VPicker/VPicker.ts

@@ -1,4 +1,5 @@
-import {h, Transition} from 'vue'
+import { h, Transition, defineComponent } from 'vue'
+import type { VNode } from 'vue'
 import './VPicker.sass'
 import '../VCard/VCard.sass'
 
@@ -10,17 +11,14 @@ import Themeable from '../../mixins/themeable'
 // Helpers
 import { convertToUnit, getSlot } from '../../util/helpers'
 
-// Types
-import { VNode } from 'vue/types'
-import mixins from '../../util/mixins'
-
 /* @vue/component */
-export default mixins(
-  Colorable,
-  Elevatable,
-  Themeable
-).extend({
+export default defineComponent({
   name: 'v-picker',
+  mixins: [
+    Colorable,
+    Elevatable,
+    Themeable,
+  ],
 
   props: {
     flat: Boolean,

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

@@ -4,13 +4,12 @@ import VPicker from '../VPicker'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
 
 describe('VPicker.ts', () => {
   type Instance = InstanceType<typeof VPicker>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -23,7 +22,7 @@ describe('VPicker.ts', () => {
   it('should render component without title and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
+        default: '<span>default</span>',
       },
     })
 
@@ -33,8 +32,8 @@ describe('VPicker.ts', () => {
   it('should render component with title and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
     })
 
@@ -44,8 +43,8 @@ describe('VPicker.ts', () => {
   it('should render flat component and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
       props: {
         flat: true,
@@ -58,8 +57,8 @@ describe('VPicker.ts', () => {
   it('should render component with elevation and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
       props: {
         elevation: 15,
@@ -71,12 +70,12 @@ describe('VPicker.ts', () => {
 
   it('should render dark component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dark: true,
       },
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
     })
 
@@ -85,11 +84,11 @@ describe('VPicker.ts', () => {
 
   it('should render colored component', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'orange lighten-1',
       },
       slots: {
-        title: [compileToFunctions('<span>title</span>')],
+        title: '<span>title</span>',
       },
     })
 

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VPicker.ts should render component with elevation and match snapshot 1`] = `
-<div class="v-picker v-card theme--light">
+<div class="v-picker v-card theme--light elevation-15">
   <div class="v-picker__title primary">
     <span>
       title
@@ -64,7 +64,7 @@ exports[`VPicker.ts should render dark component and match snapshot 1`] = `
 `;
 
 exports[`VPicker.ts should render flat component and match snapshot 1`] = `
-<div class="v-picker v-card theme--light">
+<div class="v-picker v-card v-picker--flat theme--light">
   <div class="v-picker__title primary">
     <span>
       title

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -20,7 +20,6 @@ export default defineComponent({
 
   extends: Colorable,
 
-  directives: { intersect },
 
   props: {
     button: Boolean,

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VProgressLinear.sass'
 
 // Components
@@ -34,7 +34,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-progress-linear',
 
-  directives: { intersect },
 
   props: {
     active: {
@@ -78,6 +77,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['update:modelValue', 'click'],
+
   data () {
     return {
       internalLazyValue: this.modelValue || this.value || 0,
@@ -94,7 +95,7 @@ export default baseMixins.extend({
     },
     __cachedBar (): VNode {
       return h(this.computedTransition, {}, {
-        default: () => [this.__cachedBarType]
+        default: () => [this.__cachedBarType],
       })
     },
     __cachedBarType (): VNode {
@@ -119,8 +120,8 @@ export default baseMixins.extend({
         class: ['v-progress-linear__indeterminate',
           {
             'v-progress-linear__indeterminate--active': this.active,
-          }
-        ]
+          },
+        ],
       }, [
         this.genProgressBar('long'),
         this.genProgressBar('short'),
@@ -206,14 +207,14 @@ export default baseMixins.extend({
       if (!slot) return null
 
       return h(
-        "div",
+        'div',
         {
-          class: "v-progress-linear__content"
+          class: 'v-progress-linear__content',
         },
         {
-          default: () => slot
+          default: () => slot,
         }
-      );
+      )
     },
     genListeners (): any {
       const listeners = this.$listeners
@@ -229,8 +230,8 @@ export default baseMixins.extend({
         class: ['v-progress-linear__indeterminate',
           {
             [name]: true,
-          }
-        ]
+          },
+        ],
       }))
     },
     onClick (e: MouseEvent) {
@@ -275,8 +276,8 @@ export default baseMixins.extend({
     ]), [
       [
         Intersect,
-        this.onObserve
-      ]
+        this.onObserve,
+      ],
     ])
   },
 })

package/src/components/VRadioGroup/VRadio.ts

@@ -42,6 +42,8 @@ export default baseMixins.extend({
 
   inheritAttrs: false,
 
+  emits: ['change', 'focus', 'blur'],
+
   props: {
     disabled: {
       type: Boolean,

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

@@ -2,8 +2,8 @@
 
 exports[`VResponsive.ts should force aspect ratio 1`] = `
 <div class="v-responsive">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
   <div class="v-responsive__content">