@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -3,7 +3,7 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h } from 'vue'
 import { Lang } from '../../../services/lang'
@@ -24,24 +24,24 @@ describe('VPagination.ts', () => {
         icons: {
           values: {
             next: 'mdi-chevron-right',
-            prev: 'mdi-chevron-left',
-          },
+            prev: 'mdi-chevron-left'
+          }
         },
-        lang: new Lang(preset),
+        lang: new Lang(preset)
       }
 
       return mount(VPagination, {
         global: {
           config: {
             globalProperties: {
-              $vuetify: vuetifyInstance,
-            },
+              $vuetify: vuetifyInstance
+            }
           },
           mocks: {
-            $vuetify: vuetifyInstance,
-          },
+            $vuetify: vuetifyInstance
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -50,8 +50,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 5,
-        modelValue: 2,
-      },
+        modelValue: 2
+      }
     })
     jest.runAllTimers()
 
@@ -70,8 +70,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 5,
-        modelValue: 2,
-      },
+        modelValue: 2
+      }
     })
     wrapper.vm.$vuetify.rtl = true
     await wrapper.vm.$nextTick()
@@ -84,8 +84,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 5,
-        modelValue: 2,
-      },
+        modelValue: 2
+      }
     })
     jest.runAllTimers()
 
@@ -102,8 +102,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 0,
-        modelValue: 1,
-      },
+        modelValue: 1
+      }
     })
     jest.runAllTimers()
 
@@ -114,8 +114,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 5,
-        modelValue: 1,
-      },
+        modelValue: 1
+      }
     })
 
     jest.runAllTimers()
@@ -132,8 +132,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 100,
-        modelValue: 1,
-      },
+        modelValue: 1
+      }
     })
     jest.runAllTimers()
 
@@ -153,8 +153,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 100,
-        modelValue: 50,
-      },
+        modelValue: 50
+      }
     })
     jest.runAllTimers()
 
@@ -174,8 +174,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 100,
-        totalVisible: 5,
-      },
+        totalVisible: 5
+      }
     })
     const maxLength = Number(wrapper.vm.totalVisible)
     const left = Math.ceil(maxLength / 2)
@@ -192,8 +192,8 @@ describe('VPagination.ts', () => {
     const wrapper = mountFunction({
       props: {
         length: 100,
-        totalVisible: 5,
-      },
+        totalVisible: 5
+      }
     })
     const maxLength = Number(wrapper.vm.totalVisible)
     const even = maxLength % 2 === 0 ? 1 : 0
@@ -213,8 +213,8 @@ describe('VPagination.ts', () => {
       props: {
         length: 100,
         modelValue: 50,
-        totalVisible: 10,
-      },
+        totalVisible: 10
+      }
     })
     jest.runAllTimers()
 
@@ -236,7 +236,7 @@ describe('VPagination.ts', () => {
   // even if it's not real world, so that we can detect changes
   it('should use parents width for on resize calculation', () => {
     const wrapper = mount({
-      render: () => h('div', [h(VPagination)]),
+      render: () => h('div', [h(VPagination)])
     })
 
     const pagination = wrapper.findComponent(VPagination)
@@ -252,13 +252,13 @@ describe('VPagination.ts', () => {
   it('should never show more than the max number of allowed buttons', () => {
     const wrapper = mountFunction({
       data: () => ({
-        maxButtons: 4,
+        maxButtons: 4
       }),
 
       props: {
         length: 40,
-        totalVisible: 10,
-      },
+        totalVisible: 10
+      }
     })
 
     wrapper.setData({ maxButtons: 4 })
@@ -273,13 +273,13 @@ describe('VPagination.ts', () => {
   it('should never show more than the number of total visible buttons', async () => {
     const wrapper = mountFunction({
       data: () => ({
-        maxButtons: 0,
+        maxButtons: 0
       }),
 
       props: {
         length: 5,
-        totalVisible: undefined,
-      },
+        totalVisible: undefined
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(5)
@@ -304,7 +304,7 @@ describe('VPagination.ts', () => {
   it('should return length when maxButtons is less than 1', () => {
     const wrapper = mountFunction({
       data: () => ({ maxButtons: -3 }),
-      props: { length: 4 },
+      props: { length: 4 }
     })
 
     expect(wrapper.vm.items).toEqual([1, 2, 3, 4])

package/src/components/VParallax/VParallax.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Style
 import './VParallax.sass'
 
@@ -8,12 +8,12 @@ import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, VNodeData } from 'vue/types/vnode'
+import type { VNode, VNodeData } from '../../types/vue-internal'
 
 const baseMixins = mixins(
   Translatable
 )
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   $refs: {
     img: HTMLImageElement
   }
@@ -26,18 +26,18 @@ export default baseMixins.extend({
   props: {
     alt: {
       type: String,
-      default: '',
+      default: ''
     },
     height: {
       type: [String, Number],
-      default: 500,
+      default: 500
     },
     src: String,
-    srcset: String,
+    srcset: String
   },
 
   data: () => ({
-    isBooted: false,
+    isBooted: false
   }),
 
   computed: {
@@ -45,9 +45,9 @@ export default baseMixins.extend({
       return {
         display: 'block',
         opacity: this.isBooted ? 1 : 0,
-        transform: `translate(-50%, ${this.parallax}px)`,
+        transform: `translate(-50%, ${this.parallax}px)`
       }
-    },
+    }
   },
 
   mounted () {
@@ -74,7 +74,7 @@ export default baseMixins.extend({
     },
     objHeight () {
       return this.$refs.img.naturalHeight
-    },
+    }
   },
 
   render (): VNode {
@@ -84,25 +84,25 @@ export default baseMixins.extend({
       src: this.src,
       srcset: this.srcset,
       alt: this.alt,
-      ref: 'img',
+      ref: 'img'
     }
 
     const container = h('div', {
-      class: 'v-parallax__image-container',
+      class: 'v-parallax__image-container'
     }, [
-      h('img', imgData),
+      h('img', imgData)
     ])
 
     const content = h('div', {
-      class: 'v-parallax__content',
+      class: 'v-parallax__content'
     }, getSlot(this))
 
     return h('div', {
       class: 'v-parallax',
       style: {
-        height: `${this.height}px`,
+        height: `${this.height}px`
       },
-      ...this.$listeners,
+      ...this.$listeners
     }, [container, content])
-  },
+  }
 })

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

@@ -4,7 +4,7 @@ import VParallax from '../VParallax'
 // Utilities
 import {
   mount,
-  Wrapper,
+  Wrapper
 } from '@vue/test-utils'
 
 describe('VParallax.ts', () => {
@@ -14,14 +14,14 @@ describe('VParallax.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VParallax, {
-        ...options,
+        ...options
       })
     }
   })
 
   it('should render', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
+      attachToDocument: true
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -31,8 +31,8 @@ describe('VParallax.ts', () => {
     const wrapper = mountFunction({
       attachToDocument: true,
       propsData: {
-        alt: 'name',
-      },
+        alt: 'name'
+      }
     })
 
     const img = wrapper.find('img')
@@ -42,7 +42,7 @@ describe('VParallax.ts', () => {
 
   it('should use empty alt tag when not supplied', async () => {
     const wrapper = mountFunction({
-      attachToDocument: true,
+      attachToDocument: true
     })
 
     const img = wrapper.find('img')

package/src/components/VPicker/VPicker.ts

@@ -17,7 +17,7 @@ export default defineComponent({
   mixins: [
     Colorable,
     Elevatable,
-    Themeable,
+    Themeable
   ],
 
   props: {
@@ -27,54 +27,56 @@ export default defineComponent({
     noTitle: Boolean,
     transition: {
       type: String,
-      default: 'fade-transition',
+      default: 'fade-transition'
     },
     width: {
       type: [Number, String],
-      default: 290,
-    },
+      default: 290
+    }
   },
 
   computed: {
     computedTitleColor (): string | false {
       const defaultTitleColor = this.isDark ? false : (this.color || 'primary')
       return this.color || defaultTitleColor
-    },
+    }
   },
 
   methods: {
     genTitle () {
       return h('div', this.setBackgroundColor(this.computedTitleColor, {
         class: ['v-picker__title', {
-          'v-picker__title--landscape': this.landscape,
-        }],
+          'v-picker__title--landscape': this.landscape
+        }]
       }), getSlot(this, 'title'))
     },
     genBodyTransition () {
       return h(Transition, {
-        name: this.transition,
+        name: this.transition
       }, () => getSlot(this))
     },
     genBody () {
       return h('div', {
         class: ['v-picker__body', {
           'v-picker__body--no-title': this.noTitle,
-          ...this.themeClasses,
+          ...this.themeClasses
         }],
-        style: this.fullWidth ? undefined : {
-          width: convertToUnit(this.width),
-        },
+        style: this.fullWidth
+          ? undefined
+          : {
+              width: convertToUnit(this.width)
+            }
       }, [
-        this.genBodyTransition(),
+        this.genBodyTransition()
       ])
     },
     genActions () {
       return h('div', {
         class: ['v-picker__actions v-card__actions', {
-          'v-picker__actions--no-title': this.noTitle,
-        }],
+          'v-picker__actions--no-title': this.noTitle
+        }]
       }, getSlot(this, 'actions'))
-    },
+    }
   },
 
   render (): VNode {
@@ -84,12 +86,12 @@ export default defineComponent({
         'v-picker--landscape': this.landscape,
         'v-picker--full-width': this.fullWidth,
         ...this.themeClasses,
-        ...this.elevationClasses,
-      }],
+        ...this.elevationClasses
+      }]
     }, [
       this.$slots.title ? this.genTitle() : null,
       this.genBody(),
-      this.$slots.actions ? this.genActions() : null,
+      this.$slots.actions ? this.genActions() : null
     ])
-  },
+  }
 })

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

@@ -4,7 +4,7 @@ import VPicker from '../VPicker'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VPicker.ts', () => {
@@ -14,7 +14,7 @@ describe('VPicker.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VPicker, {
-        ...options,
+        ...options
       })
     }
   })
@@ -22,8 +22,8 @@ describe('VPicker.ts', () => {
   it('should render component without title and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: '<span>default</span>',
-      },
+        default: '<span>default</span>'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -33,8 +33,8 @@ describe('VPicker.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: '<span>default</span>',
-        title: '<span>title</span>',
-      },
+        title: '<span>title</span>'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -44,11 +44,11 @@ describe('VPicker.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: '<span>default</span>',
-        title: '<span>title</span>',
+        title: '<span>title</span>'
       },
       props: {
-        flat: true,
-      },
+        flat: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -58,11 +58,11 @@ describe('VPicker.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: '<span>default</span>',
-        title: '<span>title</span>',
+        title: '<span>title</span>'
       },
       props: {
-        elevation: 15,
-      },
+        elevation: 15
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -71,12 +71,12 @@ describe('VPicker.ts', () => {
   it('should render dark component and match snapshot', () => {
     const wrapper = mountFunction({
       props: {
-        dark: true,
+        dark: true
       },
       slots: {
         default: '<span>default</span>',
-        title: '<span>title</span>',
-      },
+        title: '<span>title</span>'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -85,11 +85,11 @@ describe('VPicker.ts', () => {
   it('should render colored component', () => {
     const wrapper = mountFunction({
       props: {
-        color: 'orange lighten-1',
+        color: 'orange lighten-1'
       },
       slots: {
-        title: '<span>title</span>',
-      },
+        title: '<span>title</span>'
+      }
     })
 
     const title = wrapper.find('.v-picker__title')

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VProgressCircular.sass'
 
@@ -20,31 +20,30 @@ export default defineComponent({
 
   extends: Colorable,
 
-
   props: {
     button: Boolean,
     indeterminate: Boolean,
     rotate: {
       type: [Number, String],
-      default: 0,
+      default: 0
     },
     size: {
       type: [Number, String],
-      default: 32,
+      default: 32
     },
     width: {
       type: [Number, String],
-      default: 4,
+      default: 4
     },
     value: {
       type: [Number, String],
-      default: 0,
-    },
+      default: 0
+    }
   },
 
   data: () => ({
     radius: 20,
-    isVisible: true,
+    isVisible: true
   }),
 
   computed: {
@@ -60,7 +59,7 @@ export default defineComponent({
       return {
         'v-progress-circular--visible': this.isVisible,
         'v-progress-circular--indeterminate': this.indeterminate,
-        'v-progress-circular--button': this.button,
+        'v-progress-circular--button': this.button
       }
     },
 
@@ -92,19 +91,19 @@ export default defineComponent({
     styles (): object {
       return {
         height: convertToUnit(this.calculatedSize),
-        width: convertToUnit(this.calculatedSize),
+        width: convertToUnit(this.calculatedSize)
       }
     },
 
     svgStyles (): object {
       return {
-        transform: `rotate(${Number(this.rotate)}deg)`,
+        transform: `rotate(${Number(this.rotate)}deg)`
       }
     },
 
     viewBoxSize (): number {
       return this.radius / (1 - Number(this.width) / +this.size)
-    },
+    }
   },
 
   methods: {
@@ -117,29 +116,29 @@ export default defineComponent({
         r: this.radius,
         'stroke-width': this.strokeWidth,
         'stroke-dasharray': this.strokeDashArray,
-        'stroke-dashoffset': offset,
+        'stroke-dashoffset': offset
       })
     },
     genSvg (): VNode {
       const children = [
         this.indeterminate || this.genCircle('underlay', 0),
-        this.genCircle('overlay', this.strokeDashOffset),
+        this.genCircle('overlay', this.strokeDashOffset)
       ] as VNodeChild[]
 
       return h('svg', {
         style: this.svgStyles,
         xmlns: 'http://www.w3.org/2000/svg',
-        viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,
+        viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`
       }, children)
     },
     genInfo (): VNode {
       return h('div', {
-        class: 'v-progress-circular__info',
+        class: 'v-progress-circular__info'
       }, getSlot(this))
     },
     onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
       this.isVisible = isIntersecting
-    },
+    }
   },
 
   render (): VNode {
@@ -150,15 +149,15 @@ export default defineComponent({
       'aria-valuemax': 100,
       'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
       style: this.styles,
-      ...this.$listeners,
+      ...this.$listeners
     }), [
       this.genSvg(),
-      this.genInfo(),
+      this.genInfo()
     ]), [
       [
         Intersect,
         this.onObserve
       ]
     ])
-  },
+  }
 })