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>
104 lines
3.3 KiB
Plaintext
104 lines
3.3 KiB
Plaintext
component Badge {
|
|
outputs {
|
|
dismiss(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
|
|
}
|
|
|
|
props {
|
|
label: string = "Badge"
|
|
size: string = "md"
|
|
color: string = "primary"
|
|
variant: string = "solid"
|
|
shape: string = "pill"
|
|
class: string = ""
|
|
|
|
icon: string = ""
|
|
iconPosition: string = "start"
|
|
dot: boolean = false
|
|
dotOnly: boolean = false
|
|
dotLabel: string = "Status"
|
|
animated: boolean = false
|
|
|
|
avatarSrc: string = ""
|
|
avatarAlt: string = ""
|
|
dismissible: boolean = false
|
|
dismissLabel: string = "Remove badge"
|
|
truncate: boolean = false
|
|
maxWidth: string = "12rem"
|
|
|
|
anchorLabel: string = ""
|
|
anchorIcon: string = ""
|
|
placement: string = "inline"
|
|
anchorLabelText: string = "Badge anchor"
|
|
|
|
}
|
|
|
|
state visible: boolean = true
|
|
|
|
functions {
|
|
// output.dismiss reaches a parent @dismiss binding; a raw dispatchEvent on
|
|
// the root does not. The runtime registers parent handlers in a registry
|
|
// that only the output proxy consults, so the CustomEvent this used to
|
|
// build bubbled past every binding and was never seen by anyone.
|
|
client function dismissBadge() {
|
|
visible = false
|
|
output.dismiss({ component: "Badge", label: label })
|
|
}
|
|
}
|
|
|
|
view {
|
|
<span
|
|
{...attrs}
|
|
class="wire-next wire-next--badge-root {anchorLabel || anchorIcon ? 'wire-next--badge-anchored' : ''} {class}"
|
|
data-wrn-badge
|
|
data-placement="{placement}"
|
|
data-show="visible"
|
|
aria-hidden="{visible ? 'false' : 'true'}"
|
|
>
|
|
{#if anchorLabel || anchorIcon}
|
|
<button type="button" class="wire-next__badge-anchor" aria-label="{anchorLabelText}">
|
|
{#if anchorIcon}<span class="{anchorIcon}" aria-hidden="true"></span>{/if}
|
|
{#if anchorLabel}<span>{anchorLabel}</span>{/if}
|
|
</button>
|
|
{/if}
|
|
|
|
<span
|
|
class="wire-next__badge"
|
|
data-size="{size}"
|
|
data-color="{color}"
|
|
data-variant="{variant}"
|
|
data-shape="{shape}"
|
|
data-animated="{animated ? 'true' : 'false'}"
|
|
style="--wire-badge-max-width:{maxWidth}"
|
|
role="{dotOnly ? 'status' : ''}"
|
|
aria-label="{dotOnly ? dotLabel : ''}"
|
|
>
|
|
{#if animated}
|
|
<span class="wire-next__badge-ping" aria-hidden="true"></span>
|
|
{/if}
|
|
{#if avatarSrc}
|
|
<img class="wire-next__badge-avatar" src="{avatarSrc}" alt="{avatarAlt}" loading="lazy" />
|
|
{/if}
|
|
{#if dot || dotOnly}
|
|
<span class="wire-next__badge-dot" aria-hidden="true"></span>
|
|
{/if}
|
|
{#if icon && iconPosition === "start"}
|
|
<span class="wire-next__badge-icon {icon}" aria-hidden="true"></span>
|
|
{/if}
|
|
{#if !dotOnly}
|
|
<span class="wire-next__badge-label {truncate ? 'wire-next__badge-label--truncate' : ''}">
|
|
{label}
|
|
</span>
|
|
{/if}
|
|
{#if icon && iconPosition === "end"}
|
|
<span class="wire-next__badge-icon {icon}" aria-hidden="true"></span>
|
|
{/if}
|
|
{#if dismissible}
|
|
<button type="button" class="wire-next__badge-dismiss" aria-label="{dismissLabel}" @click="dismissBadge(event)">
|
|
<span class="icon-[lucide--x]" aria-hidden="true"></span>
|
|
</button>
|
|
{/if}
|
|
</span>
|
|
</span>
|
|
}
|
|
}
|