Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<script lang="ts" generics="E extends { uri: string }"> import type { Snippet } from "svelte"; import type { Attachment } from "svelte/attachments"; import ArrowDown from "$icon/arrow-down"; import Button from "$lib/components/ui/Button.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import TimelineCard from "$lib/components/timeline/TimelineCard.svelte"; import type { TimelineEvent } from "$lib/components/timeline/group";
const COLLAPSED_COUNT = 3;
let { title, items, singular, plural, row, trailing }: { title: Snippet; items: TimelineEvent<E>[]; singular: string; plural: string; row: Snippet<[E]>; trailing?: Snippet; } = $props();
let expanded = $state(false);
const visible = $derived(expanded ? items : items.slice(0, COLLAPSED_COUNT)); const hidden = $derived(items.length - visible.length);
const hideWhenWrapping: Attachment<HTMLElement> = (node) => { const header = node.parentElement!; const fit = () => { node.style.display = "none"; const bare = header.offsetHeight; node.style.display = ""; if (header.offsetHeight > bare) node.style.display = "none"; }; const observer = new ResizeObserver(fit); observer.observe(header); return () => observer.disconnect(); };</script>
<TimelineCard padded={false}> {#snippet header()} {@render title()} {#if trailing} <span class="contents" {@attach hideWhenWrapping}>{@render trailing()}</span> {/if} <TimeAgo value={items[0].eventAt} class="text-foreground-subtle" /> {/snippet}
<div class="divide-y divide-border-default"> {#each visible as item (item.event.uri)} <div class="p-md pt-sm"> {@render row(item.event)} </div> {/each} </div> {#if hidden > 0} <div class="flex justify-center border-t border-border-default bg-background-subtle p-xs dark:bg-background-canvas" > <Button icon={ArrowDown} onclick={() => (expanded = true)}> Show {hidden} more {hidden === 1 ? singular : plural} </Button> </div> {/if}</TimelineCard>