@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VItemGroup/VItemGroup.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h, defineComponent } from 'vue'
 // Styles
 import './VItemGroup.sass'
 
@@ -14,14 +14,13 @@ import { consoleWarn } from '../../util/console'
 import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
-import { VNode } from 'vue/types'
-import { defineComponent } from 'vue'
+import type { VNode } from '../../types/vue-internal'
 
-export type GroupableInstance = InstanceType<typeof Groupable> & {
+export type GroupableInstance = any & {
   id?: string
   to?: any
   value?: any
- }
+}
 
 export const BaseItemGroup = mixins(
   Comparable,
@@ -35,22 +34,22 @@ export const BaseItemGroup = mixins(
   props: {
     activeClass: {
       type: String,
-      default: 'v-item--active',
+      default: 'v-item--active'
     },
     allowDeselect: {
       type: Boolean,
-      default: true,
+      default: true
     },
     mandatory: Boolean,
     max: {
       type: [Number, String],
-      default: null,
+      default: null
     },
     multiple: Boolean,
     tag: {
       type: String,
-      default: 'div',
-    },
+      default: 'div'
+    }
   },
 
   data () {
@@ -61,7 +60,7 @@ export const BaseItemGroup = mixins(
       internalLazyValue: this.modelValue !== undefined
         ? this.modelValue
         : this.multiple ? [] : undefined,
-      items: [] as GroupableInstance[],
+      items: [] as GroupableInstance[]
     }
   },
 
@@ -69,7 +68,7 @@ export const BaseItemGroup = mixins(
     classes (): Record<string, boolean> {
       return {
         'v-item-group': true,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     selectedIndex (): number {
@@ -103,7 +102,7 @@ export const BaseItemGroup = mixins(
       }
 
       return () => false
-    },
+    }
   },
 
   watch: {
@@ -121,7 +120,7 @@ export const BaseItemGroup = mixins(
 
     genData (): object {
       return {
-        class: this.classes,
+        class: this.classes
       }
     },
     getValue (item: GroupableInstance, i: number): unknown {
@@ -261,16 +260,16 @@ export const BaseItemGroup = mixins(
       if (!this.allowDeselect && isSame) return
 
       this.internalValue = isSame ? undefined : value
-    },
+    }
   },
 
   render (): VNode {
     const data = this.genData()
     return h(getTagValue(this.tag), {
       class: data.class,
-      ...data.attrs,
+      ...data.attrs
     }, getSlot(this))
-  },
+  }
 })
 
 export default defineComponent({
@@ -279,7 +278,7 @@ export default defineComponent({
 
   provide (): object {
     return {
-      itemGroup: this,
+      itemGroup: this
     }
-  },
+  }
 })

package/src/components/VItemGroup/__tests__/VItem.spec.ts

@@ -4,11 +4,10 @@ import VItem from '../VItem'
 // Utilities
 import {
   mount,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h, nextTick } from 'vue'
 
-
 describe('VItem', () => {
   let mountFunction: (options?: object) => any
 
@@ -17,7 +16,7 @@ describe('VItem', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VItem, {
-        ...options,
+        ...options
       })
     }
   })
@@ -51,11 +50,11 @@ describe('VItem', () => {
   it('should match snapshot activeClass', async () => {
     const wrapper = mount(VItem, {
       props: {
-        activeClass: 'foo',
+        activeClass: 'foo'
       },
       slots: {
-        default: '<div>test content</div>',
-      },
+        default: '<div>test content</div>'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

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

@@ -9,7 +9,7 @@ import VItemGroup from '../VItemGroup'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { ExtractVue } from './../../../util/mixins'
 
@@ -21,8 +21,8 @@ const Mock = {
   name: 'test',
 
   render: () => h(VItem, {}, {
-    default: defaultSlot,
-  }),
+    default: defaultSlot
+  })
 }
 
 describe('VItemGroup', () => {
@@ -32,7 +32,7 @@ describe('VItemGroup', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VItemGroup, {
-        ...options,
+        ...options
       })
     }
   })
@@ -51,8 +51,8 @@ describe('VItemGroup', () => {
   it('should register elements', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(1)
@@ -65,7 +65,7 @@ describe('VItemGroup', () => {
   it('should register and activate elements', () => {
     const wrapper = mountFunction({
       props: { modelValue: 0 },
-      slots: { default: [Mock] },
+      slots: { default: [Mock] }
     })
 
     expect(wrapper.vm.items).toHaveLength(1)
@@ -81,9 +81,9 @@ describe('VItemGroup', () => {
       slots: {
         default: [
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(2)
@@ -104,7 +104,7 @@ describe('VItemGroup', () => {
 
     await wrapper.setProps({
       modelValue: [],
-      multiple: true,
+      multiple: true
     })
     await wrapper.vm.$nextTick()
 
@@ -133,7 +133,7 @@ describe('VItemGroup', () => {
 
     await wrapper.setProps({
       multiple: true,
-      modelValue: [],
+      modelValue: []
     })
     await wrapper.vm.$nextTick()
 
@@ -173,8 +173,8 @@ describe('VItemGroup', () => {
     const wrapper = mountFunction({
       props: { mandatory: true },
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -227,7 +227,7 @@ describe('VItemGroup', () => {
 
   it('should update a multiple item group', async () => {
     const wrapper = mountFunction({
-      props: { multiple: true },
+      props: { multiple: true }
     })
 
     // Toggling on and off
@@ -265,7 +265,7 @@ describe('VItemGroup', () => {
 
   it('should update a multiple item group with a custom comparator', async () => {
     const wrapper = mountFunction({
-      props: { multiple: true },
+      props: { multiple: true }
     })
 
     await wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), modelValue: ['foo'] })
@@ -280,15 +280,15 @@ describe('VItemGroup', () => {
     const wrapper = mountFunction({
       props: {
         multiple: true,
-        modelValue: [2],
+        modelValue: [2]
       },
       slots: {
         default: [
           Mock,
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(3)
@@ -305,11 +305,11 @@ describe('VItemGroup', () => {
   it('should not unregister children when is destroyed', () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: 0,
+        modelValue: 0
       },
       slots: {
-        default: [Mock],
-      },
+        default: [Mock]
+      }
     })
 
     const eventsBefore = wrapper.emitted('update:modelValue')?.length || 0
@@ -328,24 +328,24 @@ describe('VItemGroup', () => {
 
       render () {
         return h(VItem, {
-          disabled: true,
+          disabled: true
         }, {
-          default: defaultSlot,
+          default: defaultSlot
         })
-      },
+      }
     }
 
     const wrapper = mountFunction({
       props: {
-        mandatory: true,
+        mandatory: true
       },
       slots: {
         default: [
           Mock2,
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
     expect(wrapper.vm.internalValue).toBe(1)
@@ -359,9 +359,9 @@ describe('VItemGroup', () => {
         default: [
           Mock,
           Mock,
-          Mock,
-        ],
-      },
+          Mock
+        ]
+      }
     })
 
     const items = wrapper.findAllComponents({ name: 'v-item' })
@@ -377,8 +377,8 @@ describe('VItemGroup', () => {
   it('should have the correct selected index, item and items', async () => {
     const wrapper = mountFunction({
       slots: {
-        default: [Mock, Mock, Mock],
-      },
+        default: [Mock, Mock, Mock]
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(3)
@@ -399,8 +399,8 @@ describe('VItemGroup', () => {
   it('should render with a specified tag when the tag prop is provided with a value', () => {
     const wrapper = mountFunction({
       props: {
-        tag: 'button',
-      },
+        tag: 'button'
+      }
     })
 
     expect(wrapper.element.tagName.toLowerCase()).toBe('button')

package/src/components/VItemGroup/index.ts

@@ -3,12 +3,12 @@ import VItemGroup from './VItemGroup'
 
 export {
   VItem,
-  VItemGroup,
+  VItemGroup
 }
 
 export default {
   $_vuetify_subcomponents: {
     VItem,
-    VItemGroup,
-  },
+    VItemGroup
+  }
 }

package/src/components/VLabel/VLabel.ts

@@ -23,20 +23,20 @@ export default mixins(Themeable).extend({
     absolute: Boolean,
     color: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     disabled: Boolean,
     focused: Boolean,
     for: String,
     left: {
       type: [Number, String],
-      default: 0,
+      default: 0
     },
     right: {
       type: [Number, String],
-      default: 'auto',
+      default: 'auto'
     },
-    value: Boolean,
+    value: Boolean
   },
 
   render (): VNode {
@@ -48,18 +48,18 @@ export default mixins(Themeable).extend({
         'v-label': true,
         'v-label--active': this.value,
         'v-label--is-disabled': this.disabled,
-        ...functionalThemeClasses(this),
+        ...functionalThemeClasses(this)
       },
       for: props.for,
       'aria-hidden': !props.for,
       style: {
         left: convertToUnit(props.left),
         right: convertToUnit(props.right),
-        position: props.absolute ? 'absolute' : 'relative',
+        position: props.absolute ? 'absolute' : 'relative'
       },
-      ref: 'label',
+      ref: 'label'
     }, data)
 
     return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default?.())
-  },
+  }
 })

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

@@ -4,7 +4,7 @@ import VLabel from '../VLabel'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VLabel', () => {
@@ -14,7 +14,7 @@ describe('VLabel', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VLabel, {
-        ...options,
+        ...options
       })
     }
   })
@@ -23,8 +23,8 @@ describe('VLabel', () => {
     const wrapper = mountFunction({
       props: {
         color: 'pink',
-        focused: true,
-      },
+        focused: true
+      }
     })
 
     expect(wrapper.classes('pink--text')).toBe(true)
@@ -33,8 +33,8 @@ describe('VLabel', () => {
   it('should position itself absolutely', () => {
     const wrapper = mountFunction({
       props: {
-        absolute: true,
-      },
+        absolute: true
+      }
     })
 
     expect(wrapper.element.style.position).toBe('absolute')
@@ -43,8 +43,8 @@ describe('VLabel', () => {
   it('should render default slot content', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Custom Label Text',
-      },
+        default: 'Custom Label Text'
+      }
     })
 
     expect(wrapper.text()).toBe('Custom Label Text')
@@ -53,8 +53,8 @@ describe('VLabel', () => {
   it('should render complex slot content with HTML', () => {
     const wrapper = mountFunction({
       slots: {
-        default: '<span class="custom-class">Label with <strong>bold</strong> text</span>',
-      },
+        default: '<span class="custom-class">Label with <strong>bold</strong> text</span>'
+      }
     })
 
     expect(wrapper.find('.custom-class').exists()).toBe(true)
@@ -64,13 +64,13 @@ describe('VLabel', () => {
 
   it('should render slot content with components', () => {
     const TestComponent = {
-      template: '<span class="test-component">Test Component</span>',
+      template: '<span class="test-component">Test Component</span>'
     }
 
     const wrapper = mountFunction({
       slots: {
-        default: TestComponent,
-      },
+        default: TestComponent
+      }
     })
 
     expect(wrapper.find('.test-component').exists()).toBe(true)
@@ -82,9 +82,9 @@ describe('VLabel', () => {
       slots: {
         default: [
           '<span class="first">First</span>',
-          '<span class="second">Second</span>',
-        ],
-      },
+          '<span class="second">Second</span>'
+        ]
+      }
     })
 
     expect(wrapper.find('.first').exists()).toBe(true)
@@ -102,12 +102,12 @@ describe('VLabel', () => {
   it('should apply proper classes when slot content is present', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Test Label',
+        default: 'Test Label'
       },
       props: {
         value: true,
-        disabled: true,
-      },
+        disabled: true
+      }
     })
 
     expect(wrapper.classes('v-label--active')).toBe(true)
@@ -117,11 +117,11 @@ describe('VLabel', () => {
   it('should render slot content with proper for attribute', () => {
     const wrapper = mountFunction({
       props: {
-        for: 'test-input',
+        for: 'test-input'
       },
       slots: {
-        default: 'Label for input',
-      },
+        default: 'Label for input'
+      }
     })
 
     expect(wrapper.attributes('for')).toBe('test-input')
@@ -131,8 +131,8 @@ describe('VLabel', () => {
   it('should set aria-hidden when no for attribute provided', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Label without for',
-      },
+        default: 'Label without for'
+      }
     })
 
     expect(wrapper.attributes('aria-hidden')).toBe('true')
@@ -142,11 +142,11 @@ describe('VLabel', () => {
     const wrapper = mountFunction({
       props: {
         left: 10,
-        right: 20,
+        right: 20
       },
       slots: {
-        default: 'Positioned label',
-      },
+        default: 'Positioned label'
+      }
     })
 
     expect(wrapper.element.style.left).toBe('10px')
@@ -156,11 +156,11 @@ describe('VLabel', () => {
   it('should render slot content with theme classes', () => {
     const wrapper = mountFunction({
       props: {
-        dark: true,
+        dark: true
       },
       slots: {
-        default: 'Dark theme label',
-      },
+        default: 'Dark theme label'
+      }
     })
 
     expect(wrapper.classes('theme--dark')).toBe(true)
@@ -170,11 +170,11 @@ describe('VLabel', () => {
     const wrapper = mountFunction({
       props: {
         focused: true,
-        color: 'error',
+        color: 'error'
       },
       slots: {
-        default: 'Focused error label',
-      },
+        default: 'Focused error label'
+      }
     })
 
     expect(wrapper.classes('error--text')).toBe(true)
@@ -183,11 +183,11 @@ describe('VLabel', () => {
   it('should handle disabled state', () => {
     const wrapper = mountFunction({
       props: {
-        disabled: true,
+        disabled: true
       },
       slots: {
-        default: 'Disabled label',
-      },
+        default: 'Disabled label'
+      }
     })
 
     expect(wrapper.classes('v-label--is-disabled')).toBe(true)
@@ -196,11 +196,11 @@ describe('VLabel', () => {
   it('should handle active state', () => {
     const wrapper = mountFunction({
       props: {
-        value: true,
+        value: true
       },
       slots: {
-        default: 'Active label',
-      },
+        default: 'Active label'
+      }
     })
 
     expect(wrapper.classes('v-label--active')).toBe(true)
@@ -210,11 +210,11 @@ describe('VLabel', () => {
     const wrapper = mountFunction({
       props: {
         left: '20%',
-        right: '30px',
+        right: '30px'
       },
       slots: {
-        default: 'Positioned label',
-      },
+        default: 'Positioned label'
+      }
     })
 
     expect(wrapper.element.style.left).toBe('20%')
@@ -224,11 +224,11 @@ describe('VLabel', () => {
   it('should handle light theme', () => {
     const wrapper = mountFunction({
       props: {
-        light: true,
+        light: true
       },
       slots: {
-        default: 'Light theme label',
-      },
+        default: 'Light theme label'
+      }
     })
 
     expect(wrapper.classes('theme--light')).toBe(true)
@@ -238,11 +238,11 @@ describe('VLabel', () => {
     const wrapper = mountFunction({
       props: {
         dark: true,
-        light: false,
+        light: false
       },
       slots: {
-        default: 'Theme label',
-      },
+        default: 'Theme label'
+      }
     })
 
     expect(wrapper.classes('theme--dark')).toBe(true)
@@ -252,8 +252,8 @@ describe('VLabel', () => {
   it('should render slot content with proper element tag', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Label content',
-      },
+        default: 'Label content'
+      }
     })
 
     expect(wrapper.element.tagName.toLowerCase()).toBe('label')
@@ -264,11 +264,11 @@ describe('VLabel', () => {
 
     const wrapper = mountFunction({
       attrs: {
-        onClick,
+        onClick
       },
       slots: {
-        default: 'Clickable label',
-      },
+        default: 'Clickable label'
+      }
     })
 
     wrapper.trigger('click')