Appearance

AvatarList Component ​

Overview ​

The AvatarList component is a Vue.js component designed to display a list of avatars for a set of users or groups. It uses Vuetify for styling and offers functionality for displaying up to a specified number of avatars with tooltips and a dropdown menu for additional items. This component is customizable with different colors, icon sources, and name keys based on the context (user or group).

Features ​

  • Dynamic Avatars: Displays a list of avatars for users or groups.
  • Tooltips: Provides tooltips for each avatar to show the name.
  • Dropdown Menu: Shows a menu for additional avatars if the number exceeds the maximum display limit.
  • Customizable Colors and Icons: Supports custom colors and icons for avatars.

Styles ​

The component uses Vuetify's styling for avatars, tooltips, and menus. Additional custom styles can be added to fit specific design requirements.

Methods ​

getColor(index, iconKey) ​

  • Description: Determines the color for the avatar based on the index and icon key.
  • Parameters:
    • index: The index of the avatar.
    • iconKey: The icon key to determine if a color needs to be applied.

Usage ​

vue
<template>
  <AvatarList
    :permission-names="assetList.permission_names"
    :max-display="3"
    :defined-colors="definedColors"
    :name-key="isUser ? 'name' : 'group_name'"
    :icon-key="isUser ? 'profile_image' : 'display_group_icon'"
  />
</template>

<script>
import AvatarList from '@/components/AvatarList.vue'; // Adjust the import path

export default {
  components: {
    AvatarList
  },
  data() {
    return {
      assetList: {
        permission_names: [/* array of permission names */],
        // other properties
      },
      definedColors: {
        // color definitions
      },
      isUser: true, // or false depending on the context
    };
  },
};
</script>

Notes ​

  • Ensure that Vuetify is properly set up in your project as the component relies on Vuetify's UI elements.
  • Customize definedColors to fit your design needs.
  • The visibleMembers and remainingMembers computed properties are used internally to handle the display logic of avatars and menu items.