fix(AvatarGroup): handle deep children

src/runtime/components/AvatarGroup.vue

@@ -45,26 +45,44 @@ const ui = computed(() => avatarGroup({
 
 const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
 
+const children = computed(() => {
+  let children = slots.default?.()
+  if (children?.length) {
+    children = children.flatMap((child: any) => {
+      if (typeof child.type === 'symbol') {
+        // `v-if="false"` or commented node
+        if (typeof child.children === 'string') {
+          return
+        }
+
+        return child.children
+      }
+
+      return child
+    }).filter(Boolean)
+  }
+
+  return children || []
+})
+
 const visibleAvatars = computed(() => {
-  const children = slots.default?.()
-  if (!children?.length) {
+  if (!children.value.length) {
     return []
   }
 
   if (!max.value || max.value <= 0) {
-    return children.reverse()
+    return [...children.value].reverse()
   }
 
-  return children.slice(0, max.value).reverse()
+  return [...children.value].slice(0, max.value).reverse()
 })
 
 const hiddenCount = computed(() => {
-  const children = slots.default?.()
-  if (!children?.length) {
+  if (!children.value.length) {
     return 0
   }
 
-  return children?.length - visibleAvatars.value.length
+  return children.value.length - visibleAvatars.value.length
 })
 
 provide(avatarGroupInjectionKey, computed(() => ({

src/runtime/composables/useAvatarGroup.ts

@@ -4,9 +4,9 @@ import type { AvatarGroupProps } from '../types'
 export const avatarGroupInjectionKey: InjectionKey<ComputedRef<{ size: AvatarGroupProps['size'] }>> = Symbol('nuxt-ui.avatar-group')
 
 export function useAvatarGroup(props: { size: AvatarGroupProps['size'] }) {
-  const injectedSize = inject(avatarGroupInjectionKey, undefined)
+  const avatarGroup = inject(avatarGroupInjectionKey, undefined)
 
-  const size = computed(() => props.size ?? injectedSize?.value.size)
+  const size = computed(() => props.size ?? avatarGroup?.value.size)
   provide(avatarGroupInjectionKey, computed(() => ({ size: size.value })))
 
   return {