@dimailn/vuetify 2.7.2-alpha52 → 2.7.2-alpha54

package/src/components/VList/__tests__/VListItem.spec.ts

@@ -1,12 +1,16 @@
 // Components
 import VListItem from '../VListItem'
 
+// Libraries
+import { defineComponent, h, nextTick } from 'vue'
+
 // Utilities
 import {
   mount,
   VueWrapper,
   enableAutoUnmount
 } from '@vue/test-utils'
+import { createRouter, createWebHistory } from 'vue-router'
 import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 
 describe('VListItem.ts', () => {
@@ -325,4 +329,117 @@ describe('VListItem.ts', () => {
 
     expect(wrapper.vm.isClickable).toBe(true)
   })
+
+  it('passes active and toggle in default slot scope', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: true },
+      slots: {
+        default: ({ active, toggle }: { active: boolean, toggle: Function }) => h('div', [
+          h('span', { class: { 'link--text': active } }, String(active)),
+          h('button', { onClick: toggle }, 'toggle')
+        ])
+      }
+    })
+
+    expect(wrapper.find('.link--text').exists()).toBe(true)
+    expect(wrapper.find('span').text()).toBe('true')
+  })
+
+  it('does not pass undefined to activeClass when to is used without activeClass', () => {
+    const RouterLinkCapture = defineComponent({
+      name: 'RouterLinkCapture',
+      props: {
+        to: { type: [String, Object], required: true },
+        activeClass: String,
+        exactActiveClass: String
+      },
+      setup (props, { slots }) {
+        return () => h('a', { class: props.activeClass }, slots.default?.())
+      }
+    })
+
+    const wrapper = mountFunction({
+      props: { to: '/foo' },
+      global: {
+        stubs: {
+          'router-link': RouterLinkCapture
+        }
+      }
+    })
+
+    const routerLink = wrapper.findComponent({ name: 'RouterLinkCapture' })
+
+    expect(routerLink.props('activeClass')).toBe('v-list-item--active')
+    expect(routerLink.props('activeClass')).not.toContain('undefined')
+  })
+
+  it('syncs slot active with router-link when route matches', async () => {
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: [
+        { path: '/products/:id', component: { template: '<div />' } }
+      ]
+    })
+
+    await router.push('/products/131830946')
+    await router.isReady()
+
+    const Host = defineComponent({
+      components: { VListItem },
+      props: { to: String },
+      template: `
+        <v-list-item :to="to">
+          <template #default="{ active }">
+            <span :class="{ 'link--text': active }">{{ active }}</span>
+          </template>
+        </v-list-item>
+      `
+    })
+
+    const wrapper = mount(Host, {
+      props: { to: '/products/131830946' },
+      global: {
+        plugins: [router],
+        provide: { isInGroup: true },
+        stubs: {
+          'router-link': Vue3RouterLinkStub
+        }
+      }
+    })
+
+    const listItem = wrapper.findComponent(VListItem)
+
+    const linkRef = listItem.vm.$refs.link as any
+    const linkEl = linkRef.$el || linkRef
+    linkEl.classList.add('v-list-item--active')
+
+    listItem.vm.onRouteChange()
+    await nextTick()
+    await nextTick()
+
+    expect(listItem.vm.isActive).toBe(true)
+    expect(wrapper.find('.link--text').exists()).toBe(true)
+    expect(listItem.element.getAttribute('aria-selected')).toBe('true')
+  })
+
+  it('syncs aria-selected with isActive in list item group', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: 'item-1' },
+      global: {
+        provide: {
+          isInGroup: true,
+          listItemGroup: {
+            activeClass: 'v-item--active',
+            register: () => {},
+            unregister: () => {}
+          }
+        }
+      }
+    })
+
+    wrapper.vm.isActive = true
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.element.getAttribute('aria-selected')).toBe('true')
+  })
 })

package/src/components/VTabs/__tests__/VTab.spec.ts

@@ -80,11 +80,9 @@ describe('VTab.ts', () => {
     // explicitly mock class added
     // by vue router
     if (wrapper.vm.$refs.link) {
-      (wrapper.vm.$refs.link as any)._vnode = {
-        data: {
-          class: { 'bar v-tab--active': true }
-        }
-      }
+      const linkRef = wrapper.vm.$refs.link as any
+      const linkEl = linkRef.$el || linkRef
+      linkEl.classList.add('bar', 'v-tab--active')
     }
     (wrapper.vm as any).$route.path = '/foo'
 

package/src/components/VTreeview/VTreeview.ts

@@ -1,5 +1,5 @@
 import type { PropType, VNode } from 'vue'
-import { h } from 'vue'
+import { h, markRaw } from 'vue'
 import type { VNodeChildrenArrayContents } from '../../types/vue-internal'
 // Styles
 import './VTreeview.sass'
@@ -320,7 +320,7 @@ export default mixins(
     register (node: VTreeviewNodeInstance) {
       const key = getObjectValueByPath(node.item, this.itemKey)
 
-      this.nodes[key].vnode = node
+      this.nodes[key].vnode = markRaw(node)
 
       this.updateVnodeState(key)
     },

package/src/mixins/routable/__tests__/routable.spec.ts

@@ -1,7 +1,7 @@
 import Routable from '../'
 import { mount, Wrapper } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
-import { nextTick } from 'vue'
+import { defineComponent, h, nextTick } from 'vue'
 
 describe('routable.ts', () => {
   let mountFunction: (options?: object) => Wrapper<any>
@@ -102,4 +102,78 @@ describe('routable.ts', () => {
     expect(wrapper.vm.isLink).toBe(true)
     expect(wrapper.vm.isClickable).toBe(true)
   })
+
+  it('should not include undefined in activeClass passed to router-link', async () => {
+    const RouterLinkCapture = defineComponent({
+      name: 'RouterLinkCapture',
+      props: {
+        to: { type: [String, Object], required: true },
+        activeClass: String,
+        exactActiveClass: String
+      },
+      template: '<a><slot /></a>'
+    })
+
+    const wrapper = mount({
+      mixins: [Routable],
+      data: () => ({
+        proxyClass: 'v-list-item--active'
+      }),
+      render () {
+        const { tag, data } = this.generateRouteLink()
+        return h(tag, data, { default: () => 'link' })
+      }
+    }, {
+      global: {
+        plugins: [router],
+        stubs: {
+          'router-link': RouterLinkCapture
+        }
+      },
+      props: {
+        to: '/'
+      }
+    })
+
+    const routerLink = wrapper.findComponent({ name: 'RouterLinkCapture' })
+
+    expect(routerLink.props('activeClass')).toBe('v-list-item--active')
+    expect(routerLink.props('activeClass')).not.toContain('undefined')
+    expect(routerLink.props('exactActiveClass')).toBe('v-list-item--active')
+  })
+
+  it('should sync isActive with router-link on route change', async () => {
+    const toggle = jest.fn()
+    const wrapper = mount({
+      mixins: [Routable],
+      data: () => ({
+        proxyClass: 'v-tab--active'
+      }),
+      methods: {
+        toggle
+      },
+      template: '<div ref="link" />'
+    }, {
+      global: {
+        plugins: [router]
+      },
+      props: {
+        to: '/foo',
+        activeClass: 'bar'
+      }
+    })
+
+    wrapper.vm.onRouteChange()
+    await nextTick()
+
+    expect(toggle).not.toHaveBeenCalled()
+
+    const linkEl = wrapper.vm.$refs.link as HTMLElement
+    linkEl.classList.add('bar', 'v-tab--active')
+
+    wrapper.vm.onRouteChange()
+    await nextTick()
+
+    expect(toggle).toHaveBeenCalledTimes(1)
+  })
 })

package/src/mixins/routable/index.ts

@@ -6,7 +6,6 @@ import { defineComponent, resolveComponent } from 'vue'
 import Ripple, { RippleOptions } from '../../directives/ripple'
 
 // Utilities
-import { getObjectValueByPath } from '../../util/helpers'
 
 export default defineComponent({
   name: 'routable',
@@ -119,8 +118,8 @@ export default defineComponent({
         let exactActiveClass = this.exactActiveClass || activeClass
 
         if (this.proxyClass) {
-          activeClass = `${activeClass} ${this.proxyClass}`.trim()
-          exactActiveClass = `${exactActiveClass} ${this.proxyClass}`.trim()
+          activeClass = [activeClass, this.proxyClass].filter(Boolean).join(' ')
+          exactActiveClass = [exactActiveClass, this.proxyClass].filter(Boolean).join(' ')
         }
 
         tag = resolveComponent(this.nuxt ? 'nuxt-link' : 'router-link')
@@ -148,11 +147,14 @@ export default defineComponent({
       const activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim()
       const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass
 
-      const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass)
+      const activeClasses = (this.exact ? exactActiveClass : activeClass).split(' ')
 
       this.$nextTick(() => {
         /* istanbul ignore else */
-        if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
+        const el = (this.$refs.link as any).$el || this.$refs.link
+        const isLinkActive = activeClasses.every(c => el?.classList?.contains(c))
+
+        if (isLinkActive !== this.isActive) {
           this.toggle()
         }
       })