Avatar

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    /** Image address. The slot (usually initials) shows until it loads, and stays if it fails. */
    src?: string
    /** Who this is, for screen readers. Leave out when the name is written next to the avatar. */
    alt?: string
    size?: 'sm' | 'md' | 'lg'
  }>(),
  { size: 'md' },
)

const image = ref<HTMLImageElement | null>(null)
const loaded = ref(false)
const failed = ref(false)

watch(
  () => props.src,
  () => {
    loaded.value = false
    failed.value = false
  },
)

// A server-rendered image can finish loading before Vue is listening for it.
onMounted(() => {
  if (image.value?.complete) loaded.value = image.value.naturalWidth > 0
})
</script>

<template>
  <span class="er-avatar" :data-size="size" :role="alt ? 'img' : undefined" :aria-label="alt" :aria-hidden="alt ? undefined : true">
    <span v-if="!loaded" class="er-avatar-fallback"><slot /></span>
    <img
      v-if="src && !failed"
      ref="image"
      :src="src"
      alt=""
      :data-loaded="loaded ? '' : undefined"
      @load="loaded = true"
      @error="failed = true"
    />
  </span>
</template>

<style>
@layer components {
  .er-avatar {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--er-muted);
    color: var(--er-foreground);
    font-size: 0.8125rem;
    font-weight: var(--er-weight-semibold);
    line-height: 1;
    overflow: hidden;
    user-select: none;
  }

  .er-avatar[data-size='sm'] {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6875rem;
  }

  .er-avatar[data-size='lg'] {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.125rem;
  }

  .er-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }

  .er-avatar img[data-loaded] {
    opacity: 1;
  }
}
</style>

<script lang="ts">
import { Comment, defineComponent, Fragment, h, Text, type VNode } from 'vue'

/** Unwraps v-for lists and drops comments, leaving one entry per avatar. */
function flatten(nodes: VNode[]): VNode[] {
  return nodes.flatMap((node) => {
    if (node.type === Comment || node.type === Text) return []
    if (node.type === Fragment) return flatten((node.children as VNode[]) ?? [])
    return [node]
  })
}

export default defineComponent({
  name: 'AvatarGroup',
  props: {
    /** Most avatars to show. The rest are counted in a "+3" at the end. */
    max: { type: Number, default: undefined },
    /** Accessible name of the group, e.g. "Team members". */
    label: { type: String, default: undefined },
  },
  setup(props, { slots }) {
    return () => {
      const avatars = flatten(slots.default?.() ?? [])
      const shown = props.max !== undefined && avatars.length > props.max ? avatars.slice(0, props.max) : avatars
      const hidden = avatars.length - shown.length
      return h('div', { class: 'er-avatar-group', role: 'group', 'aria-label': props.label }, [
        ...shown,
        hidden > 0 ? h('span', { class: 'er-avatar er-avatar-more', role: 'img', 'aria-label': `${hidden} more` }, `+${hidden}`) : null,
      ])
    }
  },
})
</script>

<style>
@layer components {
  .er-avatar-group {
    /* The ring between overlapping avatars is drawn in the colour behind them. */
    --er-avatar-ring: var(--er-background);
    display: inline-flex;
    align-items: center;
  }

  .er-card .er-avatar-group {
    --er-avatar-ring: var(--er-card);
  }

  .er-avatar-group > .er-avatar {
    box-shadow: 0 0 0 2px var(--er-avatar-ring);
  }

  .er-avatar-group > .er-avatar + .er-avatar {
    margin-left: -0.5rem;
  }

  .er-avatar-more {
    color: var(--er-muted-foreground);
    font-size: 0.75rem;
  }
}
</style>

/** Avatar — a round picture of a person or team, falling back to initials when there is no image. Stack several with AvatarGroup. */
export { default as Avatar } from './Avatar.vue'
export { default as AvatarGroup } from './AvatarGroup.vue'