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>
94 lines
4.4 KiB
Plaintext
94 lines
4.4 KiB
Plaintext
component Map {
|
|
outputs {
|
|
// markerClick and select both fire for a marker press; select is the
|
|
// generic name callers reach for, markerClick the explicit one.
|
|
markerClick(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
select(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
zoom(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
title: string = "Map"
|
|
description: string = ""
|
|
items: unknown[] = []
|
|
variant: string = "default"
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<section
|
|
data-ui-component="Map"
|
|
aria-label='{title}'
|
|
class='overflow-hidden rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] shadow-sm {class}'
|
|
>
|
|
{#if title || description}
|
|
<header class="flex items-start justify-between gap-4 border-b border-[var(--wire-color-border)] p-5">
|
|
<div>
|
|
{#if title}
|
|
<h3 class="text-lg font-bold text-[var(--wire-color-text)]">{title}</h3>
|
|
{/if}
|
|
{#if description}
|
|
<p class="mt-1 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
|
|
{/if}
|
|
</div>
|
|
<span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
|
|
<span class="icon-[lucide--map] size-5" aria-hidden="true"></span>
|
|
</span>
|
|
</header>
|
|
{/if}
|
|
|
|
<div
|
|
class="relative isolate overflow-hidden bg-[var(--wire-color-surface-soft)]"
|
|
class:h-64='size === "sm"'
|
|
class:h-80='size === "default" || size === "md"'
|
|
class:h-[28rem]='size === "lg"'
|
|
>
|
|
<div
|
|
class="pointer-events-none absolute inset-0 opacity-50"
|
|
style="background-image: linear-gradient(var(--wire-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--wire-color-border) 1px, transparent 1px); background-size: 32px 32px;"
|
|
aria-hidden="true"
|
|
></div>
|
|
|
|
<div class="absolute inset-0 flex items-center justify-center p-6">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
{#if items.length > 0}
|
|
{#each items as item, index}
|
|
<button
|
|
type="button"
|
|
aria-label='{item.label || item.title || "Map marker"}'
|
|
class="absolute inline-flex size-10 items-center justify-center rounded-full border-4 border-[var(--wire-color-surface-raised)] bg-[var(--wire-color-primary)] text-[var(--wire-color-on-primary)] shadow-lg transition hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
|
|
style='left: {item.x || (20 + index * 12)}%; top: {item.y || (30 + (index % 3) * 18)}%;'
|
|
@click='output.markerClick(item); output.select(item)'
|
|
>
|
|
<span class='{item.icon || "icon-[lucide--map-pin]"}' aria-hidden="true"></span>
|
|
</button>
|
|
{/each}
|
|
{/if}
|
|
|
|
<div class="absolute bottom-4 right-4 flex flex-col gap-2">
|
|
<button
|
|
type="button"
|
|
aria-label="Zoom in"
|
|
class="inline-flex size-10 items-center justify-center rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-text)] shadow-sm transition hover:bg-[var(--wire-color-surface-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
|
|
@click='output.zoom({ direction: "in" })'
|
|
>
|
|
<span class="icon-[lucide--plus] size-4" aria-hidden="true"></span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
aria-label="Zoom out"
|
|
class="inline-flex size-10 items-center justify-center rounded-xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-text)] shadow-sm transition hover:bg-[var(--wire-color-surface-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
|
|
@click='output.zoom({ direction: "out" })'
|
|
>
|
|
<span class="icon-[lucide--minus] size-4" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|