feat(ui): add DataTable and Toaster, drop the legacy Table, fix overlay dialogs
DataTable replaces the 20-line Table scaffold entirely: columns, sorting, filtering, pagination, selection, bulk actions, comparison layout, sticky first column, custom HTML cells, and a remote source driven by a `request` output rather than a function prop (props travel as HTML attributes, so a function arrives as its own source text). Toaster replaces the hand-rolled status div: tone icons, actions, hover pause/resume and a progress bar. Overlays audit -- Modal and Drawer declared aria-modal="true" but nothing ever moved focus into the panel, so the @keydown handler on their root never ran and closeOnEscape did nothing. Focus, focus restore, a Tab trap and a body scroll lock now live in the reactive runtime, shared by both. ContextMenu placed pointer menus by subtracting a guessed 340x420 from the viewport, which pushed every menu that was not that size away from the pointer; it now positions at the pointer and lets the anchored clamp pull it back once it can be measured. The reactive runtime size budget moves 150k -> 175k to cover anchored overlays, dialog behaviour, the toaster and the DataTable client half. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -1,121 +0,0 @@
|
||||
component Modal {
|
||||
props {
|
||||
@event onConfirmed = function
|
||||
}
|
||||
|
||||
state isOpen = false
|
||||
|
||||
functions {
|
||||
function confirmed() {
|
||||
isOpen = false;
|
||||
if(onConfirmed) {
|
||||
onConfirmed()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<main
|
||||
class="flex min-h-screen items-center justify-center bg-[var(--wire-color-background)] p-6"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-3 font-semibold text-white shadow-lg transition hover:opacity-90"
|
||||
@click="isOpen = true"
|
||||
>
|
||||
Open Transparent Modal
|
||||
</button>
|
||||
|
||||
<div
|
||||
class:hidden="isOpen == false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 p-4 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="relative w-full max-w-lg overflow-hidden rounded-3xl border border-white/20 bg-white/10 p-6 shadow-2xl backdrop-blur-2xl dark:border-white/10 dark:bg-black/20"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-none absolute -right-20 -top-20 h-48 w-48 rounded-full bg-[var(--wire-color-primary)]/30 blur-3xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="pointer-events-none absolute -bottom-20 -left-20 h-48 w-48 rounded-full bg-cyan-500/20 blur-3xl"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative z-10"
|
||||
>
|
||||
<div
|
||||
class="mb-6 flex items-start justify-between gap-4"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
class="mb-2 text-sm font-semibold uppercase tracking-wider text-[var(--wire-color-primary)]"
|
||||
>
|
||||
Transparent Modal
|
||||
</p>
|
||||
|
||||
<h2
|
||||
class="text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
>
|
||||
Welcome to WRNexusJS
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted)]"
|
||||
>
|
||||
This modal uses a transparent glass background with blur,
|
||||
soft borders, and theme-aware colors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close modal"
|
||||
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/20 bg-white/10 text-xl text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-2xl border border-white/20 bg-white/10 p-4 backdrop-blur-lg dark:border-white/10 dark:bg-black/10"
|
||||
>
|
||||
<p
|
||||
class="text-sm text-[var(--wire-color-text-muted)]"
|
||||
>
|
||||
You can place forms, confirmation messages, account details,
|
||||
images, or any other component inside this modal.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl border border-white/20 bg-white/10 px-5 py-2.5 font-medium text-[var(--wire-color-text)] transition hover:bg-white/20 dark:border-white/10 dark:bg-black/20 dark:hover:bg-black/30"
|
||||
@click="isOpen = false"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-xl bg-[var(--wire-color-primary)] px-5 py-2.5 font-semibold text-white shadow-lg transition hover:opacity-90"
|
||||
@click="confirmed()"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
}
|
||||
|
||||
style {
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user