ClintchizandClaude Opus 5.5
c0ac38c572
- Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
7 lines
1.9 KiB
Plaintext
7 lines
1.9 KiB
Plaintext
page CustomModalExample {
|
|
state dialogOpen: boolean = false
|
|
view {
|
|
<nav class="example-toolbar"><a href="/preview">← All examples</a><a href="#example-source">View code</a></nav> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="{dialogOpen}" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> <section class="example-code-panel"><header><h2>Copy this example</h2><button type="button" data-copy-target="#example-source">Copy code</button></header><pre><code id="example-source">page CustomModalExample <span>{</span>
|
|
state dialogOpen: boolean = false
|
|
view <span>{</span> <main class="example-form-page" style="max-width:42rem;margin:3rem auto;padding:1.5rem;display:grid;gap:1.5rem"><h1>Your own modal controls</h1><Button label="Invite a teammate" @click="dialogOpen = true" /><Modal open="<span>{</span>dialogOpen<span>}</span>" @close="dialogOpen = false" title="" description="" showFooter="true" cancelLabel="" confirmLabel=""><div data-slot="header"><h2>Invite a teammate</h2></div><Input label="Email address" type="email" name="invite-email" placeholder="name@company.com" /><div data-slot="footer"><Button label="Cancel" variant="secondary" @click="dialogOpen = false" /><Button label="Done" @click="dialogOpen = false" /></div></Modal></main> <span>}</span>
|
|
<span>}</span></code></pre></section> } } |