@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VApp/VApp.ts

@@ -7,7 +7,7 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
-import {h} from 'vue'
+import { h } from 'vue'
 
 /* @vue/component */
 export default {
@@ -19,22 +19,22 @@ export default {
   props: {
     dark: {
       type: Boolean,
-      default: undefined,
+      default: undefined
     },
     id: {
       type: String,
-      default: 'app',
+      default: 'app'
     },
     light: {
       type: Boolean,
-      default: undefined,
-    },
+      default: undefined
+    }
   },
 
   computed: {
     isDark (): boolean {
       return this.$vuetify.theme.dark
-    },
+    }
   },
 
   beforeCreate () {
@@ -51,10 +51,10 @@ export default {
         'v-application': true,
         'v-application--is-rtl': this.$vuetify.rtl,
         'v-application--is-ltr': !this.$vuetify.rtl,
-        ...this.themeClasses,
+        ...this.themeClasses
       },
       'data-app': true,
-      id: this.id,
+      id: this.id
     }, [wrapper])
-  },
+  }
 }

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

@@ -4,7 +4,7 @@ import VApp from '../VApp'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VApp.ts', () => {
@@ -14,7 +14,7 @@ describe('VApp.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VApp, {
-        ...options,
+        ...options
       })
     }
   })
@@ -26,11 +26,11 @@ describe('VApp.ts', () => {
           $vuetify: {
             rtl: false,
             theme: {
-              dark: false,
-            },
-          },
-        },
-      },
+              dark: false
+            }
+          }
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -43,11 +43,11 @@ describe('VApp.ts', () => {
           $vuetify: {
             rtl: false,
             theme: {
-              dark: false,
-            },
-          },
-        },
-      },
+              dark: false
+            }
+          }
+        }
+      }
     })
 
     const app = wrapper.find('.v-application')
@@ -57,18 +57,18 @@ describe('VApp.ts', () => {
   it('should allow a custom id', () => {
     const wrapper = mountFunction({
       props: {
-        id: 'inspire',
+        id: 'inspire'
       },
       global: {
         mocks: {
           $vuetify: {
             rtl: false,
             theme: {
-              dark: false,
-            },
-          },
-        },
-      },
+              dark: false
+            }
+          }
+        }
+      }
     })
     const app = wrapper.find('.v-application')
     expect(app.attributes().id).toBe('inspire')

package/src/components/VAppBar/VAppBar.ts

@@ -33,7 +33,7 @@ const baseMixins = mixins(
     'invertedScroll',
     'isExtended',
     'isProminent',
-    'value',
+    'value'
   ])
 )
 
@@ -59,15 +59,15 @@ export default baseMixins.extend({
     shrinkOnScroll: Boolean,
     value: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
 
   emits: ['update:modelValue'],
 
   data () {
     return {
-      isActive: this.value,
+      isActive: this.value
     }
   },
 
@@ -102,7 +102,7 @@ export default baseMixins.extend({
         'v-app-bar--fixed': !this.absolute && (this.app || this.fixed),
         'v-app-bar--hide-shadow': this.hideShadow,
         'v-app-bar--is-scrolled': this.currentScroll > 0,
-        'v-app-bar--shrink-on-scroll': this.shrinkOnScroll,
+        'v-app-bar--shrink-on-scroll': this.shrinkOnScroll
       }
     },
     scrollRatio (): number {
@@ -204,9 +204,9 @@ export default baseMixins.extend({
         marginTop: convertToUnit(this.computedMarginTop),
         transform: `translateY(${convertToUnit(this.computedTransform)})`,
         left: convertToUnit(this.computedLeft),
-        right: convertToUnit(this.computedRight),
+        right: convertToUnit(this.computedRight)
       }
-    },
+    }
   },
 
   watch: {
@@ -230,7 +230,7 @@ export default baseMixins.extend({
     },
     hideOnScroll (val: boolean) {
       this.isActive = !val || this.currentScroll < this.computedScrollThreshold
-    },
+    }
   },
 
   created () {
@@ -273,7 +273,7 @@ export default baseMixins.extend({
       if (this.currentThreshold < this.computedScrollThreshold) return
 
       this.savedScroll = this.currentScroll
-    },
+    }
   },
 
   render (): VNode {
@@ -282,12 +282,12 @@ export default baseMixins.extend({
     if (this.canScroll) {
       render.key = 'v-app-bar-scroll'
       return withDirectives(render, [
-        [Scroll, this.onScroll, this.scrollTarget],
+        [Scroll, this.onScroll, this.scrollTarget]
       ])
     }
 
     render.key = 'v-app-bar-no-scroll'
 
     return render
-  },
+  }
 })

package/src/components/VAppBar/VAppBarNavIcon.ts

@@ -3,7 +3,7 @@ import VIcon from '../VIcon'
 import VBtn from '../VBtn/VBtn'
 
 // Types
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
@@ -16,11 +16,11 @@ export default defineComponent({
 
     const d = Object.assign({}, data, {
       class: (`v-app-bar__nav-icon ${data.class || ''}`).trim(),
-      icon: true,
+      icon: true
     })
 
     const defaultSlot = this.$slots.default?.()
 
     return h(VBtn, d, defaultSlot || (() => [h(VIcon, {}, () => '$menu')]))
-  },
+  }
 })

package/src/components/VAppBar/VAppBarTitle.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Mixins
 import { inject } from '../../mixins/registrable'
 
@@ -13,7 +13,7 @@ import { easeInOutCubic } from '../../services/goto/easing-patterns'
 
 const base = inject<'VAppBar', typeof VAppBar>('VAppBar', 'v-app-bar-title', 'v-app-bar')
 
-interface options extends ExtractVue<typeof base> {
+type options = ExtractVue<typeof base> & {
   $refs: {
     content: Element
     placeholder: Element
@@ -27,11 +27,11 @@ export default {
   data: () => ({
     contentWidth: 0,
     left: 0,
-    width: 0,
+    width: 0
   }),
 
   watch: {
-    '$vuetify.breakpoint.width': 'updateDimensions',
+    '$vuetify.breakpoint.width': 'updateDimensions'
   },
 
   computed: {
@@ -43,9 +43,9 @@ export default {
       const ratio = easeInOutCubic(Math.min(1, this.VAppBar.scrollRatio * 1.5))
       return {
         width: convertToUnit(min + (max - min) * ratio),
-        visibility: this.VAppBar.scrollRatio ? 'visible' : 'hidden',
+        visibility: this.VAppBar.scrollRatio ? 'visible' : 'hidden'
       }
-    },
+    }
   },
 
   mounted () {
@@ -58,25 +58,25 @@ export default {
       this.width = dimensions.width
       this.left = dimensions.left
       this.contentWidth = this.$refs.content.scrollWidth
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
-      class: 'v-toolbar__title v-app-bar-title',
+      class: 'v-toolbar__title v-app-bar-title'
     }, [
       h('div', {
         class: 'v-app-bar-title__content',
         style: this.styles,
-        ref: 'content',
+        ref: 'content'
       }, getSlot(this)),
       h('div', {
         class: 'v-app-bar-title__placeholder',
         style: {
-          visibility: this.VAppBar.scrollRatio ? 'hidden' : 'visible',
+          visibility: this.VAppBar.scrollRatio ? 'hidden' : 'visible'
         },
-        ref: 'placeholder',
-      }, getSlot(this)),
+        ref: 'placeholder'
+      }, getSlot(this))
     ])
-  },
+  }
 }

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

@@ -5,7 +5,7 @@ import VAppBar from '../VAppBar'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 import { scrollWindow } from '../../../../test'
 
@@ -20,19 +20,19 @@ describe('AppBar.ts', () => {
         right: 0,
         bar: 0,
         register: () => {},
-        unregister: () => {},
+        unregister: () => {}
       },
       breakpoint: {
-        smAndDown: false,
-      },
-    },
+        smAndDown: false
+      }
+    }
   })
 
   const createMountFunction = () => {
     return (options = {}) => {
       return mount(VAppBar, {
         global: { mocks: createDefaultMocks() },
-        ...options,
+        ...options
       })
     }
   }
@@ -80,7 +80,7 @@ describe('AppBar.ts', () => {
   it('should scroll off screen', async () => {
     const wrapper = mountFunction({
       attachTo: document.body,
-      props: { hideOnScroll: true, scrollThreshold: 300 },
+      props: { hideOnScroll: true, scrollThreshold: 300 }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -119,7 +119,7 @@ describe('AppBar.ts', () => {
   it('should hide when inverted scroll is enabled and page is scrolled to the top', async () => {
     const wrapper = mountFunction({
       attachTo: document.body,
-      props: { hideOnScroll: true, invertedScroll: true, scrollThreshold: 300 },
+      props: { hideOnScroll: true, invertedScroll: true, scrollThreshold: 300 }
     })
 
     expect(wrapper.vm.currentScroll).toBe(0)
@@ -145,8 +145,8 @@ describe('AppBar.ts', () => {
   it('should set active based on value', async () => {
     const wrapper = mountFunction({
       props: {
-        hideOnScroll: true,
-      },
+        hideOnScroll: true
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -158,8 +158,8 @@ describe('AppBar.ts', () => {
   it('should set margin top', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
-      },
+        app: true
+      }
     })
 
     // Set the bar value and wait for reactivity
@@ -175,8 +175,8 @@ describe('AppBar.ts', () => {
   it('should set isActive false when created and vertical-scroll', () => {
     const wrapper = mountFunction({
       props: {
-        invertedScroll: true,
-      },
+        invertedScroll: true
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(false)
@@ -185,8 +185,8 @@ describe('AppBar.ts', () => {
   it('should hide shadow when using elevate-on-scroll', () => {
     const wrapper = mountFunction({
       props: {
-        elevateOnScroll: true,
-      },
+        elevateOnScroll: true
+      }
     })
 
     expect(wrapper.vm.hideShadow).toBe(true)
@@ -199,8 +199,8 @@ describe('AppBar.ts', () => {
   it('should collapse-on-scroll', () => {
     const wrapper = mountFunction({
       props: {
-        collapseOnScroll: true,
-      },
+        collapseOnScroll: true
+      }
     })
 
     wrapper.vm.currentScroll = 0
@@ -213,15 +213,15 @@ describe('AppBar.ts', () => {
     const wrapper = mountFunction({
       props: {
         shrinkOnScroll: false,
-        prominent: false,
-      },
+        prominent: false
+      }
     })
 
     expect(wrapper.vm.computedFontSize).toBeUndefined()
 
     wrapper.setProps({
       shrinkOnScroll: true,
-      prominent: true,
+      prominent: true
     })
     await wrapper.vm.$nextTick()
 
@@ -232,8 +232,8 @@ describe('AppBar.ts', () => {
   it('should render with background', () => {
     const wrapper = mountFunction({
       props: {
-        src: '/test.jpg',
-      },
+        src: '/test.jpg'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -244,8 +244,8 @@ describe('AppBar.ts', () => {
       props: {
         src: '/test.jpg',
         fadeImgOnScroll: true,
-        scrollThreshold: 100,
-      },
+        scrollThreshold: 100
+      }
     })
 
     expect(wrapper.vm.computedOpacity).toBe(1)
@@ -265,8 +265,8 @@ describe('AppBar.ts', () => {
     const wrapper = mountFunction({
       props: {
         hideOnScroll: true,
-        extended: true,
-      },
+        extended: true
+      }
     })
 
     expect(wrapper.vm.computedTransform).toBe(0)
@@ -293,8 +293,8 @@ describe('AppBar.ts', () => {
       props: {
         hideOnScroll: true,
         elevateOnScroll: true,
-        scrollThreshold: 100,
-      },
+        scrollThreshold: 100
+      }
     })
 
     expect(wrapper.vm.computedTransform).toBe(0)
@@ -315,8 +315,8 @@ describe('AppBar.ts', () => {
         hideOnScroll: true,
         elevateOnScroll: true,
         extended: true,
-        scrollThreshold: 100,
-      },
+        scrollThreshold: 100
+      }
     })
 
     expect(wrapper.vm.computedTransform).toBe(0)
@@ -336,8 +336,8 @@ describe('AppBar.ts', () => {
     const wrapper = mountFunction({
       props: {
         hideOnScroll: true,
-        scrollThreshold: 100,
-      },
+        scrollThreshold: 100
+      }
     })
 
     wrapper.setProps({ modelValue: false })
@@ -352,8 +352,8 @@ describe('AppBar.ts', () => {
   it('when scroll position is 0, v-model should be able to be control visibility regardless of other props', async () => {
     const wrapper = mountFunction({
       props: {
-        elevateOnScroll: true,
-      },
+        elevateOnScroll: true
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -371,8 +371,8 @@ describe('AppBar.ts', () => {
       props: {
         dense: true,
         flat: true,
-        floating: true,
-      },
+        floating: true
+      }
     })
 
     expect(wrapper.vm.dense).toBe(true)
@@ -383,7 +383,7 @@ describe('AppBar.ts', () => {
   it('should handle scroll events', async () => {
     const wrapper = mountFunction({
       attachTo: document.body,
-      props: { hideOnScroll: true, scrollThreshold: 300 },
+      props: { hideOnScroll: true, scrollThreshold: 300 }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -399,8 +399,8 @@ describe('AppBar.ts', () => {
   it('should handle value prop changes', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: true,
-      },
+        modelValue: true
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -422,8 +422,8 @@ describe('AppBar.ts', () => {
         app: true,
         clippedLeft: true,
         hideOnScroll: true,
-        scrollThreshold: 50,
-      },
+        scrollThreshold: 50
+      }
     })
 
     // Test that transform is calculated correctly
@@ -437,8 +437,8 @@ describe('AppBar.ts', () => {
   it('should handle inverted scroll changes', async () => {
     const wrapper = mountFunction({
       props: {
-        invertedScroll: false,
-      },
+        invertedScroll: false
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -453,8 +453,8 @@ describe('AppBar.ts', () => {
   it('should handle hide on scroll changes', async () => {
     const wrapper = mountFunction({
       props: {
-        hideOnScroll: false,
-      },
+        hideOnScroll: false
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -469,8 +469,8 @@ describe('AppBar.ts', () => {
   it('should calculate scroll ratio correctly', () => {
     const wrapper = mountFunction({
       props: {
-        scrollThreshold: 100,
-      },
+        scrollThreshold: 100
+      }
     })
 
     expect(wrapper.vm.scrollRatio).toBe(1) // At scroll 0
@@ -486,8 +486,8 @@ describe('AppBar.ts', () => {
     const wrapper = mountFunction({
       props: {
         prominent: true,
-        shrinkOnScroll: true,
-      },
+        shrinkOnScroll: true
+      }
     })
 
     expect(wrapper.vm.isProminent).toBe(true)
@@ -497,25 +497,28 @@ describe('AppBar.ts', () => {
   it('should handle bottom positioning', () => {
     const wrapper = mountFunction({
       props: {
-        bottom: true,
-      },
+        bottom: true
+      }
     })
 
     expect(wrapper.vm.applicationProperty).toBe('bottom')
   })
 
   it('should handle scroll target', () => {
-    const originalWarn = console.warn
-    console.warn = jest.fn()
-
-    const wrapper = mountFunction({
-      props: {
-        scrollTarget: '#test-target',
-      },
-    })
-
-    expect(wrapper.vm.scrollTarget).toBe('#test-target')
+    const target = document.createElement('div')
+    target.id = 'test-target'
+    document.body.appendChild(target)
+
+    try {
+      const wrapper = mountFunction({
+        props: {
+          scrollTarget: '#test-target'
+        }
+      })
 
-    console.warn = originalWarn
+      expect(wrapper.vm.scrollTarget).toBe('#test-target')
+    } finally {
+      document.body.removeChild(target)
+    }
   })
 })

package/src/components/VAppBar/__tests__/VAppBarNavIcon.spec.ts

@@ -5,7 +5,7 @@ import VAppBarNavIcon from '../VAppBarNavIcon'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('AppBarNavIcon.ts', () => {
@@ -14,7 +14,7 @@ describe('AppBarNavIcon.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VAppBarNavIcon, {
-        ...options,
+        ...options
       })
     }
   })

package/src/components/VAppBar/index.ts

@@ -8,6 +8,6 @@ export default {
   $_vuetify_subcomponents: {
     VAppBar,
     VAppBarNavIcon,
-    VAppBarTitle,
-  },
+    VAppBarTitle
+  }
 }