vueless/ui.image-avatar-group/types.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

import defaultConfig from "./config";

import type { ComponentConfig } from "../types";
import type { ChipItem } from "../ui.image-avatar/types";

export type Config = typeof defaultConfig;

export interface AvatarItem {
  src?: string;
  label?: string;
  color?: string;
  placeholderIcon?: string;
  chip?: ChipItem;
}

export interface Props {
  /**
   * Avatar items.
   */
  avatars?: AvatarItem[];

  /**
   * Avatar group size.
   */
  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";

  /**
   * Maximum number of avatars to display.
   */
  max?: number;

  /**
   * Avatar variant.
   */
  variant?: "solid" | "outlined" | "subtle" | "soft";

  /**
   * Avatar corner rounding.
   */
  rounded?: "none" | "sm" | "md" | "lg" | "full";

  /**
   * Component config object.
   */
  config?: ComponentConfig<Config>;

  /**
   * Data-test attribute for automated testing.
   */
  dataTest?: string | null;
}