ClintchizandClaude Opus 5
7a2b58652a
Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6, and rebuilds the editor compiler, language server and extension bundles that embed the version. The release carries the output delivery fix: camelCase outputs now reach parent bindings, and 18 components emit through output.* instead of hand-built CustomEvents. See the 0.8.6 migration entry for what changes for consumers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
88 lines
3.5 KiB
Plaintext
88 lines
3.5 KiB
Plaintext
component Timeline {
|
|
outputs {
|
|
select(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Timeline"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
data-ui-component="Timeline"
|
|
aria-label='{title}'
|
|
class='w-full {class}'
|
|
>
|
|
{#if title || description}
|
|
<header class="mb-6">
|
|
{#if title}
|
|
<h3 class="text-xl font-bold text-[var(--wire-color-text)]">{title}</h3>
|
|
{/if}
|
|
{#if description}
|
|
<p class="mt-2 max-w-2xl leading-7 text-[var(--wire-color-text-muted)]">{description}</p>
|
|
{/if}
|
|
</header>
|
|
{/if}
|
|
|
|
<ol class="relative ml-4 border-l border-[var(--wire-color-border)]">
|
|
{#each items as item, index}
|
|
<li
|
|
class="relative pb-8 pl-8 last:pb-0"
|
|
@click='output.select({ item: item, index: index })'
|
|
>
|
|
<span
|
|
class="absolute -left-[1.05rem] top-0 flex size-8 items-center justify-center rounded-full border-4 border-[var(--wire-color-background)] bg-[var(--wire-color-primary)] text-[var(--wire-color-on-primary)] shadow-sm"
|
|
class:bg-[var(--wire-color-success)]='item.status === "complete" || item.status === "success"'
|
|
class:bg-[var(--wire-color-warning)]='item.status === "warning" || item.status === "pending"'
|
|
class:bg-[var(--wire-color-danger)]='item.status === "danger" || item.status === "failed"'
|
|
>
|
|
<span class='{item.icon || "icon-[lucide--circle]"}' aria-hidden="true"></span>
|
|
</span>
|
|
|
|
<article
|
|
class="rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-5 shadow-sm"
|
|
class:border-transparent='variant === "minimal"'
|
|
class:bg-transparent='variant === "minimal"'
|
|
class:p-0='variant === "minimal"'
|
|
class:shadow-none='variant === "minimal"'
|
|
>
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
|
|
<div>
|
|
<h4 class="font-bold text-[var(--wire-color-text)]">{item.title || item.label}</h4>
|
|
{#if item.subtitle}
|
|
<p class="mt-1 text-sm font-medium text-[var(--wire-color-primary)]">{item.subtitle}</p>
|
|
{/if}
|
|
</div>
|
|
{#if item.date || item.meta}
|
|
<time class="shrink-0 text-sm text-[var(--wire-color-text-muted)]">{item.date || item.meta}</time>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if item.description}
|
|
<p class="mt-3 text-sm leading-6 text-[var(--wire-color-text-muted)]">{item.description}</p>
|
|
{/if}
|
|
|
|
{#if item.href}
|
|
<a href='{item.href}' class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[var(--wire-color-primary)] hover:text-[var(--wire-color-primary-hover)]">
|
|
<span>{item.actionLabel || "View details"}</span>
|
|
<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true"></span>
|
|
</a>
|
|
{/if}
|
|
</article>
|
|
</li>
|
|
{:empty}
|
|
<li class="pl-8 text-sm text-[var(--wire-color-text-muted)]">No timeline items available.</li>
|
|
{/each}
|
|
</ol>
|
|
|
|
<slot></slot>
|
|
</section>
|
|
}
|
|
}
|