@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VIcon for component icon should render an svg icon 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg class="v-icon__svg"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        role="img"
        aria-hidden="true"
-       class="v-icon__svg"
   >
     <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
     </path>
@@ -17,15 +17,15 @@ exports[`VIcon for component icon should render an svg icon 1`] = `
 `;
 
 exports[`VIcon for component icon should render an svg icon 2`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
       style="font-size: 36px; height: 36px; width: 36px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg class="v-icon__svg"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        role="img"
        aria-hidden="true"
-       class="v-icon__svg"
        style="font-size: 36px; height: 36px; width: 36px;"
   >
     <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
@@ -35,95 +35,40 @@ exports[`VIcon for component icon should render an svg icon 2`] = `
 `;
 
 exports[`VIcon for component icon should render component 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
 >
-  <div class="test-component v-icon__component theme--light">
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 16px; height: 16px; width: 16px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 16px; height: 16px; width: 16px;"
-  >
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 2`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
->
-  <div class="test-component v-icon__component theme--light">
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 3`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 36px; height: 36px; width: 36px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 36px; height: 36px; width: 36px;"
-  >
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 4`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 40px; height: 40px; width: 40px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 40px; height: 40px; width: 40px;"
-  >
-    test icon
-  </div>
 </span>
 `;
 
 exports[`VIcon set font size from helper prop 1`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 16px;"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 2`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
+   medium="true"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 3`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 36px;"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 4`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 40px;"
 >
-  add
 </i>
 `;

package/src/components/VImg/VImg.ts

@@ -39,7 +39,6 @@ export default mixins(
 ).extend({
   name: 'v-img',
 
-  directives: { intersect },
 
   props: {
     alt: String,
@@ -73,6 +72,8 @@ export default mixins(
     },
   },
 
+  emits: ['load', 'error', 'loadstart'],
+
   data () {
     return {
       currentSrc: '', // Set from srcset
@@ -131,7 +132,7 @@ export default mixins(
       return h(Transition, {
         name: this.transition,
         mode: 'in-out',
-      }, [image])
+      }, () => [image])
     },
   },
 
@@ -244,7 +245,7 @@ export default mixins(
       let content: VNode = VResponsive.methods.genContent.call(this)
 
       if (this.naturalWidth) {
-        content = h(content.type, mergeProps(content.data!, {
+        content = h(content.type, mergeProps(content.props, {
           style: { width: `${this.naturalWidth}px` },
         }), content.children)
       }
@@ -265,7 +266,7 @@ export default mixins(
         return h(Transition, {
           appear: true,
           name: this.transition,
-        }, placeholder)
+        }, () => placeholder)
       }
     },
   },

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

@@ -4,20 +4,24 @@ import VImg from '../VImg'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VImg.ts', () => {
   type Instance = InstanceType<typeof VImg>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VImg, {
         ...options,
-        propsData: {
+        props: {
           eager: true,
-          ...options.propsData,
+          ...options.props,
         },
       })
     }
@@ -62,7 +66,7 @@ describe('VImg.ts', () => {
 
   it('should load', async () => {
     const wrapper = mountFunction({
-      propsData: { src: LOAD_SUCCESS_SRC },
+      props: { src: LOAD_SUCCESS_SRC },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -75,12 +79,12 @@ describe('VImg.ts', () => {
 
   it('should display placeholders', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: 'full_src',
         lazySrc: 'lazy_src',
       },
       slots: {
-        placeholder: { render: h => h('div', ['loading...']) },
+        placeholder: () => h('div', ['loading...']),
       },
     })
 
@@ -94,23 +98,20 @@ describe('VImg.ts', () => {
 
   it('should emit errors', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: LOAD_FAILURE_SRC,
       },
     })
 
-    const error = jest.fn()
-    wrapper.vm.$on('error', error)
-
     jest.runOnlyPendingTimers()
 
-    expect(error).toHaveBeenCalledTimes(1)
-    expect(error).toHaveBeenCalledWith(LOAD_FAILURE_SRC)
+    expect(wrapper.emitted('error')).toHaveLength(1)
+    expect(wrapper.emitted('error')[0]).toEqual([LOAD_FAILURE_SRC])
   })
 
   it('should have aria attributes', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: LOAD_SUCCESS_SRC,
         alt: 'this is not a decorative image',
       },
@@ -124,7 +125,7 @@ describe('VImg.ts', () => {
 
   it('should use vuetify-loader data', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: {
           src: LOAD_SUCCESS_SRC,
           lazySrc: 'lazySrc_auto',
@@ -140,7 +141,7 @@ describe('VImg.ts', () => {
 
   it('should override vuetify-loader values', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: {
           src: LOAD_SUCCESS_SRC,
           lazySrc: 'lazySrc_auto',
@@ -158,7 +159,7 @@ describe('VImg.ts', () => {
 
   it('should update src', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: LOAD_SUCCESS_SRC,
       },
     })
@@ -168,7 +169,7 @@ describe('VImg.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ src: LOAD_SUCCESS_SRC + 1 })
+    await wrapper.setProps({ src: LOAD_SUCCESS_SRC + 1 })
 
     jest.runOnlyPendingTimers()
     await wrapper.vm.$nextTick()
@@ -178,14 +179,14 @@ describe('VImg.ts', () => {
 
   it('should update src while still loading', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         src: LOAD_SUCCESS_SRC,
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ src: LOAD_SUCCESS_SRC + 1 })
+    await wrapper.setProps({ src: LOAD_SUCCESS_SRC + 1 })
 
     jest.runOnlyPendingTimers()
     await wrapper.vm.$nextTick()

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

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VImg.ts should display placeholders 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
        style="background-image: url(lazy_src); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
-  <div class="v-image__placeholder">
+  <div class="v-image__placeholder fade-transition-enter-from fade-transition-enter-active">
     <div>
       loading...
     </div>
@@ -19,17 +17,24 @@ exports[`VImg.ts should display placeholders 1`] = `
 `;
 
 exports[`VImg.ts should display placeholders 2`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazy_src); background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(full_src); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
+  <div class="v-image__placeholder fade-transition-enter-from fade-transition-leave-from fade-transition-leave-active">
+    <div>
+      loading...
+    </div>
+  </div>
   <div class="v-responsive__content"
        style="width: 1600px;"
   >
@@ -40,16 +45,18 @@ exports[`VImg.ts should display placeholders 2`] = `
 exports[`VImg.ts should have aria attributes 1`] = `
 <div aria-label="this is not a decorative image"
      role="img"
-     class="v-image v-responsive theme--light"
+     class="theme--light v-image v-responsive"
 >
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content"
@@ -60,11 +67,9 @@ exports[`VImg.ts should have aria attributes 1`] = `
 `;
 
 exports[`VImg.ts should load 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
        style="background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content">
@@ -73,15 +78,17 @@ exports[`VImg.ts should load 1`] = `
 `;
 
 exports[`VImg.ts should load 2`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content"
@@ -92,15 +99,13 @@ exports[`VImg.ts should load 2`] = `
 `;
 
 exports[`VImg.ts should override vuetify-loader values 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 50%;"
+<div class="theme--light v-image v-responsive">
+  <div style="padding-bottom: 50%;"
+       class="v-responsive__sizer"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
-       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazySrc_manual); background-position: center center;"
   >
   </div>
   <div class="v-responsive__content">
@@ -109,15 +114,17 @@ exports[`VImg.ts should override vuetify-loader values 1`] = `
 `;
 
 exports[`VImg.ts should update src 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
+  >
+  </div>
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content"
@@ -128,15 +135,17 @@ exports[`VImg.ts should update src 1`] = `
 `;
 
 exports[`VImg.ts should update src 2`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(LOAD_SUCCESS_SRC1); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content"
@@ -147,11 +156,9 @@ exports[`VImg.ts should update src 2`] = `
 `;
 
 exports[`VImg.ts should update src while still loading 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-image__image v-image__image--preload v-image__image--cover"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
        style="background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content">
@@ -160,15 +167,17 @@ exports[`VImg.ts should update src while still loading 1`] = `
 `;
 
 exports[`VImg.ts should update src while still loading 2`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+<div class="theme--light v-image v-responsive">
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-position: center center;"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
+  >
+  </div>
+  <div class="v-image__image--cover v-image__image fade-transition-enter-from fade-transition-enter-active"
        style="background-image: url(LOAD_SUCCESS_SRC1); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
   >
   </div>
   <div class="v-responsive__content"
@@ -179,20 +188,16 @@ exports[`VImg.ts should update src while still loading 2`] = `
 `;
 
 exports[`VImg.ts should use vuetify-loader data 1`] = `
-<div class="v-image v-responsive theme--light">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 100%;"
+<div class="theme--light v-image v-responsive">
+  <div style="padding-bottom: 100%;"
+       class="v-responsive__sizer"
   >
   </div>
-  <div class="v-image__image v-image__image--cover"
-       style="background-image: url(LOAD_SUCCESS_SRC); background-position: center center;"
-       name="fade-transition"
-       mode="in-out"
+  <div class="v-image__image--preload v-image__image--cover v-image__image"
+       style="background-image: url(lazySrc_auto); background-position: center center;"
   >
   </div>
-  <div class="v-responsive__content"
-       style="width: 1600px;"
-  >
+  <div class="v-responsive__content">
   </div>
 </div>
 `;

package/src/components/VInput/VInput.ts

@@ -15,8 +15,10 @@ import {
   convertToUnit,
   getSlot,
   kebabCase,
+  normalizeClasses,
 } from '../../util/helpers'
 import mergeData from '../../util/mergeData'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
@@ -58,6 +60,8 @@ export default baseMixins.extend({
     modelValue: null as any as PropType<any>,
   },
 
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error'],
+
   data () {
     return {
       lazyValue: this.modelValue,
@@ -107,6 +111,10 @@ export default baseMixins.extend({
       set (val: any) {
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
+
+        if ('$_emitChangeEvent' in this) {
+          this.$emit('change', val)
+        }
       },
     },
     isDirty (): boolean {
@@ -134,11 +142,23 @@ export default baseMixins.extend({
   },
 
   watch: {
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
@@ -223,13 +243,13 @@ export default baseMixins.extend({
         h(
           VIcon,
           data,
-          icon
+          () => icon
         ),
       ])
     },
     genInputSlot () {
       return h('div', this.setBackgroundColor(this.backgroundColor, {
-        class: {'v-input__slot': true},
+        class: { 'v-input__slot': true },
         style: { height: convertToUnit(this.height) },
         onClick: this.onClick,
         onMousedown: this.onMouseDown,
@@ -247,7 +267,7 @@ export default baseMixins.extend({
         focused: this.hasState,
         for: this.computedId,
         light: this.light,
-      }, getSlot(this, 'label') || this.label)
+      }, () => getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null
@@ -256,9 +276,9 @@ export default baseMixins.extend({
         color: this.hasHint ? '' : this.validationState,
         dark: this.dark,
         light: this.light,
-        value: this.messagesToDisplay,
+        modelValue: this.messagesToDisplay,
         role: this.hasMessages ? 'alert' : null,
-      }, {default: getSlot(this, 'message') })
+      }, { default: getSlot(this, 'message') })
     },
     genSlot (
       type: string,
@@ -316,8 +336,13 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
+    const { class: additionalClasses, ...restAttrs } = this.$attrs as Record<string, any>
+
     return h('div', this.setTextColor(this.validationState, {
-      class: {'v-input': true, ...this.classes},
-    }), this.genContent())
+      class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },
+      ...restAttrs,
+    }), {
+      default: () => this.genContent(),
+    })
   },
 })