@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha25

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

@@ -1,43 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VInput.ts should apply attrs to root element 1`] = `
+<div class="v-input theme--light"
+     foo="bar"
+>
+  <div class="v-input__control">
+    <div class="v-input__slot">
+    </div>
+    <div class="v-messages theme--light">
+      <div class="v-messages__wrapper">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VInput.ts should apply theme to label, counter, messages and icons 1`] = `
 <div class="v-input theme--light">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <span class="v-icon notranslate theme--light"
+            aria-hidden="true"
       >
-        prepend
-      </i>
+      </span>
     </div>
   </div>
   <div class="v-input__control">
     <div class="v-input__slot">
-      <label for="input-68"
-             class="v-label theme--light"
+      <label class="v-label theme--light"
+             for="input-50"
+             aria-hidden="false"
              style="left: 0px; position: relative;"
       >
         foo
       </label>
     </div>
     <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">
           bar
         </div>
-      </span>
+      </div>
     </div>
   </div>
   <div class="v-input__append-outer">
     <div class="v-input__icon v-input__icon--append">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <span class="v-icon notranslate theme--light"
+            aria-hidden="true"
       >
-        append
-      </i>
+      </span>
     </div>
   </div>
 </div>
@@ -49,11 +60,8 @@ exports[`VInput.ts should be in an error state 1`] = `
     <div class="v-input__slot">
     </div>
     <div class="v-messages theme--light error--text">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -67,14 +75,11 @@ exports[`VInput.ts should be in an error state 2`] = `
     <div class="v-messages theme--light error--text"
          role="alert"
     >
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-        <div class="v-messages__message">
+      <div class="v-messages__wrapper">
+        <div class="v-messages__message message-transition-enter-from message-transition-enter-active">
           required
         </div>
-      </span>
+      </div>
     </div>
   </div>
 </div>
@@ -84,22 +89,18 @@ exports[`VInput.ts should generate an icon and match snapshot 1`] = `
 <div class="v-input theme--light">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <span class="v-icon notranslate theme--light"
+            aria-hidden="true"
       >
-        list
-      </i>
+      </span>
     </div>
   </div>
   <div class="v-input__control">
     <div class="v-input__slot">
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -111,20 +112,16 @@ exports[`VInput.ts should generate an icon and match snapshot 2`] = `
     <div class="v-input__slot">
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
   <div class="v-input__append-outer">
     <div class="v-input__icon v-input__icon--append">
-      <i aria-hidden="true"
-         class="v-icon notranslate material-icons theme--light"
+      <span class="v-icon notranslate theme--light"
+            aria-hidden="true"
       >
-        list
-      </i>
+      </span>
     </div>
   </div>
 </div>
@@ -136,11 +133,8 @@ exports[`VInput.ts should generate append and prepend slots 1`] = `
     <div class="v-input__slot">
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
   <div class="v-input__append-outer">
@@ -162,27 +156,8 @@ exports[`VInput.ts should generate append and prepend slots 2`] = `
     <div class="v-input__slot">
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VInput.ts should not apply attrs to element 1`] = `
-<div class="v-input theme--light">
-  <div class="v-input__control">
-    <div class="v-input__slot">
-    </div>
-    <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -201,43 +176,17 @@ exports[`VInput.ts should render a label 1`] = `
 <div class="v-input theme--light">
   <div class="v-input__control">
     <div class="v-input__slot">
-      <label for="input-59"
-             class="v-label theme--light"
+      <label class="v-label theme--light"
+             for="input-45"
+             aria-hidden="false"
              style="left: 0px; position: relative;"
       >
         foo
       </label>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VInput.ts should render a label 2`] = `
-<div class="v-input theme--light">
-  <div class="v-input__control">
-    <div class="v-input__slot">
-      <label for="input-63"
-             class="v-label theme--light"
-             style="left: 0px; position: relative;"
-      >
-        <div>
-          foo
-        </div>
-      </label>
-    </div>
-    <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

package/src/components/VSelect/VSelectList.ts

@@ -176,6 +176,7 @@ export default mixins(Colorable, Themeable).extend({
         attrs: {
           ...tile.attrs,
           ...tile.props,
+          ...tile.on
         },
         on: tile.on,
       })

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

@@ -4,21 +4,26 @@ import VSkeletonLoader, { HTMLSkeletonLoaderElement } from '../VSkeletonLoader'
 // Utilities
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 describe('VSkeletonLoader.ts', () => {
   type Instance = InstanceType<typeof VSkeletonLoader>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSkeletonLoader, {
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (v: string) => v,
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (v: string) => v,
+              },
             },
           },
         },
@@ -40,13 +45,13 @@ describe('VSkeletonLoader.ts', () => {
     for (const key in wrapper.vm.rootTypes) {
       const type = wrapper.vm.rootTypes[key]
 
-      const iteration = mountFunction({ propsData: { type } })
+      const iteration = mountFunction({ props: { type } })
 
       expect(iteration.html()).toMatchSnapshot()
     }
   })
 
-  it('should dynamically render content', () => {
+  it('should dynamically render content', async () => {
     const wrapper = mountFunction({
       slots: {
         default: '<div>foobar</div>',
@@ -55,14 +60,15 @@ describe('VSkeletonLoader.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ loading: true })
+    await wrapper.setProps({ loading: true })
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should have the correct a11y attributes when loading', () => {
+  it('should have the correct a11y attributes when loading', async () => {
     const wrapper = mountFunction({
-      propsData: { loading: true },
+      props: { loading: true },
       slots: {
         // Add a default slot to allow
         // toggling the loading prop
@@ -74,7 +80,8 @@ describe('VSkeletonLoader.ts', () => {
     expect(wrapper.element.getAttribute('aria-live')).toBe('polite')
     expect(wrapper.element.getAttribute('role')).toBe('alert')
 
-    wrapper.setProps({ loading: false })
+    await wrapper.setProps({ loading: false })
+    await nextTick()
 
     expect(wrapper.element.getAttribute('aria-busy')).toBeNull()
     expect(wrapper.element.getAttribute('aria-live')).toBeNull()
@@ -83,7 +90,7 @@ describe('VSkeletonLoader.ts', () => {
 
   it('should not render aria attributes when using boilerplate', () => {
     const wrapper = mountFunction({
-      propsData: { boilerplate: true },
+      props: { boilerplate: true },
     })
 
     expect(wrapper.vm.attrs).toEqual({})
@@ -94,7 +101,7 @@ describe('VSkeletonLoader.ts', () => {
   it('should remove transition when loading content', () => {
     const el = document.createElement('div') as HTMLSkeletonLoaderElement
     const wrapper = mountFunction({
-      propsData: { loading: true },
+      props: { loading: true },
     })
 
     wrapper.vm.onBeforeEnter(el)