AvatarList.vue

<template>
  <div class="avatar-list" :style="rootStyle">
    <f-avatar
      v-for="(avatar, index) in displayAvatars"
      :key="index"
      :src="avatar.image || fallbackAvatar"
      :size="avatarSize"
      class="avatar-list__avatar"
    />

    <div v-if="avatars.length > showLimit" class="avatar-list__remainingCount">
      <span class="avatar-list__remainingCount--text">
        {{ remainingAvatars }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AvatarList',

  props: {
    avatars: {
      type: Array,
      required: true
    },
    showLimit: {
      type: Number,
      default: 4
    },
    avatarSize: {
      type: Number,
      default: 52
    }
  },

  computed: {
    displayAvatars() {
      return this.avatars.slice(0, this.showLimit)
    },
    remainingAvatars() {
      return `+${(this.avatars || []).length - this.showLimit}`
    },
    rootStyle() {
      return { '--avatar-size': this.avatarSize }
    },
    fallbackAvatar() {
      return require('@/assets/images/icons/Avatar-40px.svg')
    }
  }
}
</script>

<style lang="scss">
.avatar-list {
  display: flex;

  &__avatar {
    &:not(:last-child) {
      margin-left: -15px;
    }
  }

  &__remainingCount {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -15px;
    z-index: 10;

    border-radius: 50%;
    width: var(--avatar-size);
    height: var(--avatar-size);
    background-color: #efefef;

    &--text {
      color: var(--color-gray-600);
      font-size: 14px;
    }
  }
}
</style>