438 lines
15 KiB
Plaintext
438 lines
15 KiB
Plaintext
component AvatarGroup {
|
|
outputs {
|
|
overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
|
|
}
|
|
|
|
props {
|
|
items: unknown[] = []
|
|
size: string = "md"
|
|
color: string = "primary"
|
|
variant: string = "solid"
|
|
shape: string = "circle"
|
|
layout: string = "stack"
|
|
maxVisible: number = 4
|
|
columns: number = 3
|
|
borderColor: string = ""
|
|
showTooltips: boolean = true
|
|
overflowLabel: string = "Show remaining members"
|
|
class: string = ""
|
|
|
|
}
|
|
|
|
state overflowOpen: boolean = false
|
|
|
|
functions {
|
|
shared function visibleMembers() {
|
|
return items.slice(0, Number(maxVisible))
|
|
}
|
|
|
|
shared function hiddenMembers() {
|
|
return items.slice(Number(maxVisible))
|
|
}
|
|
|
|
client function toggleOverflow() {
|
|
overflowOpen = !overflowOpen
|
|
output.overflow({
|
|
component: "AvatarGroup",
|
|
open: overflowOpen,
|
|
hiddenCount: hiddenMembers().length
|
|
})
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
class="wrn-component wrn-next--avatar-group {class}"
|
|
data-wrn-avatar-group
|
|
data-layout="{layout}"
|
|
data-shape="{shape}"
|
|
data-size="{size}"
|
|
style="--wrn-avatar-group-columns:{columns}; --wrn-avatar-group-ring:{borderColor || 'var(--wrn-color-bg)'}"
|
|
role="group"
|
|
aria-label="Avatar group"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="root" data-wrn-component="AvatarGroup" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
<div
|
|
class="wrn-next__avatar-group-members"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="members" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
{#each visibleMembers() as item}
|
|
<span
|
|
class="wrn-next__avatar-group-member"
|
|
data-size="{item.size || size}"
|
|
data-shape="{item.shape || shape}"
|
|
data-color="{item.color || color}"
|
|
data-variant="{item.variant || variant}"
|
|
tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
|
|
aria-label="{item.tooltip || item.name || item.alt || item.initials || 'Group member'}"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="member" data-wrn-axis-size="{item.size || size}" data-wrn-axis-color="{item.color || color}" data-wrn-axis-variant="{item.variant || variant}" data-wrn-axis-shape="{item.shape || shape}">
|
|
<span
|
|
class="wrn-next__avatar-group-avatar"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="avatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
{#if item.src}
|
|
<img
|
|
src="{item.src}"
|
|
alt="{item.alt || item.name || ''}"
|
|
loading="lazy"
|
|
/>
|
|
{:else if item.initials}
|
|
<span
|
|
aria-hidden="true"
|
|
>
|
|
{item.initials}
|
|
</span>
|
|
{:else}
|
|
<span
|
|
class="icon-[lucide--user-round]"
|
|
aria-hidden="true"
|
|
>
|
|
</span>
|
|
{/if}
|
|
</span>
|
|
|
|
{#if showTooltips && (item.tooltip || item.name)}
|
|
<span
|
|
class="wrn-next__avatar-group-tooltip"
|
|
role="tooltip"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="tooltip" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
{item.tooltip || item.name}
|
|
</span>
|
|
{/if}
|
|
</span>
|
|
{/each}
|
|
|
|
{#if hiddenMembers().length > 0}
|
|
<span
|
|
class="wrn-next__avatar-group-overflow"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="overflow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
<button
|
|
type="button"
|
|
class="wrn-next__avatar-group-overflow-button"
|
|
aria-label="{overflowLabel}"
|
|
aria-expanded="{overflowOpen ? 'true' : 'false'}"
|
|
@click="toggleOverflow(event)"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="overflowButton" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
+{hiddenMembers().length}
|
|
</button>
|
|
|
|
<span
|
|
class="wrn-next__avatar-group-menu"
|
|
role="menu"
|
|
data-show="overflowOpen"
|
|
aria-hidden="{overflowOpen ? 'false' : 'true'}"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="menu" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
{#each hiddenMembers() as item}
|
|
<span
|
|
class="wrn-next__avatar-group-menu-item"
|
|
role="menuitem"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="menuItem" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
<span
|
|
class="wrn-next__avatar-group-menu-avatar"
|
|
data-wrn-owner="AvatarGroup" data-wrn-part="menuAvatar" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-variant="{variant}" data-wrn-axis-shape="{shape}">
|
|
{#if item.src}
|
|
<img
|
|
src="{item.src}"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
{:else}
|
|
<span>{item.initials || '?'}</span>
|
|
{/if}
|
|
</span>
|
|
<span>{item.name || item.alt || item.initials || 'Team member'}</span>
|
|
</span>
|
|
{/each}
|
|
</span>
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
/* --- Avatar group -------------------------------------------------------- */
|
|
.wrn-next--avatar-group {
|
|
--wrn-avatar-group-size: 2.5rem;
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-size="xs"] {
|
|
--wrn-avatar-group-size: 1.5rem;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-size="sm"] {
|
|
--wrn-avatar-group-size: 2rem;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-size="md"],
|
|
.wrn-next--avatar-group[data-size="default"] {
|
|
--wrn-avatar-group-size: 2.5rem;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-size="lg"] {
|
|
--wrn-avatar-group-size: 3.25rem;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-size="xl"] {
|
|
--wrn-avatar-group-size: 4.5rem;
|
|
}
|
|
|
|
.wrn-next__avatar-group-members {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-member,
|
|
.wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-overflow {
|
|
margin-left: calc(var(--wrn-avatar-group-size) * -0.28);
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-layout="stack"] :first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.wrn-next--avatar-group[data-layout="grid"] .wrn-next__avatar-group-members {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--wrn-avatar-group-columns), var(--wrn-avatar-group-size));
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.wrn-next__avatar-group-member,
|
|
.wrn-next__avatar-group-overflow {
|
|
--wrn-avatar-group-color: var(--wrn-color-primary);
|
|
position: relative;
|
|
display: inline-grid;
|
|
width: var(--wrn-avatar-group-size);
|
|
height: var(--wrn-avatar-group-size);
|
|
flex: none;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
outline: none;
|
|
transition:
|
|
z-index var(--wrn-motion-fast),
|
|
transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-color="secondary"] {
|
|
--wrn-avatar-group-color: #737373;
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-color="success"] {
|
|
--wrn-avatar-group-color: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-color="info"] {
|
|
--wrn-avatar-group-color: var(--wrn-color-info);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-color="warning"] {
|
|
--wrn-avatar-group-color: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-color="danger"] {
|
|
--wrn-avatar-group-color: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member[data-shape="rounded"] {
|
|
border-radius: calc(var(--wrn-avatar-group-size) * 0.28);
|
|
}
|
|
|
|
.wrn-next__avatar-group-avatar,
|
|
.wrn-next__avatar-group-overflow-button {
|
|
white-space: nowrap;
|
|
padding: 0;
|
|
display: grid;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
place-items: center;
|
|
color: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 78%, var(--wrn-color-text));
|
|
border: 1px solid color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 22%, transparent);
|
|
border-radius: inherit;
|
|
background: color-mix(in srgb, var(--wrn-avatar-group-color, var(--wrn-color-primary)) 14%, var(--wrn-color-surface));
|
|
box-shadow: 0 0 0 2px var(--wrn-color-surface), var(--wrn-shadow-1);
|
|
font: inherit;
|
|
font-size: calc(var(--wrn-avatar-group-size) * 0.36);
|
|
font-weight: 650;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.wrn-next__avatar-group-avatar img,
|
|
.wrn-next__avatar-group-menu-avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.wrn-next__avatar-group-overflow-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
color: var(--wrn-color-text-muted);
|
|
border-color: var(--wrn-color-border);
|
|
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
|
|
font-size: calc(var(--wrn-avatar-group-size) * 0.32);
|
|
font-weight: 650;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.wrn-next__avatar-group-member:hover,
|
|
.wrn-next__avatar-group-member:focus-visible,
|
|
.wrn-next__avatar-group-overflow:focus-within {
|
|
z-index: 5;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member:focus-visible,
|
|
.wrn-next__avatar-group-overflow-button:focus-visible {
|
|
outline: 2px solid var(--wrn-color-primary);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.wrn-next__avatar-group-tooltip {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 0.65rem);
|
|
z-index: 20;
|
|
width: max-content;
|
|
max-width: 14rem;
|
|
padding: 0.375rem 0.6rem;
|
|
color: #f4f5f7;
|
|
border: 1px solid rgb(255 255 255 / 0.08);
|
|
border-radius: var(--wrn-radius-sm, 0.5rem);
|
|
background: #16181d;
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.35);
|
|
font-size: 0.75rem;
|
|
font-weight: 550;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transform: translate(-50%, 0.25rem);
|
|
transition:
|
|
opacity var(--wrn-motion-fast),
|
|
transform var(--wrn-motion-fast);
|
|
}
|
|
|
|
.wrn-next__avatar-group-member:hover .wrn-next__avatar-group-tooltip,
|
|
.wrn-next__avatar-group-member:focus-visible .wrn-next__avatar-group-tooltip {
|
|
opacity: 1;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.wrn-next__avatar-group-menu {
|
|
position: absolute;
|
|
top: calc(100% + 0.5rem);
|
|
right: 0;
|
|
z-index: 30;
|
|
display: grid;
|
|
width: max-content;
|
|
min-width: 12rem;
|
|
gap: 0.125rem;
|
|
padding: 0.3rem;
|
|
color: var(--wrn-color-text);
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-radius: var(--wrn-radius);
|
|
background: var(--wrn-color-surface-raised, var(--wrn-color-surface));
|
|
box-shadow: var(--wrn-highlight-edge, none), var(--wrn-shadow-3);
|
|
}
|
|
|
|
.wrn-next__avatar-group-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
padding: 0.4rem 0.55rem;
|
|
border-radius: calc(var(--wrn-radius-sm) - 2px);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.wrn-next__avatar-group-menu-item:hover {
|
|
background: var(--wrn-color-surface-muted, var(--wrn-color-surface-2));
|
|
}
|
|
|
|
.wrn-next__avatar-group-menu-avatar {
|
|
display: grid;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
overflow: hidden;
|
|
flex: none;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
color: var(--wrn-color-primary-text, var(--wrn-color-primary));
|
|
background: color-mix(in srgb, var(--wrn-color-primary) 12%, var(--wrn-color-surface));
|
|
font-size: 0.65rem;
|
|
font-weight: 650;
|
|
}
|
|
|
|
/* Shared component foundation. */
|
|
|
|
.wrn-component {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
--wrn-component-scale: 1;
|
|
margin: 0;
|
|
color: var(--wrn-color-text);
|
|
font-family: var(--wrn-font-sans, inherit);
|
|
}
|
|
|
|
.wrn-component--color-primary {
|
|
--wrn-component-color: var(--wrn-color-primary);
|
|
}
|
|
|
|
.wrn-component--color-secondary {
|
|
--wrn-component-color: var(--wrn-color-secondary);
|
|
}
|
|
|
|
.wrn-component--color-success {
|
|
--wrn-component-color: var(--wrn-color-success);
|
|
}
|
|
|
|
.wrn-component--color-warning {
|
|
--wrn-component-color: var(--wrn-color-warning);
|
|
}
|
|
|
|
.wrn-component--color-danger {
|
|
--wrn-component-color: var(--wrn-color-danger);
|
|
}
|
|
|
|
.wrn-component--color-info {
|
|
--wrn-component-color: var(--wrn-color-info);
|
|
}
|
|
|
|
.wrn-component--size-xs {
|
|
--wrn-component-scale: 0.78;
|
|
}
|
|
|
|
.wrn-component--size-sm {
|
|
--wrn-component-scale: 0.88;
|
|
}
|
|
|
|
.wrn-component--size-default,
|
|
.wrn-component--size-md {
|
|
--wrn-component-scale: 1;
|
|
}
|
|
|
|
.wrn-component--size-lg {
|
|
--wrn-component-scale: 1.14;
|
|
}
|
|
|
|
.wrn-component--size-xl {
|
|
--wrn-component-scale: 1.28;
|
|
}
|
|
|
|
.wrn-component:not(.wrn-btn) {
|
|
font-size: calc(1em * var(--wrn-component-scale));
|
|
}
|
|
|
|
.wrn-component :is(a, button, input, select, textarea):focus-visible {
|
|
outline-color: var(--wrn-component-color);
|
|
}
|
|
|
|
.wrn-component p {
|
|
margin: 0;
|
|
color: var(--wrn-color-text-muted, var(--wrn-color-muted));
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
}
|