91 lines
2.7 KiB
Plaintext
91 lines
2.7 KiB
Plaintext
component Avatar {
|
|
outputs {
|
|
load(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
error(payload: { error: Error | string; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | Error | string)
|
|
click(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
src: string = ""
|
|
alt: string = ""
|
|
initials: string = ""
|
|
size: string = "md"
|
|
color: string = "primary"
|
|
variant: string = "solid"
|
|
shape: string = "circle"
|
|
|
|
status: string = ""
|
|
statusLabel: string = ""
|
|
statusPosition: string = "bottom"
|
|
|
|
badge: string = ""
|
|
badgeIcon: string = ""
|
|
badgeLabel: string = ""
|
|
|
|
tooltip: string = ""
|
|
name: string = ""
|
|
description: string = ""
|
|
loading: string = "lazy"
|
|
class: string = ""
|
|
}
|
|
|
|
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>
|
|
}
|
|
}
|