vuetify 2.3.14 → 2.3.15

package/src/components/VGrid/__tests__/VCol.spec.ts

@@ -89,7 +89,7 @@ describe('layout > col', () => {
     expect(wrapper.classes()).toHaveLength(6)
   })
 
-  it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop", async () => {
+  it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop`, async () => {
     const wrapper = mount(VCol, {
       propsData: {
         sm: true,
@@ -108,7 +108,7 @@ describe('layout > col', () => {
     expect(wrapper.classes()).toHaveLength(5)
   })
 
-  it("should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string", async () => {
+  it(`should apply boolean breakpoint classes for 'sm', 'md', 'lg', 'xl' prop set to empty string`, async () => {
     const wrapper = mount(VCol, {
       propsData: {
         sm: '',

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

@@ -11,6 +11,12 @@ import {
 } from '@vue/test-utils'
 import { wait } from '../../../../test'
 
+const vm = new Vue()
+const item = props => vm.$createElement('div', {
+  staticClass: 'foobar',
+  class: { fizzbuzz: props.hover },
+})
+
 describe('VHover.ts', () => {
   let mountFunction: (options?: object) => Wrapper<Vue>
 
@@ -23,12 +29,6 @@ describe('VHover.ts', () => {
   })
 
   it('should change class when hovered', async () => {
-    const vm = new Vue()
-    const item = props => vm.$createElement('div', {
-      staticClass: 'foobar',
-      class: { fizzbuzz: props.hover },
-    })
-
     const wrapper = mountFunction({
       scopedSlots: {
         default: item,
@@ -51,13 +51,7 @@ describe('VHover.ts', () => {
     expect(div.element.classList.contains('fizzbuzz')).toBe(false)
   })
 
-  it('should not react to changes when disable', async () => {
-    const vm = new Vue()
-    const item = props => vm.$createElement('div', {
-      staticClass: 'foobar',
-      class: { fizzbuzz: props.hover },
-    })
-
+  it('should not react to changes when disabled', async () => {
     const wrapper = mountFunction({
       propsData: {
         disabled: true,

package/src/components/VList/VListItem.ts

@@ -45,8 +45,6 @@ export default baseMixins.extend<options>().extend({
     Ripple,
   },
 
-  inheritAttrs: false,
-
   inject: {
     isInGroup: {
       default: false,
@@ -62,6 +60,8 @@ export default baseMixins.extend<options>().extend({
     },
   },
 
+  inheritAttrs: false,
+
   props: {
     activeClass: {
       type: String,

package/src/components/VMenu/VMenu.ts

@@ -45,6 +45,11 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-menu',
 
+  directives: {
+    ClickOutside,
+    Resize,
+  },
+
   provide (): object {
     return {
       isInMenu: true,
@@ -53,11 +58,6 @@ export default baseMixins.extend({
     }
   },
 
-  directives: {
-    ClickOutside,
-    Resize,
-  },
-
   props: {
     auto: Boolean,
     closeOnClick: {

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -49,18 +49,18 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-navigation-drawer',
 
-  provide (): object {
-    return {
-      isInNav: this.tag === 'nav',
-    }
-  },
-
   directives: {
     ClickOutside,
     Resize,
     Touch,
   },
 
+  provide (): object {
+    return {
+      isInNav: this.tag === 'nav',
+    }
+  },
+
   props: {
     bottom: Boolean,
     clipped: Boolean,
@@ -230,7 +230,7 @@ export default baseMixins.extend({
     },
     styles (): object {
       const translate = this.isBottom ? 'translateY' : 'translateX'
-      const styles = {
+      return {
         height: convertToUnit(this.height),
         top: !this.isBottom ? convertToUnit(this.computedTop) : 'auto',
         maxHeight: this.computedMaxHeight != null
@@ -239,8 +239,6 @@ export default baseMixins.extend({
         transform: `${translate}(${convertToUnit(this.computedTransform, '%')})`,
         width: convertToUnit(this.computedWidth),
       }
-
-      return styles
     },
   },
 

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

@@ -70,11 +70,13 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   })
 
   it('should not resize the content when permanent and stateless', async () => {
-    const wrapper = mountFunction({ propsData: {
-      app: true,
-      permanent: true,
-      stateless: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+        permanent: true,
+        stateless: true,
+      },
+    })
 
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.$vuetify.application.left).toBe(256)
@@ -151,9 +153,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   })
 
   it('should update content padding when temporary state is changed', async () => {
-    const wrapper = mountFunction({ propsData: {
-      app: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+      },
+    })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.$vuetify.application.left).toBe(256)
@@ -166,9 +170,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   })
 
   it('should update content padding when permanent state is changed', async () => {
-    const wrapper = mountFunction({ propsData: {
-      app: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+      },
+    })
     await resizeWindow(800)
     wrapper.vm.$vuetify.breakpoint.width = 800
     await wrapper.vm.$nextTick()
@@ -183,9 +189,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   })
 
   it('should update content padding when miniVariant is changed', async () => {
-    const wrapper = mountFunction({ propsData: {
-      app: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+      },
+    })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.$vuetify.application.left).toBe(256)
@@ -199,9 +207,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
   it('should not remain mobile when temporary is toggled', async () => {
     await resizeWindow(800)
-    const wrapper = mountFunction({ propsData: {
-      temporary: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        temporary: true,
+      },
+    })
 
     await resizeWindow(1920)
     expect(wrapper.vm.isMobile).toBe(false)
@@ -226,11 +236,13 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
   it('should update content padding when mobile is toggled', async () => {
     const input = jest.fn()
-    const wrapper = mountFunction({ propsData: {
-      app: true,
-      fixed: true,
-      value: true,
-    } })
+    const wrapper = mountFunction({
+      propsData: {
+        app: true,
+        fixed: true,
+        value: true,
+      },
+    })
     await wrapper.vm.$nextTick()
 
     wrapper.vm.$on('input', input)

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -81,7 +81,7 @@ export default VAutocomplete.extend({
       const itemObj = this.computedItems.find(i => this.getValue(i) === itemValue) || item
 
       if (!itemObj.text || !itemObj.callback) {
-        consoleWarn('When using \'segmented\' prop without a selection slot, items must contain both a text and callback property', this)
+        consoleWarn('When using "segmented" prop without a selection slot, items must contain both a text and callback property', this)
         return null
       }
 

package/src/components/VProgressLinear/VProgressLinear.sass

@@ -19,7 +19,6 @@
   top: 0
   transition: inherit
   width: 100%
-  z-index: 1
 
 .v-progress-linear--reverse
   .v-progress-linear__buffer
@@ -47,7 +46,6 @@
   position: absolute
   top: 0
   width: 100%
-  z-index: 2
 
 .v-progress-linear--reverse
   .v-progress-linear__content

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

@@ -191,6 +191,7 @@ describe('VProgressLinear.ts', () => {
     const wrapper = mountFunction({
       propsData: {
         indeterminate: true,
+        query: true,
       },
     })
 

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

@@ -293,7 +293,7 @@ exports[`VProgressLinear.ts should render indeterminate progress with query prop
 <div role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-linear theme--light"
+     class="v-progress-linear v-progress-linear--query theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"

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

@@ -90,21 +90,6 @@ describe('VRadio.ts', () => {
     expect(change).toHaveBeenCalledTimes(1)
   })
 
-  it('should not generate own colors when parent is in error', async () => {
-    const wrapper = mountFunction({
-      provide: {
-        radioGroup: {
-          register: () => {},
-          unregister: () => {},
-        },
-      },
-    })
-
-    wrapper.setData({ isActive: true })
-
-    await wrapper.vm.$nextTick()
-  })
-
   it('should use custom icons', () => {
     const wrapper = mountFunction({
       propsData: {

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

@@ -9,7 +9,7 @@ exports[`VRadio.ts should be render colored radio 1`] = `
       $radioOff
     </i>
     <input aria-checked="false"
-           id="input-25"
+           id="input-22"
            role="radio"
            type="radio"
            value
@@ -90,7 +90,7 @@ exports[`VRadio.ts should use custom icons 1`] = `
       bar
     </i>
     <input aria-checked="false"
-           id="input-16"
+           id="input-13"
            role="radio"
            type="radio"
            value
@@ -110,7 +110,7 @@ exports[`VRadio.ts should use custom icons 2`] = `
       foo
     </i>
     <input aria-checked="true"
-           id="input-16"
+           id="input-13"
            role="radio"
            type="radio"
            value

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

@@ -229,7 +229,7 @@ describe('VRating.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('it should bind mousemove listener', () => {
+  it('should bind mousemove listener', () => {
     const onMouseEnter = jest.fn()
     const wrapper = mountFunction({
       propsData: {

package/src/components/VSelect/VSelect.ts

@@ -701,6 +701,7 @@ export default baseMixins.extend<options>().extend({
       }
     },
     onMouseUp (e: MouseEvent) {
+      // eslint-disable-next-line sonarjs/no-collapsible-if
       if (
         this.hasMouseDown &&
         e.which !== 3 &&

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/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
@@ -278,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'))
       }
@@ -376,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/intersect/__tests__/intersect.spec.ts

@@ -9,8 +9,8 @@ describe('resize.ts', () => {
 
     Intersect.inserted(el, {
       value: callback,
-      modifiers: { quiet: true } } as any
-    )
+      modifiers: { quiet: true },
+    } as any)
 
     expect((el as any)._observe).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()

package/src/directives/ripple/__tests__/ripple.spec.ts

@@ -42,7 +42,7 @@ describe('ripple.ts', () => {
     const wrapper = mountFunction()
 
     const div = wrapper.find('div')
-    expect(div.element['_ripple'].enabled).toBe(true)
+    expect(div.element._ripple.enabled).toBe(true)
   })
 
   it('should update element property reactively', () => {
@@ -72,13 +72,13 @@ describe('ripple.ts', () => {
     })
 
     const div = wrapper.find('div')
-    expect(div.element['_ripple'].enabled).toBe(true)
+    expect(div.element._ripple.enabled).toBe(true)
 
     wrapper.setProps({ ripple: false })
-    expect(div.element['_ripple'].enabled).toBe(false)
+    expect(div.element._ripple.enabled).toBe(false)
 
     wrapper.setProps({ ripple: true })
-    expect(div.element['_ripple'].enabled).toBe(true)
+    expect(div.element._ripple.enabled).toBe(true)
   })
 
   it('should trigger ripple on mousedown', () => {

package/src/directives/ripple/index.ts

@@ -13,12 +13,12 @@ type VuetifyRippleEvent = MouseEvent | TouchEvent | KeyboardEvent
 const DELAY_RIPPLE = 80
 
 function transform (el: HTMLElement, value: string) {
-  el.style['transform'] = value
-  el.style['webkitTransform'] = value
+  el.style.transform = value
+  el.style.webkitTransform = value
 }
 
 function opacity (el: HTMLElement, value: number) {
-  el.style['opacity'] = value.toString()
+  el.style.opacity = value.toString()
 }
 
 export interface RippleOptions {

package/src/directives/touch/__tests__/touch.spec.ts

@@ -66,7 +66,7 @@ describe('touch.ts', () => {
     expect(down).toHaveBeenCalled()
   })
 
-  it('should not call directive handlers if distance is too small ', async () => {
+  it('should not call directive handlers if distance is too small', async () => {
     const down = jest.fn()
     touch(mountFunction({ down })).start(0, 0).end(0, 10)
     expect(down).not.toHaveBeenCalled()

package/src/install.ts

@@ -7,7 +7,10 @@ export function install (Vue: VueConstructor, args: VuetifyUseOptions = {}) {
   (install as any).installed = true
 
   if (OurVue !== Vue) {
-    consoleError('Multiple instances of Vue detected\nSee https://github.com/vuetifyjs/vuetify/issues/4068\n\nIf you\'re seeing "$attrs is readonly", it\'s caused by this')
+    consoleError(`Multiple instances of Vue detected
+See https://github.com/vuetifyjs/vuetify/issues/4068
+
+If you're seeing "$attrs is readonly", it's caused by this`)
   }
 
   const components = args.components || {}