ClintchizandClaude Opus 5
949cf78636
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>
439 lines
14 KiB
Plaintext
439 lines
14 KiB
Plaintext
// Modal demo page. Route: /modal
|
|
//
|
|
// Five real-world use cases for the shared @wrnexus/ui Modal component — each
|
|
// one exercises a different combination of props (color, variant, size,
|
|
// scrollable, destructive, showFooter, confirmDisabled) instead of just
|
|
// showing the same modal five times.
|
|
//
|
|
// Notifications go through the shared <Toaster /> mounted at the bottom of
|
|
// this page. Any client expression can raise one with the runtime global —
|
|
// toast("..."), toast.success(...), toast.error(...) — so pages never
|
|
// hand-roll a status banner and never reach for a blocking alert().
|
|
//
|
|
// No import here on purpose: component tags resolve by directory scan, and
|
|
// @wrnexus/ui's index.ts intentionally has no runtime exports (registry.ts
|
|
// holds the server-only filesystem helpers instead) — an explicit
|
|
// `import { Modal } from "@wrnexus/ui"` fails to bundle since there's no
|
|
// matching export. The WRN-IMPORT-IMPLICIT warning this triggers is safe to
|
|
// ignore for component tags.
|
|
page ModalPage {
|
|
|
|
state noteText = "Remember to ship the release notes"
|
|
state deletedNote = ""
|
|
|
|
functions {
|
|
function onSaveConfirmed() {
|
|
toast.success("Changes saved", { title: "Draft published" })
|
|
}
|
|
|
|
function onDeleteConfirmed() {
|
|
toast.error("Account deleted", { title: "Gone for good", duration: 6000 })
|
|
}
|
|
|
|
// Toast actions and component state.
|
|
//
|
|
// An action callback runs LONG AFTER the function that created it
|
|
// returned, and a client function only flushes its state when its body
|
|
// ends -- so assigning noteText straight from the callback would write to
|
|
// a dead local and vanish. The callback dispatches an event instead, and
|
|
// the declarative @window binding on the actions row below handles it as
|
|
// a fresh invocation with live state. Anything that is not component
|
|
// state (calling toast(), fetch, navigation) works from the callback
|
|
// directly.
|
|
function onDeleteNote() {
|
|
deletedNote = noteText
|
|
noteText = ""
|
|
toast("Note deleted", {
|
|
title: "Deleted",
|
|
actionLabel: "Undo",
|
|
onAction: function () {
|
|
window.dispatchEvent(new CustomEvent("demo:restore-note"))
|
|
},
|
|
duration: 8000
|
|
})
|
|
}
|
|
|
|
function restoreNote() {
|
|
if (!deletedNote) {
|
|
return
|
|
}
|
|
noteText = deletedNote
|
|
deletedNote = ""
|
|
toast.success("Note restored")
|
|
}
|
|
|
|
// Two actions. The second is styled destructive and keeps the toast open
|
|
// (dismiss: false) so the choice stays on screen until it is resolved.
|
|
function onConflict() {
|
|
toast.warning("This note changed in another tab", {
|
|
title: "Conflict",
|
|
actions: [
|
|
{
|
|
label: "Keep mine",
|
|
onClick: function () { toast.success("Kept your version") }
|
|
},
|
|
{
|
|
label: "Discard",
|
|
tone: "danger",
|
|
dismiss: false,
|
|
onClick: function () {
|
|
window.dispatchEvent(new CustomEvent("demo:discard-note"))
|
|
}
|
|
}
|
|
],
|
|
duration: 0
|
|
})
|
|
}
|
|
|
|
function discardNote() {
|
|
deletedNote = noteText
|
|
noteText = ""
|
|
toast.error("Your changes were discarded")
|
|
}
|
|
|
|
// Tones carry their own icon and colour, but any toast can override it.
|
|
// The class lives in this page source, so the app Tailwind/iconify build
|
|
// sees it and emits the rule -- a class from inside @wrnexus/ui would not
|
|
// be scanned, which is why the packaged defaults are inline SVG.
|
|
function onTrialNotice() {
|
|
toast.warning("Your trial ends in 3 days", {
|
|
title: "Heads up",
|
|
icon: "icon-[lucide--hourglass]",
|
|
actionLabel: "Upgrade",
|
|
duration: 6000
|
|
})
|
|
}
|
|
|
|
function onTermsConfirmed() {
|
|
toast.success("Thanks, you are all set")
|
|
}
|
|
|
|
// The invite form is a real <form data-schema="invite">, so
|
|
// @wrnexus/validation owns the rules: it validates on input/blur/submit
|
|
// against app/schemas/invite.ts, writes each message into the
|
|
// [data-error] slot the Input renders, and only then POSTs to /api/invite — which parses
|
|
// the very same schema server-side. These two handlers just react to the
|
|
// outcome events the validator emits.
|
|
function onInviteSent(event) {
|
|
toast.success("Invite sent to " + event.detail.email, { title: "Invitation" })
|
|
// Close the modal the form lives in. The event bubbles from the form up
|
|
// to the Modal root, which listens for it -- so the page never needs a
|
|
// handle on the modal or a way to reach its internal state.
|
|
event.target.dispatchEvent(
|
|
new CustomEvent("wrnexus:modal:close", { bubbles: true })
|
|
)
|
|
}
|
|
|
|
function onInviteFailed(event) {
|
|
toast.error(event.detail.message || "Could not send the invite", {
|
|
title: "Invite failed"
|
|
})
|
|
}
|
|
}
|
|
|
|
style {
|
|
.modal-demo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.modal-demo-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
padding: 1.1rem;
|
|
background: var(--wire-color-surface-raised);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
/*
|
|
* Direct children only. A modal mounts *inside* its card, and its panel is
|
|
* position: fixed but still a DOM descendant -- so a plain
|
|
* `.modal-demo-card p` also styles the copy inside the open modal, which
|
|
* repainted the destructive modal body muted grey on its red panel. The
|
|
* card is describing its own blurb here, not everything a component it
|
|
* hosts happens to render.
|
|
*/
|
|
.modal-demo-card > h2 {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.modal-demo-card > p {
|
|
margin: 0;
|
|
color: var(--wire-color-text-muted);
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.modal-demo-form {
|
|
display: grid;
|
|
gap: 0.9rem;
|
|
}
|
|
|
|
.modal-demo-form-error {
|
|
margin: 0;
|
|
color: var(--wire-color-danger);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.modal-demo-form-error:empty {
|
|
display: none;
|
|
}
|
|
|
|
.modal-demo-submit {
|
|
appearance: none;
|
|
min-height: 2.55rem;
|
|
padding: 0.65rem 1rem;
|
|
color: var(--wire-color-secondary-contrast);
|
|
background: var(--wire-color-secondary);
|
|
border: 0;
|
|
border-radius: 0.78rem;
|
|
font: inherit;
|
|
font-size: 0.83rem;
|
|
font-weight: 650;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-demo-toast-demos {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1.75rem;
|
|
color: var(--wire-color-text-muted);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.modal-demo-note {
|
|
color: var(--wire-color-text-muted);
|
|
}
|
|
|
|
.modal-demo-note em {
|
|
color: var(--wire-color-text);
|
|
font-style: normal;
|
|
}
|
|
|
|
.modal-demo-toast-demos button {
|
|
appearance: none;
|
|
padding: 0.4rem 0.7rem;
|
|
color: var(--wire-color-text);
|
|
background: var(--wire-color-surface-raised);
|
|
border: 1px solid var(--wire-color-border);
|
|
border-radius: 0.6rem;
|
|
font: inherit;
|
|
font-size: 0.78rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-demo-submit:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.modal-demo-terms {
|
|
max-height: 12rem;
|
|
overflow-y: auto;
|
|
padding-right: 0.5rem;
|
|
color: var(--wire-color-text-muted);
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
view {
|
|
<h1>Modal</h1>
|
|
<p>
|
|
Five common use cases for the shared <code>@wrnexus/ui</code>
|
|
<code>Modal</code> component — themed, accessible, and responsive out
|
|
of the box.
|
|
</p>
|
|
|
|
<div class="modal-demo-grid">
|
|
|
|
<!-- 1. Info-only modal: no footer, dismiss via close button/backdrop/Escape -->
|
|
<div class="modal-demo-card">
|
|
<h2>Info modal</h2>
|
|
<p>No footer, no actions — just content you dismiss.</p>
|
|
<Modal
|
|
title="What's new"
|
|
description="Release notes for this build."
|
|
triggerLabel="View release notes"
|
|
color="info"
|
|
variant="soft"
|
|
size="sm"
|
|
showFooter={false}
|
|
>
|
|
<p>
|
|
This release adds the shared <code>@wrnexus/ui</code>
|
|
<code>Modal</code> component to every app, fully themed to your
|
|
palette and dark/light mode.
|
|
</p>
|
|
</Modal>
|
|
</div>
|
|
|
|
<!-- 2. Standard confirm/cancel modal -->
|
|
<div class="modal-demo-card">
|
|
<h2>Confirmation</h2>
|
|
<p>Cancel/confirm with a primary action.</p>
|
|
<Modal
|
|
title="Save changes?"
|
|
description="You have unsaved edits on this page."
|
|
triggerLabel="Save changes"
|
|
color="primary"
|
|
variant="soft"
|
|
size="md"
|
|
cancelLabel="Discard"
|
|
confirmLabel="Save"
|
|
closeOnConfirm={true}
|
|
@confirm="onSaveConfirmed()"
|
|
>
|
|
<p>Saving will overwrite the previously published version.</p>
|
|
</Modal>
|
|
</div>
|
|
|
|
<!-- 3. Destructive confirmation -->
|
|
<div class="modal-demo-card">
|
|
<h2>Destructive action</h2>
|
|
<p>Danger styling for irreversible actions.</p>
|
|
<Modal
|
|
title="Delete account"
|
|
description="This action cannot be undone."
|
|
triggerLabel="Delete account"
|
|
color="danger"
|
|
variant="solid"
|
|
destructive={true}
|
|
cancelLabel="Keep account"
|
|
confirmLabel="Delete account"
|
|
closeOnConfirm={true}
|
|
@confirm="onDeleteConfirmed()"
|
|
>
|
|
<p>
|
|
All of your data, projects, and billing history will be
|
|
permanently removed.
|
|
</p>
|
|
</Modal>
|
|
</div>
|
|
|
|
<!-- 4. Form modal. The form owns its own submit button, so the Modal
|
|
footer is turned off: @wrnexus/validation binds to form[data-schema]
|
|
and drives the whole flow (validate on input/blur, block submit
|
|
while invalid, POST to /api/invite, emit wire:success or
|
|
wire:error). Nothing here re-implements a rule that
|
|
app/schemas/invite.ts already states. -->
|
|
<div class="modal-demo-card">
|
|
<h2>Form modal</h2>
|
|
<p>Real Input fields, validated by the shared schema on both sides.</p>
|
|
<Modal
|
|
title="Invite a teammate"
|
|
description="They will get an email with a link to join."
|
|
triggerLabel="Invite teammate"
|
|
color="secondary"
|
|
variant="soft"
|
|
size="md"
|
|
showFooter={false}
|
|
>
|
|
<form
|
|
class="modal-demo-form"
|
|
data-schema="invite"
|
|
method="post"
|
|
action="/api/invite"
|
|
@wire:success="onInviteSent(event)"
|
|
@wire:error="onInviteFailed(event)"
|
|
>
|
|
<Input
|
|
name="email"
|
|
type="email"
|
|
label="Email address"
|
|
placeholder="teammate@company.com"
|
|
autocomplete="email"
|
|
icon="icon-[lucide--mail]"
|
|
required={true}
|
|
helperText="They will get a one-time link to join your workspace."
|
|
/>
|
|
<Input
|
|
name="message"
|
|
label="Note (optional)"
|
|
placeholder="Looking forward to working with you"
|
|
maxlength="140"
|
|
icon="icon-[lucide--message-square]"
|
|
cornerHint="Optional"
|
|
/>
|
|
<p class="modal-demo-form-error" data-error="_form"></p>
|
|
<button type="submit" class="modal-demo-submit">Send invite</button>
|
|
</form>
|
|
</Modal>
|
|
</div>
|
|
|
|
<!-- 5. Large scrollable content, backdrop-click disabled -->
|
|
<div class="modal-demo-card">
|
|
<h2>Scrollable content</h2>
|
|
<p>Larger size, scrollable body, no accidental backdrop dismiss.</p>
|
|
<Modal
|
|
title="Terms of service"
|
|
description="Please review before continuing."
|
|
triggerLabel="Read terms"
|
|
color="primary"
|
|
variant="outline"
|
|
size="lg"
|
|
scrollable={true}
|
|
closeOnBackdrop={false}
|
|
cancelLabel=""
|
|
confirmLabel="I agree"
|
|
closeOnConfirm={true}
|
|
@confirm="onTermsConfirmed()"
|
|
>
|
|
<div class="modal-demo-terms">
|
|
<p>
|
|
This is placeholder terms-of-service copy used to demonstrate a
|
|
tall, scrollable modal body. In a real app this slot would hold
|
|
your actual legal text.
|
|
</p>
|
|
<p>
|
|
1. You agree to use this framework responsibly. 2. Components
|
|
are provided as-is, themed to your app's palette. 3. Scrollable
|
|
modals keep the header and footer fixed while the body scrolls
|
|
independently, so long content never breaks the layout.
|
|
</p>
|
|
<p>
|
|
4. Clicking the backdrop will not close this particular modal —
|
|
that is controlled by the <code>closeOnBackdrop</code> prop,
|
|
set to <code>false</code> here on purpose so an explicit choice
|
|
is required. 5. Pressing Escape still works, since
|
|
<code>closeOnEscape</code> defaults to <code>true</code>.
|
|
</p>
|
|
</div>
|
|
</Modal>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="modal-demo-toast-demos">
|
|
Toast tones:
|
|
<button type="button" @click='toast.success("Everything went through", { title: "Success" })'>success</button>
|
|
<button type="button" @click='toast.error("That did not work", { title: "Error" })'>danger</button>
|
|
<button type="button" @click='onTrialNotice()'>warning + custom icon</button>
|
|
<button type="button" @click='toast.info("Just so you know")'>info</button>
|
|
</p>
|
|
|
|
<p
|
|
class="modal-demo-toast-demos"
|
|
@window:demo:restore-note="restoreNote()"
|
|
@window:demo:discard-note="discardNote()"
|
|
>
|
|
Toast actions:
|
|
<button type="button" @click="onDeleteNote()">delete note (undo)</button>
|
|
<button type="button" @click="onConflict()">conflict (two actions)</button>
|
|
<span class="modal-demo-note">Note: <em data-show="noteText">{noteText}</em><em data-show="!noteText">(deleted)</em></span>
|
|
</p>
|
|
|
|
<!-- One host per page (a real app puts this in the layout). Every
|
|
toast() call anywhere on the page lands here. -->
|
|
<Toaster position="bottom-right" duration={4500} max={4} />
|
|
|
|
}
|
|
}
|