@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

package/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-50"
+         aria-owns="list-60"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,20 +14,19 @@ exports[`VSelect.ts should add color to selected index 1`] = `
           <div class="v-select__selection v-select__selection--comma primary--text">
             foo
           </div>
-          <input id="input-50"
-                 readonly="readonly"
-                 type="text"
-                 aria-readonly="false"
+          <input aria-readonly="false"
                  autocomplete="off"
+                 id="input-60"
+                 readonly
+                 type="text"
           >
         </div>
         <div class="v-input__append-inner">
           <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"
             >
-              $dropdown
-            </i>
+            </span>
           </div>
         </div>
         <input type="hidden"
@@ -39,294 +38,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
     </div>
     <div class="v-text-field__details">
       <div class="v-messages theme--light">
-        <span name="message-transition"
-              tag="div"
-              class="v-messages__wrapper"
-        >
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select is multiple and key down is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-106"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-113-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-113-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select is multiple and key up is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-92"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-99-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-99-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__action"
-        >
-          <div
-            class="v-simple-checkbox"
-          >
-            <div
-              class="v-input--selection-controls__input"
-            >
-              <i
-                aria-hidden="true"
-                class="v-icon notranslate material-icons theme--light"
-              >
-                $checkboxOff
-              </i>
-            </div>
-          </div>
-        </div>
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select when enter is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-68"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-75-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-75-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`VSelect.ts should open the select when space is pressed 1`] = `
-<div
-  data-app="true"
->
-  <div
-    class="v-menu__content theme--light menuable__content__active "
-    style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"
-  >
-    <div
-      class="v-list v-select-list v-sheet theme--light theme--light"
-      id="list-80"
-      role="listbox"
-      tabindex="-1"
-    >
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-87-0"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            foo
-          </div>
-        </div>
-      </div>
-      <div
-        aria-selected="false"
-        class="v-list-item v-list-item--link theme--light"
-        id="list-item-87-1"
-        role="option"
-        tabindex="0"
-      >
-        <div
-          class="v-list-item__content"
-        >
-          <div
-            class="v-list-item__title"
-          >
-            bar
-          </div>
+        <div class="v-messages__wrapper">
         </div>
       </div>
     </div>

package/src/components/VSelect/__tests__/__snapshots__/VSelectList.spec.ts.snap

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VSelectList.ts should display falsy items 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-0"
+  <div aria-selected="false"
+       id="list-item-39-0"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -17,10 +17,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-1"
+  <div aria-selected="false"
+       id="list-item-39-1"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -29,10 +29,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-2"
+  <div aria-selected="false"
+       id="list-item-39-2"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -41,10 +41,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-3"
+  <div aria-selected="false"
+       id="list-item-39-3"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -53,10 +53,10 @@ exports[`VSelectList.ts should display falsy items 1`] = `
       </div>
     </div>
   </div>
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-29-4"
+  <div aria-selected="false"
+       id="list-item-39-4"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
@@ -68,9 +68,9 @@ exports[`VSelectList.ts should display falsy items 1`] = `
 `;
 
 exports[`VSelectList.ts should display no-data-text when item slot is provided 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
   <div tabindex="-1"
        class="v-list-item theme--light"
@@ -85,21 +85,24 @@ exports[`VSelectList.ts should display no-data-text when item slot is provided 1
 `;
 
 exports[`VSelectList.ts should generate children 1`] = `
-<div role="listbox"
+<div class="v-sheet theme--light v-list v-select-list theme--light"
+     role="listbox"
      tabindex="-1"
-     class="v-list v-select-list v-sheet theme--light theme--light"
 >
-  <div class="v-subheader theme--light">
+  <div header="true"
+       class="v-subheader theme--light"
+  >
     true
   </div>
-  <hr role="separator"
-      aria-orientation="horizontal"
+  <hr divider="true"
       class="v-divider theme--light"
+      role="separator"
+      aria-orientation="horizontal"
   >
-  <div tabindex="0"
-       aria-selected="false"
-       id="list-item-14-2"
+  <div aria-selected="false"
+       id="list-item-16-2"
        role="option"
+       tabindex="0"
        class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">

package/src/components/VSheet/VSheet.ts

@@ -12,6 +12,7 @@ import Themeable from '../../mixins/themeable'
 
 // Helpers
 import mixins from '../../util/mixins'
+import { getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode, defineComponent } from 'vue'
@@ -61,7 +62,7 @@ export default defineComponent({
     }
 
     return h(
-      this.tag,
+      getTagValue(this.tag),
       this.setBackgroundColor(this.color, data),
       this.$slots.default?.()
     )

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

@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 // Components
 import VSheet from '../VSheet'
@@ -7,11 +7,11 @@ import VSheet from '../VSheet'
 // Utilities
 import {
   shallowMount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VSheet.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
+  let mountFunction: (options?: Record<string, any>) => VueWrapper<any>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -27,7 +27,7 @@ describe('VSheet.ts', () => {
 
   it('should render a colored paper', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'blue lighten-1',
       },
     })
@@ -38,7 +38,7 @@ describe('VSheet.ts', () => {
 
   it('should render a tile paper', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tile: true,
       },
     })

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)