@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

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

@@ -40,16 +40,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 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"
@@ -60,11 +62,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 +73,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 +94,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 +109,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 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"
@@ -128,15 +130,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 +151,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 +162,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 +183,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

@@ -18,6 +18,7 @@ import {
   normalizeClasses,
 } from '../../util/helpers'
 import mergeData from '../../util/mergeData'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
@@ -59,7 +60,7 @@ export default baseMixins.extend({
     modelValue: null as any as PropType<any>,
   },
 
-  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend'],
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error'],
 
   data () {
     return {
@@ -111,7 +112,7 @@ export default baseMixins.extend({
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
 
-        if('$_emitChangeEvent' in this) {
+        if ('$_emitChangeEvent' in this) {
           this.$emit('change', val)
         }
       },
@@ -146,6 +147,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)
+    })
+  },
+
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
@@ -236,7 +249,7 @@ export default baseMixins.extend({
     },
     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,
@@ -263,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,

package/src/components/VItemGroup/__tests__/VItem.spec.ts

@@ -1,29 +1,23 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VItem from '../VItem'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
 const itemWarning = '[Vuetify] The v-item component must be used inside a v-item-group'
 
 describe('VItem', () => {
-  type Instance = ExtractVue<typeof VItem>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => any
 
-  beforeEach(() => {
-    localVue = createLocalVue()
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VItem, {
-        localVue,
         ...options,
       })
     }
@@ -37,41 +31,32 @@ describe('VItem', () => {
   })
 
   it('should warn if multiple elements', () => {
-    const Mock = {
-      name: 'test',
-
-      render: h => h(VItem, {
-        scopedSlots: {
-          default: () => '<div>foo</div>',
-        },
-      }),
-    }
+    const wrapper = mount(VItem, {
+      slots: {
+        default: '<div>foo</div><div>bar</div>',
+      },
+    })
 
-    mount(Mock)
-
-    expect('v-item should only contain a single element').toHaveBeenTipped()
+    expect('v-item should only contain valid VNode elements').toHaveBeenTipped()
     expect(itemWarning).toHaveBeenTipped()
   })
 
   it('should match snapshot activeClass', async () => {
-    const Mock = {
-      name: 'test',
-
-      render: h => h(VItem, {
-        props: { activeClass: 'foo' },
-        scopedSlots: {
-          default: () => h('div'),
-        },
-      }),
-    }
-
-    const wrapper = mount(Mock)
+    const wrapper = mount(VItem, {
+      props: {
+        activeClass: 'foo',
+      },
+      slots: {
+        default: '<div>test content</div>',
+      },
+    })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.vm.$children[0].isActive = true
+    // Изменяем isActive напрямую в компоненте
+    wrapper.vm.isActive = true
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
     expect(itemWarning).toHaveBeenTipped()