From e9832b95f56f97665be82ffe16e7cad72dc62f90 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 Jul 2024 17:17:15 +0200
Subject: [PATCH] fix(AvatarGroup): handle deep children

---
 src/runtime/components/AvatarGroup.vue    | 32 ++++++++++++++++++-----
 src/runtime/composables/useAvatarGroup.ts |  4 +--
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/runtime/components/AvatarGroup.vue b/src/runtime/components/AvatarGroup.vue
index 64a0be76..c3d45a45 100644
--- a/src/runtime/components/AvatarGroup.vue
+++ b/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(() => ({
diff --git a/src/runtime/composables/useAvatarGroup.ts b/src/runtime/composables/useAvatarGroup.ts
index f9667bd4..642502e5 100644
--- a/src/runtime/composables/useAvatarGroup.ts
+++ b/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 {