feat(AvatarGroup): new component (#71)

Co-authored-by: Romain Hamel <romain@boilr.io>

src/runtime/components/Avatar.vue

@@ -28,6 +28,7 @@ import { computed } from 'vue'
 import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import { UIcon } from '#components'
+import { useAvatarGroup } from '#imports'
 
 const props = defineProps<AvatarProps>()
 
@@ -35,7 +36,9 @@ const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
-const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: props.size }))
+const { size } = useAvatarGroup(props)
+
+const ui = computed(() => tv({ extend: avatar, slots: props.ui })({ size: size.value }))
 </script>
 
 <template>

src/runtime/components/AvatarGroup.vue

@@ -0,0 +1,70 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { PrimitiveProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/avatar-group'
+
+const appConfig = _appConfig as AppConfig & { ui: { avatarGroup: Partial<typeof theme> } }
+
+const avatarGroup = tv({ extend: tv(theme), ...(appConfig.ui?.avatarGroup || {}) })
+
+type AvatarGroupVariants = VariantProps<typeof avatarGroup>
+
+export interface AvatarGroupProps extends Omit<PrimitiveProps, 'asChild'> {
+  size?: AvatarGroupVariants['size']
+  max?: number | string
+  class?: any
+  ui?: Partial<typeof avatarGroup.slots>
+}
+
+export interface AvatarGroupSlots {
+  default(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+import { Primitive } from 'radix-vue'
+import { UAvatar } from '#components'
+
+const props = defineProps<AvatarGroupProps>()
+const slots = defineSlots<AvatarGroupSlots>()
+
+const ui = computed(() => tv({ extend: avatarGroup, slots: props.ui })({
+  size: props.size
+}))
+
+const max = computed(() => typeof props.max === 'string' ? Number.parseInt(props.max, 10) : props.max)
+
+const visibleAvatars = computed(() => {
+  const children = slots.default?.()
+  if (!children?.length) {
+    return []
+  }
+
+  if (!max.value || max.value <= 0) {
+    return children.reverse()
+  }
+
+  return children.slice(0, max.value).reverse()
+})
+
+const hiddenCount = computed(() => {
+  const children = slots.default?.()
+  if (!children?.length) {
+    return 0
+  }
+
+  return children?.length - visibleAvatars.value.length
+})
+
+provide('avatar-size', computed(() => props.size))
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: props.class })">
+    <UAvatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="ui.base()" />
+    <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="ui.base()" />
+  </Primitive>
+</template>

src/runtime/components/Chip.vue

@@ -28,19 +28,24 @@ export interface ChipSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
 import { Primitive } from 'radix-vue'
+import { useAvatarGroup } from '#imports'
 
 const show = defineModel<boolean>('show', { default: true })
 const props = withDefaults(defineProps<ChipProps>(), { as: 'div' })
 defineSlots<ChipSlots>()
 
+const { size } = useAvatarGroup(props)
+
 const ui = computed(() => tv({ extend: chip, slots: props.ui })({
   color: props.color,
-  size: props.size,
+  size: size.value,
   position: props.position,
   inset: props.inset
 }))
+
+provide('avatar-size', size)
 </script>
 
 <template>

src/runtime/composables/useAvatarGroup.ts

@@ -0,0 +1,12 @@
+import { inject, provide, computed, type ComputedRef } from 'vue'
+import type { AvatarGroupProps } from '#ui/types'
+
+export function useAvatarGroup(props: { size: AvatarGroupProps['size'] }) {
+  const injectedSize = inject<ComputedRef<AvatarGroupProps['size']> | undefined>('avatar-size', undefined)
+  const size = computed(() => props.size ?? injectedSize?.value)
+  provide('avatar-size', size)
+
+  return {
+    size
+  }
+}

src/runtime/types/index.d.ts

@@ -2,6 +2,7 @@ export * from '../components/Accordion.vue'
 export * from '../components/Alert.vue'
 export * from '../components/App.vue'
 export * from '../components/Avatar.vue'
+export * from '../components/AvatarGroup.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
 export * from '../components/Button.vue'