fix(VChipGroup): support center-active (#22050)

fixes #22046

Author: J-Sek

packages/vuetify/src/components/VChip/VChip.tsx

@@ -8,6 +8,7 @@ import { VAvatar } from '@/components/VAvatar'
 import { VChipGroupSymbol } from '@/components/VChipGroup/VChipGroup'
 import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 import { VIcon } from '@/components/VIcon'
+import { VSlideGroupSymbol } from '@/components/VSlideGroup/VSlideGroup'
 
 // Composables
 import { makeBorderProps, useBorder } from '@/composables/border'
@@ -29,7 +30,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import vRipple from '@/directives/ripple'
 
 // Utilities
-import { computed, toDisplayString, toRef } from 'vue'
+import { computed, toDisplayString, toRef, watch } from 'vue'
 import { EventProp, genericComponent, propsFactory } from '@/util'
 
 // Types
@@ -133,7 +134,10 @@ export const VChip = genericComponent<VChipSlots>()({
     const { themeClasses } = provideTheme(props)
 
     const isActive = useProxiedModel(props, 'modelValue')
+
     const group = useGroupItem(props, VChipGroupSymbol, false)
+    const slideGroup = useGroupItem(props, VSlideGroupSymbol, false)
+
     const link = useLink(props, attrs)
     const isLink = toRef(() => props.link !== false && link.isLink.value)
     const isClickable = computed(() =>
@@ -154,6 +158,16 @@ export const VChip = genericComponent<VChipSlots>()({
       },
     }))
 
+    watch(isActive, val => {
+      if (val) {
+        group?.register()
+        slideGroup?.register()
+      } else {
+        group?.unregister()
+        slideGroup?.unregister()
+      }
+    })
+
     const { colorClasses, colorStyles, variantClasses } = useVariant(() => {
       const showColor = !group || group.isSelected.value
       return ({

packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.browser.tsx

@@ -44,6 +44,7 @@ describe('VTabs', () => {
       </VTabs>
     ))
 
+    await nextTick()
     expect(screen.getAllByCSS('.v-tab')[0]).toHaveClass('v-tab--selected')
 
     model.value = 'bar'

packages/vuetify/src/composables/group.ts

@@ -55,6 +55,8 @@ export interface GroupItemProvide {
   value: Ref<unknown>
   disabled: Ref<boolean | undefined>
   group: GroupProvide
+  register: () => void
+  unregister: () => void
 }
 
 export const makeGroupProps = propsFactory({
@@ -118,15 +120,16 @@ export function useGroupItem (
   const value = toRef(() => props.value)
   const disabled = computed(() => !!(group.disabled.value || props.disabled))
 
-  group.register({
-    id,
-    value,
-    disabled,
-  }, vm)
+  function register () {
+    group?.register({ id, value, disabled }, vm)
+  }
 
-  onBeforeUnmount(() => {
-    group.unregister(id)
-  })
+  function unregister () {
+    group?.unregister(id)
+  }
+
+  onMounted(() => register())
+  onBeforeUnmount(() => unregister())
 
   const isSelected = computed(() => {
     return group.isSelected(id)
@@ -155,6 +158,8 @@ export function useGroupItem (
     value,
     disabled,
     group,
+    register,
+    unregister,
   }
 }