feat(VAvatarGroup): add new component

[J-Sek]

Description

New component to easily show avatar groups

Markup:

<template>
  <v-app>
    <v-container
      v-for="{ size, gap } in sizeGroups"
      :key="size"
      class="bg-blue-grey d-flex justify-space-between"
    >
      <v-avatar-group
        :gap
        :items="items"
        :limit="6"
        :size
        border="md surface opacity-100"
      />
      <v-avatar-group
        :gap
        :items="items"
        :limit="5"
        :size
        border="md surface opacity-100"
        reverse
      />
    </v-container>
    <v-container>
      <v-avatar-group
        :item-props="(item) => ({ image: item.avatarUrl })"
        :items="users"
        :limit="3"
        border="md surface opacity-100"
      />
    </v-container>
    <v-container class="bg-indigo py-6">
      <v-avatar-group hoverable reverse>
        <v-avatar v-for="(user, i) in users" :key="i" :image="user.avatarUrl" />
        <template #append>
          <v-chip text="+ 48,233" />
        </template>
      </v-avatar-group>
    </v-container>
    <v-container class="d-flex ga-6">
      <v-avatar-group border="md surface opacity-100" vertical>
        <v-avatar v-for="(user, i) in users" :key="i" :image="user.avatarUrl" />
      </v-avatar-group>
      <v-avatar-group border="md surface opacity-100" reverse vertical>
        <v-avatar v-for="(user, i) in users.toReversed()" :key="i" :image="user.avatarUrl" />
      </v-avatar-group>
    </v-container>
    <v-btn
      class="ma-2"
      icon="mdi-theme-light-dark"
      location="top right"
      position="absolute"
      @click="$vuetify.theme.cycle()"
    />
  </v-app>
</template>

<script setup>
  const items = [
    { color: 'primary', text: 'AB' },
    { color: 'purple', text: 'FE' },
    { color: 'secondary', text: 'V' },
    ...Array.from({ length: 9 })
      .map((_, i) => ({ image: `https://vuetifyjs.b-cdn.net/docs/images/one/snips/avatars/${i}.jpg` })),
  ]

  const users = Array.from({ length: 7 })
    .map((_, i) => ({ id: i, avatarUrl: `https://vuetifyjs.b-cdn.net/docs/images/one/snips/avatars/${2 + i}.jpg` }))

  const sizeGroups = [
    { size: 'x-small', gap: -6 },
    { size: 'small', gap: -8 },
    { size: 'default', gap: -12 },
    { size: 'large', gap: -16 },
    { size: 'x-large', gap: -20 },
  ]
</script>