фикс классов и флага isActive

packages/vuetify/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,119 @@ 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)
+
+    ;(listItem.vm.$refs.link as any)._vnode = {
+      data: {
+        class: { 'v-list-item--active': true }
+      }
+    }
+
+    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')
+  })
 })

packages/vuetify/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,81 @@ 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()
+
+    ;(wrapper.vm.$refs.link as any)._vnode = {
+      data: {
+        class: { 'bar v-tab--active': true }
+      }
+    }
+
+    wrapper.vm.onRouteChange()
+    await nextTick()
+
+    expect(toggle).toHaveBeenCalledTimes(1)
+  })
 })

packages/vuetify/src/mixins/routable/index.ts

@@ -119,8 +119,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')
@@ -152,7 +152,8 @@ export default defineComponent({
 
       this.$nextTick(() => {
         /* istanbul ignore else */
-        if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
+        const isLinkActive = Boolean(getObjectValueByPath(this.$refs.link, path))
+        if (isLinkActive !== this.isActive) {
           this.toggle()
         }
       })