@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

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

@@ -1,29 +1,20 @@
-// Libraries
-import Vue from 'vue'
-
 // Components
 import VLabel from '../VLabel'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VLabel', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let localVue: typeof Vue
+  type Instance = InstanceType<typeof VLabel>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
 
   beforeEach(() => {
-    localVue = createLocalVue()
-
-    mountFunction = (ctx = {}) => {
+    mountFunction = (options = {}) => {
       return mount(VLabel, {
-        localVue,
-        context: {
-          ...ctx,
-        },
+        ...options,
       })
     }
   })
@@ -48,4 +39,239 @@ describe('VLabel', () => {
 
     expect(wrapper.element.style.position).toBe('absolute')
   })
+
+  it('should render default slot content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Custom Label Text',
+      },
+    })
+
+    expect(wrapper.text()).toBe('Custom Label Text')
+  })
+
+  it('should render complex slot content with HTML', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<span class="custom-class">Label with <strong>bold</strong> text</span>',
+      },
+    })
+
+    expect(wrapper.find('.custom-class').exists()).toBe(true)
+    expect(wrapper.find('strong').exists()).toBe(true)
+    expect(wrapper.find('strong').text()).toBe('bold')
+  })
+
+  it('should render slot content with components', () => {
+    const TestComponent = {
+      template: '<span class="test-component">Test Component</span>',
+    }
+
+    const wrapper = mountFunction({
+      slots: {
+        default: TestComponent,
+      },
+    })
+
+    expect(wrapper.find('.test-component').exists()).toBe(true)
+    expect(wrapper.find('.test-component').text()).toBe('Test Component')
+  })
+
+  it('should render slot content with multiple elements', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: [
+          '<span class="first">First</span>',
+          '<span class="second">Second</span>',
+        ],
+      },
+    })
+
+    expect(wrapper.find('.first').exists()).toBe(true)
+    expect(wrapper.find('.second').exists()).toBe(true)
+    expect(wrapper.find('.first').text()).toBe('First')
+    expect(wrapper.find('.second').text()).toBe('Second')
+  })
+
+  it('should render empty content when no slot provided', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('should apply proper classes when slot content is present', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Test Label',
+      },
+      props: {
+        value: true,
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.classes('v-label--active')).toBe(true)
+    expect(wrapper.classes('v-label--is-disabled')).toBe(true)
+  })
+
+  it('should render slot content with proper for attribute', () => {
+    const wrapper = mountFunction({
+      props: {
+        for: 'test-input',
+      },
+      slots: {
+        default: 'Label for input',
+      },
+    })
+
+    expect(wrapper.attributes('for')).toBe('test-input')
+    expect(wrapper.attributes('aria-hidden')).toBe('false')
+  })
+
+  it('should set aria-hidden when no for attribute provided', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Label without for',
+      },
+    })
+
+    expect(wrapper.attributes('aria-hidden')).toBe('true')
+  })
+
+  it('should render slot content with proper positioning', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: 10,
+        right: 20,
+      },
+      slots: {
+        default: 'Positioned label',
+      },
+    })
+
+    expect(wrapper.element.style.left).toBe('10px')
+    expect(wrapper.element.style.right).toBe('20px')
+  })
+
+  it('should render slot content with theme classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        dark: true,
+      },
+      slots: {
+        default: 'Dark theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--dark')).toBe(true)
+  })
+
+  it('should handle focused state with color', () => {
+    const wrapper = mountFunction({
+      props: {
+        focused: true,
+        color: 'error',
+      },
+      slots: {
+        default: 'Focused error label',
+      },
+    })
+
+    expect(wrapper.classes('error--text')).toBe(true)
+  })
+
+  it('should handle disabled state', () => {
+    const wrapper = mountFunction({
+      props: {
+        disabled: true,
+      },
+      slots: {
+        default: 'Disabled label',
+      },
+    })
+
+    expect(wrapper.classes('v-label--is-disabled')).toBe(true)
+  })
+
+  it('should handle active state', () => {
+    const wrapper = mountFunction({
+      props: {
+        value: true,
+      },
+      slots: {
+        default: 'Active label',
+      },
+    })
+
+    expect(wrapper.classes('v-label--active')).toBe(true)
+  })
+
+  it('should handle custom positioning with string values', () => {
+    const wrapper = mountFunction({
+      props: {
+        left: '20%',
+        right: '30px',
+      },
+      slots: {
+        default: 'Positioned label',
+      },
+    })
+
+    expect(wrapper.element.style.left).toBe('20%')
+    expect(wrapper.element.style.right).toBe('30px')
+  })
+
+  it('should handle light theme', () => {
+    const wrapper = mountFunction({
+      props: {
+        light: true,
+      },
+      slots: {
+        default: 'Light theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--light')).toBe(true)
+  })
+
+  it('should handle multiple theme classes', () => {
+    const wrapper = mountFunction({
+      props: {
+        dark: true,
+        light: false,
+      },
+      slots: {
+        default: 'Theme label',
+      },
+    })
+
+    expect(wrapper.classes('theme--dark')).toBe(true)
+    expect(wrapper.classes('theme--light')).toBe(false)
+  })
+
+  it('should render slot content with proper element tag', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: 'Label content',
+      },
+    })
+
+    expect(wrapper.element.tagName.toLowerCase()).toBe('label')
+  })
+
+  it('should handle slot content with event listeners', () => {
+    const onClick = jest.fn()
+
+    const wrapper = mountFunction({
+      attrs: {
+        onClick,
+      },
+      slots: {
+        default: 'Clickable label',
+      },
+    })
+
+    wrapper.trigger('click')
+    expect(onClick).toHaveBeenCalled()
+  })
 })

package/src/components/VLazy/VLazy.ts

@@ -1,4 +1,4 @@
-import {Transition, h} from 'vue'
+import { Transition, h, withDirectives, defineComponent } from 'vue'
 // Mixins
 import Measurable from '../../mixins/measurable'
 import Toggleable from '../../mixins/toggleable'
@@ -20,7 +20,8 @@ export default mixins(
 ).extend({
   name: 'VLazy',
 
-  directives: { intersect },
+  emits: ['update:modelValue'],
+
 
   props: {
     options: {
@@ -73,18 +74,15 @@ export default mixins(
   },
 
   render (): VNode {
-    return h(this.tag, {
+    return withDirectives(h(this.tag, {
       class: 'v-lazy',
-      attrs: this.$attrs,
-      directives: [{
-        name: 'intersect',
-        value: {
-          handler: this.onObserve,
-          options: this.options,
-        },
-      }],
-      on: this.$listeners,
+      ...this.$attrs,
       style: this.styles,
-    }, [this.genContent()])
+    }, [this.genContent()]), [
+      [intersect, {
+        handler: this.onObserve,
+        options: this.options,
+      }]
+    ])
   },
 })

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

@@ -6,12 +6,15 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VLazy.ts', () => {
   type Instance = InstanceType<typeof VLazy>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VLazy, {
@@ -29,16 +32,14 @@ describe('VLazy.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: true })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: true })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should set a minimum height', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         minHeight: 200,
       },
     })

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

@@ -2,12 +2,13 @@
 
 exports[`VLazy.ts should conditionally render content 1`] = `
 <div class="v-lazy">
+  false
 </div>
 `;
 
 exports[`VLazy.ts should conditionally render content 2`] = `
 <div class="v-lazy">
-  <div>
+  <div class="fade-transition-enter-from fade-transition-enter-active">
     foobar
   </div>
 </div>

package/src/components/VList/VList.ts

@@ -75,7 +75,7 @@ export default defineComponent({
       this.groups.push(content)
     },
     unregister (content: VListGroupInstance) {
-      const index = this.groups.findIndex(g => g._uid === content._uid)
+      const index = this.groups.findIndex(g => g.$.uid === content.$.uid)
 
       if (index > -1) this.groups.splice(index, 1)
     },

package/src/components/VList/VListGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives, vShow, VNode } from 'vue'
 // Styles
 import './VListGroup.sass'
 
@@ -24,9 +24,9 @@ import { VExpandTransition } from '../transitions'
 // Utils
 import mixins, { ExtractVue } from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode } from 'vue'
 import { Route } from 'vue-router'
 
 const baseMixins = mixins(
@@ -50,7 +50,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-list-group',
 
-  directives: { ripple },
 
   props: {
     activeClass: {
@@ -87,28 +86,39 @@ export default baseMixins.extend({
     },
   },
 
-  watch: {
-    isActive (val: boolean) {
-      /* istanbul ignore else */
-      if (!this.subGroup && val) {
-        this.list && this.list.listClick(this._uid)
-      }
-    },
-    $route: 'onRouteChange',
-  },
-
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['inputValue', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     this.list && this.list.register(this)
 
     if (this.group &&
       this.$route &&
-      this.value == null
+      this.modelValue == null
     ) {
       this.isActive = this.matchRoute(this.$route.path)
     }
   },
 
-  beforeDestroy () {
+  watch: {
+    isActive (val: boolean) {
+      /* istanbul ignore else */
+      if (!this.subGroup && val) {
+        this.list && this.list.listClick(this.$.uid)
+      }
+    },
+    $route: 'onRouteChange',
+  },
+
+  beforeUnmount () {
     this.list && this.list.unregister(this)
   },
 
@@ -122,7 +132,7 @@ export default baseMixins.extend({
       this.$nextTick(() => (this.isActive = !this.isActive))
     },
     genIcon (icon: string | false): VNode {
-      return h(VIcon, icon)
+      return h(VIcon, {}, () => icon)
     },
     genAppendIcon (): VNode | null {
       const icon = !this.subGroup ? this.appendIcon : false
@@ -132,7 +142,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__append-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -144,27 +154,29 @@ export default baseMixins.extend({
           'v-list-group__header': true,
           [this.activeClass]: this.isActive,
         },
-        inputValue: this.isActive,
+        link: true,
+        modelValue: this.isActive,
         ...this.listeners$,
         onClick: this.click
-      }, [
+      }, () => [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
         this.genAppendIcon(),
       ]),
       [
-        [Ripple, this.ripple]
+        [Ripple, this.ripple],
       ])
     },
     genItems (): VNode[] {
+      const directives = [[
+        vShow,
+        this.isActive,
+      ]]
+
       return this.showLazyContent(() => [
-        h('div', {
+        withDirectives(h('div', {
           class: 'v-list-group__items',
-          directives: [{
-            name: 'show',
-            value: this.isActive,
-          }],
-        }, getSlot(this)),
+        }, getSlot(this)), directives),
       ])
     },
     genPrependIcon (): VNode | null {
@@ -177,7 +189,7 @@ export default baseMixins.extend({
 
       return h(VListItemIcon, {
         class: 'v-list-group__header__prepend-icon',
-      }, [
+      }, () => [
         slot || this.genIcon(icon),
       ])
     },
@@ -189,13 +201,13 @@ export default baseMixins.extend({
 
       /* istanbul ignore else */
       if (isActive && this.isActive !== isActive) {
-        this.list && this.list.listClick(this._uid)
+        this.list && this.list.listClick(this.$.uid)
       }
 
       this.isActive = isActive
     },
     toggle (uid: number) {
-      const isActive = this._uid === uid
+      const isActive = this.$.uid === uid
 
       if (isActive) this.isBooted = true
       this.$nextTick(() => (this.isActive = isActive))
@@ -207,11 +219,10 @@ export default baseMixins.extend({
 
   render (): VNode {
     return h('div', this.setTextColor(this.isActive && this.color, {
-      class: 'v-list-group',
-      class: this.classes,
+      class: ['v-list-group', this.classes],
     }), [
       this.genHeader(),
-      h(VExpandTransition, this.genItems()),
+      h(VExpandTransition, {}, () => this.genItems()),
     ])
   },
 })