2022-06-25 01:55:25 +12:00
|
|
|
<script>
|
|
|
|
|
import Body from "../Typography/Body.svelte"
|
2022-08-05 21:32:55 +12:00
|
|
|
import IconAvatar from "../Icon/IconAvatar.svelte"
|
2022-06-25 01:55:25 +12:00
|
|
|
import Label from "../Label/Label.svelte"
|
|
|
|
|
import Avatar from "../Avatar/Avatar.svelte"
|
|
|
|
|
|
|
|
|
|
export let icon = null
|
|
|
|
|
export let iconBackground = null
|
2022-08-05 21:32:55 +12:00
|
|
|
export let iconColor = null
|
2022-06-25 01:55:25 +12:00
|
|
|
export let avatar = false
|
|
|
|
|
export let title = null
|
|
|
|
|
export let subtitle = null
|
2022-08-03 03:06:20 +12:00
|
|
|
export let hoverable = false
|
2022-06-25 01:55:25 +12:00
|
|
|
|
|
|
|
|
$: initials = avatar ? title?.[0] : null
|
|
|
|
|
</script>
|
|
|
|
|
|
2022-08-03 03:06:20 +12:00
|
|
|
<div class="list-item" class:hoverable on:click>
|
2022-06-25 01:55:25 +12:00
|
|
|
<div class="left">
|
|
|
|
|
{#if icon}
|
2022-08-05 21:32:55 +12:00
|
|
|
<IconAvatar {icon} color={iconColor} background={iconBackground} />
|
2022-06-25 01:55:25 +12:00
|
|
|
{/if}
|
|
|
|
|
{#if avatar}
|
|
|
|
|
<Avatar {initials} />
|
|
|
|
|
{/if}
|
|
|
|
|
{#if title}
|
|
|
|
|
<Body>{title}</Body>
|
|
|
|
|
{/if}
|
|
|
|
|
{#if subtitle}
|
|
|
|
|
<Label>{subtitle}</Label>
|
|
|
|
|
{/if}
|
|
|
|
|
</div>
|
2023-01-19 02:56:53 +13:00
|
|
|
{#if $$slots.default}
|
|
|
|
|
<div class="right">
|
|
|
|
|
<slot />
|
|
|
|
|
</div>
|
|
|
|
|
{/if}
|
2022-06-25 01:55:25 +12:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.list-item {
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
height: 56px;
|
2022-08-03 03:06:20 +12:00
|
|
|
background: var(--spectrum-global-color-gray-50);
|
2022-06-25 01:55:25 +12:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
border: 1px solid var(--spectrum-global-color-gray-300);
|
2022-08-03 03:06:20 +12:00
|
|
|
transition: background 130ms ease-out;
|
2023-01-19 02:56:53 +13:00
|
|
|
gap: var(--spacing-m);
|
2022-06-25 01:55:25 +12:00
|
|
|
}
|
|
|
|
|
.list-item:not(:first-child) {
|
|
|
|
|
border-top: none;
|
|
|
|
|
}
|
|
|
|
|
.list-item:first-child {
|
|
|
|
|
border-top-left-radius: 4px;
|
|
|
|
|
border-top-right-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
.list-item:last-child {
|
|
|
|
|
border-bottom-left-radius: 4px;
|
|
|
|
|
border-bottom-right-radius: 4px;
|
|
|
|
|
}
|
2022-08-03 03:06:20 +12:00
|
|
|
.hoverable:hover {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
background: var(--spectrum-global-color-gray-75);
|
|
|
|
|
}
|
2022-06-25 01:55:25 +12:00
|
|
|
.left,
|
|
|
|
|
.right {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: var(--spacing-xl);
|
|
|
|
|
}
|
|
|
|
|
.left {
|
|
|
|
|
width: 0;
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
}
|
|
|
|
|
.right {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.list-item :global(.spectrum-Icon),
|
|
|
|
|
.list-item :global(.spectrum-Avatar) {
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.list-item :global(.spectrum-Body) {
|
|
|
|
|
color: var(--spectrum-global-color-gray-900);
|
|
|
|
|
}
|
|
|
|
|
.list-item :global(.spectrum-Body) {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
