88 lines
2.3 KiB
Plaintext
88 lines
2.3 KiB
Plaintext
component Avatar {
|
|
props {
|
|
@event load = function
|
|
@event error = function
|
|
@event click = function
|
|
src = ""
|
|
alt = ""
|
|
initials = ""
|
|
size = "md"
|
|
color = "primary"
|
|
variant = "solid"
|
|
shape = "circle"
|
|
|
|
status = ""
|
|
statusLabel = ""
|
|
statusPosition = "bottom"
|
|
|
|
badge = ""
|
|
badgeIcon = ""
|
|
badgeLabel = ""
|
|
|
|
tooltip = ""
|
|
name = ""
|
|
description = ""
|
|
loading = "lazy"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<span
|
|
{...attrs}
|
|
class="wire-next wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
|
|
data-wrn-avatar
|
|
>
|
|
<span
|
|
class="wire-next__avatar-wrap"
|
|
data-shape="{shape}"
|
|
data-size="{size}"
|
|
data-color="{color}"
|
|
data-variant="{variant}"
|
|
data-status-position="{statusPosition}"
|
|
tabindex="{tooltip ? '0' : '-1'}"
|
|
aria-label="{tooltip || name || alt || initials || 'Avatar'}"
|
|
>
|
|
<span class="wire-next__avatar">
|
|
{#if src}
|
|
<img src="{src}" alt="{alt || name}" loading="{loading}" />
|
|
{:else if initials}
|
|
<span class="wire-next__avatar-initials" aria-hidden="true">{initials}</span>
|
|
{:else}
|
|
<span class="wire-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true"></span>
|
|
{/if}
|
|
</span>
|
|
|
|
{#if status}
|
|
<span
|
|
class="wire-next__avatar-status"
|
|
data-status="{status}"
|
|
title="{statusLabel || status}"
|
|
aria-label="{statusLabel || status}"
|
|
></span>
|
|
{/if}
|
|
|
|
{#if badgeIcon}
|
|
<span class="wire-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
|
|
<span class="{badgeIcon}" aria-hidden="true"></span>
|
|
</span>
|
|
{:else if badge}
|
|
<span class="wire-next__avatar-badge wire-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
|
|
{badge}
|
|
</span>
|
|
{/if}
|
|
|
|
{#if tooltip}
|
|
<span class="wire-next__avatar-tooltip" role="tooltip">{tooltip}</span>
|
|
{/if}
|
|
</span>
|
|
|
|
{#if description}
|
|
<span class="wire-next__avatar-copy">
|
|
<strong>{name || alt || initials}</strong>
|
|
<span>{description}</span>
|
|
</span>
|
|
{/if}
|
|
</span>
|
|
}
|
|
}
|