@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha26

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/VList/VListGroup.ts

@@ -122,7 +122,7 @@ export default baseMixins.extend({
       this.$nextTick(() => (this.isActive = !this.isActive))
     },
     genIcon (icon: string | false): VNode {
-      return h(VIcon, icon)
+      return h(VIcon, {}, () => icon)
     },
     genAppendIcon (): VNode | null {
       const icon = !this.subGroup ? this.appendIcon : false
@@ -132,7 +132,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__append-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -147,7 +147,7 @@ export default baseMixins.extend({
         inputValue: this.isActive,
         ...this.listeners$,
         onClick: this.click
-      }, [
+      }, () => [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
         this.genAppendIcon(),
@@ -178,7 +178,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__prepend-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -211,7 +211,7 @@ export default baseMixins.extend({
       class: ['v-list-group', this.classes]
     }), [
       this.genHeader(),
-      h(VExpandTransition, this.genItems()),
+      h(VExpandTransition, {}, () => this.genItems()),
     ])
   },
 })

package/src/components/VList/VListItem.ts

@@ -192,9 +192,12 @@ export default baseMixins.extend({
       toggle: this.toggle,
     })
 
-    return withDirectives(
-      h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children),
-      directives
-    )
+    const nodeData = this.isActive ? this.setTextColor(this.color, data) : data
+
+    const node = typeof tag === 'string'
+      ? h(tag, nodeData, children)
+      : h(tag, nodeData, () => children)
+
+    return withDirectives(node, directives)
   },
 })

package/src/components/VMessages/VMessages.ts

@@ -30,7 +30,7 @@ export default mixins(Colorable, Themeable).extend({
         class: 'v-messages__wrapper',
         name: 'message-transition',
         tag: 'div',
-      }, this.value.map(this.genMessage))
+      }, () => this.value.map(this.genMessage))
     },
     genMessage (message: string, key: number) {
       return h('div', {

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -99,7 +99,7 @@ export default defineComponent({
             itemObj.callback(e)
           },
         },
-      }, [itemObj.text])
+      }, () => [itemObj.text])
     },
     updateValue (val: boolean) {
       if (val) {

package/src/components/VPagination/VPagination.ts

@@ -197,7 +197,7 @@ export default mixins(
             'aria-label': label,
             ...(disabled ? {} : { onClick: fn }),
           }),
-          [h(VIcon, { color: this.navigationTextColor }, [icon])]
+          [h(VIcon, { color: this.navigationTextColor }, () => [icon])]
         ),
       ])
     },

package/src/components/VPicker/VPicker.ts

@@ -55,7 +55,7 @@ export default mixins(
     genBodyTransition () {
       return h(Transition, {
         name: this.transition,
-      }, getSlot(this))
+      }, () => getSlot(this))
     },
     genBody () {
       return h('div', {

package/src/components/VRadioGroup/VRadio.ts

@@ -139,7 +139,7 @@ export default baseMixins.extend({
         for: this.computedId,
         color: this.validationState,
         focused: this.hasState,
-      }, getSlot(this, 'label') || this.label)
+      }, () => getSlot(this, 'label') || this.label)
     },
     genRadio () {
       const { title, ...radioAttrs } = this.attrs$
@@ -149,7 +149,7 @@ export default baseMixins.extend({
       }, [
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.radioGroup && this.radioGroup.dense,
-        }), this.computedIcon),
+        }), () => this.computedIcon),
         this.genInput({
           name: this.computedName,
           value: this.value,

package/src/components/VSelect/VSelect.ts

@@ -379,7 +379,7 @@ export default baseMixins.extend({
         },
         'onClick:close': () => this.onChipInput(item),
         key: JSON.stringify(this.getValue(item)),
-      }, this.getText(item))
+      }, () => this.getText(item))
     },
     genCommaSelection (item: object, index: number, last: boolean) {
       const color = index === this.selectedIndex && this.computedColor
@@ -535,7 +535,7 @@ export default baseMixins.extend({
         },
         onScroll: this.onScroll,
         ref: 'menu',
-      }, [this.genList()])
+      }, () => [this.genList()])
     },
     genSelections (): VNode {
       let length = this.selectedItems.length

package/src/components/VSelect/VSelectList.ts

@@ -87,7 +87,7 @@ export default mixins(Colorable, Themeable).extend({
 
   methods: {
     genAction (item: object, inputValue: any): VNode {
-      return h(VListItemAction, [
+      return h(VListItemAction, {}, () => [
         h(VSimpleCheckbox, {
           color: this.color,
           modelValue: inputValue,
@@ -186,8 +186,8 @@ export default mixins(Colorable, Themeable).extend({
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
-      return h(VListItemContent, [
-        h(VListItemTitle, [
+      return h(VListItemContent, {}, () => [
+        h(VListItemTitle, {}, () => [
           this.genFilteredText(this.getText(item)),
         ]),
       ])

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)