Avatar Group

<template>
  <NAvatarGroup
    :max="2"
  >
    <NAvatar src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="Anthony Fu" />
    <NAvatar src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="Daniel Roe" />
    <NAvatar src="/images/avatar.png" alt="Phojie Rengel" />
  </NAvatarGroup>
</template>

<template>
  <NAvatarGroup
    size="xs"
    :max="3"
  >
    <NAvatar src="https://avatars.githubusercontent.com/u/11247099?v=4" alt="Anthony Fu" />
    <NAvatar src="https://avatars.githubusercontent.com/u/28706372?v=4" alt="Daniel Roe" />
    <NAvatar src="/images/avatar.png" alt="Phojie Rengel" />
    <NAvatar label="SR" />
  </NAvatarGroup>
</template>

<template>
  <NAvatarGroup
    :max="2"
    avatar="solid-info"
    :una="{
      avatar: 'text-white',
    }"
  >
    <NAvatar label="AF" />
    <NAvatar label="DR" />
    <NAvatar label="PR" />
  </NAvatarGroup>
</template>

<script setup lang="ts">
import type { NAvatarGroupProps } from '../../types'
import NAvatarGroupDefaultSlot from '../slots/AvatarGroupDefault'

const props = withDefaults(defineProps<NAvatarGroupProps>(), {
  max: 3,
})
</script>

<template>
  <div
    avatar-group
    :size
    :class="una?.avatarGroup"
  >
    <NAvatarGroupDefaultSlot
      :max
      :avatar="props"
    >
      <slot />
    </NAvatarGroupDefaultSlot>
  </div>
</template>

import type { PropType, VNode } from 'vue'
import type { NAvatarGroupProps } from '../../types'
import { cloneVNode, computed, defineComponent, h } from 'vue'
import Avatar from '../elements/avatar/Avatar.vue'

// @unocss-include
export default defineComponent({
  props: {
    max: {
      type: Number,
      required: true,
    },
    avatar: {
      type: Object as PropType<NAvatarGroupProps>,
    },
  },
  setup(props, { slots }) {
    const children = computed(() => slots.default?.()[0].children as VNode[])

    if (!children.value)
      return () => null

    const countChildren = computed(() => children.value?.length)

    const filterChildren = computed(() => {
      if (countChildren.value <= props.max)
        return children.value

      const childrenCopy = [...children.value]

      childrenCopy.splice(props.max, countChildren.value - props.max)

      return childrenCopy
    })

    const clones = computed(() => filterChildren.value?.map((node: VNode) => {
      // get props from the avatar and merge with the props from the slot
      const mergeProps = { ...props.avatar, ...node.props }
      return cloneVNode(node, { ...mergeProps, class: 'avatar-group-(child margin)' })
    }).reverse())

    const label = computed(() => {
      if (countChildren.value <= props.max)
        return null

      return h(Avatar, {
        // TODO: add `more` configuration
        class: 'avatar-(soft group-margin)',
        size: props.avatar?.size,
        label: `+${countChildren.value - props.max}`,
        una: { avatarLabel: `${props.avatar?.una?.avatarGroupLabel ?? ''} avatar-group-label` },
      })
    })

    return () => [
      label.value,
      ...clones.value,
    ]
  },
})