@dimailn/vuetify 2.7.2-alpha46 → 2.7.2-alpha48

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

@@ -38,37 +38,44 @@ exports[`VIcon for component icon should render component 1`] = `
 <span class="v-icon notranslate theme--light"
       aria-hidden="true"
 >
+  <div class="test-component v-icon__component theme--light">
+    test icon
+  </div>
 </span>
 `;
 
 exports[`VIcon set font size from helper prop 1`] = `
-<i class="v-icon notranslate theme--light material-icons"
+<i class="v-icon notranslate material-icons theme--light"
    aria-hidden="true"
    style="font-size: 16px;"
 >
+  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 2`] = `
-<i class="v-icon notranslate theme--light material-icons"
+<i class="v-icon notranslate material-icons theme--light"
    aria-hidden="true"
    medium="true"
 >
+  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 3`] = `
-<i class="v-icon notranslate theme--light material-icons"
+<i class="v-icon notranslate material-icons theme--light"
    aria-hidden="true"
    style="font-size: 36px;"
 >
+  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 4`] = `
-<i class="v-icon notranslate theme--light material-icons"
+<i class="v-icon notranslate material-icons theme--light"
    aria-hidden="true"
    style="font-size: 40px;"
 >
+  add
 </i>
 `;

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

@@ -22,13 +22,17 @@ exports[`VInput.ts should apply theme to label, counter, messages and icons 1`]
       <span class="v-icon notranslate theme--light"
             aria-hidden="true"
       >
+        <mdi class="v-icon__component theme--light"
+             icon="prepend"
+        >
+        </mdi>
       </span>
     </div>
   </div>
   <div class="v-input__control">
     <div class="v-input__slot">
       <label class="v-label theme--light"
-             for="input-50"
+             for="input-48"
              aria-hidden="false"
              style="left: 0px; position: relative;"
       >
@@ -48,6 +52,10 @@ exports[`VInput.ts should apply theme to label, counter, messages and icons 1`]
       <span class="v-icon notranslate theme--light"
             aria-hidden="true"
       >
+        <mdi class="v-icon__component theme--light"
+             icon="append"
+        >
+        </mdi>
       </span>
     </div>
   </div>
@@ -92,6 +100,10 @@ exports[`VInput.ts should generate an icon and match snapshot 1`] = `
       <span class="v-icon notranslate theme--light"
             aria-hidden="true"
       >
+        <mdi class="v-icon__component theme--light"
+             icon="list"
+        >
+        </mdi>
       </span>
     </div>
   </div>
@@ -121,6 +133,10 @@ exports[`VInput.ts should generate an icon and match snapshot 2`] = `
       <span class="v-icon notranslate theme--light"
             aria-hidden="true"
       >
+        <mdi class="v-icon__component theme--light"
+             icon="list"
+        >
+        </mdi>
       </span>
     </div>
   </div>
@@ -177,7 +193,7 @@ exports[`VInput.ts should render a label 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <label class="v-label theme--light"
-             for="input-45"
+             for="input-43"
              aria-hidden="false"
              style="left: 0px; position: relative;"
       >

package/src/components/VItemGroup/VItemGroup.ts

@@ -20,6 +20,7 @@ export type GroupableInstance = any & {
   id?: string
   to?: any
   value?: any
+  modelValue?: any
 }
 
 export const BaseItemGroup = mixins(
@@ -124,9 +125,11 @@ export const BaseItemGroup = mixins(
       }
     },
     getValue (item: GroupableInstance, i: number): unknown {
-      return item.value === undefined
+      const identity = item.value !== undefined ? item.value : item.modelValue
+
+      return identity === undefined
         ? i
-        : item.value
+        : identity
     },
     onClick (item: GroupableInstance) {
       this.updateInternalValue(

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

@@ -46,6 +46,8 @@ describe('VItemGroup', () => {
     expect(getValue({ value: undefined }, 1)).toBe(1)
     expect(getValue({ value: '' }, 2)).toBe('')
     expect(getValue({ value: 'foo' }, 'foo')).toBe('foo')
+    expect(getValue({ modelValue: 'foo' }, 0)).toBe('foo')
+    expect(getValue({ modelValue: 4 }, 3)).toBe(4)
   })
 
   it('should register elements', () => {

package/src/components/VList/__tests__/VListItemGroup.spec.ts

@@ -1,4 +1,8 @@
+// Libraries
+import { h } from 'vue'
+
 // Components
+import VListItem from '../VListItem'
 import VListItemGroup from '../VListItemGroup'
 
 // Utilities
@@ -27,4 +31,31 @@ describe('VListItemGroup.ts', () => {
 
     expect(wrapper.element.getAttribute('role')).toBe('listbox')
   })
+
+  // ui-autocomplete: :model-value="index" из filteredItems при divider между пунктами
+  it('should activate items by modelValue when non-list nodes break registration index', async () => {
+    const wrapper = mountFunction({
+      props: {
+        multiple: true,
+        modelValue: [4, 5],
+      },
+      slots: {
+        default: () => [
+          h(VListItem, { modelValue: 0 }),
+          h(VListItem, { modelValue: 1 }),
+          h(VListItem, { modelValue: 2 }),
+          h('hr', { class: 'v-divider' }),
+          h(VListItem, { modelValue: 4 }),
+          h(VListItem, { modelValue: 5 }),
+        ],
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    const items = wrapper.findAllComponents({ name: 'v-list-item' })
+    expect(items).toHaveLength(5)
+    expect(items[3].vm.isActive).toBe(true)
+    expect(items[4].vm.isActive).toBe(true)
+  })
 })

package/src/components/VList/__tests__/__snapshots__/VListGroup.spec.ts.snap

@@ -8,7 +8,7 @@ exports[`VListGroup.ts should render component and match snapshot 1`] = `
        class="v-list-item v-list-item--link theme--light v-list-group__header"
   >
     <div class="v-list-item__icon v-list-group__header__append-icon v-list-group__header__append-icon">
-      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
+      <i class="v-icon notranslate mdi mdi-chevron-down theme--light"
          aria-hidden="true"
       >
       </i>

package/src/components/VMenu/VMenu.ts

@@ -524,13 +524,16 @@ export default baseMixins.extend({
 
     return withDirectives(h('div', data, [
       !this.activator && this.genActivator(),
-      this.showLazyContent(() => [
-        h(VThemeProvider, {
-          root: true,
-          light: this.light,
-          dark: this.dark
-        }, () => [this.genTransition()])
-      ])
+      this.showLazyContent(() => {
+        const transition = this.genTransition()
+        return [
+          h(VThemeProvider, {
+            root: true,
+            light: this.light,
+            dark: this.dark
+          }, () => [transition])
+        ]
+      })
     ]), directives as any)
   }
 })

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

@@ -6,19 +6,19 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-17"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <label class="v-label theme--light"
-               for="input-17"
+               for="input-15"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-17"
+          <input id="input-15"
                  readonly
                  type="text"
                  value
@@ -26,7 +26,7 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--append">
-            <i class="v-icon notranslate theme--light mdi mdi-menu-down"
+            <i class="v-icon notranslate mdi mdi-menu-down theme--light"
                aria-hidden="true"
             >
             </i>
@@ -53,19 +53,19 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="true"
-         aria-owns="list-17"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <label class="v-label theme--light"
-               for="input-17"
+               for="input-15"
                aria-hidden="false"
                style="left: 0px; position: absolute;"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-17"
+          <input id="input-15"
                  readonly
                  type="text"
                  value
@@ -73,7 +73,7 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--append">
-            <i class="v-icon notranslate theme--light mdi mdi-menu-down"
+            <i class="v-icon notranslate mdi mdi-menu-down theme--light"
                aria-hidden="true"
             >
             </i>
@@ -116,7 +116,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--append">
-            <i class="v-icon notranslate theme--light mdi mdi-menu-down"
+            <i class="v-icon notranslate mdi mdi-menu-down theme--light"
                aria-hidden="true"
             >
             </i>
@@ -165,7 +165,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
         </div>
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--append">
-            <i class="v-icon notranslate theme--light mdi mdi-menu-down"
+            <i class="v-icon notranslate mdi mdi-menu-down theme--light"
                aria-hidden="true"
             >
             </i>

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

@@ -10,7 +10,7 @@ exports[`VPagination.ts emits an event when next or previous is clicked 1`] = `
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -66,7 +66,7 @@ exports[`VPagination.ts emits an event when next or previous is clicked 1`] = `
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -86,7 +86,7 @@ exports[`VPagination.ts should only render end of range if value is equals "righ
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -138,7 +138,7 @@ exports[`VPagination.ts should only render end of range if value is equals "righ
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -158,7 +158,7 @@ exports[`VPagination.ts should only render middle of range if length is big and
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -206,7 +206,7 @@ exports[`VPagination.ts should only render middle of range if length is big and
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -227,7 +227,7 @@ exports[`VPagination.ts should only render start and end of range if length is b
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -279,7 +279,7 @@ exports[`VPagination.ts should only render start and end of range if length is b
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -299,7 +299,7 @@ exports[`VPagination.ts should only render start of range if value is equals "le
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -351,7 +351,7 @@ exports[`VPagination.ts should only render start of range if value is equals "le
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -371,7 +371,7 @@ exports[`VPagination.ts should render component in RTL mode and match snapshot 1
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -427,7 +427,7 @@ exports[`VPagination.ts should render component in RTL mode and match snapshot 1
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -448,7 +448,7 @@ exports[`VPagination.ts should render disabled buttons with length equals to 0 1
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -460,7 +460,7 @@ exports[`VPagination.ts should render disabled buttons with length equals to 0 1
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>
@@ -480,7 +480,7 @@ exports[`VPagination.ts should use totalVisible prop if defined 1`] = `
               type="button"
               aria-label="Previous page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-left"
+        <i class="v-icon notranslate mdi mdi-chevron-left theme--light"
            aria-hidden="true"
         >
         </i>
@@ -573,7 +573,7 @@ exports[`VPagination.ts should use totalVisible prop if defined 1`] = `
               type="button"
               aria-label="Next page"
       >
-        <i class="v-icon notranslate theme--light mdi mdi-chevron-right"
+        <i class="v-icon notranslate mdi mdi-chevron-right theme--light"
            aria-hidden="true"
         >
         </i>

package/src/components/VRadioGroup/__tests__/__snapshots__/VRadio.spec.ts.snap

@@ -3,12 +3,12 @@
 exports[`VRadio.ts should be render colored radio 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+    <i class="v-icon notranslate mdi mdi-radiobox-blank theme--light"
        aria-hidden="true"
     >
     </i>
     <input aria-checked="false"
-           id="input-29"
+           id="input-22"
            role="radio"
            type="radio"
     >
@@ -21,12 +21,12 @@ exports[`VRadio.ts should be render colored radio 1`] = `
 exports[`VRadio.ts should not render aria-label attribute with no label value on input group 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+    <i class="v-icon notranslate mdi mdi-radiobox-blank theme--light"
        aria-hidden="true"
     >
     </i>
     <input aria-checked="false"
-           id="input-5"
+           id="input-4"
            role="radio"
            type="radio"
            name="name"
@@ -40,12 +40,12 @@ exports[`VRadio.ts should not render aria-label attribute with no label value on
 exports[`VRadio.ts should render proper input name 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+    <i class="v-icon notranslate mdi mdi-radiobox-blank theme--light"
        aria-hidden="true"
     >
     </i>
     <input aria-checked="false"
-           id="input-9"
+           id="input-7"
            role="radio"
            type="radio"
            name="name"
@@ -59,7 +59,7 @@ exports[`VRadio.ts should render proper input name 1`] = `
 exports[`VRadio.ts should render role and aria-checked attributes on input group 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+    <i class="v-icon notranslate mdi mdi-radiobox-blank theme--light"
        aria-hidden="true"
     >
     </i>
@@ -80,12 +80,13 @@ exports[`VRadio.ts should render role and aria-checked attributes on input group
 exports[`VRadio.ts should use custom icons 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light material-icons"
+    <i class="v-icon notranslate material-icons theme--light"
        aria-hidden="true"
     >
+      bar
     </i>
     <input aria-checked="false"
-           id="input-17"
+           id="input-13"
            role="radio"
            type="radio"
            modelvalue="test"
@@ -100,12 +101,13 @@ exports[`VRadio.ts should use custom icons 1`] = `
 exports[`VRadio.ts should use custom icons 2`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i class="v-icon notranslate theme--light material-icons"
+    <i class="v-icon notranslate material-icons theme--light"
        aria-hidden="true"
     >
+      bar
     </i>
     <input aria-checked="false"
-           id="input-17"
+           id="input-13"
            role="radio"
            type="radio"
            modelvalue="test"

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

@@ -12,7 +12,7 @@ exports[`VRadioGroup.ts should match dense snapshot 1`] = `
       >
         <div class="v-radio theme--light">
           <div class="v-input--selection-controls__input">
-            <i class="v-icon--dense v-icon notranslate theme--light mdi mdi-radiobox-blank"
+            <i class="v-icon--dense v-icon notranslate mdi mdi-radiobox-blank theme--light"
                aria-hidden="true"
             >
             </i>

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

@@ -220,7 +220,7 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-41"
+         aria-owns="list-37"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -230,7 +230,7 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
           </div>
           <input aria-readonly="false"
                  autocomplete="off"
-                 id="input-41"
+                 id="input-37"
                  readonly
                  type="text"
           >
@@ -240,6 +240,10 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
             <span class="v-icon notranslate theme--light"
                   aria-hidden="true"
             >
+              <mdi class="v-icon__component theme--light"
+                   icon="$dropdown"
+              >
+              </mdi>
             </span>
           </div>
         </div>
@@ -266,7 +270,7 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-33"
+         aria-owns="list-30"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -276,7 +280,7 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
           </div>
           <input aria-readonly="false"
                  autocomplete="off"
-                 id="input-33"
+                 id="input-30"
                  readonly
                  type="text"
           >
@@ -286,6 +290,10 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
             <span class="v-icon notranslate theme--light"
                   aria-hidden="true"
             >
+              <mdi class="v-icon__component theme--light"
+                   icon="$dropdown"
+              >
+              </mdi>
             </span>
           </div>
         </div>
@@ -312,7 +320,7 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-24"
+         aria-owns="list-22"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -324,7 +332,7 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
           </div>
           <input aria-readonly="false"
                  autocomplete="off"
-                 id="input-24"
+                 id="input-22"
                  readonly
                  type="text"
           >
@@ -334,6 +342,10 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
             <span class="v-icon notranslate theme--light"
                   aria-hidden="true"
             >
+              <mdi class="v-icon__component theme--light"
+                   icon="$dropdown"
+              >
+              </mdi>
             </span>
           </div>
         </div>
@@ -357,7 +369,7 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
 exports[`VSelect.ts should use slotted no-data 1`] = `
 <div class="v-sheet theme--light v-list v-select-list theme--light"
      role="listbox"
-     id="list-184"
+     id="list-162"
      tabindex="-1"
 >
   <div>