@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

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

@@ -4,19 +4,36 @@ import VMessages from '../VMessages'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } 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>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VMessages, {
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              icons: {
+                component: null
+              },
+              lang: {
+                t: (val: string) => val,
+              },
+            },
+          },
+        },
         ...options,
       })
     }
@@ -25,28 +42,28 @@ 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: {
-        value: ['foo', 'bar'],
+      props: {
+        modelValue: ['foo', 'bar'],
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: [] })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: [] })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should allow HTML', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: ['<a href="#">a link</a>'],
+      props: {
+        modelValue: ['<a href="#">a link</a>'],
       },
     })
     expect(wrapper.html()).toMatchSnapshot()
@@ -55,8 +72,19 @@ describe('VMessages.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/9491
   it('should not allow HTML', () => {
     const wrapper = mount(VMessages, {
-      propsData: {
-        value: ['<a href="#">a link</a>'],
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            icons: {},
+            lang: {
+              t: (val: string) => val,
+            },
+          },
+        },
+      },
+      props: {
+        modelValue: ['<a href="#">a link</a>'],
       },
     })
 
@@ -65,9 +93,20 @@ describe('VMessages.ts', () => {
 
   it('should accept a scoped slot', () => {
     const wrapper = mount(VMessages, {
-      propsData: { value: ['Foo'] },
-      scopedSlots: {
-        default (props) {
+      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> = {

package/src/components/VOtpInput/VOtpInput.ts

@@ -55,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/VOverlay/VOverlay.ts

@@ -10,6 +10,7 @@ import Toggleable from './../../mixins/toggleable'
 // Utilities
 import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -75,6 +76,17 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genContent () {
       return h('div', {

package/src/components/VPagination/VPagination.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VPagination.sass'
 
 import VIcon from '../VIcon'
@@ -13,9 +13,10 @@ import Themeable from '../../mixins/themeable'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue'
+import type { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -25,7 +26,6 @@ export default mixins(
 ).extend({
   name: 'v-pagination',
 
-
   props: {
     circle: Boolean,
     disabled: Boolean,
@@ -81,7 +81,7 @@ export default mixins(
   },
 
   computed: {
-    value() {
+    value () {
       return this.modelValue
     },
     classes (): object {
@@ -139,6 +139,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     value () {
       this.init()
@@ -226,14 +238,14 @@ export default mixins(
     },
     genList (h: CreateElement, children: VNodeChildrenArrayContents): VNode {
       return withDirectives(h('ul', {
-        class: this.classes
+        class: this.classes,
       }, children), [
         [
           Resize,
           this.onResize,
           '',
-          { quiet: true }
-        ]
+          { quiet: true },
+        ],
       ])
     },
   },
@@ -244,13 +256,15 @@ export default mixins(
         this.$vuetify.rtl ? this.nextIcon : this.prevIcon,
         this.value <= 1,
         this.previous,
-        this.$vuetify.lang.t(this.previousAriaLabel)),
+        this.$vuetify.lang.t(this.previousAriaLabel),
+      ),
       this.genItems(h),
       this.genIcon(h,
         this.$vuetify.rtl ? this.prevIcon : this.nextIcon,
         this.value >= this.length,
         this.next,
-        this.$vuetify.lang.t(this.nextAriaLabel)),
+        this.$vuetify.lang.t(this.nextAriaLabel),
+      ),
     ]
 
     return h('nav', {

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/__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/VProgressLinear/VProgressLinear.ts

@@ -19,6 +19,7 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -191,6 +192,18 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     modelValue (val) {
       this.internalLazyValue = val

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -9,6 +9,7 @@ import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 // Utilities
 import { mergeProps, h } from 'vue'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import type { PropType } from 'vue'
@@ -56,6 +57,19 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genDefaultSlot () {
       return h('div', {

package/src/components/VRating/VRating.ts

@@ -16,6 +16,7 @@ import Ripple from '../../directives/ripple'
 // Utilities
 import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeDirective, VNodeChildren } from 'vue'
@@ -127,6 +128,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     internalValue (val) {
       val !== this.modelValue && this.$emit('update:modelValue', val)

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">