feat(AvatarGroup): add a new "moreTooltip" prop

docs/content/3.components/avatar-group.md

@@ -69,9 +69,34 @@ slots:
 :u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
 ::
 
+### More tooltip
+
+Wrap the overflow avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
+You can either use a static string or a function that receives the hidden count and returns a string.
+
+::component-code
+---
+prettier: true
+hide:
+  max
+props:
+  max: 2
+  more-tooltip: "Neil Richter"
+slots:
+  default: |
+
+    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
+    <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
+    <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />
+---
+:u-avatar{src="https://github.com/benjamincanac.png" alt="Benjamin Canac"}
+:u-avatar{src="https://github.com/romhml.png" alt="Romain Hamel"}
+:u-avatar{src="https://github.com/noook.png" alt="Neil Richter"}
+::
+
 ## Examples
 
-### With tooltip
+### With avatar tooltip
 
 Wrap each avatar with a [Tooltip](/components/tooltip) to display a tooltip on hover.
 

playground/app/pages/components/avatar.vue

@@ -29,7 +29,7 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
       </UAvatarGroup>
     </div>
     <div class="flex items-center gap-1.5">
-      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="4">
+      <UAvatarGroup v-for="size in sizes" :key="size" :size="size" :max="2" :more-tooltip="(count) => `${count} more attendees`">
         <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
         <UAvatar src="https://github.com/romhml.png" alt="Romain Hamel" />
         <UAvatar src="https://github.com/noook.png" alt="Neil Richter" />

src/runtime/components/AvatarGroup.vue

@@ -19,6 +19,14 @@ export interface AvatarGroupProps {
    * The maximum number of avatars to display.
    */
   max?: number | string
+  /**
+   * Tooltip text for the overflow "+N" avatar.
+   * Can be a static string or a function receiving the hidden count and returning a string.
+   * Example:
+   * - "3 more attendees"
+   * - (n) => `${n} more attendees`
+   */
+  moreTooltip?: string | ((count: number) => string)
   class?: any
   ui?: AvatarGroup['slots']
 }
@@ -35,6 +43,7 @@ import { useAppConfig } from '#imports'
 import { avatarGroupInjectionKey } from '../composables/useAvatarGroup'
 import { tv } from '../utils/tv'
 import UAvatar from './Avatar.vue'
+import UTooltip from './Tooltip.vue'
 
 const props = defineProps<AvatarGroupProps>()
 const slots = defineSlots<AvatarGroupSlots>()
@@ -87,14 +96,35 @@ const hiddenCount = computed(() => {
   return children.value.length - visibleAvatars.value.length
 })
 
+const moreTooltipText = computed<string | undefined>(() => {
+  if (!hiddenCount.value) {
+    return undefined
+  }
+  const t = props.moreTooltip
+  if (!t) {
+    return undefined
+  }
+  return typeof t === 'function' ? t(hiddenCount.value) : t
+})
+
 provide(avatarGroupInjectionKey, computed(() => ({
   size: props.size
 })))
 </script>
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
-    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+    <template v-if="hiddenCount > 0">
+      <UTooltip v-if="moreTooltipText" :text="moreTooltipText">
+        <UAvatar :text="`+${hiddenCount}`" :class="ui.base({ class: props.ui?.base })" />
+      </UTooltip>
+      <UAvatar
+        v-else
+        :text="`+${hiddenCount}`"
+        :class="ui.base({ class: props.ui?.base })"
+      />
+    </template>
+
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base({ class: props.ui?.base })" />
   </Primitive>
 </template>