ClintchizandClaude Opus 5.5
1bed8e4b74
Redesign - Shared field foundation rules (duplicated across 15 form components and emitted globally) are now identical everywhere, so later copies no longer silently override earlier redesigns. - Drawn checkbox and radio controls, white switch thumbs (the thumb was the text colour, a black blob in light mode), recessed field wells, keycap actions in Modal, Drawer, Popover, Toaster, Pagination, Stepper, DataTable. - Menus (Dropdown, ContextMenu, Popover, Select dropdown, Navbar panels) share one flat raised panel with neutral hover rows and mono section labels. - Alerts with an accent rail and icon chip; card headers without the grey band; accordion, collapse, list, list group, timeline, stats, metrics, chat, skeleton, avatar group, clipboard, splitter, section, sidebar, navbar and upload progress restyled. - Chart rebuilt: nice y-axis ticks, gridlines, rounded bars, line and area modes, hover tooltips, hidden series leave the scale. Fixes - Checkbox and radio labels toggle their input again (empty for="" broke it). - TimePicker kept every clicked time pressed; only the chosen hour and minute are pressed now, and nothing is pressed before a value exists. - ColorPicker hex readout now follows the picked colour. - Disabled FileInput no longer shows the native file-input text. - Date and time panels float instead of pushing content. - ContextMenu opened at the pointer closes on scroll. - Drawer left/top/bottom placements slide from their own edge again. - Image-only Card no longer renders an empty body strip. - Timeline supports item.time, current/upcoming states, sizes and compact/alternate variants; showcase demos use distinct variants. - ChatBubble: delivery receipts (sending/sent/delivered/read/failed/error) and meta aligned to its bubble. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
173 lines
6.6 KiB
Plaintext
173 lines
6.6 KiB
Plaintext
component Clipboard {
|
|
outputs {
|
|
copy(payload: { value: string; sourceEvent?: Event })
|
|
success(payload: { value: string; sourceEvent?: Event })
|
|
error(payload: { error: Error | string; value: string; sourceEvent?: Event })
|
|
}
|
|
|
|
props {
|
|
value: string = ""
|
|
label: string = "Copy"
|
|
copiedLabel: string = "Copied"
|
|
errorLabel: string = "Copy failed"
|
|
title: string = "Clipboard"
|
|
description: string = ""
|
|
iconOnly: boolean = false
|
|
code: boolean = true
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
disabled: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
state status = "idle"
|
|
|
|
functions {
|
|
client function resetStatus() { status = "idle" }
|
|
client function copySucceeded() {
|
|
status = "success"
|
|
output.success({ value: value })
|
|
setTimeout(resetStatus, 1600)
|
|
}
|
|
client function copyFailed(error) {
|
|
status = "error"
|
|
output.error({ error: error, value: value })
|
|
setTimeout(resetStatus, 1600)
|
|
}
|
|
client function copyValue(sourceEvent) {
|
|
if (disabled || status === "copying") {
|
|
return
|
|
}
|
|
status = "copying"
|
|
output.copy({ value: value, sourceEvent: sourceEvent })
|
|
if (!window.navigator.clipboard || !window.navigator.clipboard.writeText) {
|
|
copyFailed(new Error("Clipboard API is unavailable"))
|
|
return
|
|
}
|
|
return window.navigator.clipboard.writeText(value).then(copySucceeded).catch(copyFailed)
|
|
}
|
|
}
|
|
|
|
view {
|
|
<section
|
|
{...attrs}
|
|
data-ui-component="Clipboard"
|
|
data-status='{status}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
class='wrn-clipboard {class}'
|
|
>
|
|
{#if title}<strong class="wrn-clipboard__title">{title}</strong>{/if}
|
|
{#if description}<p class="wrn-clipboard__description">{description}</p>{/if}
|
|
<div class="wrn-clipboard__control">
|
|
{#if code}
|
|
<code class="wrn-clipboard__value">{value}</code>
|
|
{:else}
|
|
<span class="wrn-clipboard__value">{value}</span>
|
|
{/if}
|
|
<button
|
|
type="button"
|
|
class="wrn-clipboard__button"
|
|
disabled='{disabled}'
|
|
aria-label='{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}'
|
|
@click='copyValue(event)'
|
|
>
|
|
<span class="icon-[lucide--copy] wrn-clipboard__icon" data-show='status !== "success"' aria-hidden="true"></span>
|
|
<span class="icon-[lucide--check] wrn-clipboard__icon" data-show='status === "success"' aria-hidden="true"></span>
|
|
{#if !iconOnly}<span>{status === "success" ? copiedLabel : status === "error" ? errorLabel : label}</span>{/if}
|
|
</button>
|
|
</div>
|
|
<slot />
|
|
</section>
|
|
}
|
|
|
|
style {
|
|
.wrn-clipboard { display: grid; gap: 0.375rem; color: var(--wrn-color-text); }
|
|
.wrn-clipboard__title { font-size: 0.8125rem; font-weight: 600; }
|
|
.wrn-clipboard__description { margin: 0; color: var(--wrn-color-text-muted, var(--wrn-color-muted)); font-size: 0.78rem; }
|
|
|
|
/* Plain values sit in a recessed field well; code values (the default)
|
|
sit on the code surface so they read as something to paste. */
|
|
.wrn-clipboard__control {
|
|
display: flex;
|
|
min-width: 0;
|
|
min-height: 2.75rem;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
|
|
border: 1px solid var(--wrn-color-input-border, var(--wrn-color-border));
|
|
border-radius: var(--wrn-radius-sm);
|
|
background: var(--wrn-color-input-background, var(--wrn-color-surface));
|
|
box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
|
|
}
|
|
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__control {
|
|
border-color: var(--wrn-color-code-border, #262a33);
|
|
background: var(--wrn-color-code-background, #14161b);
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
|
|
}
|
|
.wrn-clipboard__value {
|
|
min-width: 0;
|
|
flex: 1;
|
|
overflow-x: auto;
|
|
padding: 0.25rem 0;
|
|
color: var(--wrn-color-text);
|
|
background: transparent;
|
|
font: inherit;
|
|
font-size: 0.8125rem;
|
|
white-space: nowrap;
|
|
scrollbar-width: none;
|
|
}
|
|
code.wrn-clipboard__value {
|
|
color: var(--wrn-color-code-text, #e6e9f0);
|
|
font-family: var(--wrn-font-mono, ui-monospace, monospace);
|
|
font-size: 0.8rem;
|
|
}
|
|
.wrn-clipboard__value::-webkit-scrollbar { display: none; }
|
|
|
|
.wrn-clipboard__button {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
min-height: 2rem;
|
|
padding: 0 0.7rem;
|
|
border: 1px solid var(--wrn-color-border);
|
|
border-bottom-color: var(--wrn-color-border-strong, var(--wrn-color-border));
|
|
border-radius: calc(var(--wrn-radius-sm) - 2px);
|
|
color: var(--wrn-color-text);
|
|
background: linear-gradient(180deg, var(--wrn-color-surface), var(--wrn-color-surface-soft, var(--wrn-color-surface)));
|
|
box-shadow: var(--wrn-shadow-1);
|
|
font: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
|
|
}
|
|
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button {
|
|
border-color: rgb(255 255 255 / 0.12);
|
|
color: var(--wrn-color-code-text, #e6e9f0);
|
|
background: rgb(255 255 255 / 0.06);
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
|
|
}
|
|
.wrn-clipboard__button:hover:not(:disabled) { background: var(--wrn-color-surface); }
|
|
.wrn-clipboard:has(code.wrn-clipboard__value) .wrn-clipboard__button:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); }
|
|
.wrn-clipboard__button:active:not(:disabled) { transform: translateY(1px); }
|
|
.wrn-clipboard__button:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: 2px; }
|
|
.wrn-clipboard__button:disabled { cursor: not-allowed; opacity: 0.5; }
|
|
.wrn-clipboard[data-status="success"] .wrn-clipboard__button,
|
|
.wrn-clipboard[data-status="success"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
|
|
border-color: color-mix(in srgb, var(--wrn-color-success) 50%, transparent);
|
|
color: var(--wrn-color-success);
|
|
background: color-mix(in srgb, var(--wrn-color-success) 14%, transparent);
|
|
}
|
|
.wrn-clipboard[data-status="error"] .wrn-clipboard__button,
|
|
.wrn-clipboard[data-status="error"]:has(code.wrn-clipboard__value) .wrn-clipboard__button {
|
|
border-color: color-mix(in srgb, var(--wrn-color-danger) 50%, transparent);
|
|
color: var(--wrn-color-danger);
|
|
background: color-mix(in srgb, var(--wrn-color-danger) 12%, transparent);
|
|
}
|
|
.wrn-clipboard__icon { width: 0.875rem; height: 0.875rem; flex: none; }
|
|
|
|
}
|
|
}
|