Avatar

Компонент Avatar используется для отображения изображения пользователя или, при отсутствии изображения, его инициалов. Поддерживает различные размеры, цвета, варианты оформления, интеграцию с роутером и отображение подсказок.

Обзор

Основное назначение: единообразное представление аватара пользователя.
Ключевые возможности:
- Отображение изображения (src) или инициалов, сгенерированных из name.
- Автоматический выбор цвета фона для инициалов.
- Интеграция с vue-router (to) или создание обычной ссылки (href).
- Настройка размеров и стилей.
- Отображение всплывающей подсказки (tooltip) при наведении.
- Возможность полностью переопределить корневой компонент.

API компонента

Props

Проп	Тип	По умолчанию	Описание
`src`	`String`		URL изображения аватара. Если задан, отображается вместо инициалов.
`srcSet`	`String`		Атрибут `srcset` для тега `<img>`.
`alt`	`String`		Альтернативный текст для изображения. Если не задан, используется `name` или строка "avatar".
`loading`	`String`	`'lazy'`	Значение атрибута `loading` для тега `<img>` (например, `'lazy'`, `'eager'`).
`imgProps`	`Object`		Объект с дополнительными атрибутами, которые будут переданы тегу `<img>`.
`name`	`String`		Имя пользователя. Используется для генерации инициалов.
`initialColor`	`String`	`'neutral'`	Определяет цветовую тему для инициалов. Возможные значения: `'neutral'`, `'primary'`, `'secondary'`, `'info'`, `'success'`, `'warning'`, `'error'`, `'auto'`. При значении `'auto'` цвет определяется на основе сгенерированных инициалов.
`initialVariant`	`String`	`'filled'`	Стиль отображения инициалов. `'filled'` — сплошной фон. `'soft'` — мягкий, полупрозрачный фон.
`initialProps`	`Object`		Объект с дополнительными атрибутами, которые будут переданы блоку с инициалами.
`size`	`Number`	`12`	Размер аватара. Значение конвертируется в `rem` по формуле `size / 4` для ширины/высоты.
`className`	`String`		Дополнительные CSS-классы для корневого элемента.
`classNames`	`Object`		Объект для кастомизации внутренних классов. Ключи: `root`, `display`, `image`, `initial`. Значения — строка с классами.
`component`	`String \| Object`	`null`	Позволяет заменить корневой HTML-тег. Если не указан, автоматически определяется на основе `to` и `href`.
`to`	`String \| Object`		Маршрут для интеграции с `vue-router`. Если указан, аватар становится ссылкой `<router-link>`.
`href`	`String`		Если указан (и нет `to`), аватар становится обычной ссылкой `<a>`.
`imgComponent`	`String \| Object`	`'img'`	Позволяет заменить HTML-тег для изображения.
`tooltip`	`String`		Текст всплывающей подсказки. При наличии навешивает на аватар tooltip с помощью библиотеки `tippy.js`.

Слоты

Имя слота	Описание
`default`	Позволяет заменить содержимое блока с инициалами. Отображается только если не задан проп `name` и нет изображения (`src`/`srcSet`).
`indicator`	Слот для размещения индикатора состояния (например, онлайн-точки) поверх аватара.

Автоматическое определение тега

Корневой тег компонента определяется в следующем приоритете:

Если передан проп component, используется он.
Если передан to (для vue-router), используется RouterLink.
Если передан href, используется тег <a> с атрибутами target="_blank" и rel="noopener noreferrer".
Во всех остальных случаях используется <div>.