vuetify 2.3.11 → 2.3.15

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

@@ -7,6 +7,7 @@ import {
   Wrapper,
 } from '@vue/test-utils'
 
+// eslint-disable-next-line max-statements
 describe('VSelect.ts', () => {
   type Instance = InstanceType<typeof VSelect>
   let mountFunction: (options?: object) => Wrapper<Instance>
@@ -35,6 +36,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   it('should select an item !multiple', async () => {
     const wrapper = mountFunction()
 
@@ -349,40 +354,58 @@ describe('VSelect.ts', () => {
   })
 
   // Inspired by https://github.com/vuetifyjs/vuetify/pull/1425 - Thanks @kevmo314
-  it('should open the select when focused and enter, space, up or down are pressed', async () => {
-    const wrapper = mountFunction()
+  it('should open the select when enter is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+      },
+    })
 
-    wrapper.vm.hasMouseDown = true
-    wrapper.trigger('mouseup')
+    wrapper.find('input').trigger('keydown.enter')
+    await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.isMenuActive).toBe(false)
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    wrapper.setProps({ filled: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+  it('should open the select when space is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        items: ['foo', 'bar'],
+      },
+    })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    wrapper.find('input').trigger('keydown.space')
+    await wrapper.vm.$nextTick()
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ filled: false, solo: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+  it('should open the select is multiple and key up is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        multiple: true,
+        items: ['foo', 'bar'],
+      },
+    })
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ solo: false, soloInverted: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+    wrapper.find('input').trigger('keydown.up')
+    await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
+  })
 
-    wrapper.setData({ isMenuActive: false })
-    wrapper.setProps({ soloInverted: false, outlined: true })
-    wrapper.vm.hasMouseDown = true
-    wrapper.find('.v-input__slot').trigger('mouseup')
+  it('should open the select is multiple and key down is pressed', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        multiple: true,
+        items: ['foo', 'bar'],
+      },
+    })
 
-    expect(wrapper.vm.isMenuActive).toBe(true)
+    wrapper.find('input').trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    expect(document.body.querySelector('[data-app="true"]')).toMatchSnapshot()
   })
 
   it('should return full items if using auto prop', async () => {

package/src/components/VSelect/__tests__/VSelect4.spec.ts

@@ -40,6 +40,10 @@ describe('VSelect.ts', () => {
     }
   })
 
+  afterEach(() => {
+    document.body.removeChild(el)
+  })
+
   // https://github.com/vuetifyjs/vuetify/issues/4359
   // Vue modifies the `on` property of the
   // computed `listData` — easiest way to fix

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

@@ -49,3 +49,283 @@ exports[`VSelect.ts should add color to selected index 1`] = `
   </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__ripple primary--text"
+            />
+            <i
+              aria-hidden="true"
+              class="v-icon notranslate material-icons theme--light"
+            >
+              $checkboxOff
+            </i>
+          </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__ripple primary--text"
+            />
+            <i
+              aria-hidden="true"
+              class="v-icon notranslate material-icons theme--light"
+            >
+              $checkboxOff
+            </i>
+          </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__ripple primary--text"
+            />
+            <i
+              aria-hidden="true"
+              class="v-icon notranslate material-icons theme--light"
+            >
+              $checkboxOff
+            </i>
+          </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__ripple primary--text"
+            />
+            <i
+              aria-hidden="true"
+              class="v-icon notranslate material-icons theme--light"
+            >
+              $checkboxOff
+            </i>
+          </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>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -210,7 +210,7 @@ describe('VSlideGroup.ts', () => {
     expect(fn).toHaveBeenCalled()
   })
 
-  it('it should scroll from affix click', async () => {
+  it('should scroll from affix click', async () => {
     const onClick = jest.fn()
     const scrollTo = jest.fn()
     const setWidths = jest.fn()

package/src/components/VSlider/VSlider.ts

@@ -139,9 +139,7 @@ export default mixins<options &
       return this.step > 0 ? parseFloat(this.step) : 0
     },
     inputWidth (): number {
-      const value = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100
-
-      return value
+      return (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100
     },
     trackFillStyles (): Partial<CSSStyleDeclaration> {
       const startDir = this.vertical ? 'bottom' : 'left'

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

@@ -103,21 +103,6 @@ describe('VSnackbar.ts', () => {
     expect(genTransition.mock.calls.length > 0).toBe(!expected)
   })
 
-  it.each([
-    [undefined, false],
-    [false, false],
-    [true, true],
-  ])('should conditionally invoke setTimeout method using %s', (value, expected) => {
-    const setTimeout = jest.fn()
-
-    mountFunction({
-      propsData: { value },
-      methods: { setTimeout },
-    })
-
-    expect(setTimeout.mock.calls.length > 0).toBe(expected)
-  })
-
   it.each([
     [undefined, true],
     [100, true],

package/src/components/VTabs/VTabs.sass

@@ -65,6 +65,7 @@
 
 .v-tab
   align-items: center
+  cursor: pointer
   display: flex
   flex: 0 1 auto
   font-size: $tab-font-size
@@ -99,8 +100,6 @@
     top: 0
     transition: $primary-transition
 
-  &:not(.v-tab-disabled)
-    cursor: pointer
 
 .v-tabs-slider
   background-color: currentColor

package/src/components/VTextField/VTextField.ts

@@ -131,7 +131,7 @@ export default baseMixins.extend<options>().extend({
       if (typeof this.counterValue === 'function') {
         return this.counterValue(this.internalValue)
       }
-      return (this.internalValue || '').toString().length
+      return [...(this.internalValue || '')].length
     },
     hasCounter (): boolean {
       return this.counter !== false && this.counter != null
@@ -196,7 +196,7 @@ export default baseMixins.extend<options>().extend({
   },
 
   watch: {
-    labelValue: 'setLabelWidth',
+    // labelValue: 'setLabelWidth', // moved to mounted, see #11533
     outlined: 'setLabelWidth',
     label () {
       this.$nextTick(this.setLabelWidth)
@@ -228,6 +228,9 @@ export default baseMixins.extend<options>().extend({
   },
 
   mounted () {
+    // #11533
+    this.$watch(() => this.labelValue, this.setLabelWidth)
+
     this.autofocus && this.tryAutofocus()
 
     requestAnimationFrame(() => (this.isBooted = true))
@@ -275,8 +278,8 @@ export default baseMixins.extend<options>().extend({
     genIconSlot () {
       const slot = []
 
-      if (this.$slots['append']) {
-        slot.push(this.$slots['append'] as VNode[])
+      if (this.$slots.append) {
+        slot.push(this.$slots.append as VNode[])
       } else if (this.appendIcon) {
         slot.push(this.genIcon('append'))
       }
@@ -362,7 +365,7 @@ export default baseMixins.extend<options>().extend({
     genLegend () {
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0
       const span = this.$createElement('span', {
-        domProps: { innerHTML: '' },
+        domProps: { innerHTML: '&#8203;' },
       })
 
       return this.$createElement('legend', {
@@ -373,7 +376,7 @@ export default baseMixins.extend<options>().extend({
     },
     genInput () {
       const listeners = Object.assign({}, this.listeners$)
-      delete listeners['change'] // Change should not be bound externally
+      delete listeners.change // Change should not be bound externally
 
       return this.$createElement('input', {
         style: {},

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

@@ -330,6 +330,7 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
     const change = jest.fn()
     let value = 'test'
     const component = {
+      // eslint-disable-next-line sonarjs/no-identical-functions
       render (h) {
         return h(VTextField, {
           on: {

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

@@ -37,7 +37,7 @@ describe('VTextarea.ts', () => {
 
     // TODO: switch to e2e, jest doesn't do inline styles
     expect(wrapper.html()).toMatchSnapshot()
-    expect(el.element.style.getPropertyValue('height').length).not.toBe(0)
+    expect(el.element.style.getPropertyValue('height')).not.toHaveLength(0)
   })
 
   it('should watch lazy value', async () => {

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

@@ -136,8 +136,8 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect('[Vue warn]: Error in created hook: "TypeError: Cannot set property \'vnode\' of undefined"').toHaveBeenWarned()
-    expect('TypeError: Cannot set property \'vnode\' of undefined').toHaveBeenWarned()
+    expect(`[Vue warn]: Error in created hook: "TypeError: Cannot set property 'vnode' of undefined"`).toHaveBeenWarned()
+    expect(`TypeError: Cannot set property 'vnode' of undefined`).toHaveBeenWarned()
   })
 
   it('should load children when selecting, but not render', async () => {
@@ -394,7 +394,7 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.nodes['Foobar']).toBeTruthy()
+    expect(wrapper.vm.nodes.Foobar).toBeTruthy()
 
     wrapper.setProps({ value: ['Foobar'] })
 
@@ -492,26 +492,30 @@ describe('VTreeView.ts', () => { // eslint-disable-line max-statements
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ items: [
-      {
-        id: 1,
-        name: 'one',
-      },
-    ] })
+    wrapper.setProps({
+      items: [
+        {
+          id: 1,
+          name: 'one',
+        },
+      ],
+    })
 
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ items: [
-      {
-        id: 1,
-        name: 'one',
-      },
-      {
-        id: 3,
-        name: 'three',
-      },
-    ] })
+    wrapper.setProps({
+      items: [
+        {
+          id: 1,
+          name: 'one',
+        },
+        {
+          id: 3,
+          name: 'three',
+        },
+      ],
+    })
 
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()

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

@@ -12,7 +12,7 @@ describe('VVirtualScroll.ts', () => {
   let mountFunction: (options?: object) => Wrapper<Instance>
   let propsData: Object
   let mock: jest.SpyInstance
-  const elementHeight: number = 100
+  const elementHeight = 100
 
   beforeEach(() => {
     mountFunction = (options = {}) => {

package/src/components/VWindow/VWindow.ts

@@ -18,14 +18,14 @@ import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 export default BaseItemGroup.extend({
   name: 'v-window',
 
+  directives: { Touch },
+
   provide (): object {
     return {
       windowGroup: this,
     }
   },
 
-  directives: { Touch },
-
   props: {
     activeClass: {
       type: String,

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

@@ -30,7 +30,7 @@ describe('VWindow.ts', () => {
     }
   })
 
-  it('it should return the correct transition', async () => {
+  it('should return the correct transition', async () => {
     const wrapper = mountFunction()
     // Force booted
     wrapper.setData({ isBooted: true })

package/src/components/transitions/expand-transition.ts

@@ -2,7 +2,7 @@ import { upperFirst } from '../../util/helpers'
 
 interface HTMLExpandElement extends HTMLElement {
   _parent?: (Node & ParentNode & HTMLElement) | null
-  _initialStyle: {
+  _initialStyle?: {
     transition: string
     overflow: string
     height?: string | null
@@ -25,7 +25,7 @@ export default function (expandedParentClass = '', x = false) {
     },
 
     enter (el: HTMLExpandElement) {
-      const initialStyle = el._initialStyle
+      const initialStyle = el._initialStyle!
 
       el.style.setProperty('transition', 'none', 'important')
       // Hide overflow to account for collapsed margins in the calculated height
@@ -76,8 +76,8 @@ export default function (expandedParentClass = '', x = false) {
   }
 
   function resetStyles (el: HTMLExpandElement) {
-    const size = el._initialStyle[sizeProperty]
-    el.style.overflow = el._initialStyle.overflow
+    const size = el._initialStyle![sizeProperty]
+    el.style.overflow = el._initialStyle!.overflow
     if (size != null) el.style[sizeProperty] = size
     delete el._initialStyle
   }

package/src/directives/click-outside/index.ts

@@ -25,15 +25,6 @@ function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirec
   // with non-toggleable components
   if (!e || isActive(e) === false) return
 
-  // If click was triggered programmaticaly (domEl.click()) then
-  // it shouldn't be treated as click-outside
-  // Chrome/Firefox support isTrusted property
-  // IE/Edge support pointerType property (empty if not triggered
-  // by pointing device)
-  if (('isTrusted' in e && !e.isTrusted) ||
-    ('pointerType' in e && !e.pointerType)
-  ) return
-
   // Check if additional elements were passed to be included in check
   // (click must be outside all included elements, if any)
   const elements = ((typeof binding.value === 'object' && binding.value.include) || (() => []))()