vuetify 2.2.11 → 2.2.15

package/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap

@@ -587,18 +587,18 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-74"
+                 aria-owns="list-69"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-74"
+                <label for="input-69"
                        class="v-label theme--light"
                        style="left: 0px; position: absolute;"
                 >
                   Sort by
                 </label>
                 <div class="v-select__selections">
-                  <input id="input-74"
+                  <input id="input-69"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -637,11 +637,11 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-49"
+                 aria-owns="list-47"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-49"
+                <label for="input-47"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -661,7 +661,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-49"
+                  <input id="input-47"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -702,18 +702,18 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-43"
+                 aria-owns="list-42"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-43"
+                <label for="input-42"
                        class="v-label theme--light"
                        style="left: 0px; position: absolute;"
                 >
                   Sort by
                 </label>
                 <div class="v-select__selections">
-                  <input id="input-43"
+                  <input id="input-42"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -752,11 +752,11 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-57"
+                 aria-owns="list-54"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-57"
+                <label for="input-54"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -776,7 +776,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-57"
+                  <input id="input-54"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -817,11 +817,11 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-65"
+                 aria-owns="list-61"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-65"
+                <label for="input-61"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -841,7 +841,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-65"
+                  <input id="input-61"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"

package/src/components/VDialog/VDialog.ts

@@ -238,8 +238,31 @@ export default baseMixins.extend({
         focusable.length && (focusable[0] as HTMLElement).focus()
       }
     },
+    genContent () {
+      return this.showLazyContent(() => [
+        this.$createElement(VThemeProvider, {
+          props: {
+            root: true,
+            light: this.light,
+            dark: this.dark,
+          },
+        }, [
+          this.$createElement('div', {
+            class: this.contentClasses,
+            attrs: {
+              role: 'document',
+              tabindex: this.isActive ? 0 : undefined,
+              ...this.getScopeIdAttrs(),
+            },
+            on: { keydown: this.onKeydown },
+            style: { zIndex: this.activeZIndex },
+            ref: 'content',
+          }, [this.genTransition()]),
+        ]),
+      ])
+    },
     genTransition () {
-      const content = this.genContent()
+      const content = this.genInnerContent()
 
       if (!this.transition) return content
 
@@ -247,10 +270,11 @@ export default baseMixins.extend({
         props: {
           name: this.transition,
           origin: this.origin,
+          appear: true,
         },
-      }, this.showLazyContent(() => [content]))
+      }, [content])
     },
-    genContent () {
+    genInnerContent () {
       const data = {
         class: this.classes,
         ref: 'dialog',
@@ -275,27 +299,7 @@ export default baseMixins.extend({
         }
       }
 
-      return this.$createElement('div', {
-        class: this.contentClasses,
-        attrs: {
-          role: 'document',
-          tabindex: this.isActive ? 0 : undefined,
-          ...this.getScopeIdAttrs(),
-        },
-        on: { keydown: this.onKeydown },
-        style: { zIndex: this.activeZIndex },
-        ref: 'content',
-      }, [
-        this.$createElement('div', data, [
-          this.$createElement(VThemeProvider, {
-            props: {
-              root: true,
-              light: this.light,
-              dark: this.dark,
-            },
-          }, this.getContentSlot()),
-        ]),
-      ])
+      return this.$createElement('div', data, this.getContentSlot())
     },
   },
 
@@ -311,7 +315,7 @@ export default baseMixins.extend({
       attrs: { role: 'dialog' },
     }, [
       this.genActivator(),
-      this.genTransition(),
+      this.genContent(),
     ])
   },
 })

package/src/components/VIcon/VIcon.ts

@@ -157,8 +157,8 @@ const VIcon = mixins(
         attrs: {
           xmlns: 'http://www.w3.org/2000/svg',
           viewBox: '0 0 24 24',
-          height: fontSize || '32',
-          width: fontSize || '32',
+          height: fontSize || '24',
+          width: fontSize || '24',
           role: 'img',
           'aria-hidden': true,
         },

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

@@ -6,8 +6,8 @@ exports[`VIcon for component icon should render an svg icon 1`] = `
 >
   <svg xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
-       height="32"
-       width="32"
+       height="24"
+       width="24"
        role="img"
        aria-hidden="true"
   >

package/src/components/VList/VList.ts

@@ -102,6 +102,6 @@ export default VSheet.extend<options>().extend({
       },
     }
 
-    return h('div', this.setBackgroundColor(this.color, data), [this.$slots.default])
+    return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default])
   },
 })

package/src/components/VMenu/VMenu.ts

@@ -300,7 +300,7 @@ export default baseMixins.extend({
         props: {
           name: this.transition,
         },
-      }, this.showLazyContent(() => [content]))
+      }, [content])
     },
     genDirectives (): VNodeDirective[] {
       const directives: VNodeDirective[] = [{
@@ -360,17 +360,7 @@ export default baseMixins.extend({
         options.on.mouseleave = this.mouseLeaveHandler
       }
 
-      return this.$createElement(
-        'div',
-        options,
-        [this.$createElement(VThemeProvider, {
-          props: {
-            root: true,
-            light: this.light,
-            dark: this.dark,
-          },
-        }, this.getContentSlot())]
-      )
+      return this.$createElement('div', options, this.getContentSlot())
     },
     getTiles () {
       if (!this.$refs.content) return
@@ -479,7 +469,15 @@ export default baseMixins.extend({
 
     return h('div', data, [
       !this.activator && this.genActivator(),
-      this.genTransition(),
+      this.showLazyContent(() => [
+        this.$createElement(VThemeProvider, {
+          props: {
+            root: true,
+            light: this.light,
+            dark: this.dark,
+          },
+        }, [this.genTransition()]),
+      ]),
     ])
   },
 })

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

@@ -55,6 +55,23 @@ describe('VMenu.ts', () => {
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
 
+  it('should render multiple content nodes', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+      slots: {
+        default: '<span>foo</span><span>bar</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
   it('should round dimensions', async () => {
     const wrapper = mountFunction({
       propsData: {

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

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VMenu.ts should render multiple content nodes 1`] = `
+<div class="v-menu">
+  <button>
+  </button>
+  <div role="menu"
+       class="v-menu__content theme--light "
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+  >
+    <span>
+      foo
+    </span>
+    <span>
+      bar
+    </span>
+  </div>
+</div>
+`;
+
 exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`;
 
 exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;

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

@@ -33,39 +33,6 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
         >
       </div>
       <div class="v-menu">
-        <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
-        >
-          <div role="listbox"
-               tabindex="-1"
-               class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-               id="list-1"
-          >
-            <div tabindex="0"
-                 aria-selected="true"
-                 id="list-item-5-0"
-                 role="option"
-                 class="v-list-item primary--text v-list-item--active v-list-item--link theme--light"
-            >
-              <div class="v-list-item__action">
-                <div class="v-simple-checkbox">
-                  <div class="v-input--selection-controls__ripple primary--text">
-                  </div>
-                  <i aria-hidden="true"
-                     class="v-icon notranslate material-icons theme--light primary--text"
-                  >
-                    $checkboxOn
-                  </i>
-                </div>
-              </div>
-              <div class="v-list-item__content">
-                <div class="v-list-item__title">
-                  foo
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="v-text-field__details">
@@ -114,39 +81,6 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
         >
       </div>
       <div class="v-menu">
-        <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
-        >
-          <div role="listbox"
-               tabindex="-1"
-               class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-               id="list-1"
-          >
-            <div tabindex="0"
-                 aria-selected="true"
-                 id="list-item-5-0"
-                 role="option"
-                 class="v-list-item primary--text v-list-item--active v-list-item--link theme--light"
-            >
-              <div class="v-list-item__action">
-                <div class="v-simple-checkbox">
-                  <div class="v-input--selection-controls__ripple primary--text">
-                  </div>
-                  <i aria-hidden="true"
-                     class="v-icon notranslate material-icons theme--light primary--text"
-                  >
-                    $checkboxOn
-                  </i>
-                </div>
-              </div>
-              <div class="v-list-item__content">
-                <div class="v-list-item__title">
-                  foo
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="v-text-field__details">

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -107,6 +107,7 @@ export default VSlider.extend({
         input.data = input.data || {}
         input.data.attrs = input.data.attrs || {}
         input.data.attrs.value = this.internalValue[i]
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this._uid}`
 
         return input
       })

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

@@ -220,4 +220,12 @@ describe('VRangeSlider.ts', () => {
       expect(wrapper.vm.internalValue).toEqual([0, 0])
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/6843
+  it('should be uniq id', async () => {
+    const wrapper = mountFunction()
+    const [min, max] = wrapper.vm.genInput()
+
+    expect(min.data.attrs.id).not.toEqual(max.data.attrs.id)
+  })
 })

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

@@ -6,12 +6,12 @@ exports[`VRangeSlider.ts should render a vertical slider 1`] = `
     <div class="v-input__slot">
       <div class="v-slider v-slider--vertical theme--light">
         <input value="0"
-               id="input-29"
+               id="input-min-29"
                readonly="readonly"
                tabindex="-1"
         >
         <input value="0"
-               id="input-29"
+               id="input-max-29"
                readonly="readonly"
                tabindex="-1"
         >
@@ -68,13 +68,13 @@ exports[`VRangeSlider.ts should render disabled slider 1`] = `
     <div class="v-input__slot">
       <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
         <input value="0"
-               id="input-33"
+               id="input-min-33"
                disabled="disabled"
                readonly="readonly"
                tabindex="-1"
         >
         <input value="0"
-               id="input-33"
+               id="input-max-33"
                disabled="disabled"
                readonly="readonly"
                tabindex="-1"

package/src/components/VSelect/VSelect.ts

@@ -310,8 +310,9 @@ export default baseMixins.extend<options>().extend({
         !this._isDestroyed &&
 
         // Click originates from outside the menu content
-        this.getContent() &&
-        !this.getContent().contains(e.target as Node) &&
+        // Multiple selects don't close when an item is clicked
+        (!this.getContent() ||
+        !this.getContent().contains(e.target as Node)) &&
 
         // Click originates from outside the element
         this.$el &&
@@ -445,7 +446,7 @@ export default baseMixins.extend<options>().extend({
           readonly: true,
           type: 'text',
           'aria-readonly': String(this.readonly),
-          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id', undefined),
+          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
           autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
         },
         on: { keypress: this.onKeyPress },

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

@@ -220,12 +220,12 @@ 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-35"
+         aria-owns="list-32"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-35"
+          <input id="input-32"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -265,12 +265,12 @@ 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-28"
+         aria-owns="list-26"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-28"
+          <input id="input-26"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -310,12 +310,12 @@ 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-20"
+         aria-owns="list-19"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-20"
+          <input id="input-19"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -353,11 +353,11 @@ exports[`VSelect.ts should use slotted no-data 1`] = `
 <div role="listbox"
      tabindex="-1"
      class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-     id="list-147"
+     id="list-134"
 >
   <div tabindex="0"
        aria-selected="false"
-       id="list-item-152-0"
+       id="list-item-139-0"
        role="option"
        class="v-list-item v-list-item--link theme--light"
   >

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

@@ -6,7 +6,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-104"
+         aria-owns="list-100"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,7 +14,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-104"
+          <input id="input-100"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -66,7 +66,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-96"
+         aria-owns="list-93"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -74,7 +74,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-96"
+          <input id="input-93"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"

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-56"
+         aria-owns="list-50"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,7 +14,7 @@ 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-56"
+          <input id="input-50"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"

package/src/components/VSlideGroup/VSlideGroup.sass

@@ -6,8 +6,8 @@
   display: flex
 
   &:not(.v-slide-group--has-affixes)
-    .v-slide-group__prev,
-    .v-slide-group__next
+    > .v-slide-group__prev,
+    > .v-slide-group__next
       display: none
 
   // Needed increased specificity

package/src/components/VTimePicker/VTimePicker.ts

@@ -338,7 +338,8 @@ export default mixins(
     genPickerTitle () {
       return this.$createElement(VTimePickerTitle, {
         props: {
-          ampm: this.ampmInTitle && this.isAmPm,
+          ampm: this.isAmPm,
+          ampmReadonly: this.isAmPm && !this.ampmInTitle,
           disabled: this.disabled,
           hour: this.inputHour,
           minute: this.inputMinute,

package/src/components/VTimePicker/VTimePickerTitle.sass

@@ -1,4 +1,5 @@
 @import './_variables.scss'
+@import '../VPicker/_variables.scss'
 
 .v-time-picker-title
   color: $time-picker-title-color
@@ -34,6 +35,10 @@
   div:only-child
     flex-direction: row
 
+  &--readonly
+    .v-picker__title__btn.v-picker__title__btn--active
+      opacity: $picker-inactive-btn-opacity
+
 .v-picker__title--landscape
   .v-time-picker-title
     flex-direction: column

package/src/components/VTimePicker/VTimePickerTitle.ts

@@ -18,6 +18,7 @@ export default mixins(
 
   props: {
     ampm: Boolean,
+    ampmReadonly: Boolean,
     disabled: Boolean,
     hour: Number,
     minute: Number,
@@ -58,9 +59,12 @@ export default mixins(
     genAmPm () {
       return this.$createElement('div', {
         staticClass: 'v-time-picker-title__ampm',
+        class: {
+          'v-time-picker-title__ampm--readonly': this.ampmReadonly,
+        },
       }, [
-        this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly),
-        this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly),
+        (!this.ampmReadonly || this.period === 'am') ? this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly) : null,
+        (!this.ampmReadonly || this.period === 'pm') ? this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly) : null,
       ])
     },
   },