jws-frontend/src/components/shared/AvatarGroup.vue

<script setup lang="ts">
withDefaults(
  defineProps<{
    data?: Record<string, unknown>[];
    dataLabel?: string;
    dataUrl?: string;
  }>(),
  {
    dataLabel: 'name',
    dataUrl: 'imgUrl',
    data: () => [
      {
        name: 'Someone 1',
        imgUrl:
          'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
      },
      {
        name: 'Someone 2',
        imgUrl:
          'https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
      },
      {
        name: 'Someone 3',
        imgUrl:
          'https://images.unsplash.com/photo-1547425260-76bcadfb4f2c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60',
      },
      {
        name: 'Someone 4',
        imgUrl:
          'https://images.unsplash.com/photo-1499952127939-9bbf5af6c51c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHBlcnNvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
      },
      {
        name: 'Someone 5',
        imgUrl:
          'https://images.unsplash.com/photo-1504593811423-6dd665756598?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHBlcnNvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
      },
      {
        name: 'Someone 6',
        imgUrl:
          'https://images.unsplash.com/photo-1504593811423-6dd665756598?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fHBlcnNvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60',
      },
    ],
  },
);
</script>
<template>
  <div class="avatar-group">
    <div class="avatar" v-for="(person, i) in data.slice(0, 3)" :key="i">
      <q-tooltip>
        {{ person[dataLabel] }}
      </q-tooltip>
      <img
        :src="
          typeof person[dataUrl] === 'string' ? (person[dataUrl] as string) : ''
        "
        alt="Image"
      />
    </div>
    <div v-if="data.length > 3" class="avatar remaining-count">
      <q-tooltip>
        <div v-for="(person, i) in data.slice(3)" :key="i + 3">
          {{ person.name }}
        </div>
      </q-tooltip>
      <span>{{ `+${data.length - 3}` }}</span>
    </div>
  </div>
</template>

<style scoped>
.avatar-group {
  display: flex;
  align-items: center;
}
.avatar {
  position: relative;
  transition: 0.2s;
}
.avatar:not(:first-child) {
  margin-left: -0.75rem;
}
.avatar:hover {
  z-index: 1;
  transform: translateY(-0.5rem);
}
.avatar img {
  width: 30px;
  height: 30px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border-color);
}
.remaining-count {
  color: hsl(var(--text-mute-2));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: var(--surface-2);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  font-size: 0.8rem;
  margin-left: -0.75rem;
}
</style>