@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VTimePicker.ts should accept a date object for a value 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -34,7 +34,9 @@ exports[`VTimePicker.ts should accept a date object for a value 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(0deg) scaleY(1);"
@@ -128,11 +130,13 @@ exports[`VTimePicker.ts should accept a date object for a value 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should accept a date object for a value. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -171,7 +175,9 @@ exports[`VTimePicker.ts should accept a date object for a value. with useSeconds
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(0deg) scaleY(1);"
@@ -265,11 +271,13 @@ exports[`VTimePicker.ts should accept a date object for a value. with useSeconds
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should accept a value 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -302,7 +310,9 @@ exports[`VTimePicker.ts should accept a value 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -396,11 +406,13 @@ exports[`VTimePicker.ts should accept a value 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should accept a value. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -439,7 +451,9 @@ exports[`VTimePicker.ts should accept a value. with useSeconds 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -533,11 +547,13 @@ exports[`VTimePicker.ts should accept a value. with useSeconds 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should change am/pm when updated from model 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -570,7 +586,9 @@ exports[`VTimePicker.ts should change am/pm when updated from model 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -664,11 +682,13 @@ exports[`VTimePicker.ts should change am/pm when updated from model 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should change am/pm when updated from model. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -707,7 +727,9 @@ exports[`VTimePicker.ts should change am/pm when updated from model. with useSec
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -801,11 +823,13 @@ exports[`VTimePicker.ts should change am/pm when updated from model. with useSec
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render colored time picker 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title orange darken-1">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -838,7 +862,9 @@ exports[`VTimePicker.ts should render colored time picker 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand orange darken-1"
                style="transform: rotate(270deg) scaleY(1);"
@@ -932,11 +958,13 @@ exports[`VTimePicker.ts should render colored time picker 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render colored time picker, header 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title orange darken-1">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -969,7 +997,9 @@ exports[`VTimePicker.ts should render colored time picker, header 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand primary"
                style="transform: rotate(270deg) scaleY(1);"
@@ -1063,11 +1093,13 @@ exports[`VTimePicker.ts should render colored time picker, header 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render colored time picker, header. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title orange darken-1">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1106,7 +1138,9 @@ exports[`VTimePicker.ts should render colored time picker, header. with useSecon
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand primary"
                style="transform: rotate(270deg) scaleY(1);"
@@ -1200,11 +1234,13 @@ exports[`VTimePicker.ts should render colored time picker, header. with useSecon
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render colored time picker. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title orange darken-1">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1243,7 +1279,9 @@ exports[`VTimePicker.ts should render colored time picker. with useSeconds 1`] =
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand orange darken-1"
                style="transform: rotate(270deg) scaleY(1);"
@@ -1337,11 +1375,13 @@ exports[`VTimePicker.ts should render colored time picker. with useSeconds 1`] =
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render component with elevation 1`] = `
-<div class="v-picker v-card v-picker--time theme--light elevation-15">
+<div class="v-picker v-card theme--light elevation-15 v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1374,7 +1414,9 @@ exports[`VTimePicker.ts should render component with elevation 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -1468,11 +1510,13 @@ exports[`VTimePicker.ts should render component with elevation 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render component with elevation. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light elevation-15">
+<div class="v-picker v-card theme--light elevation-15 v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1511,7 +1555,9 @@ exports[`VTimePicker.ts should render component with elevation. with useSeconds
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -1605,11 +1651,13 @@ exports[`VTimePicker.ts should render component with elevation. with useSeconds
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render dark time picker 1`] = `
-<div class="v-picker v-card v-picker--time theme--dark">
+<div class="v-picker v-card theme--dark v-picker--time">
   <div class="v-picker__title">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1642,7 +1690,9 @@ exports[`VTimePicker.ts should render dark time picker 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark">
+      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand"
                style="transform: rotate(0deg) scaleY(1);"
@@ -1736,11 +1786,13 @@ exports[`VTimePicker.ts should render dark time picker 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render dark time picker. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--dark">
+<div class="v-picker v-card theme--dark v-picker--time">
   <div class="v-picker__title">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1779,7 +1831,9 @@ exports[`VTimePicker.ts should render dark time picker. with useSeconds 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark">
+      <div class="v-time-picker-clock v-time-picker-clock--indeterminate theme--dark"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand"
                style="transform: rotate(0deg) scaleY(1);"
@@ -1873,11 +1927,13 @@ exports[`VTimePicker.ts should render dark time picker. with useSeconds 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render disabled component 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -1910,7 +1966,9 @@ exports[`VTimePicker.ts should render disabled component 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2004,11 +2062,13 @@ exports[`VTimePicker.ts should render disabled component 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render disabled component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time theme--light">
+<div class="v-picker v-card theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -2047,7 +2107,9 @@ exports[`VTimePicker.ts should render disabled component. with useSeconds 1`] =
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2141,11 +2203,13 @@ exports[`VTimePicker.ts should render disabled component. with useSeconds 1`] =
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render flat component 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--flat theme--light">
+<div class="v-picker v-card v-picker--flat theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -2178,7 +2242,9 @@ exports[`VTimePicker.ts should render flat component 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2272,11 +2338,13 @@ exports[`VTimePicker.ts should render flat component 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render flat component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--flat theme--light">
+<div class="v-picker v-card v-picker--flat theme--light v-picker--time">
   <div class="v-picker__title primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -2315,7 +2383,9 @@ exports[`VTimePicker.ts should render flat component. with useSeconds 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="270"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2409,11 +2479,13 @@ exports[`VTimePicker.ts should render flat component. with useSeconds 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render landscape component 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--landscape theme--light">
+<div class="v-picker v-card v-picker--landscape theme--light v-picker--time">
   <div class="v-picker__title v-picker__title--landscape primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -2446,7 +2518,9 @@ exports[`VTimePicker.ts should render landscape component 1`] = `
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="210"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2540,11 +2614,13 @@ exports[`VTimePicker.ts should render landscape component 1`] = `
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;
 
 exports[`VTimePicker.ts should render landscape component. with useSeconds 1`] = `
-<div class="v-picker v-card v-picker--time v-picker--landscape theme--light">
+<div class="v-picker v-card v-picker--landscape theme--light v-picker--time">
   <div class="v-picker__title v-picker__title--landscape primary">
     <div class="v-time-picker-title">
       <div class="v-time-picker-title__time">
@@ -2583,7 +2659,9 @@ exports[`VTimePicker.ts should render landscape component. with useSeconds 1`] =
           PM
         </div>
       </div>
-      <div class="v-time-picker-clock theme--light">
+      <div class="v-time-picker-clock theme--light"
+           size="210"
+      >
         <div class="v-time-picker-clock__inner">
           <div class="v-time-picker-clock__hand accent"
                style="transform: rotate(270deg) scaleY(1);"
@@ -2677,5 +2755,7 @@ exports[`VTimePicker.ts should render landscape component. with useSeconds 1`] =
       </div>
     </div>
   </div>
+  <div class="v-picker__actions v-card__actions">
+  </div>
 </div>
 `;

package/src/components/VTimeline/__tests__/VTimelineItem.spec.ts

@@ -1,34 +1,43 @@
 import VTimelineItem from '../VTimelineItem'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VTimelineItem.ts', () => {
   type Instance = InstanceType<typeof VTimelineItem>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VTimelineItem, options)
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      return mount(VTimelineItem, {
+        global: {
+          provide: {
+            timeline: {
+              reverse: false,
+            },
+          },
+        },
+        ...options,
+      })
     }
   })
 
-  it('should conditionally render dot', () => {
+  it('should conditionally render dot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         hideDot: true,
       },
-      provide: {
-        timeline: {
-          reverse: false,
-        },
-      },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ hideDot: false })
+    await wrapper.setProps({ hideDot: false })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -36,38 +45,19 @@ describe('VTimelineItem.ts', () => {
   it('should conditionally render an icon or icon slot', () => {
     expect(mountFunction({
       slots: {
-        icon: [{
-          render: h => h('div', 'foo'),
-        }],
-      },
-      provide: {
-        timeline: {
-          reverse: false,
-        },
+        icon: () => h('div', 'foo'),
       },
     }).html()).toMatchSnapshot()
 
     expect(mountFunction({
-      propsData: { icon: 'foo' },
-      provide: {
-        timeline: {
-          reverse: false,
-        },
-      },
+      props: { icon: 'foo' },
     }).html()).toMatchSnapshot()
   })
 
   it('should render opposite slot', () => {
     const wrapper = mountFunction({
       slots: {
-        opposite: [{
-          render: h => h('div', 'foo'),
-        }],
-      },
-      provide: {
-        timeline: {
-          reverse: false,
-        },
+        opposite: () => h('div', 'foo'),
       },
     })
 

package/src/components/VTimeline/__tests__/__snapshots__/VTimelineItem.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`VTimelineItem.ts should conditionally render an icon or icon slot 1`] =
   </div>
   <div class="v-timeline-item__divider">
     <div class="v-timeline-item__dot">
-      <div class="v-timeline-item__inner-dot primary">
+      <div class="primary v-timeline-item__inner-dot">
         <div>
           foo
         </div>
@@ -22,11 +22,10 @@ exports[`VTimelineItem.ts should conditionally render an icon or icon slot 2`] =
   </div>
   <div class="v-timeline-item__divider">
     <div class="v-timeline-item__dot">
-      <div class="v-timeline-item__inner-dot primary">
+      <div class="primary v-timeline-item__inner-dot">
         <i aria-hidden="true"
            class="v-icon notranslate material-icons theme--dark"
         >
-          foo
         </i>
       </div>
     </div>
@@ -49,7 +48,7 @@ exports[`VTimelineItem.ts should conditionally render dot 2`] = `
   </div>
   <div class="v-timeline-item__divider">
     <div class="v-timeline-item__dot">
-      <div class="v-timeline-item__inner-dot primary">
+      <div class="primary v-timeline-item__inner-dot">
       </div>
     </div>
   </div>
@@ -62,7 +61,7 @@ exports[`VTimelineItem.ts should render opposite slot 1`] = `
   </div>
   <div class="v-timeline-item__divider">
     <div class="v-timeline-item__dot">
-      <div class="v-timeline-item__inner-dot primary">
+      <div class="primary v-timeline-item__inner-dot">
       </div>
     </div>
   </div>

package/src/components/VToolbar/VToolbar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VToolbar.sass'
 
@@ -126,7 +126,7 @@ export default defineComponent({
 
       const image = this.$slots.img
         ? this.$slots.img({ props })
-        : h(VImg, { props })
+        : h(VImg, props)
 
       return h('div', {
         class: 'v-toolbar__image',
@@ -156,13 +156,12 @@ export default defineComponent({
     const children = [this.genContent()]
     const data = this.setBackgroundColor(this.color, {
       class: this.classes,
-      style: this.styles,
-      on: this.$listeners,
+      style: this.styles
     })
 
     if (this.isExtended) children.push(this.genExtension())
     if (this.src || this.$slots.img) children.unshift(this.genBackground())
 
-    return h(this.tag, data, children)
-  },
+    return h(this.tag, {...this.attrs$, ...data}, children)
+  }
 })