docs: update portal for WRnexusJS 0.5.0
This commit is contained in:
+2
-2
@@ -7,10 +7,10 @@ page Pagenotfound {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Error</span><span aria-hidden="true">/</span><span aria-current="page">Page not found</span></nav><article class="documentation prose standalone"><span class="eyebrow">404</span><h1>Page not found</h1><p>The address may be outdated or misspelled. No private or duplicate route is exposed here.</p><div class="actions"><a class="primary" href="/search">Search documentation</a><a href="/getting-started">Getting started</a><a href="/packages">Package reference</a></div></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Access {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Status</span><span aria-hidden="true">/</span><span aria-current="page">Access</span></nav><article class="documentation prose standalone"><Badge class="status status-beta" label="Private Developer Preview" variant="info" /><h1>Request preview access</h1><p>WRNexusJS 0.4.0 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.</p><h2>Request process</h2><ol><li>Contact WorkRoot through the public contact path at <a href="https://workroot.in/">workroot.in</a>.</li><li>Describe the application, team, expected deployment, and Bun environment.</li><li>After approval, follow the registry instructions supplied privately.</li><li>Use the canonical scaffold command below only after authentication.</li></ol><pre><code>bunx @wrnexus/cli@0.4.0 create my-app</code></pre><p>Access approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Status</span><span aria-hidden="true">/</span><span aria-current="page">Access</span></nav><article class="documentation prose standalone"><Badge class="status status-beta" label="Private Developer Preview" variant="info" /><h1>Request preview access</h1><p>WRNexusJS 0.5.0 packages are not available from the public npm registry. Installation requires approval and private registry credentials supplied by WorkRoot. Never paste registry tokens into source control, issue reports, or support messages.</p><h2>Request process</h2><ol><li>Contact WorkRoot through the public contact path at <a href="https://workroot.in/">workroot.in</a>.</li><li>Describe the application, team, expected deployment, and Bun environment.</li><li>After approval, follow the registry instructions supplied privately.</li><li>Use the canonical scaffold command below only after authentication.</li></ol><pre><code>bunx @wrnexus/cli@0.5.0 create my-app</code></pre><p>Access approval, response time, licensing terms, and support level remain owner-controlled. This site does not collect access requests directly.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Architecture {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Architecture</span></nav><article class="documentation prose standalone"><span class="status status-beta">Framework architecture · 0.4.0</span><h1>Architecture</h1><p>WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns <code>.wrn</code> declarations into server render functions and small feature runtimes.</p><h2>Request and build lifecycle</h2><ol class="lifecycle"><li><strong>Discover</strong><span>Pages, APIs, middleware, components, layouts, schemas, rooms</span></li><li><strong>Compile</strong><span>Parse .wrn, validate grammar, generate server code</span></li><li><strong>Request</strong><span>Limits, security, locale, session, middleware</span></li><li><strong>Match</strong><span>Static and dynamic file route</span></li><li><strong>Render</strong><span>SSR data, escaped interpolation, components, metadata</span></li><li><strong>Enhance</strong><span>Only required reactive/directive runtimes</span></li></ol><h2>Package boundaries</h2><p><code>core</code> owns contexts, middleware, sessions and rooms; <code>router</code> discovers routes; <code>compiler</code> parses <code>.wrn</code>; <code>ssr</code> renders documents; <code>csr</code> supplies browser runtimes; <code>dev-server</code> and <code>cli</code> orchestrate development and builds.</p><h2>Security and data flow</h2><p>Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.</p><h2>Realtime and scale</h2><p>Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.</p><h2>Workspaces and gateways</h2><p>The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.</p><h2>Build and deployment</h2><p><code>wrnexus build .</code> produces <code>dist/server.js</code> and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.</p><h2>Mobile</h2><p>Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.</p><h2>Generated files and limits</h2><p><code>app/routes.gen.ts</code>, <code>.wrnexus/</code>, and <code>dist/</code> are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Architecture</span></nav><article class="documentation prose standalone"><span class="status status-beta">Framework architecture · 0.5.0</span><h1>Architecture</h1><p>WRNexusJS is Bun-native and SSR-first. File discovery maps pages and API handlers; middleware enriches or short-circuits a request; the compiler turns <code>.wrn</code> declarations into server render functions and small feature runtimes.</p><h2>Request and build lifecycle</h2><ol class="lifecycle"><li><strong>Discover</strong><span>Pages, APIs, middleware, components, layouts, schemas, rooms</span></li><li><strong>Compile</strong><span>Parse .wrn, validate grammar, generate server code</span></li><li><strong>Request</strong><span>Limits, security, locale, session, middleware</span></li><li><strong>Match</strong><span>Static and dynamic file route</span></li><li><strong>Render</strong><span>SSR data, escaped interpolation, components, metadata</span></li><li><strong>Enhance</strong><span>Only required reactive/directive runtimes</span></li></ol><h2>Package boundaries</h2><p><code>core</code> owns contexts, middleware, sessions and rooms; <code>router</code> discovers routes; <code>compiler</code> parses <code>.wrn</code>; <code>ssr</code> renders documents; <code>csr</code> supplies browser runtimes; <code>dev-server</code> and <code>cli</code> orchestrate development and builds.</p><h2>Security and data flow</h2><p>Validation happens at trust boundaries. Session authentication establishes identity; authorization makes resource decisions. CSP, Trusted Types, CSRF, upload checks, WebSocket origins, request limits, and output escaping are layered controls—not substitutes for application policy.</p><h2>Realtime and scale</h2><p>Rooms are process-local unless connected through pub/sub. Redis-backed pub/sub distributes events. Queue durability depends on the selected driver and must be evaluated explicitly.</p><h2>Workspaces and gateways</h2><p>The gateway can dispatch multiple applications while preserving route, component, asset, config, and session boundaries. Validate host routing and isolation before production.</p><h2>Build and deployment</h2><p><code>wrnexus build .</code> produces <code>dist/server.js</code> and hashed/static assets. Run the server with Bun, apply migrations before traffic, terminate TLS at a trusted edge, and forward only expected proxy headers.</p><h2>Mobile</h2><p>Mobile compatibility bridges SSR-safe Capacitor capabilities; native route generation is experimental and is not general web portability. Test each target platform.</p><h2>Generated files and limits</h2><p><code>app/routes.gen.ts</code>, <code>.wrnexus/</code>, and <code>dist/</code> are generated. The runtime is Bun-only. Preview packages are private. Historical compatibility and long-term support policy are not yet published.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Benchmarks {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Benchmarks</span></nav><article class="documentation prose standalone"><h1>Benchmarks</h1><span class="status status-planned">No publishable benchmark dataset yet</span><p>No comparative speed claims are published. A valid baseline must record scripts, commit, Bun/framework versions, hardware, OS, warmup, samples, workload, raw results, median, percentiles, memory, HTML size, browser JavaScript size, and run date.</p><p>The roadmap starts with WRNexusJS-only measurements before any maintained equivalent-workload comparison.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Changelog {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Changelog</span></nav><article class="documentation prose standalone"><h1>Changelog</h1><h2>0.4.0 <small>2026-07-13</small></h2><p>Documentation is aligned to all 30 installed packages. This release adds <code>@wrnexus/helpers</code>, original-request URL helpers, safe login redirects, working <code>wrnexus workspace add</code>, and forward-auth redirect propagation.</p><h3>Migration notes</h3><p>Run <code>wrnexus update --latest</code> and keep every <code>@wrnexus/*</code> package on 0.4.0. Existing applications must explicitly add <code>@wrnexus/helpers</code> before importing it; newly scaffolded applications include it automatically.</p><h2>Versioning and support</h2><p>The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Project</span><span aria-hidden="true">/</span><span aria-current="page">Changelog</span></nav><article class="documentation prose standalone"><h1>Changelog</h1><h2>0.5.0 <small>2026-07-13</small></h2><p>Documentation is aligned to all 31 installed packages. This release adds <code>@wrnexus/helpers</code>, original-request URL helpers, safe login redirects, working <code>wrnexus workspace add</code>, and forward-auth redirect propagation.</p><h3>Migration notes</h3><p>Run <code>wrnexus update --latest</code> and keep every <code>@wrnexus/*</code> package on 0.5.0. Existing applications must explicitly add <code>@wrnexus/helpers</code> before importing it; newly scaffolded applications include it automatically.</p><h2>Versioning and support</h2><p>The packages use semantic-looking versions, but a formal compatibility and old-release support policy has not been approved. Preview consumers should treat minor releases as potentially requiring migration review.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
+71
-71
@@ -12,95 +12,95 @@ page Components {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 85 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>85</span></button><button type="button" @click="category = 'advanced-forms'">Advanced-forms<span>9</span></button><button type="button" @click="category = 'base'">Base<span>27</span></button><button type="button" @click="category = 'forms'">Forms<span>11</span></button><button type="button" @click="category = 'integrations'">Integrations<span>12</span></button><button type="button" @click="category = 'layout'">Layout<span>10</span></button><button type="button" @click="category = 'navigation'">Navigation<span>9</span></button><button type="button" @click="category = 'overlays'">Overlays<span>6</span></button><button type="button" @click="category = 'tables'">Tables<span>1</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'accordion accordion base theme-aware, responsive accordion component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-date-picker" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advanceddatepicker advanceddatepicker integrations theme-aware, responsive advanced date picker component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedDatePicker</h2><p>Theme-aware, responsive advanced date picker component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-range-slider" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advancedrangeslider advancedrangeslider integrations theme-aware, responsive advanced range slider component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedRangeSlider</h2><p>Theme-aware, responsive advanced range slider component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<main id="main" class="page component-catalog-page"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><span aria-current="page">Components</span></nav><section class="hero compact"><span class="eyebrow">@wrnexus/ui · 85 components</span><h1>Component reference</h1><p>Production-ready, server-rendered components documented directly from the installed <code>.wrn</code> sources.</p><input class="search" type="search" placeholder="Search components, props, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter components by category"><div class="category-row"><button type="button" @click="category = 'All'">All<span>85</span></button><button type="button" @click="category = 'advanced-forms'">Advanced-forms<span>9</span></button><button type="button" @click="category = 'base'">Base<span>27</span></button><button type="button" @click="category = 'forms'">Forms<span>11</span></button><button type="button" @click="category = 'integrations'">Integrations<span>12</span></button><button type="button" @click="category = 'layout'">Layout<span>10</span></button><button type="button" @click="category = 'navigation'">Navigation<span>9</span></button><button type="button" @click="category = 'overlays'">Overlays<span>6</span></button><button type="button" @click="category = 'tables'">Tables<span>1</span></button></div><p>Showing <strong>{category}</strong> components</p></section><section class="component-grid"><a class="component-card" href="/components/accordion" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'accordion accordion base theme-aware, responsive accordion component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Accordion</h2><p>Theme-aware, responsive accordion component.</p><div class="component-card-meta"><span>17 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-date-picker" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advanceddatepicker advanceddatepicker integrations theme-aware, responsive advanced date picker component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedDatePicker</h2><p>Theme-aware, responsive advanced date picker component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-range-slider" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'advancedrangeslider advancedrangeslider integrations theme-aware, responsive advanced range slider component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>AdvancedRangeSlider</h2><p>Theme-aware, responsive advanced range slider component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/advanced-select" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'advancedselect advancedselect advanced-forms theme-aware, responsive advanced select component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>AdvancedSelect</h2><p>Theme-aware, responsive advanced select component.</p><div class="component-card-meta"><span>51 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'alert alert base theme-aware, responsive alert component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatar avatar base theme-aware, responsive avatar component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatargroup avatargroup base theme-aware, responsive avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>AvatarGroup</h2><p>Theme-aware, responsive avatar group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'badge badge base theme-aware, responsive badge component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blockquote" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'blockquote blockquote base theme-aware, responsive blockquote component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/breadcrumb" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'breadcrumb breadcrumb navigation theme-aware, responsive breadcrumb component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'button button base theme-aware, responsive button component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p><div class="component-card-meta"><span>25 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'buttongroup buttongroup base theme-aware, responsive button group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ButtonGroup</h2><p>Theme-aware, responsive button group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'card card base theme-aware, responsive card component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'carousel carousel base theme-aware, responsive carousel component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chart" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'chart chart integrations theme-aware, responsive chart component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chat-bubble" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'chatbubble chatbubble base theme-aware, responsive chat bubble component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ChatBubble</h2><p>Theme-aware, responsive chat bubble component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkbox checkbox forms theme-aware, responsive checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/clipboard" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'clipboard clipboard integrations theme-aware, responsive clipboard component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/collapse" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'collapse collapse base theme-aware, responsive collapse component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p><div class="component-card-meta"><span>5 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms theme-aware, responsive color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Theme-aware, responsive color picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/alert" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'alert alert base theme-aware, responsive alert component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Alert</h2><p>Theme-aware, responsive alert component.</p><div class="component-card-meta"><span>21 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatar avatar base theme-aware, responsive avatar component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Avatar</h2><p>Theme-aware, responsive avatar component.</p><div class="component-card-meta"><span>18 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/avatar-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'avatargroup avatargroup base theme-aware, responsive avatar group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>AvatarGroup</h2><p>Theme-aware, responsive avatar group component.</p><div class="component-card-meta"><span>12 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/badge" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'badge badge base theme-aware, responsive badge component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Badge</h2><p>Theme-aware, responsive badge component.</p><div class="component-card-meta"><span>22 props</span><span>0 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/blockquote" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'blockquote blockquote base theme-aware, responsive blockquote component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Blockquote</h2><p>Theme-aware, responsive blockquote component.</p><div class="component-card-meta"><span>13 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/breadcrumb" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'breadcrumb breadcrumb navigation theme-aware, responsive breadcrumb component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'button button base theme-aware, responsive button component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Button</h2><p>Theme-aware, responsive button component.</p><div class="component-card-meta"><span>25 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/button-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'buttongroup buttongroup base theme-aware, responsive button group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ButtonGroup</h2><p>Theme-aware, responsive button group component.</p><div class="component-card-meta"><span>13 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/card" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'card card base theme-aware, responsive card component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Card</h2><p>Theme-aware, responsive card component.</p><div class="component-card-meta"><span>31 props</span><span>1 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/carousel" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'carousel carousel base theme-aware, responsive carousel component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Carousel</h2><p>Theme-aware, responsive carousel component.</p><div class="component-card-meta"><span>22 props</span><span>1 slots</span><span>10 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chart" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'chart chart integrations theme-aware, responsive chart component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/chat-bubble" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'chatbubble chatbubble base theme-aware, responsive chat bubble component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ChatBubble</h2><p>Theme-aware, responsive chat bubble component.</p><div class="component-card-meta"><span>11 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/checkbox" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'checkbox checkbox forms theme-aware, responsive checkbox component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/clipboard" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'clipboard clipboard integrations theme-aware, responsive clipboard component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/collapse" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'collapse collapse base theme-aware, responsive collapse component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Collapse</h2><p>Theme-aware, responsive collapse component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/color-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'colorpicker colorpicker forms theme-aware, responsive color picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>ColorPicker</h2><p>Theme-aware, responsive color picker component.</p><div class="component-card-meta"><span>19 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/columns" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'columns columns layout theme-aware, responsive columns component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/combo-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'combobox combobox advanced-forms editable autocomplete combobox with local and remote suggestions.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ComboBox</h2><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="component-card-meta"><span>41 props</span><span>0 slots</span><span>8 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/confetti" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'confetti confetti integrations theme-aware, responsive confetti component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/confetti" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'confetti confetti integrations theme-aware, responsive confetti component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/container" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'container container layout theme-aware, responsive container component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays theme-aware, responsive context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Theme-aware, responsive context menu component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/copy-markup" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'copymarkup copymarkup advanced-forms theme-aware, responsive copy markup component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>CopyMarkup</h2><p>Theme-aware, responsive copy markup component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/custom-scrollbar" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'customscrollbar customscrollbar layout theme-aware, responsive custom scrollbar component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CustomScrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datamap datamap integrations theme-aware, responsive data map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataMap</h2><p>Theme-aware, responsive data map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datatable datatable integrations theme-aware, responsive data table component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataTable</h2><p>Theme-aware, responsive data table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'datepicker datepicker base theme-aware, responsive date picker component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DatePicker</h2><p>Theme-aware, responsive date picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/device-frame" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'deviceframe deviceframe base theme-aware, responsive device frame component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DeviceFrame</h2><p>Theme-aware, responsive device frame component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/context-menu" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'contextmenu contextmenu overlays theme-aware, responsive context menu component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>ContextMenu</h2><p>Theme-aware, responsive context menu component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/copy-markup" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'copymarkup copymarkup advanced-forms theme-aware, responsive copy markup component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>CopyMarkup</h2><p>Theme-aware, responsive copy markup component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/custom-scrollbar" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'customscrollbar customscrollbar layout theme-aware, responsive custom scrollbar component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>CustomScrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datamap datamap integrations theme-aware, responsive data map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataMap</h2><p>Theme-aware, responsive data map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/data-table" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'datatable datatable integrations theme-aware, responsive data table component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DataTable</h2><p>Theme-aware, responsive data table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/date-picker" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'datepicker datepicker base theme-aware, responsive date picker component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DatePicker</h2><p>Theme-aware, responsive date picker component.</p><div class="component-card-meta"><span>25 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/device-frame" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'deviceframe deviceframe base theme-aware, responsive device frame component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>DeviceFrame</h2><p>Theme-aware, responsive device frame component.</p><div class="component-card-meta"><span>14 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/divider" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'divider divider layout theme-aware, responsive divider component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/drag-and-drop" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'draganddrop draganddrop integrations theme-aware, responsive drag and drop component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DragAndDrop</h2><p>Theme-aware, responsive drag and drop component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'drawer drawer overlays theme-aware, responsive drawer component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/dropdown" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdown dropdown overlays theme-aware, responsive dropdown component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms theme-aware, responsive file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Theme-aware, responsive file input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'fileupload fileupload integrations theme-aware, responsive file upload component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>FileUpload</h2><p>Theme-aware, responsive file upload component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload-progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'fileuploadprogress fileuploadprogress base theme-aware, responsive file upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>FileUploadProgress</h2><p>Theme-aware, responsive file upload progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/drag-and-drop" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'draganddrop draganddrop integrations theme-aware, responsive drag and drop component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>DragAndDrop</h2><p>Theme-aware, responsive drag and drop component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/drawer" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'drawer drawer overlays theme-aware, responsive drawer component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/dropdown" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'dropdown dropdown overlays theme-aware, responsive dropdown component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'fileinput fileinput forms theme-aware, responsive file input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>FileInput</h2><p>Theme-aware, responsive file input component.</p><div class="component-card-meta"><span>21 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'fileupload fileupload integrations theme-aware, responsive file upload component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>FileUpload</h2><p>Theme-aware, responsive file upload component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/file-upload-progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'fileuploadprogress fileuploadprogress base theme-aware, responsive file upload progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>FileUploadProgress</h2><p>Theme-aware, responsive file upload progress component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/grid" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'grid grid layout theme-aware, responsive grid component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'image image layout theme-aware, responsive image component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'input input forms theme-aware, responsive input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms theme-aware, responsive input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Theme-aware, responsive input group component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/image" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'image image layout theme-aware, responsive image component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p><div class="component-card-meta"><span>9 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'input input forms theme-aware, responsive input component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p><div class="component-card-meta"><span>28 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input-group" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'inputgroup inputgroup forms theme-aware, responsive input group component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>InputGroup</h2><p>Theme-aware, responsive input group component.</p><div class="component-card-meta"><span>23 props</span><span>0 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/input-number" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'inputnumber inputnumber advanced-forms theme-aware, responsive input number component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>InputNumber</h2><p>Theme-aware, responsive input number component.</p><div class="component-card-meta"><span>40 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/kbd" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'kbd kbd layout theme-aware, responsive kbd component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p><div class="component-card-meta"><span>4 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/layout-splitter" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'layoutsplitter layoutsplitter layout theme-aware, responsive layout splitter component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LayoutSplitter</h2><p>Theme-aware, responsive layout splitter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legend-indicator" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'legendindicator legendindicator base theme-aware, responsive legend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>LegendIndicator</h2><p>Theme-aware, responsive legend indicator component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'link link layout theme-aware, responsive link component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'list list base theme-aware, responsive list component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>List</h2><p>Theme-aware, responsive list component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/list-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'listgroup listgroup base theme-aware, responsive list group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ListGroup</h2><p>Theme-aware, responsive list group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'map map integrations theme-aware, responsive map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/marquee" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'marquee marquee base theme-aware, responsive marquee component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'megamenu megamenu navigation theme-aware, responsive mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>MegaMenu</h2><p>Theme-aware, responsive mega menu component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'modal modal overlays theme-aware, responsive modal component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/nav" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'nav nav navigation theme-aware, responsive nav component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/navbar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'navbar navbar navigation theme-aware, responsive navbar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'pagination pagination navigation theme-aware, responsive pagination component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/layout-splitter" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'layoutsplitter layoutsplitter layout theme-aware, responsive layout splitter component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>LayoutSplitter</h2><p>Theme-aware, responsive layout splitter component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/legend-indicator" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'legendindicator legendindicator base theme-aware, responsive legend indicator component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>LegendIndicator</h2><p>Theme-aware, responsive legend indicator component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/link" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'link link layout theme-aware, responsive link component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/list" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'list list base theme-aware, responsive list component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>List</h2><p>Theme-aware, responsive list component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/list-group" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'listgroup listgroup base theme-aware, responsive list group component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>ListGroup</h2><p>Theme-aware, responsive list group component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/map" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'map map integrations theme-aware, responsive map component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/marquee" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'marquee marquee base theme-aware, responsive marquee component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Marquee</h2><p>Theme-aware, responsive marquee component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/mega-menu" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'megamenu megamenu navigation theme-aware, responsive mega menu component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>MegaMenu</h2><p>Theme-aware, responsive mega menu component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/modal" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'modal modal overlays theme-aware, responsive modal component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/nav" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'nav nav navigation theme-aware, responsive nav component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/navbar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'navbar navbar navigation theme-aware, responsive navbar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pagination" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'pagination pagination navigation theme-aware, responsive pagination component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/pin-input" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'pininput pininput advanced-forms secure multi-cell pin and verification-code input with regex and paste support.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>PinInput</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>6 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays theme-aware, responsive popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/popover" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'popover popover overlays theme-aware, responsive popover component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/progress" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'progress progress base theme-aware, responsive progress component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Progress</h2><p>Theme-aware, responsive progress component.</p><div class="component-card-meta"><span>7 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radio radio forms theme-aware, responsive radio component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeslider rangeslider forms theme-aware, responsive range slider component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeSlider</h2><p>Theme-aware, responsive range slider component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rating" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'rating rating base theme-aware, responsive rating component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/scrollspy" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'scrollspy scrollspy navigation theme-aware, responsive scrollspy component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'searchbox searchbox advanced-forms theme-aware, responsive search box component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>SearchBox</h2><p>Theme-aware, responsive search box component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'select select forms theme-aware, responsive select component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sidebar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'sidebar sidebar navigation theme-aware, responsive sidebar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/radio" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'radio radio forms theme-aware, responsive radio component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p><div class="component-card-meta"><span>25 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/range-slider" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'rangeslider rangeslider forms theme-aware, responsive range slider component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>RangeSlider</h2><p>Theme-aware, responsive range slider component.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/rating" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'rating rating base theme-aware, responsive rating component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Rating</h2><p>Theme-aware, responsive rating component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/scrollspy" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'scrollspy scrollspy navigation theme-aware, responsive scrollspy component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/search-box" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'searchbox searchbox advanced-forms theme-aware, responsive search box component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>SearchBox</h2><p>Theme-aware, responsive search box component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/select" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'select select forms theme-aware, responsive select component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p><div class="component-card-meta"><span>22 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/sidebar" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'sidebar sidebar navigation theme-aware, responsive sidebar component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/skeleton" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'skeleton skeleton base theme-aware, responsive skeleton component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Skeleton</h2><p>Theme-aware, responsive skeleton component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/spinner" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'spinner spinner base theme-aware, responsive spinner component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Spinner</h2><p>Theme-aware, responsive spinner component.</p><div class="component-card-meta"><span>5 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'stepper stepper navigation theme-aware, responsive stepper component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/stepper" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'stepper stepper navigation theme-aware, responsive stepper component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/strong-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'strongpassword strongpassword advanced-forms theme-aware, responsive strong password component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>StrongPassword</h2><p>Theme-aware, responsive strong password component.</p><div class="component-card-meta"><span>27 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/styled-icon" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'styledicon styledicon base theme-aware, responsive styled icon component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>StyledIcon</h2><p>Theme-aware, responsive styled icon component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'switch switch forms theme-aware, responsive switch component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p><div class="component-card-meta"><span>8 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'tables') ? (query === '' ? true : 'table table tables theme-aware, responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'tabs tabs navigation theme-aware, responsive tabs component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textarea textarea forms theme-aware, responsive textarea component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p><div class="component-card-meta"><span>10 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'timeline timeline base theme-aware, responsive timeline component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms theme-aware, responsive time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Theme-aware, responsive time picker component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'toast toast base theme-aware, responsive toast component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-notifications" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'toastnotifications toastnotifications integrations theme-aware, responsive toast notifications component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>ToastNotifications</h2><p>Theme-aware, responsive toast notifications component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toggle-count" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglecount togglecount advanced-forms theme-aware, responsive toggle count component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ToggleCount</h2><p>Theme-aware, responsive toggle count component.</p><div class="component-card-meta"><span>13 props</span><span>0 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/switch" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'switch switch forms theme-aware, responsive switch component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p><div class="component-card-meta"><span>20 props</span><span>0 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/table" data-show="(category === 'All' ? true : category === 'tables') ? (query === '' ? true : 'table table tables theme-aware, responsive table component.'.includes(query.toLowerCase())) : false"><span class="category">tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tabs" data-show="(category === 'All' ? true : category === 'navigation') ? (query === '' ? true : 'tabs tabs navigation theme-aware, responsive tabs component.'.includes(query.toLowerCase())) : false"><span class="category">navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/textarea" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'textarea textarea forms theme-aware, responsive textarea component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p><div class="component-card-meta"><span>23 props</span><span>0 slots</span><span>5 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/timeline" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'timeline timeline base theme-aware, responsive timeline component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Timeline</h2><p>Theme-aware, responsive timeline component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>1 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/time-picker" data-show="(category === 'All' ? true : category === 'forms') ? (query === '' ? true : 'timepicker timepicker forms theme-aware, responsive time picker component.'.includes(query.toLowerCase())) : false"><span class="category">forms</span><h2>TimePicker</h2><p>Theme-aware, responsive time picker component.</p><div class="component-card-meta"><span>26 props</span><span>0 slots</span><span>7 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'toast toast base theme-aware, responsive toast component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>Toast</h2><p>Theme-aware, responsive toast component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toast-notifications" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'toastnotifications toastnotifications integrations theme-aware, responsive toast notifications component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>ToastNotifications</h2><p>Theme-aware, responsive toast notifications component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toggle-count" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglecount togglecount advanced-forms theme-aware, responsive toggle count component.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>ToggleCount</h2><p>Theme-aware, responsive toggle count component.</p><div class="component-card-meta"><span>23 props</span><span>0 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/toggle-password" data-show="(category === 'All' ? true : category === 'advanced-forms') ? (query === '' ? true : 'togglepassword togglepassword advanced-forms accessible password field with optional show and hide controls.'.includes(query.toLowerCase())) : false"><span class="category">advanced-forms</span><h2>TogglePassword</h2><p>Accessible password field with optional show and hide controls.</p><div class="component-card-meta"><span>24 props</span><span>0 slots</span><span>3 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'tooltip tooltip overlays theme-aware, responsive tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tree-view" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'treeview treeview base theme-aware, responsive tree view component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>TreeView</h2><p>Theme-aware, responsive tree view component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tooltip" data-show="(category === 'All' ? true : category === 'overlays') ? (query === '' ? true : 'tooltip tooltip overlays theme-aware, responsive tooltip component.'.includes(query.toLowerCase())) : false"><span class="category">overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p><div class="component-card-meta"><span>8 props</span><span>1 slots</span><span>2 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/tree-view" data-show="(category === 'All' ? true : category === 'base') ? (query === '' ? true : 'treeview treeview base theme-aware, responsive tree view component.'.includes(query.toLowerCase())) : false"><span class="category">base</span><h2>TreeView</h2><p>Theme-aware, responsive tree view component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/typography" data-show="(category === 'All' ? true : category === 'layout') ? (query === '' ? true : 'typography typography layout theme-aware, responsive typography component.'.includes(query.toLowerCase())) : false"><span class="category">layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p><div class="component-card-meta"><span>6 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a>
|
||||
<a class="component-card" href="/components/wysiwyg-editor" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'wysiwygeditor wysiwygeditor integrations theme-aware, responsive wysiwyg editor component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>WysiwygEditor</h2><p>Theme-aware, responsive wysiwyg editor component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>0 events</span></div><span class="card-link">View component →</span></a></section></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<a class="component-card" href="/components/wysiwyg-editor" data-show="(category === 'All' ? true : category === 'integrations') ? (query === '' ? true : 'wysiwygeditor wysiwygeditor integrations theme-aware, responsive wysiwyg editor component.'.includes(query.toLowerCase())) : false"><span class="category">integrations</span><h2>WysiwygEditor</h2><p>Theme-aware, responsive wysiwyg editor component.</p><div class="component-card-meta"><span>7 props</span><span>1 slots</span><span>4 events</span></div><span class="card-link">View component →</span></a></section></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,34 +10,222 @@ page Accordioncomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Accordion</h1><p>Theme-aware, responsive accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Accordion
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Accordion</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Accordion</h1><p>Theme-aware, responsive accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>17 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Accordion
|
||||
size="default"
|
||||
color="primary"
|
||||
variant="default"
|
||||
id="accordion"
|
||||
items="[]"
|
||||
multiple="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Accordion"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Accordion"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>"accordion"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>defaultOpen</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>alwaysOpen</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>indicator</code></td><td><code>string</code></td><td>Optional</td><td><code>"plus"</code></td></tr><tr><td><code>indicatorPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>showIndicator</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>bordered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>separated</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>flush</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>contentItalic</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Accordion.wrn</code></p><pre data-language="wrn"><code>component Accordion {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
items = []
|
||||
multiple = false
|
||||
variant = "default"
|
||||
class = ""
|
||||
|
||||
id = "accordion"
|
||||
items = []
|
||||
defaultOpen = []
|
||||
multiple = false
|
||||
alwaysOpen = false
|
||||
disabled = false
|
||||
|
||||
indicator = "plus"
|
||||
indicatorPosition = "start"
|
||||
showIndicator = true
|
||||
bordered = false
|
||||
separated = false
|
||||
flush = false
|
||||
contentItalic = false
|
||||
|
||||
@event change = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
}
|
||||
|
||||
state openValues = defaultOpen
|
||||
|
||||
functions {
|
||||
function itemValue(item, index) {
|
||||
return item.value !== undefined && item.value !== ""
|
||||
? String(item.value)
|
||||
: String(index)
|
||||
}
|
||||
|
||||
function nestedValue(parent, parentIndex, item, index) {
|
||||
return itemValue(parent, parentIndex) + "." + itemValue(item, index)
|
||||
}
|
||||
|
||||
function isOpen(value) {
|
||||
return openValues.includes(value)
|
||||
}
|
||||
|
||||
function allowsMultiple() {
|
||||
return multiple || alwaysOpen
|
||||
}
|
||||
|
||||
function dispatchAccordionEvent(sourceEvent, eventName, value, item, root, customEvent) {
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-accordion]")
|
||||
|
||||
if (!root) {
|
||||
return
|
||||
}
|
||||
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent(eventName, true, false, {
|
||||
component: "Accordion",
|
||||
value: value,
|
||||
item: item,
|
||||
open: isOpen(value),
|
||||
openValues: openValues
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
}
|
||||
|
||||
function toggleItem(sourceEvent, value, item, wasOpen) {
|
||||
if (disabled || item.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
wasOpen = isOpen(value)
|
||||
|
||||
if (wasOpen) {
|
||||
openValues = openValues.filter((entry) => entry !== value)
|
||||
} else if (allowsMultiple()) {
|
||||
openValues = openValues.concat([value])
|
||||
} else {
|
||||
openValues = [value]
|
||||
}
|
||||
|
||||
dispatchAccordionEvent(
|
||||
sourceEvent,
|
||||
wasOpen ? "close" : "open",
|
||||
value,
|
||||
item
|
||||
)
|
||||
dispatchAccordionEvent(sourceEvent, "change", value, item)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion {class}">
|
||||
{#each items as item}<details open="{item.open}">
|
||||
<summary>{item.label}</summary>
|
||||
<div>{item.content}</div>
|
||||
</details>{/each}
|
||||
<slot />
|
||||
<div
|
||||
{...attrs}
|
||||
id="{id}"
|
||||
data-wrn-accordion
|
||||
data-variant="{variant}"
|
||||
data-indicator="{indicator}"
|
||||
data-multiple="{allowsMultiple() ? 'true' : 'false'}"
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--accordion wire-next--accordion-{variant} {bordered ? 'wire-next--accordion-bordered' : ''} {separated ? 'wire-next--accordion-separated' : ''} {flush ? 'wire-next--accordion-flush' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
|
||||
>
|
||||
{#each items as item, index}
|
||||
<section
|
||||
class="wire-next__accordion-item"
|
||||
data-open="{isOpen(itemValue(item, index)) ? 'true' : 'false'}"
|
||||
data-disabled="{disabled || item.disabled ? 'true' : 'false'}"
|
||||
>
|
||||
<h3 class="wire-next__accordion-heading">
|
||||
<button
|
||||
type="button"
|
||||
id="{id}-trigger-{index}"
|
||||
aria-expanded="{isOpen(itemValue(item, index)) ? 'true' : 'false'}"
|
||||
aria-controls="{id}-panel-{index}"
|
||||
disabled="{disabled || item.disabled}"
|
||||
@click="toggleItem(event, itemValue(item, index), item)"
|
||||
>
|
||||
{#if showIndicator && indicatorPosition === "start"}
|
||||
<span class="wire-next__accordion-indicator" aria-hidden="true">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]">
|
||||
</span>
|
||||
{:else}
|
||||
<span>+</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
<span>{item.label || item.title}</span>
|
||||
{#if showIndicator && indicatorPosition === "end"}
|
||||
<span class="wire-next__accordion-indicator" aria-hidden="true">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]">
|
||||
</span>
|
||||
{:else}
|
||||
<span>+</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</button>
|
||||
</h3>
|
||||
<div
|
||||
id="{id}-panel-{index}"
|
||||
class="wire-next__accordion-panel"
|
||||
role="region"
|
||||
aria-labelledby="{id}-trigger-{index}"
|
||||
aria-hidden="{isOpen(itemValue(item, index)) ? 'false' : 'true'}"
|
||||
>
|
||||
<div>
|
||||
<div class="wire-next__accordion-content {contentItalic ? 'wire-next__accordion-content-italic' : ''}">
|
||||
{#if item.content}<p>{item.content}</p>{/if}
|
||||
|
||||
{#if item.children && item.children.length > 0}
|
||||
<div class="wire-next__accordion-nested">
|
||||
{#each item.children as child, childIndex}
|
||||
<section
|
||||
class="wire-next__accordion-item"
|
||||
data-open="{isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'}"
|
||||
>
|
||||
<h4 class="wire-next__accordion-heading">
|
||||
<button
|
||||
type="button"
|
||||
id="{id}-trigger-{index}-{childIndex}"
|
||||
aria-expanded="{isOpen(nestedValue(item, index, child, childIndex)) ? 'true' : 'false'}"
|
||||
aria-controls="{id}-panel-{index}-{childIndex}"
|
||||
disabled="{disabled || child.disabled}"
|
||||
@click="toggleItem(event, nestedValue(item, index, child, childIndex), child)"
|
||||
>
|
||||
{#if showIndicator}
|
||||
<span class="wire-next__accordion-indicator" aria-hidden="true">
|
||||
{#if indicator === "chevron"}
|
||||
<span class="icon-[lucide--chevron-down]">
|
||||
</span>
|
||||
{:else}
|
||||
<span>+</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
<span>{child.label || child.title}</span>
|
||||
</button>
|
||||
</h4>
|
||||
<div
|
||||
id="{id}-panel-{index}-{childIndex}"
|
||||
class="wire-next__accordion-panel"
|
||||
role="region"
|
||||
aria-labelledby="{id}-trigger-{index}-{childIndex}"
|
||||
aria-hidden="{isOpen(nestedValue(item, index, child, childIndex)) ? 'false' : 'true'}"
|
||||
>
|
||||
<div>
|
||||
<div class="wire-next__accordion-content {contentItalic ? 'wire-next__accordion-content-italic' : ''}">
|
||||
<p>{child.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,22 @@ page AdvancedDatePickercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedDatePicker</h1><p>Theme-aware, responsive advanced date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedDatePicker
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedDatePicker</h1><p>Theme-aware, responsive advanced date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedDatePicker
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Advanced Date Picker"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedDatePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Advanced Date Picker"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedDatePicker.wrn</code></p><pre data-language="wrn"><code>component AdvancedDatePicker {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedDatePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Advanced Date Picker"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li><li><code>clear</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedDatePicker.wrn</code></p><pre data-language="wrn"><code>component AdvancedDatePicker {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event clear = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Advanced Date Picker"
|
||||
@@ -39,7 +44,7 @@ page AdvancedDatePickercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page AdvancedRangeSlidercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedRangeSlider</h1><p>Theme-aware, responsive advanced range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedRangeSlider
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>AdvancedRangeSlider</h1><p>Theme-aware, responsive advanced range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedRangeSlider
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Advanced Range Slider"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedRangeSlider"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Advanced Range Slider"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedRangeSlider.wrn</code></p><pre data-language="wrn"><code>component AdvancedRangeSlider {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedRangeSlider"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Advanced Range Slider"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>start</code></li><li><code>end</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AdvancedRangeSlider.wrn</code></p><pre data-language="wrn"><code>component AdvancedRangeSlider {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event start = function
|
||||
@event end = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Advanced Range Slider"
|
||||
@@ -39,7 +43,7 @@ page AdvancedRangeSlidercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page AdvancedSelectcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedSelect</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>AdvancedSelect</h1><p>Theme-aware, responsive advanced select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>51 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedSelect
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AdvancedSelect</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>AdvancedSelect</h1><p>Theme-aware, responsive advanced select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>51 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AdvancedSelect
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Advanced Select"
|
||||
@@ -486,7 +486,7 @@ page AdvancedSelectcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
+146
-17
@@ -10,36 +10,165 @@ page Alertcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Alert</h1><p>Theme-aware, responsive alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Alert
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Alert</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Alert</h1><p>Theme-aware, responsive alert component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>21 props</span><span>0 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Alert
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Alert"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Alert"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Alert"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/alert.wrn</code></p><pre data-language="wrn"><code>component Alert {
|
||||
color="info"
|
||||
variant="soft"
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Alert"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"info"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"soft"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>radius</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>shadow</code></td><td><code>string</code></td><td>Optional</td><td><code>"sm"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Alert"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>actions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>showIcon</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dismissLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Dismiss alert"</code></td></tr><tr><td><code>role</code></td><td><code>string</code></td><td>Optional</td><td><code>"alert"</code></td></tr><tr><td><code>live</code></td><td><code>string</code></td><td>Optional</td><td><code>"polite"</code></td></tr><tr><td><code>linkLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>linkHref</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionHref</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>dismiss</code></li><li><code>action</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/alert.wrn</code></p><pre data-language="wrn"><code>component Alert {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
color = "info"
|
||||
variant = "soft"
|
||||
class = ""
|
||||
radius = "md"
|
||||
shadow = "sm"
|
||||
|
||||
title = "Alert"
|
||||
description = ""
|
||||
items = []
|
||||
variant = "default"
|
||||
class = ""
|
||||
actions = []
|
||||
|
||||
showIcon = false
|
||||
icon = ""
|
||||
dismissible = false
|
||||
dismissLabel = "Dismiss alert"
|
||||
role = "alert"
|
||||
live = "polite"
|
||||
|
||||
linkLabel = ""
|
||||
linkHref = ""
|
||||
actionLabel = ""
|
||||
actionHref = ""
|
||||
compact = false
|
||||
|
||||
@event dismiss = function
|
||||
@event action = function
|
||||
}
|
||||
|
||||
state visible = true
|
||||
|
||||
functions {
|
||||
function dispatchAlertEvent(sourceEvent, eventName, action, root, customEvent) {
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-alert]")
|
||||
|
||||
if (!root) {
|
||||
return
|
||||
}
|
||||
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent(eventName, true, false, {
|
||||
component: "Alert",
|
||||
title: title,
|
||||
color: color,
|
||||
variant: variant,
|
||||
action: action
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
}
|
||||
|
||||
function dismissAlert(sourceEvent) {
|
||||
visible = false
|
||||
dispatchAlertEvent(sourceEvent, "dismiss", null)
|
||||
}
|
||||
|
||||
function selectAction(sourceEvent, action) {
|
||||
dispatchAlertEvent(sourceEvent, "action", action)
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<section
|
||||
{...attrs}
|
||||
data-wrn-alert
|
||||
data-color="{color}"
|
||||
data-variant="{variant}"
|
||||
data-radius="{radius}"
|
||||
data-shadow="{shadow}"
|
||||
data-show="visible"
|
||||
aria-hidden="{visible ? 'false' : 'true'}"
|
||||
role="{role}"
|
||||
aria-live="{live}"
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--alert wire-next--alert-{variant} {compact ? 'wire-next--alert-compact' : ''} {class}"
|
||||
>
|
||||
{#if showIcon}
|
||||
<span class="wire-next__alert-icon" aria-hidden="true">
|
||||
{#if icon}
|
||||
<span class="{icon}">
|
||||
</span>
|
||||
{:else if color === "success"}
|
||||
<span class="icon-[lucide--circle-check]">
|
||||
</span>
|
||||
{:else if color === "danger"}
|
||||
<span class="icon-[lucide--circle-x]">
|
||||
</span>
|
||||
{:else if color === "warning"}
|
||||
<span class="icon-[lucide--triangle-alert]">
|
||||
</span>
|
||||
{:else}
|
||||
<span class="icon-[lucide--info]">
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
<div class="wire-next__alert-body">
|
||||
{#if title}<strong class="wire-next__alert-title">{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
|
||||
{#if items.length > 0}
|
||||
<ul>
|
||||
{#each items as item}<li>{item.label || item}</li>{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
{#if actions.length > 0 || actionLabel || linkLabel}
|
||||
<div class="wire-next__alert-actions">
|
||||
{#each actions as item}
|
||||
<a
|
||||
href="{item.href || '#'}"
|
||||
data-variant="{item.variant || 'link'}"
|
||||
@click="selectAction(event, item)"
|
||||
>{item.label}</a>
|
||||
{/each}
|
||||
{#if actionLabel}
|
||||
<a
|
||||
href="{actionHref || '#'}"
|
||||
data-variant="action"
|
||||
@click="selectAction(event, { label: actionLabel, href: actionHref })"
|
||||
>{actionLabel}</a>
|
||||
{/if}
|
||||
{#if linkLabel}
|
||||
<a
|
||||
href="{linkHref || '#'}"
|
||||
data-variant="link"
|
||||
@click="selectAction(event, { label: linkLabel, href: linkHref })"
|
||||
>{linkLabel}</a>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if dismissible}
|
||||
<button
|
||||
type="button"
|
||||
class="wire-next__alert-dismiss"
|
||||
aria-label="{dismissLabel}"
|
||||
@click="dismissAlert(event)"
|
||||
>
|
||||
<span class="icon-[lucide--x]" aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,138 @@ page AvatarGroupcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>AvatarGroup</h1><p>Theme-aware, responsive avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AvatarGroup
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Avatar Group"
|
||||
description="description"
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">AvatarGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>AvatarGroup</h1><p>Theme-aware, responsive avatar group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>12 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><AvatarGroup
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AvatarGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Avatar Group"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup {
|
||||
size="md"
|
||||
color="primary"
|
||||
variant="solid"
|
||||
shape="circle"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="AvatarGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"solid"</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>"circle"</code></td></tr><tr><td><code>layout</code></td><td><code>string</code></td><td>Optional</td><td><code>"stack"</code></td></tr><tr><td><code>maxVisible</code></td><td><code>number</code></td><td>Optional</td><td><code>4</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>3</code></td></tr><tr><td><code>borderColor</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>showTooltips</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>overflowLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Show remaining members"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>overflow</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AvatarGroup.wrn</code></p><pre data-language="wrn"><code>component AvatarGroup {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Avatar Group"
|
||||
description = ""
|
||||
items = []
|
||||
variant = "default"
|
||||
size = "md"
|
||||
color = "primary"
|
||||
variant = "solid"
|
||||
shape = "circle"
|
||||
layout = "stack"
|
||||
maxVisible = 4
|
||||
columns = 3
|
||||
borderColor = ""
|
||||
showTooltips = true
|
||||
overflowLabel = "Show remaining members"
|
||||
class = ""
|
||||
|
||||
@event overflow = function
|
||||
}
|
||||
|
||||
state overflowOpen = false
|
||||
|
||||
functions {
|
||||
function visibleMembers() {
|
||||
return items.slice(0, Number(maxVisible))
|
||||
}
|
||||
|
||||
function hiddenMembers() {
|
||||
return items.slice(Number(maxVisible))
|
||||
}
|
||||
|
||||
function toggleOverflow(sourceEvent, root, customEvent) {
|
||||
overflowOpen = !overflowOpen
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-avatar-group]")
|
||||
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent("overflow", true, false, {
|
||||
component: "AvatarGroup",
|
||||
open: overflowOpen,
|
||||
hiddenCount: hiddenMembers().length
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--avatar-group wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<div
|
||||
{...attrs}
|
||||
class="wire-next wire-next--avatar-group {class}"
|
||||
data-wrn-avatar-group
|
||||
data-layout="{layout}"
|
||||
data-shape="{shape}"
|
||||
data-size="{size}"
|
||||
style="--wire-avatar-group-columns:{columns}; --wire-avatar-group-ring:{borderColor || 'var(--wire-color-bg)'}"
|
||||
role="group"
|
||||
aria-label="Avatar group"
|
||||
>
|
||||
<div class="wire-next__avatar-group-members">
|
||||
{#each visibleMembers() as item}
|
||||
<span
|
||||
class="wire-next__avatar-group-member"
|
||||
data-size="{item.size || size}"
|
||||
data-shape="{item.shape || shape}"
|
||||
data-color="{item.color || color}"
|
||||
data-variant="{item.variant || variant}"
|
||||
tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
|
||||
aria-label="{item.name || item.alt || item.initials || 'Group member'}"
|
||||
>
|
||||
<span class="wire-next__avatar-group-avatar">
|
||||
{#if item.src}
|
||||
<img src="{item.src}" alt="{item.alt || item.name || ''}" loading="lazy" />
|
||||
{:else if item.initials}
|
||||
<span aria-hidden="true">{item.initials}</span>
|
||||
{:else}
|
||||
<span class="icon-[lucide--user-round]" aria-hidden="true">
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if showTooltips && (item.tooltip || item.name)}
|
||||
<span class="wire-next__avatar-group-tooltip" role="tooltip">
|
||||
{item.tooltip || item.name}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
{/each}
|
||||
|
||||
{#if hiddenMembers().length > 0}
|
||||
<span class="wire-next__avatar-group-overflow">
|
||||
<button
|
||||
type="button"
|
||||
class="wire-next__avatar-group-overflow-button"
|
||||
aria-label="{overflowLabel}"
|
||||
aria-expanded="{overflowOpen ? 'true' : 'false'}"
|
||||
@click="toggleOverflow(event)"
|
||||
>
|
||||
+{hiddenMembers().length}
|
||||
</button>
|
||||
<span
|
||||
class="wire-next__avatar-group-menu"
|
||||
role="menu"
|
||||
data-show="overflowOpen"
|
||||
aria-hidden="{overflowOpen ? 'false' : 'true'}"
|
||||
>
|
||||
{#each hiddenMembers() as item}
|
||||
<span class="wire-next__avatar-group-menu-item" role="menuitem">
|
||||
<span class="wire-next__avatar-group-menu-avatar">
|
||||
{#if item.src}
|
||||
<img src="{item.src}" alt="" loading="lazy" />
|
||||
{:else}
|
||||
<span>{item.initials || '?'}</span>
|
||||
{/if}
|
||||
</span>
|
||||
<span>{item.name || item.alt || item.initials || 'Team member'}</span>
|
||||
</span>
|
||||
{/each}
|
||||
</span>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,107 @@ page Avatarcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Avatar</h1><p>Theme-aware, responsive avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Avatar
|
||||
size="default"
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Avatar</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Avatar</h1><p>Theme-aware, responsive avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>18 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Avatar
|
||||
src="src"
|
||||
alt="alt"
|
||||
initials="initials"
|
||||
size="md"
|
||||
color="primary"
|
||||
title="Avatar"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Avatar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Avatar"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Avatar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>initials</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"solid"</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>"circle"</code></td></tr><tr><td><code>status</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>statusLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>statusPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>badgeIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>badgeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>tooltip</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>string</code></td><td>Optional</td><td><code>"lazy"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>load</code></li><li><code>error</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/avatar.wrn</code></p><pre data-language="wrn"><code>component Avatar {
|
||||
props {
|
||||
size = "default"
|
||||
@event load = function
|
||||
@event error = function
|
||||
@event click = function
|
||||
src = ""
|
||||
alt = ""
|
||||
initials = ""
|
||||
size = "md"
|
||||
color = "primary"
|
||||
title = "Avatar"
|
||||
variant = "solid"
|
||||
shape = "circle"
|
||||
|
||||
status = ""
|
||||
statusLabel = ""
|
||||
statusPosition = "bottom"
|
||||
|
||||
badge = ""
|
||||
badgeIcon = ""
|
||||
badgeLabel = ""
|
||||
|
||||
tooltip = ""
|
||||
name = ""
|
||||
description = ""
|
||||
items = []
|
||||
variant = "default"
|
||||
loading = "lazy"
|
||||
class = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--avatar wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<span
|
||||
{...attrs}
|
||||
class="wire-next wire-next--avatar {description ? 'wire-next--avatar-media' : ''} {class}"
|
||||
data-wrn-avatar
|
||||
>
|
||||
<span
|
||||
class="wire-next__avatar-wrap"
|
||||
data-shape="{shape}"
|
||||
data-size="{size}"
|
||||
data-color="{color}"
|
||||
data-variant="{variant}"
|
||||
data-status-position="{statusPosition}"
|
||||
tabindex="{tooltip ? '0' : '-1'}"
|
||||
aria-label="{tooltip || name || alt || initials || 'Avatar'}"
|
||||
>
|
||||
<span class="wire-next__avatar">
|
||||
{#if src}
|
||||
<img src="{src}" alt="{alt || name}" loading="{loading}" />
|
||||
{:else if initials}
|
||||
<span class="wire-next__avatar-initials" aria-hidden="true">{initials}</span>
|
||||
{:else}
|
||||
<span class="wire-next__avatar-placeholder icon-[lucide--user-round]" aria-hidden="true">
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if status}
|
||||
<span
|
||||
class="wire-next__avatar-status"
|
||||
data-status="{status}"
|
||||
title="{statusLabel || status}"
|
||||
aria-label="{statusLabel || status}"
|
||||
>
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if badgeIcon}
|
||||
<span class="wire-next__avatar-badge" aria-label="{badgeLabel || 'Linked account'}">
|
||||
<span class="{badgeIcon}" aria-hidden="true">
|
||||
</span>
|
||||
</span>
|
||||
{:else if badge}
|
||||
<span class="wire-next__avatar-badge wire-next__avatar-badge--text" aria-label="{badgeLabel || badge}">
|
||||
{badge}
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if tooltip}
|
||||
<span class="wire-next__avatar-tooltip" role="tooltip">{tooltip}</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
{#if description}
|
||||
<span class="wire-next__avatar-copy">
|
||||
<strong>{name || alt || initials}</strong>
|
||||
<span>{description}</span>
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
+108
-19
@@ -10,36 +10,125 @@ page Badgecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Badge</h1><p>Theme-aware, responsive badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Badge
|
||||
size="default"
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Badge</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Badge</h1><p>Theme-aware, responsive badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>0 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Badge
|
||||
label="Badge"
|
||||
size="md"
|
||||
color="primary"
|
||||
title="Badge"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Badge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Badge"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/badge.wrn</code></p><pre data-language="wrn"><code>component Badge {
|
||||
variant="solid"
|
||||
shape="pill"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Badge"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Badge"</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"solid"</code></td></tr><tr><td><code>shape</code></td><td><code>string</code></td><td>Optional</td><td><code>"pill"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>dot</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dotOnly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dotLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Status"</code></td></tr><tr><td><code>animated</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>avatarSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>avatarAlt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>dismissLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Remove badge"</code></td></tr><tr><td><code>truncate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>"12rem"</code></td></tr><tr><td><code>anchorLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>anchorIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"inline"</code></td></tr><tr><td><code>anchorLabelText</code></td><td><code>string</code></td><td>Optional</td><td><code>"Badge anchor"</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>dismiss</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Badge.wrn</code></p><pre data-language="wrn"><code>component Badge {
|
||||
props {
|
||||
size = "default"
|
||||
label = "Badge"
|
||||
size = "md"
|
||||
color = "primary"
|
||||
title = "Badge"
|
||||
description = ""
|
||||
items = []
|
||||
variant = "default"
|
||||
variant = "solid"
|
||||
shape = "pill"
|
||||
class = ""
|
||||
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
dot = false
|
||||
dotOnly = false
|
||||
dotLabel = "Status"
|
||||
animated = false
|
||||
|
||||
avatarSrc = ""
|
||||
avatarAlt = ""
|
||||
dismissible = false
|
||||
dismissLabel = "Remove badge"
|
||||
truncate = false
|
||||
maxWidth = "12rem"
|
||||
|
||||
anchorLabel = ""
|
||||
anchorIcon = ""
|
||||
placement = "inline"
|
||||
anchorLabelText = "Badge anchor"
|
||||
|
||||
@event dismiss = function
|
||||
}
|
||||
|
||||
state visible = true
|
||||
|
||||
functions {
|
||||
function dismissBadge(sourceEvent, root, customEvent) {
|
||||
visible = false
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-badge]")
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent("dismiss", true, false, {
|
||||
component: "Badge",
|
||||
label: label
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--badge wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<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>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,86 @@ page Blockquotecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Blockquote</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Blockquote</h1><p>Theme-aware, responsive blockquote component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Blockquote
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Blockquote"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Blockquote"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Blockquote"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Blockquote.wrn</code></p><pre data-language="wrn"><code>component Blockquote {
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Blockquote</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Blockquote</h1><p>Theme-aware, responsive blockquote component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Blockquote
|
||||
quote="I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
|
||||
citation="citation"
|
||||
citationTitle="citationTitle"
|
||||
citationUrl="citationUrl"
|
||||
avatarSrc="avatarSrc"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Blockquote"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>quote</code></td><td><code>string</code></td><td>Optional</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td></tr><tr><td><code>citation</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>citationTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>citationUrl</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>avatarSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>avatarAlt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"left"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>quoteMark</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>italic</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Blockquote.wrn</code></p><pre data-language="wrn"><code>component Blockquote {
|
||||
props {
|
||||
size = "default"
|
||||
quote = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
|
||||
citation = ""
|
||||
citationTitle = ""
|
||||
citationUrl = ""
|
||||
avatarSrc = ""
|
||||
avatarAlt = ""
|
||||
size = "md"
|
||||
color = "primary"
|
||||
title = "Blockquote"
|
||||
description = ""
|
||||
items = []
|
||||
align = "left"
|
||||
variant = "default"
|
||||
quoteMark = true
|
||||
italic = true
|
||||
class = ""
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--blockquote wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<figure
|
||||
{...attrs}
|
||||
class="wire-next wire-next--blockquote wire-next--color-{color} wire-next--size-{size} {class}"
|
||||
data-size="{size}"
|
||||
data-color="{color}"
|
||||
data-align="{align}"
|
||||
data-variant="{variant}"
|
||||
data-italic="{italic}"
|
||||
>
|
||||
<blockquote cite="{citationUrl}">
|
||||
{#if quoteMark}
|
||||
<span class="wire-next__blockquote-mark" aria-hidden="true">“</span>
|
||||
{/if}
|
||||
|
||||
<div class="wire-next__blockquote-copy">
|
||||
{#if quote}
|
||||
<p>{quote}</p>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
</blockquote>
|
||||
|
||||
{#if citation || citationTitle || avatarSrc}
|
||||
<figcaption class="wire-next__blockquote-citation">
|
||||
{#if avatarSrc}
|
||||
<img
|
||||
class="wire-next__blockquote-avatar"
|
||||
src="{avatarSrc}"
|
||||
alt="{avatarAlt}"
|
||||
loading="lazy"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<span class="wire-next__blockquote-attribution">
|
||||
{#if citation}
|
||||
{#if citationUrl}
|
||||
<cite>
|
||||
<a href="{citationUrl}">{citation}</a>
|
||||
</cite>
|
||||
{:else}
|
||||
<cite>{citation}</cite>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if citationTitle}<span>{citationTitle}</span>{/if}
|
||||
</span>
|
||||
</figcaption>
|
||||
{/if}
|
||||
</figure>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Breadcrumbcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumb</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Breadcrumb</h1><p>Theme-aware, responsive breadcrumb component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Breadcrumb
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Breadcrumb</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Breadcrumb</h1><p>Theme-aware, responsive breadcrumb component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Breadcrumb
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Breadcrumb"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Breadcrumb"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Breadcrumb"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Breadcrumb.wrn</code></p><pre data-language="wrn"><code>component Breadcrumb {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Breadcrumb"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Breadcrumb"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>navigate</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Breadcrumb.wrn</code></p><pre data-language="wrn"><code>component Breadcrumb {
|
||||
props {
|
||||
@event navigate = function
|
||||
@event click = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Breadcrumb"
|
||||
@@ -37,7 +39,7 @@ page Breadcrumbcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,107 @@ page ButtonGroupcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ButtonGroup</h1><p>Theme-aware, responsive button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ButtonGroup
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Button Group"
|
||||
description="description"
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ButtonGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ButtonGroup</h1><p>Theme-aware, responsive button group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ButtonGroup
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ButtonGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Button Group"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup {
|
||||
value="value"
|
||||
size="md"
|
||||
color="primary"
|
||||
variant="default"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ButtonGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>responsive</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>attached</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>selectable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>toolbar</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Button group"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ButtonGroup.wrn</code></p><pre data-language="wrn"><code>component ButtonGroup {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Button Group"
|
||||
description = ""
|
||||
@event click = function
|
||||
@event select = function
|
||||
@event change = function
|
||||
items = []
|
||||
value = ""
|
||||
size = "md"
|
||||
color = "primary"
|
||||
variant = "default"
|
||||
orientation = "horizontal"
|
||||
responsive = false
|
||||
attached = true
|
||||
selectable = false
|
||||
toolbar = false
|
||||
disabled = false
|
||||
ariaLabel = "Button group"
|
||||
class = ""
|
||||
}
|
||||
|
||||
state selectedValue = value
|
||||
|
||||
functions {
|
||||
function itemValue(item, index) {
|
||||
return item.value || item.label || String(index)
|
||||
}
|
||||
|
||||
function selectItem(item, index) {
|
||||
previousValue = selectedValue
|
||||
nextValue = itemValue(item, index)
|
||||
|
||||
$emit("select", {
|
||||
value: nextValue,
|
||||
previousValue: previousValue,
|
||||
item: item,
|
||||
index: index
|
||||
})
|
||||
|
||||
if (selectable && previousValue !== nextValue) {
|
||||
selectedValue = nextValue
|
||||
$emit("change", {
|
||||
value: nextValue,
|
||||
previousValue: previousValue,
|
||||
item: item,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--button-group wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<div
|
||||
{...attrs}
|
||||
class="wire-next wire-next--button-group {class}"
|
||||
role="{toolbar ? 'toolbar' : 'group'}"
|
||||
aria-label="{ariaLabel}"
|
||||
aria-orientation="{orientation}"
|
||||
data-size="{size}"
|
||||
data-color="{color}"
|
||||
data-variant="{variant}"
|
||||
data-orientation="{orientation}"
|
||||
data-responsive="{responsive}"
|
||||
data-attached="{attached}"
|
||||
data-selectable="{selectable}"
|
||||
data-disabled="{disabled}"
|
||||
>
|
||||
{#if items}
|
||||
{#each items as item, index}
|
||||
<button
|
||||
type="{item.type || 'button'}"
|
||||
class="wire-btn wire-btn--variant-{item.variant || variant} wire-btn--color-{item.color || color} wire-btn--size-{item.size || size}"
|
||||
disabled="{disabled || item.disabled}"
|
||||
aria-label="{item.ariaLabel || item.label}"
|
||||
aria-pressed="{selectable ? (selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false') : ''}"
|
||||
data-value="{item.value || item.label || String(index)}"
|
||||
data-selected="{selectable && selectedValue === (item.value || item.label || String(index)) ? 'true' : 'false'}"
|
||||
@click="selectItem(item, index)"
|
||||
>
|
||||
{#if item.icon}
|
||||
<span class="wire-btn__icon {item.icon}" aria-hidden="true">
|
||||
</span>
|
||||
{/if}
|
||||
<span class="wire-btn__label">{item.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
<slot />
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Buttoncomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Button</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Button</h1><p>Theme-aware, responsive button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>25 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Button
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Button</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Button</h1><p>Theme-aware, responsive button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Button
|
||||
label="Button"
|
||||
loadingLabel="Loading…"
|
||||
description="description"
|
||||
as="as"
|
||||
href="href"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Button"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Button"</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Loading…"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>as</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>pill</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaPressed</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaExpanded</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaControls</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>autofocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>controlClass</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/button.wrn</code></p><pre data-language="wrn"><code>component Button {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Button"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Button"</code></td></tr><tr><td><code>loadingLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Loading…"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>as</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"button"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>loading</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>pill</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaPressed</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaExpanded</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>ariaControls</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>autofocus</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>controlClass</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/button.wrn</code></p><pre data-language="wrn"><code>component Button {
|
||||
props {
|
||||
@event click = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
label = "Button"
|
||||
loadingLabel = "Loading…"
|
||||
description = ""
|
||||
@@ -181,7 +184,7 @@ page Buttoncomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
+261
-17
@@ -10,36 +10,280 @@ page Cardcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Card</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Card</h1><p>Theme-aware, responsive card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Card
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Card"
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Card</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Card</h1><p>Theme-aware, responsive card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>31 props</span><span>1 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Card
|
||||
title="Card title"
|
||||
subtitle="subtitle"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Card"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Card"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/card.wrn</code></p><pre data-language="wrn"><code>component Card {
|
||||
header="header"
|
||||
footer="footer"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Card"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Card title"</code></td></tr><tr><td><code>subtitle</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>header</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>footer</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>imageSrc</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>imageAlt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>imagePosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"top"</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>actionHref</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>headerActions</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>navigation</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>activeNav</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>mobileNavigation</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>alertTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alertDescription</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>"No data to show"</code></td></tr><tr><td><code>emptyIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--inbox]"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>layout</code></td><td><code>string</code></td><td>Optional</td><td><code>"vertical"</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"left"</code></td></tr><tr><td><code>hover</code></td><td><code>string</code></td><td>Optional</td><td><code>"none"</code></td></tr><tr><td><code>scrollable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>maxHeight</code></td><td><code>string</code></td><td>Optional</td><td><code>"18rem"</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li><li><code>action</code></li><li><code>navigate</code></li><li><code>dismiss</code></li><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/card.wrn</code></p><pre data-language="wrn"><code>component Card {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Card"
|
||||
@event click = function
|
||||
@event action = function
|
||||
@event navigate = function
|
||||
@event dismiss = function
|
||||
@event load = function
|
||||
@event error = function
|
||||
title = "Card title"
|
||||
subtitle = ""
|
||||
description = ""
|
||||
header = ""
|
||||
footer = ""
|
||||
imageSrc = ""
|
||||
imageAlt = ""
|
||||
imagePosition = "top"
|
||||
actionLabel = ""
|
||||
actionHref = ""
|
||||
headerActions = []
|
||||
navigation = []
|
||||
activeNav = ""
|
||||
mobileNavigation = false
|
||||
alertTitle = ""
|
||||
alertDescription = ""
|
||||
empty = false
|
||||
emptyTitle = "No data to show"
|
||||
emptyIcon = "icon-[lucide--inbox]"
|
||||
items = []
|
||||
size = "md"
|
||||
color = "primary"
|
||||
variant = "default"
|
||||
layout = "vertical"
|
||||
align = "left"
|
||||
hover = "none"
|
||||
scrollable = false
|
||||
maxHeight = "18rem"
|
||||
dismissible = false
|
||||
ariaLabel = ""
|
||||
class = ""
|
||||
}
|
||||
|
||||
state visible = true
|
||||
state selectedNav = activeNav
|
||||
|
||||
functions {
|
||||
function chooseNavigation(item, index) {
|
||||
previousValue = selectedNav
|
||||
selectedNav = item.value || item.label
|
||||
$emit("navigate", {
|
||||
value: selectedNav,
|
||||
previousValue: previousValue,
|
||||
item: item,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
|
||||
function chooseMobileNavigation(sourceEvent) {
|
||||
previousValue = selectedNav
|
||||
selectedNav = sourceEvent.target.value
|
||||
$emit("navigate", {
|
||||
value: selectedNav,
|
||||
previousValue: previousValue
|
||||
})
|
||||
}
|
||||
|
||||
function chooseAction(action, index) {
|
||||
$emit("action", {
|
||||
action: action,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
|
||||
function dismissCard(sourceEvent) {
|
||||
panel = sourceEvent.currentTarget.closest(".wire-next__card-panel")
|
||||
if (panel) {
|
||||
panel.setAttribute("hidden", "")
|
||||
}
|
||||
visible = false
|
||||
$emit("dismiss", {
|
||||
title: title
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--card wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
</section>
|
||||
<section
|
||||
{...attrs}
|
||||
class="wire-next wire-next--card {class}"
|
||||
data-size="{size}"
|
||||
data-color="{color}"
|
||||
data-variant="{variant}"
|
||||
data-layout="{layout}"
|
||||
data-align="{align}"
|
||||
data-hover="{hover}"
|
||||
data-image-position="{imagePosition}"
|
||||
data-group="{items.length > 0}"
|
||||
aria-label="{ariaLabel || title}"
|
||||
>
|
||||
{#if items.length > 0}
|
||||
<div class="wire-next__card-group">
|
||||
{#each items as item}
|
||||
<article class="wire-next__card-panel">
|
||||
{#if item.imageSrc}
|
||||
<div class="wire-next__card-media">
|
||||
<img src="{item.imageSrc}" alt="{item.imageAlt || ''}" loading="lazy" />
|
||||
</div>
|
||||
{/if}
|
||||
<div class="wire-next__card-body">
|
||||
{#if item.title}<h3>{item.title}</h3>{/if}
|
||||
{#if item.description}<p>{item.description}</p>{/if}
|
||||
</div>
|
||||
{#if item.footer}<footer class="wire-next__card-footer">{item.footer}</footer>{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if visible}
|
||||
<article class="wire-next__card-panel">
|
||||
{#if imagePosition === "overlay" && imageSrc}
|
||||
<div class="wire-next__card-media wire-next__card-media--overlay">
|
||||
<img
|
||||
src="{imageSrc}"
|
||||
alt="{imageAlt}"
|
||||
loading="lazy"
|
||||
@load="$emit('load', { src: imageSrc })"
|
||||
@error="$emit('error', { src: imageSrc })"
|
||||
/>
|
||||
<div class="wire-next__card-overlay">
|
||||
{#if title}<h3>{title}</h3>{/if}
|
||||
{#if subtitle}<span class="wire-next__card-subtitle">{subtitle}</span>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if footer}<small>{footer}</small>{/if}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
{#if header || headerActions.length > 0 || dismissible}
|
||||
<header class="wire-next__card-header">
|
||||
<span>{header}</span>
|
||||
{#if headerActions.length > 0 || dismissible}
|
||||
<span class="wire-next__card-header-actions">
|
||||
{#each headerActions as action, index}
|
||||
<button
|
||||
type="button"
|
||||
aria-label="{action.ariaLabel || action.label}"
|
||||
title="{action.label}"
|
||||
@click="chooseAction(action, index)"
|
||||
>
|
||||
{#if action.icon}<span class="{action.icon}" aria-hidden="true">
|
||||
</span>{/if}
|
||||
{#if !action.icon}<span>{action.label}</span>{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#if dismissible}
|
||||
<button type="button" aria-label="Close card" @click="dismissCard(event)">
|
||||
<span class="icon-[lucide--x]" aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#if navigation.length > 0}
|
||||
<nav class="wire-next__card-navigation" aria-label="{ariaLabel || title}">
|
||||
<div class="wire-next__card-tabs">
|
||||
{#each navigation as item, index}
|
||||
<button
|
||||
type="button"
|
||||
data-active="{selectedNav === (item.value || item.label)}"
|
||||
aria-current="{selectedNav === (item.value || item.label) ? 'page' : ''}"
|
||||
@click="chooseNavigation(item, index)"
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if mobileNavigation}
|
||||
<select
|
||||
class="wire-next__card-navigation-select"
|
||||
aria-label="{ariaLabel || title}"
|
||||
value="{selectedNav}"
|
||||
@change="chooseMobileNavigation(event)"
|
||||
>
|
||||
{#each navigation as item}
|
||||
<option
|
||||
value="{item.value || item.label}"
|
||||
selected="{selectedNav === (item.value || item.label)}"
|
||||
>
|
||||
{item.label}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</nav>
|
||||
{/if}
|
||||
|
||||
{#if imageSrc && imagePosition !== "bottom"}
|
||||
<div class="wire-next__card-media">
|
||||
<img
|
||||
src="{imageSrc}"
|
||||
alt="{imageAlt}"
|
||||
loading="lazy"
|
||||
@load="$emit('load', { src: imageSrc })"
|
||||
@error="$emit('error', { src: imageSrc })"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if alertTitle || alertDescription}
|
||||
<aside class="wire-next__card-alert" role="status">
|
||||
{#if alertTitle}<strong>{alertTitle}</strong>{/if}
|
||||
{#if alertDescription}<span>{alertDescription}</span>{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="wire-next__card-body"
|
||||
data-scrollable="{scrollable}"
|
||||
style="--wire-card-max-height: {maxHeight}"
|
||||
>
|
||||
{#if empty}
|
||||
<div class="wire-next__card-empty">
|
||||
<span class="{emptyIcon}" aria-hidden="true">
|
||||
</span>
|
||||
<strong>{emptyTitle}</strong>
|
||||
</div>
|
||||
{:else}
|
||||
{#if title}<h3>{title}</h3>{/if}
|
||||
{#if subtitle}<span class="wire-next__card-subtitle">{subtitle}</span>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
<slot />
|
||||
{#if actionLabel}
|
||||
<a
|
||||
class="wire-next__card-action"
|
||||
href="{actionHref || '#'}"
|
||||
@click="$emit('action', { label: actionLabel, href: actionHref })"
|
||||
>
|
||||
{actionLabel}<span class="icon-[lucide--chevron-right]" aria-hidden="true">
|
||||
</span>
|
||||
</a>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if footer}<footer class="wire-next__card-footer">{footer}</footer>{/if}
|
||||
|
||||
{#if imageSrc && imagePosition === "bottom"}
|
||||
<div class="wire-next__card-media">
|
||||
<img
|
||||
src="{imageSrc}"
|
||||
alt="{imageAlt}"
|
||||
loading="lazy"
|
||||
@load="$emit('load', { src: imageSrc })"
|
||||
@error="$emit('error', { src: imageSrc })"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</article>
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,480 @@ page Carouselcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Carousel
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Carousel</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Carousel</h1><p>Theme-aware, responsive carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>1 slots</span><span>10 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Carousel
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Carousel"
|
||||
title="title"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Carousel"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Carousel"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Carousel.wrn</code></p><pre data-language="wrn"><code>component Carousel {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Carousel"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>activeIndex</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>slidesPerView</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>"0.75rem"</code></td></tr><tr><td><code>showPagination</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoPlay</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autoplayInterval</code></td><td><code>number</code></td><td>Optional</td><td><code>4000</code></td></tr><tr><td><code>isInfiniteLoop</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isRTL</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isCentered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isDraggable</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isAutoHeight</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>isSnap</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showCounter</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>thumbnails</code></td><td><code>string</code></td><td>Optional</td><td><code>"none"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Content carousel"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>initialize</code></li><li><code>change</code></li><li><code>previous</code></li><li><code>next</code></li><li><code>play</code></li><li><code>pause</code></li><li><code>reachStart</code></li><li><code>reachEnd</code></li><li><code>dragStart</code></li><li><code>dragEnd</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/carousel.wrn</code></p><pre data-language="wrn"><code>// Interactive, hydration-safe content carousel.
|
||||
component Carousel {
|
||||
props {
|
||||
@event initialize = function
|
||||
@event change = function
|
||||
@event previous = function
|
||||
@event next = function
|
||||
@event play = function
|
||||
@event pause = function
|
||||
@event reachStart = function
|
||||
@event reachEnd = function
|
||||
@event dragStart = function
|
||||
@event dragEnd = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Carousel"
|
||||
title = ""
|
||||
description = ""
|
||||
items = []
|
||||
activeIndex = 0
|
||||
slidesPerView = 1
|
||||
gap = "0.75rem"
|
||||
showPagination = false
|
||||
isAutoPlay = false
|
||||
autoplayInterval = 4000
|
||||
isInfiniteLoop = false
|
||||
isRTL = false
|
||||
isCentered = false
|
||||
isDraggable = false
|
||||
isAutoHeight = false
|
||||
isSnap = false
|
||||
showCounter = false
|
||||
thumbnails = "none"
|
||||
ariaLabel = "Content carousel"
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
|
||||
state currentIndex = activeIndex
|
||||
state playing = false
|
||||
state dragOrigin = null
|
||||
state dragOffset = 0
|
||||
state autoplayTimer = null
|
||||
state carouselRoot = null
|
||||
|
||||
functions {
|
||||
function slideCount() {
|
||||
return items.length
|
||||
}
|
||||
|
||||
function maximumIndex(count, visible) {
|
||||
count = slideCount()
|
||||
visible = Math.max(1, Number(slidesPerView) || 1)
|
||||
if (isCentered || isSnap) {
|
||||
return Math.max(0, count - 1)
|
||||
}
|
||||
return Math.max(0, count - visible)
|
||||
}
|
||||
|
||||
function normalizedIndex(index, maximum) {
|
||||
maximum = maximumIndex()
|
||||
if (slideCount() === 0) {
|
||||
return 0
|
||||
}
|
||||
if (isInfiniteLoop) {
|
||||
if (index < 0) {
|
||||
return maximum
|
||||
}
|
||||
if (index > maximum) {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
return Math.max(0, Math.min(index, maximum))
|
||||
}
|
||||
|
||||
function rememberRoot(sourceEvent, root) {
|
||||
if (!sourceEvent || !sourceEvent.currentTarget) {
|
||||
return
|
||||
}
|
||||
root = sourceEvent.currentTarget.closest(".wire-next--carousel")
|
||||
if (root) {
|
||||
carouselRoot = root
|
||||
}
|
||||
}
|
||||
|
||||
function syncNavigation(sourceEvent, index, root, viewport, slides, slide, thumbnails, thumbnail, rail) {
|
||||
rememberRoot(sourceEvent)
|
||||
root = carouselRoot
|
||||
if (!root) {
|
||||
return
|
||||
}
|
||||
if (isSnap) {
|
||||
viewport = root.querySelector(".wire-next__carousel-viewport")
|
||||
slides = root.querySelectorAll(".wire-next__carousel-slide")
|
||||
slide = slides[index]
|
||||
if (viewport && slide) {
|
||||
viewport.scrollTo({
|
||||
left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
}
|
||||
thumbnails = root.querySelectorAll(".wire-next__carousel-thumbnails button")
|
||||
if (thumbnails[index]) {
|
||||
thumbnail = thumbnails[index]
|
||||
rail = thumbnail.parentElement
|
||||
rail.scrollTo({
|
||||
left: thumbnail.offsetLeft - (rail.clientWidth - thumbnail.clientWidth) / 2,
|
||||
top: thumbnail.offsetTop - (rail.clientHeight - thumbnail.clientHeight) / 2,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handleSnapScroll(sourceEvent, slides, viewport, viewportCenter, closestIndex, closestDistance, slide, slideCenter, distance, previousIndex) {
|
||||
if (!isSnap) {
|
||||
return
|
||||
}
|
||||
rememberRoot(sourceEvent)
|
||||
viewport = sourceEvent.currentTarget
|
||||
slides = viewport.querySelectorAll(".wire-next__carousel-slide")
|
||||
viewportCenter = viewport.scrollLeft + viewport.clientWidth / 2
|
||||
closestIndex = currentIndex
|
||||
closestDistance = 1000000000
|
||||
slides.forEach(function (candidate, index) {
|
||||
slideCenter = candidate.offsetLeft + candidate.clientWidth / 2
|
||||
distance = Math.abs(slideCenter - viewportCenter)
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance
|
||||
closestIndex = index
|
||||
}
|
||||
})
|
||||
closestIndex = normalizedIndex(closestIndex)
|
||||
if (closestIndex !== currentIndex) {
|
||||
previousIndex = currentIndex
|
||||
currentIndex = closestIndex
|
||||
$emit("change", {
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex],
|
||||
reason: "snap"
|
||||
})
|
||||
slides = carouselRoot.querySelectorAll(".wire-next__carousel-thumbnails button")
|
||||
slide = slides[currentIndex]
|
||||
if (slide) {
|
||||
viewport = slide.parentElement
|
||||
viewport.scrollTo({
|
||||
left: slide.offsetLeft - (viewport.clientWidth - slide.clientWidth) / 2,
|
||||
top: slide.offsetTop - (viewport.clientHeight - slide.clientHeight) / 2,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function selectSlide(index, reason, sourceEvent, previousIndex) {
|
||||
if (slideCount() === 0) {
|
||||
return
|
||||
}
|
||||
previousIndex = currentIndex
|
||||
currentIndex = normalizedIndex(Number(index))
|
||||
syncNavigation(sourceEvent, currentIndex)
|
||||
if (previousIndex === currentIndex && reason !== "initialize") {
|
||||
return
|
||||
}
|
||||
$emit("change", {
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex],
|
||||
reason: reason || "select"
|
||||
})
|
||||
if (currentIndex === 0) {
|
||||
$emit("reachStart", { index: currentIndex })
|
||||
}
|
||||
if (currentIndex === maximumIndex()) {
|
||||
$emit("reachEnd", { index: currentIndex })
|
||||
}
|
||||
}
|
||||
|
||||
function previousSlide(sourceEvent, previousIndex) {
|
||||
previousIndex = currentIndex
|
||||
selectSlide(currentIndex - 1, "previous", sourceEvent)
|
||||
$emit("previous", {
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex]
|
||||
})
|
||||
}
|
||||
|
||||
function nextSlide(sourceEvent, previousIndex) {
|
||||
previousIndex = currentIndex
|
||||
selectSlide(currentIndex + 1, "next", sourceEvent)
|
||||
$emit("next", {
|
||||
index: currentIndex,
|
||||
previousIndex: previousIndex,
|
||||
item: items[currentIndex]
|
||||
})
|
||||
}
|
||||
|
||||
function handleKeydown(sourceEvent) {
|
||||
if (sourceEvent.key === "ArrowLeft") {
|
||||
sourceEvent.preventDefault()
|
||||
if (isRTL) {
|
||||
nextSlide(sourceEvent)
|
||||
} else {
|
||||
previousSlide(sourceEvent)
|
||||
}
|
||||
}
|
||||
if (sourceEvent.key === "ArrowRight") {
|
||||
sourceEvent.preventDefault()
|
||||
if (isRTL) {
|
||||
previousSlide(sourceEvent)
|
||||
} else {
|
||||
nextSlide(sourceEvent)
|
||||
}
|
||||
}
|
||||
if (sourceEvent.key === "Home") {
|
||||
sourceEvent.preventDefault()
|
||||
selectSlide(0, "keyboard", sourceEvent)
|
||||
}
|
||||
if (sourceEvent.key === "End") {
|
||||
sourceEvent.preventDefault()
|
||||
selectSlide(maximumIndex(), "keyboard", sourceEvent)
|
||||
}
|
||||
}
|
||||
|
||||
function beginDrag(sourceEvent) {
|
||||
if (!isDraggable || isSnap) {
|
||||
return
|
||||
}
|
||||
sourceEvent.preventDefault()
|
||||
dragOrigin = sourceEvent.clientX
|
||||
dragOffset = 0
|
||||
sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId)
|
||||
$emit("dragStart", { index: currentIndex, x: dragOrigin })
|
||||
}
|
||||
|
||||
function moveDrag(sourceEvent) {
|
||||
if (!isDraggable || isSnap || dragOrigin === null) {
|
||||
return
|
||||
}
|
||||
sourceEvent.preventDefault()
|
||||
dragOffset = sourceEvent.clientX - dragOrigin
|
||||
}
|
||||
|
||||
function cancelDrag() {
|
||||
dragOrigin = null
|
||||
dragOffset = 0
|
||||
}
|
||||
|
||||
function endDrag(sourceEvent, distance) {
|
||||
if (!isDraggable || isSnap || dragOrigin === null) {
|
||||
return
|
||||
}
|
||||
sourceEvent.preventDefault()
|
||||
distance = dragOffset || sourceEvent.clientX - dragOrigin
|
||||
dragOrigin = null
|
||||
dragOffset = 0
|
||||
if (Math.abs(distance) > 20) {
|
||||
if ((distance < 0 && !isRTL) || (distance > 0 && isRTL)) {
|
||||
nextSlide(sourceEvent)
|
||||
} else {
|
||||
previousSlide(sourceEvent)
|
||||
}
|
||||
}
|
||||
$emit("dragEnd", {
|
||||
index: currentIndex,
|
||||
distance: distance
|
||||
})
|
||||
}
|
||||
|
||||
function advanceAutoplay() {
|
||||
if (currentIndex >= maximumIndex()) {
|
||||
selectSlide(0, "autoplay")
|
||||
} else {
|
||||
selectSlide(currentIndex + 1, "autoplay")
|
||||
}
|
||||
}
|
||||
|
||||
function startAutoplay() {
|
||||
if (!isAutoPlay || playing || slideCount() < 2) {
|
||||
return
|
||||
}
|
||||
playing = true
|
||||
autoplayTimer = setInterval(advanceAutoplay, Math.max(1000, Number(autoplayInterval)))
|
||||
$emit("play", { index: currentIndex, interval: autoplayInterval })
|
||||
}
|
||||
|
||||
function pauseAutoplay() {
|
||||
if (autoplayTimer) {
|
||||
clearInterval(autoplayTimer)
|
||||
}
|
||||
autoplayTimer = null
|
||||
if (playing) {
|
||||
$emit("pause", { index: currentIndex })
|
||||
}
|
||||
playing = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
lifecycle {
|
||||
mount {
|
||||
$emit("initialize", { index: currentIndex, count: slideCount() })
|
||||
startAutoplay()
|
||||
}
|
||||
unmount {
|
||||
if (autoplayTimer) {
|
||||
clearInterval(autoplayTimer)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--carousel wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
<section
|
||||
{...attrs}
|
||||
class="wire-next wire-next--carousel wire-next--color-{color} wire-next--size-{size} wire-next--variant-{variant} {class}"
|
||||
data-rtl="{isRTL}"
|
||||
data-centered="{isCentered}"
|
||||
data-draggable="{isDraggable && !isSnap}"
|
||||
data-dragging="{dragOrigin !== null}"
|
||||
data-auto-height="{isAutoHeight}"
|
||||
data-snap="{isSnap}"
|
||||
data-thumbnails="{thumbnails}"
|
||||
dir="{isRTL ? 'rtl' : 'ltr'}"
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
aria-label="{ariaLabel}"
|
||||
@keydown="handleKeydown(event)"
|
||||
@mouseenter="rememberRoot(event); pauseAutoplay()"
|
||||
@mouseleave="startAutoplay()"
|
||||
@focusin="rememberRoot(event); pauseAutoplay()"
|
||||
@focusout="startAutoplay()"
|
||||
>
|
||||
{#if title || description}
|
||||
<header class="wire-next__carousel-header">
|
||||
{#if title}<h3>{title}</h3>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
<div class="wire-next__carousel-layout">
|
||||
{#if thumbnails === "vertical"}
|
||||
<div class="wire-next__carousel-thumbnails" aria-label="Choose a slide">
|
||||
{#each items as item, index}
|
||||
<button
|
||||
type="button"
|
||||
data-active="{index === currentIndex}"
|
||||
aria-label="Show slide {index + 1}: {item.label || item.title}"
|
||||
aria-current="{index === currentIndex ? 'true' : 'false'}"
|
||||
@click="selectSlide(index, 'thumbnail', event)"
|
||||
>
|
||||
{#if item.thumbnail}<img src="{item.thumbnail}" alt="" />{/if}
|
||||
<span>{item.label || item.title || "Slide " + (index + 1)}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="wire-next__carousel-main">
|
||||
<div class="wire-next__carousel-stage">
|
||||
<div
|
||||
class="wire-next__carousel-viewport"
|
||||
tabindex="0"
|
||||
@scroll="handleSnapScroll(event)"
|
||||
@pointerdown="beginDrag(event)"
|
||||
@pointermove="moveDrag(event)"
|
||||
@pointerup="endDrag(event)"
|
||||
@pointercancel="cancelDrag()"
|
||||
@lostpointercapture="cancelDrag()"
|
||||
>
|
||||
<div
|
||||
class="wire-next__carousel-track"
|
||||
style="--wire-carousel-index: {currentIndex}; --wire-carousel-per-view: {slidesPerView}; --wire-carousel-gap: {gap}; --wire-carousel-drag-offset: {dragOffset}px"
|
||||
>
|
||||
{#each items as item, index}
|
||||
<article
|
||||
class="wire-next__carousel-slide"
|
||||
data-active="{index === currentIndex}"
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
aria-label="{index + 1} of {items.length}"
|
||||
aria-hidden="{index === currentIndex ? 'false' : 'true'}"
|
||||
>
|
||||
{#if item.imageSrc}
|
||||
<img src="{item.imageSrc}" alt="{item.imageAlt || item.title || ''}" />
|
||||
{/if}
|
||||
<div class="wire-next__carousel-slide-content">
|
||||
{#if item.eyebrow}<span>{item.eyebrow}</span>{/if}
|
||||
{#if item.title || item.label}<h4>{item.title || item.label}</h4>{/if}
|
||||
{#if item.description}<p>{item.description}</p>{/if}
|
||||
{#if item.actionLabel}
|
||||
<a href="{item.actionHref || '#'}">{item.actionLabel}</a>
|
||||
{/if}
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="wire-next__carousel-control wire-next__carousel-control--previous"
|
||||
type="button"
|
||||
aria-label="Previous slide"
|
||||
disabled="{!isInfiniteLoop && currentIndex === 0}"
|
||||
@click="previousSlide(event)"
|
||||
>
|
||||
<span class="icon-[lucide--chevron-left]" aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="wire-next__carousel-control wire-next__carousel-control--next"
|
||||
type="button"
|
||||
aria-label="Next slide"
|
||||
disabled="{!isInfiniteLoop && currentIndex === maximumIndex()}"
|
||||
@click="nextSlide(event)"
|
||||
>
|
||||
<span class="icon-[lucide--chevron-right]" aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{#if showCounter}
|
||||
<output class="wire-next__carousel-counter" aria-live="polite">
|
||||
{currentIndex + 1} / {items.length}
|
||||
</output>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showPagination}
|
||||
<div class="wire-next__carousel-pagination" aria-label="Choose a slide">
|
||||
{#each items as item, index}
|
||||
<button
|
||||
type="button"
|
||||
data-active="{index === currentIndex}"
|
||||
aria-label="Show slide {index + 1}"
|
||||
aria-current="{index === currentIndex ? 'true' : 'false'}"
|
||||
@click="selectSlide(index, 'pagination', event)"
|
||||
>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if thumbnails === "horizontal"}
|
||||
<div class="wire-next__carousel-thumbnails" aria-label="Choose a slide">
|
||||
{#each items as item, index}
|
||||
<button
|
||||
type="button"
|
||||
data-active="{index === currentIndex}"
|
||||
aria-label="Show slide {index + 1}: {item.label || item.title}"
|
||||
aria-current="{index === currentIndex ? 'true' : 'false'}"
|
||||
@click="selectSlide(index, 'thumbnail', event)"
|
||||
>
|
||||
{#if item.thumbnail}<img src="{item.thumbnail}" alt="" />{/if}
|
||||
<span>{item.label || item.title || "Slide " + (index + 1)}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Chartcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chart</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Chart</h1><p>Theme-aware, responsive chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Chart
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Chart</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Chart</h1><p>Theme-aware, responsive chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Chart
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Chart"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Chart"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Chart"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Chart.wrn</code></p><pre data-language="wrn"><code>component Chart {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Chart"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Chart"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>dataPointClick</code></li><li><code>legendToggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Chart.wrn</code></p><pre data-language="wrn"><code>component Chart {
|
||||
props {
|
||||
@event select = function
|
||||
@event dataPointClick = function
|
||||
@event legendToggle = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Chart"
|
||||
@@ -39,7 +42,7 @@ page Chartcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,165 @@ page ChatBubblecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChatBubble</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ChatBubble</h1><p>Theme-aware, responsive chat bubble component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ChatBubble
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ChatBubble</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ChatBubble</h1><p>Theme-aware, responsive chat bubble component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>11 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ChatBubble
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Chat Bubble"
|
||||
title="title"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ChatBubble"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Chat Bubble"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChatBubble.wrn</code></p><pre data-language="wrn"><code>component ChatBubble {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ChatBubble"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>oneSided</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showAvatars</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showMetadata</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Conversation"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>action</code></li><li><code>messageClick</code></li><li><code>avatarClick</code></li><li><code>linkClick</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ChatBubble.wrn</code></p><pre data-language="wrn"><code>component ChatBubble {
|
||||
props {
|
||||
@event action = function
|
||||
@event messageClick = function
|
||||
@event avatarClick = function
|
||||
@event linkClick = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Chat Bubble"
|
||||
title = ""
|
||||
description = ""
|
||||
items = []
|
||||
oneSided = false
|
||||
showAvatars = false
|
||||
showMetadata = false
|
||||
ariaLabel = "Conversation"
|
||||
variant = "default"
|
||||
class = ""
|
||||
}
|
||||
|
||||
functions {
|
||||
function messageDirection(item) {
|
||||
return item.direction === "outgoing" ? "outgoing" : "incoming"
|
||||
}
|
||||
|
||||
function selectMessage(item, index) {
|
||||
$emit("messageClick", {
|
||||
item: item,
|
||||
index: index,
|
||||
direction: messageDirection(item)
|
||||
})
|
||||
}
|
||||
|
||||
function selectAvatar(sourceEvent, item, index) {
|
||||
sourceEvent.stopPropagation()
|
||||
$emit("avatarClick", {
|
||||
item: item,
|
||||
index: index,
|
||||
direction: messageDirection(item)
|
||||
})
|
||||
}
|
||||
|
||||
function selectLink(sourceEvent, link, item, index) {
|
||||
sourceEvent.stopPropagation()
|
||||
$emit("linkClick", {
|
||||
link: link,
|
||||
item: item,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
|
||||
function selectAction(sourceEvent, item, index) {
|
||||
sourceEvent.stopPropagation()
|
||||
$emit("action", {
|
||||
action: item.action || "retry",
|
||||
item: item,
|
||||
index: index
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<section
|
||||
{...attrs}
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--chat-bubble wire-next--variant-{variant} {class}"
|
||||
data-one-sided="{oneSided}"
|
||||
role="log"
|
||||
aria-label="{ariaLabel}"
|
||||
aria-live="polite"
|
||||
>
|
||||
{#if title || description}
|
||||
<header class="wire-next__chat-header">
|
||||
{#if title}<h3>{title}</h3>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
{#if items.length}
|
||||
<div class="wire-next__chat-thread">
|
||||
{#each items as item, index}
|
||||
<article
|
||||
class="wire-next__chat-message"
|
||||
data-direction="{messageDirection(item)}"
|
||||
aria-label="{messageDirection(item) === 'outgoing' ? 'Sent message' : 'Received message'}"
|
||||
>
|
||||
<div class="wire-next__chat-row">
|
||||
{#if showAvatars && (item.avatarSrc || item.avatarFallback)}
|
||||
<button
|
||||
class="wire-next__chat-avatar"
|
||||
type="button"
|
||||
aria-label="{item.avatarLabel || item.author || 'Message author'}"
|
||||
@click="selectAvatar(event, item, index)"
|
||||
>
|
||||
{#if item.avatarSrc}
|
||||
<img src="{item.avatarSrc}" alt="{item.avatarAlt || ''}" />
|
||||
{:else}
|
||||
<span>{item.avatarFallback}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="wire-next__chat-content"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="selectMessage(item, index)"
|
||||
@keydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); selectMessage(item, index) }"
|
||||
>
|
||||
{#if item.title}<h4>{item.title}</h4>{/if}
|
||||
{#if item.text}<p>{item.text}</p>{/if}
|
||||
{#if item.bullets && item.bullets.length}
|
||||
<ul>
|
||||
{#each item.bullets as bullet}<li>{bullet}</li>{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
{#if item.links && item.links.length}
|
||||
<nav aria-label="Message links">
|
||||
{#each item.links as link}
|
||||
<a
|
||||
href="{link.href || '#'}"
|
||||
@click="selectLink(event, link, item, index)"
|
||||
>{link.label}</a>
|
||||
{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showMetadata && (item.timestamp || item.status || item.actionLabel)}
|
||||
<footer class="wire-next__chat-meta" data-tone="{item.statusTone || 'muted'}">
|
||||
{#if item.statusIcon}<span class="{item.statusIcon}" aria-hidden="true">
|
||||
</span>{/if}
|
||||
{#if item.status}<span>{item.status}</span>{/if}
|
||||
{#if item.timestamp}<time datetime="{item.datetime || ''}">{item.timestamp}</time>{/if}
|
||||
{#if item.actionLabel}
|
||||
<button type="button" @click="selectAction(event, item, index)">
|
||||
{item.actionLabel}
|
||||
</button>
|
||||
{/if}
|
||||
</footer>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,35 +10,81 @@ page Checkboxcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checkbox</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Checkbox</h1><p>Theme-aware, responsive checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Checkbox
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Checkbox</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Checkbox</h1><p>Theme-aware, responsive checkbox component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>27 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Checkbox
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Checkbox"
|
||||
id="id"
|
||||
name="name"
|
||||
value="on"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Checkbox"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Checkbox"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/checkbox.wrn</code></p><pre data-language="wrn"><code>component Checkbox {
|
||||
label="Checkbox"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Checkbox"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Checkbox"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>indeterminate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"vertical"</code></td></tr><tr><td><code>card</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>rightAligned</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>list</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Checkbox.wrn</code></p><pre data-language="wrn"><code>component Checkbox {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Checkbox"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Checkbox"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
value = "on"
|
||||
values = []
|
||||
options = []
|
||||
checked = false
|
||||
indeterminate = false
|
||||
orientation = "vertical"
|
||||
card = false
|
||||
rightAligned = false
|
||||
list = false
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, values: values, name: name, sourceEvent: sourceEvent }) }
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice wire-next--checkbox {class}">
|
||||
<input {...attrs} type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" />
|
||||
<span>{label}</span>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--checkbox-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
|
||||
<div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
|
||||
{#if options.length}
|
||||
<div class="wire-next__checkbox-group" role="group" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
|
||||
{#each options as option}
|
||||
<label class="wire-next__choice wire-next--checkbox" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
|
||||
<input id="{id || name}-{option.value}" type="checkbox" name="{name}" value="{option.value}" checked="{values.includes(option.value) || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
<span class="wire-next__choice-copy">
|
||||
<strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<label class="wire-next__choice wire-next--checkbox" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
|
||||
<input id="{id || name}" type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{indeterminate ? 'mixed' : (checked ? 'true' : 'false')}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Clipboardcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Clipboard</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Clipboard</h1><p>Theme-aware, responsive clipboard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Clipboard
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Clipboard</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Clipboard</h1><p>Theme-aware, responsive clipboard component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Clipboard
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Clipboard"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Clipboard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Clipboard"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Clipboard.wrn</code></p><pre data-language="wrn"><code>component Clipboard {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Clipboard"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Clipboard"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>copy</code></li><li><code>success</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Clipboard.wrn</code></p><pre data-language="wrn"><code>component Clipboard {
|
||||
props {
|
||||
@event copy = function
|
||||
@event success = function
|
||||
@event error = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Clipboard"
|
||||
@@ -39,7 +42,7 @@ page Clipboardcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,34 +10,112 @@ page Collapsecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Collapse</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Collapse</h1><p>Theme-aware, responsive collapse component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Collapse
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Collapse</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Collapse</h1><p>Theme-aware, responsive collapse component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Collapse
|
||||
size="default"
|
||||
color="primary"
|
||||
items="[]"
|
||||
multiple="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Collapse"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Collapse.wrn</code></p><pre data-language="wrn"><code>component Collapse {
|
||||
mode="panel"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Collapse"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>mode</code></td><td><code>string</code></td><td>Optional</td><td><code>"panel"</code></td></tr><tr><td><code>initialOpenIndexes</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Collapsible content"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Collapse.wrn</code></p><pre data-language="wrn"><code>component Collapse {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
items = []
|
||||
multiple = false
|
||||
mode = "panel"
|
||||
initialOpenIndexes = []
|
||||
ariaLabel = "Collapsible content"
|
||||
class = ""
|
||||
}
|
||||
|
||||
state openIndexes = initialOpenIndexes
|
||||
|
||||
functions {
|
||||
function isOpen(index) {
|
||||
return openIndexes.includes(index)
|
||||
}
|
||||
|
||||
function toggleItem(index, item, opening) {
|
||||
if (item.disabled) {
|
||||
return
|
||||
}
|
||||
opening = !isOpen(index)
|
||||
if (opening) {
|
||||
if (multiple) {
|
||||
openIndexes = openIndexes.concat(index)
|
||||
} else {
|
||||
openIndexes = [index]
|
||||
}
|
||||
$emit("open", { index: index, item: item })
|
||||
} else {
|
||||
openIndexes = openIndexes.filter((openIndex) => openIndex !== index)
|
||||
$emit("close", { index: index, item: item })
|
||||
}
|
||||
$emit("toggle", {
|
||||
index: index,
|
||||
item: item,
|
||||
open: opening,
|
||||
openIndexes: openIndexes
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}">
|
||||
{#each items as item}<details open="{item.open}">
|
||||
<summary>{item.label}</summary>
|
||||
<div>{item.content}</div>
|
||||
</details>{/each}
|
||||
<slot />
|
||||
<section
|
||||
{...attrs}
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--collapse {class}"
|
||||
data-mode="{mode}"
|
||||
aria-label="{ariaLabel}"
|
||||
>
|
||||
{#each items as item, index}
|
||||
<article class="wire-next__collapse-item" data-open="{isOpen(index)}">
|
||||
{#if mode === "inline" && item.preview}
|
||||
<p class="wire-next__collapse-preview">{item.preview}</p>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="wire-next__collapse-trigger"
|
||||
type="button"
|
||||
aria-expanded="{isOpen(index) ? 'true' : 'false'}"
|
||||
aria-controls="{item.id || 'collapse-panel-' + index}"
|
||||
disabled="{item.disabled}"
|
||||
@click="toggleItem(index, item)"
|
||||
>
|
||||
<span>{isOpen(index) ? (item.closeLabel || "Read less") : item.label}</span>
|
||||
<span class="icon-[lucide--chevron-down] wire-next__collapse-chevron" aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
id="{item.id || 'collapse-panel-' + index}"
|
||||
class="wire-next__collapse-panel"
|
||||
data-open="{isOpen(index)}"
|
||||
aria-hidden="{isOpen(index) ? 'false' : 'true'}"
|
||||
inert="{!isOpen(index)}"
|
||||
>
|
||||
<div class="wire-next__collapse-content">
|
||||
{#if item.title}<h4>{item.title}</h4>{/if}
|
||||
{#if item.content}<p>{item.content}</p>{/if}
|
||||
{#if item.links && item.links.length}
|
||||
<nav aria-label="Related links">
|
||||
{#each item.links as link}<a href="{link.href || '#'}">{link.label}</a>{/each}
|
||||
</nav>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{/each}
|
||||
<slot />
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,59 @@ page ColorPickercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorPicker</h1><p>Theme-aware, responsive color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ColorPicker
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ColorPicker</h1><p>Theme-aware, responsive color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>19 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ColorPicker
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Color Picker"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ColorPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Color Picker"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"color"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorPicker.wrn</code></p><pre data-language="wrn"><code>component ColorPicker {
|
||||
label="Color"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ColorPicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Color"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"#2563eb"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ColorPicker.wrn</code></p><pre data-language="wrn"><code>component ColorPicker {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Color Picker"
|
||||
id = ""
|
||||
name = ""
|
||||
value = ""
|
||||
label = "Color"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
type = "color"
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
value = "#2563eb"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
variant = "normal"
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--field wire-next--color-picker {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--color-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__color-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}<input id="{id || name}" type="color" name="{name}" value="{value}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" />
|
||||
<output>{value}</output>
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Columnscomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Columns</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Columns</h1><p>Theme-aware, responsive columns component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Columns
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Columns</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Columns</h1><p>Theme-aware, responsive columns component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Columns
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
@@ -35,7 +35,7 @@ page Columnscomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page ComboBoxcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComboBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ComboBox</h1><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>41 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ComboBox
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ComboBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ComboBox</h1><p>Editable autocomplete combobox with local and remote suggestions.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>41 props</span><span>0 slots</span><span>8 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ComboBox
|
||||
size="default"
|
||||
color="primary"
|
||||
label="ComboBox"
|
||||
@@ -413,7 +413,7 @@ page ComboBoxcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Confetticomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Confetti</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Confetti</h1><p>Theme-aware, responsive confetti component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Confetti
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Confetti</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Confetti</h1><p>Theme-aware, responsive confetti component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Confetti
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Confetti"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Confetti"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Confetti"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Confetti.wrn</code></p><pre data-language="wrn"><code>component Confetti {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Confetti"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Confetti"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>start</code></li><li><code>complete</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Confetti.wrn</code></p><pre data-language="wrn"><code>component Confetti {
|
||||
props {
|
||||
@event start = function
|
||||
@event complete = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Confetti"
|
||||
@@ -39,7 +41,7 @@ page Confetticomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Containercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Container</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Container</h1><p>Theme-aware, responsive container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Container
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Container</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Container</h1><p>Theme-aware, responsive container component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Container
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
@@ -35,7 +35,7 @@ page Containercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page ContextMenucomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ContextMenu</h1><p>Theme-aware, responsive context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ContextMenu
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ContextMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ContextMenu</h1><p>Theme-aware, responsive context menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ContextMenu
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Context Menu"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ContextMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Context Menu"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContextMenu.wrn</code></p><pre data-language="wrn"><code>component ContextMenu {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ContextMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Context Menu"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ContextMenu.wrn</code></p><pre data-language="wrn"><code>component ContextMenu {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Context Menu"
|
||||
@@ -42,7 +45,7 @@ page ContextMenucomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page CopyMarkupcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyMarkup</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>CopyMarkup</h1><p>Theme-aware, responsive copy markup component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><CopyMarkup
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CopyMarkup</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>CopyMarkup</h1><p>Theme-aware, responsive copy markup component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><CopyMarkup
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Copy Markup"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="CopyMarkup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Copy Markup"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopyMarkup.wrn</code></p><pre data-language="wrn"><code>component CopyMarkup {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="CopyMarkup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Copy Markup"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>copy</code></li><li><code>success</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CopyMarkup.wrn</code></p><pre data-language="wrn"><code>component CopyMarkup {
|
||||
props {
|
||||
@event copy = function
|
||||
@event success = function
|
||||
@event error = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Copy Markup"
|
||||
@@ -43,7 +46,7 @@ page CopyMarkupcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,18 @@ page CustomScrollbarcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomScrollbar</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CustomScrollbar</h1><p>Theme-aware, responsive custom scrollbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><CustomScrollbar
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">CustomScrollbar</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CustomScrollbar</h1><p>Theme-aware, responsive custom scrollbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><CustomScrollbar
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
gap="md"
|
||||
maxWidth="xl"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="CustomScrollbar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>"xl"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CustomScrollbar.wrn</code></p><pre data-language="wrn"><code>component CustomScrollbar {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="CustomScrollbar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>"xl"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>scroll</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/CustomScrollbar.wrn</code></p><pre data-language="wrn"><code>component CustomScrollbar {
|
||||
props {
|
||||
@event scroll = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
columns = 2
|
||||
@@ -35,7 +36,7 @@ page CustomScrollbarcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page DataMapcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataMap</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataMap</h1><p>Theme-aware, responsive data map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DataMap
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataMap</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataMap</h1><p>Theme-aware, responsive data map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DataMap
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Data Map"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DataMap"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Data Map"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataMap.wrn</code></p><pre data-language="wrn"><code>component DataMap {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DataMap"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Data Map"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataMap.wrn</code></p><pre data-language="wrn"><code>component DataMap {
|
||||
props {
|
||||
@event select = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Data Map"
|
||||
@@ -39,7 +41,7 @@ page DataMapcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,22 @@ page DataTablecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataTable</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataTable</h1><p>Theme-aware, responsive data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DataTable
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DataTable</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DataTable</h1><p>Theme-aware, responsive data table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DataTable
|
||||
size="default"
|
||||
color="primary"
|
||||
caption="Data Table"
|
||||
columns="[]"
|
||||
rows="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DataTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>"Data Table"</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataTable.wrn</code></p><pre data-language="wrn"><code>component DataTable {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DataTable"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>"Data Table"</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>sort</code></li><li><code>select</code></li><li><code>change</code></li><li><code>rowClick</code></li><li><code>pageChange</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DataTable.wrn</code></p><pre data-language="wrn"><code>component DataTable {
|
||||
props {
|
||||
@event sort = function
|
||||
@event select = function
|
||||
@event change = function
|
||||
@event rowClick = function
|
||||
@event pageChange = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
caption = "Data Table"
|
||||
@@ -43,7 +48,7 @@ page DataTablecomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,92 @@ page DatePickercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DatePicker
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DatePicker</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DatePicker</h1><p>Theme-aware, responsive date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DatePicker
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Date Picker"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DatePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Date Picker"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"date"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DatePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Date Picker"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"date"</code></td></tr><tr><td><code>locale</code></td><td><code>string</code></td><td>Optional</td><td><code>"en-US"</code></td></tr><tr><td><code>firstDayOfWeek</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>months</code></td><td><code>string</code></td><td>Optional</td><td><code>[{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }]</code></td></tr><tr><td><code>days</code></td><td><code>string</code></td><td>Optional</td><td><code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]</code></td></tr><tr><td><code>years</code></td><td><code>string</code></td><td>Optional</td><td><code>[2024, 2025, 2026, 2027, 2028, 2029, 2030]</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>open</code></li><li><code>close</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DatePicker.wrn</code></p><pre data-language="wrn"><code>component DatePicker {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Date Picker"
|
||||
id = ""
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "date"
|
||||
locale = "en-US"
|
||||
firstDayOfWeek = 0
|
||||
months = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }]
|
||||
days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]
|
||||
years = [2024, 2025, 2026, 2027, 2028, 2029, 2030]
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
variant = "normal"
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
state currentValue = value
|
||||
state selectedYear = value ? value.split("-")[0] : ""
|
||||
state selectedMonth = value ? value.split("-")[1] : ""
|
||||
state selectedDay = value ? value.split("-")[2] : ""
|
||||
state expanded = false
|
||||
functions {
|
||||
function openCalendar(sourceEvent) { expanded = true; $emit("open", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function updateDate(part, nextValue, sourceEvent, nextDate, detail) { if (part === "year") { selectedYear = String(nextValue) } if (part === "month") { selectedMonth = String(nextValue).padStart(2, "0") } if (part === "day") { selectedDay = String(nextValue).padStart(2, "0") } if (!selectedYear || !selectedMonth || !selectedDay) { return } nextDate = selectedYear + "-" + selectedMonth + "-" + selectedDay; if ((min && nextDate < min) || (max && nextDate > max)) { return } currentValue = nextDate; detail = { value: currentValue, year: selectedYear, month: selectedMonth, day: selectedDay, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function finishDate(sourceEvent) { if (!currentValue) { return } expanded = false; $emit("close", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function selectDay(sourceEvent, root, input, nextDate, trigger, detail) { root = sourceEvent.currentTarget.closest(".wire-next--date-picker"); input = root.querySelector(".wire-next__picker-value"); nextDate = input.getAttribute("value").slice(0, 5) + root.querySelector("select").getAttribute("value") + "-" + sourceEvent.currentTarget.dataset.value; currentValue = nextDate; input.setAttribute("value", nextDate); trigger = root.querySelector(".wire-next__date-trigger span"); if (trigger) { trigger.replaceChildren(nextDate) } sourceEvent.currentTarget.setAttribute("aria-pressed", "true"); detail = { value: nextDate, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function clearDate(sourceEvent, detail) { if (disabled || readonly) { return } currentValue = ""; detail = { value: currentValue, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function handleFocus(sourceEvent) { $emit("focus", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleBlur(sourceEvent) { $emit("blur", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--date-picker {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--date-picker {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__picker-control">
|
||||
<input id="{id || name}" class="wire-next__sr-only wire-next__picker-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
|
||||
<button type="button" class="wire-next__date-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openCalendar(event)" @focus="handleFocus(event)" @blur="handleBlur(event)">
|
||||
<span>{currentValue || placeholder || "Select date"}</span>
|
||||
<i class="icon-[lucide--calendar-days]" aria-hidden="true">
|
||||
</i>
|
||||
</button>{#if currentValue && !readonly && !disabled}<button type="button" class="wire-next__picker-clear" aria-label="Clear date" @click="clearDate(event)">×</button>{/if}</div>
|
||||
<div class="wire-next__calendar" role="dialog" aria-label="{label}">
|
||||
<div class="wire-next__date-selectors">
|
||||
<label>Month<select value="{selectedMonth}" @change="updateDate('month', event.currentTarget.value, event)">{#each months as month}<option value="{month.value}" selected="{month.value === selectedMonth}">{month.label}</option>{/each}</select>
|
||||
</label>
|
||||
<label>Year<select value="{selectedYear}" @change="updateDate('year', event.currentTarget.value, event)">{#each years as year}<option value="{year}" selected="{String(year) === selectedYear}">{year}</option>{/each}</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="wire-next__calendar-grid">{#each days as day}<button type="button" data-value="{String(day).padStart(2, '0')}" aria-pressed="{String(day).padStart(2, '0') === selectedDay}" @click="selectDay(event)">{day}</button>{/each}</div>
|
||||
<button type="button" class="wire-next__date-done" disabled="{!currentValue}" @click="finishDate(event)">Done</button>
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,53 @@ page DeviceFramecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DeviceFrame</h1><p>Theme-aware, responsive device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DeviceFrame
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DeviceFrame</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>DeviceFrame</h1><p>Theme-aware, responsive device frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>14 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DeviceFrame
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Device Frame"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DeviceFrame"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Device Frame"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeviceFrame.wrn</code></p><pre data-language="wrn"><code>component DeviceFrame {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DeviceFrame"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Device Frame"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>device</code></td><td><code>string</code></td><td>Optional</td><td><code>"phone"</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"portrait"</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>srcdoc</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>frameTitle</code></td><td><code>string</code></td><td>Optional</td><td><code>"Device preview"</code></td></tr><tr><td><code>showToolbar</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>allow</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>rotate</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DeviceFrame.wrn</code></p><pre data-language="wrn"><code>component DeviceFrame {
|
||||
props {
|
||||
@event change = function
|
||||
@event rotate = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Device Frame"
|
||||
description = ""
|
||||
items = []
|
||||
variant = "default"
|
||||
device = "phone"
|
||||
orientation = "portrait"
|
||||
src = ""
|
||||
srcdoc = ""
|
||||
frameTitle = "Device preview"
|
||||
showToolbar = true
|
||||
allow = ""
|
||||
class = ""
|
||||
}
|
||||
state currentOrientation = orientation
|
||||
functions {
|
||||
function setDevice(nextDevice, sourceEvent) { $emit("change", { device: nextDevice, orientation: currentOrientation, sourceEvent: sourceEvent }) }
|
||||
function rotateFrame(sourceEvent) { currentOrientation = currentOrientation === "portrait" ? "landscape" : "portrait"; $emit("rotate", { device: device, orientation: currentOrientation, sourceEvent: sourceEvent }); $emit("change", { device: device, orientation: currentOrientation, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--device-frame wire-next--variant-{variant} {class}">
|
||||
{#if title}<strong>{title}</strong>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
{#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
|
||||
<slot />
|
||||
<section {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--device-frame wire-next--variant-{variant} {class}" data-device="{device}" data-orientation="{currentOrientation}">
|
||||
<header>
|
||||
<div>{#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}</div>{#if showToolbar}<div class="wire-next__device-actions" role="toolbar" aria-label="Preview device">{#each items as item}<button type="button" aria-pressed="{item.value === device}" @click="setDevice(item.value, event)">{item.label}</button>{/each}<button type="button" aria-label="Rotate preview" @click="rotateFrame(event)">↻</button>
|
||||
</div>{/if}</header>
|
||||
<div class="wire-next__device-shell">{#if src || srcdoc}<iframe title="{frameTitle}" src="{src}" srcdoc="{srcdoc}" allow="{allow}">
|
||||
</iframe>{:else}<div class="wire-next__device-content">
|
||||
<slot />
|
||||
</div>{/if}</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Dividercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Divider</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Divider</h1><p>Theme-aware, responsive divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Divider
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Divider</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Divider</h1><p>Theme-aware, responsive divider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Divider
|
||||
size="default"
|
||||
color="primary"
|
||||
label="label"
|
||||
@@ -31,7 +31,7 @@ page Dividercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,23 @@ page DragAndDropcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DragAndDrop</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DragAndDrop</h1><p>Theme-aware, responsive drag and drop component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DragAndDrop
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">DragAndDrop</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>DragAndDrop</h1><p>Theme-aware, responsive drag and drop component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><DragAndDrop
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Drag And Drop"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DragAndDrop"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Drag And Drop"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DragAndDrop.wrn</code></p><pre data-language="wrn"><code>component DragAndDrop {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="DragAndDrop"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Drag And Drop"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>dragStart</code></li><li><code>dragEnd</code></li><li><code>dragEnter</code></li><li><code>dragLeave</code></li><li><code>drop</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/DragAndDrop.wrn</code></p><pre data-language="wrn"><code>component DragAndDrop {
|
||||
props {
|
||||
@event dragStart = function
|
||||
@event dragEnd = function
|
||||
@event dragEnter = function
|
||||
@event dragLeave = function
|
||||
@event drop = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Drag And Drop"
|
||||
@@ -39,7 +45,7 @@ page DragAndDropcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Drawercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Drawer</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Drawer</h1><p>Theme-aware, responsive drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Drawer
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Drawer</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Drawer</h1><p>Theme-aware, responsive drawer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Drawer
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Drawer"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Drawer"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Drawer"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Drawer.wrn</code></p><pre data-language="wrn"><code>component Drawer {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Drawer"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Drawer"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Drawer.wrn</code></p><pre data-language="wrn"><code>component Drawer {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Drawer"
|
||||
@@ -42,7 +44,7 @@ page Drawercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page Dropdowncomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Dropdown</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Dropdown</h1><p>Theme-aware, responsive dropdown component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Dropdown
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Dropdown</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Dropdown</h1><p>Theme-aware, responsive dropdown component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Dropdown
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Dropdown"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Dropdown"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Dropdown"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Dropdown.wrn</code></p><pre data-language="wrn"><code>component Dropdown {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Dropdown"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Dropdown"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Dropdown.wrn</code></p><pre data-language="wrn"><code>component Dropdown {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Dropdown"
|
||||
@@ -42,7 +46,7 @@ page Dropdowncomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,73 @@ page FileInputcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileInput</h1><p>Theme-aware, responsive file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileInput
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>FileInput</h1><p>Theme-aware, responsive file input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>21 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileInput
|
||||
size="default"
|
||||
color="primary"
|
||||
label="File Input"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"File Input"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"file"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileInput.wrn</code></p><pre data-language="wrn"><code>component FileInput {
|
||||
label="File"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileInput"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"File"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Choose a file"</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--upload]"</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>accept</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>select</code></li><li><code>clear</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileInput.wrn</code></p><pre data-language="wrn"><code>component FileInput {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event select = function
|
||||
@event clear = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "File Input"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "File"
|
||||
hiddenLabel = false
|
||||
placeholder = "Choose a file"
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "file"
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
icon = "icon-[lucide--upload]"
|
||||
iconPosition = "start"
|
||||
accept = ""
|
||||
multiple = false
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
variant = "normal"
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
state selectedName = ""
|
||||
functions {
|
||||
function handleChange(sourceEvent) {
|
||||
sourceEvent.stopPropagation()
|
||||
selectedName = sourceEvent.currentTarget.files && sourceEvent.currentTarget.files.length ? sourceEvent.currentTarget.files[0].name : ""
|
||||
$emit("input", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
|
||||
$emit("change", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
|
||||
if (selectedName) $emit("select", { files: sourceEvent.currentTarget.files, name: name, sourceEvent: sourceEvent })
|
||||
else $emit("clear", { name: name, sourceEvent: sourceEvent })
|
||||
}
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { name: name, sourceEvent: sourceEvent }) }
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--file-input {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--file-input {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__file-control" data-icon-position="{iconPosition}">{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}<span>{selectedName || value || placeholder}</span>
|
||||
<input id="{id || name}" type="file" name="{name}" accept="{accept}" multiple="{multiple}" disabled="{disabled}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="handleChange(event)" @change="handleChange(event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,36 +10,62 @@ page FileUploadProgresscomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>FileUploadProgress</h1><p>Theme-aware, responsive file upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileUploadProgress
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUploadProgress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>FileUploadProgress</h1><p>Theme-aware, responsive file upload progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileUploadProgress
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Progress"
|
||||
value="50"
|
||||
max="100"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileUploadProgress"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Progress"</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUploadProgress.wrn</code></p><pre data-language="wrn"><code>component FileUploadProgress {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileUploadProgress"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Progress"</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>fileName</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>fileSize</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>uploadedSize</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>status</code></td><td><code>string</code></td><td>Optional</td><td><code>"uploading"</code></td></tr><tr><td><code>cancelLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Cancel upload"</code></td></tr><tr><td><code>retryLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Retry upload"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>cancel</code></li><li><code>retry</code></li><li><code>complete</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUploadProgress.wrn</code></p><pre data-language="wrn"><code>component FileUploadProgress {
|
||||
props {
|
||||
@event cancel = function
|
||||
@event retry = function
|
||||
@event complete = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Progress"
|
||||
value = 50
|
||||
max = 100
|
||||
showValue = true
|
||||
fileName = ""
|
||||
fileSize = ""
|
||||
uploadedSize = ""
|
||||
status = "uploading"
|
||||
cancelLabel = "Cancel upload"
|
||||
retryLabel = "Retry upload"
|
||||
class = ""
|
||||
}
|
||||
state currentValue = value
|
||||
state currentStatus = status
|
||||
functions {
|
||||
function percent() { if (!Number(max)) { return 0 } return Math.max(0, Math.min(100, Math.round(Number(currentValue) / Number(max) * 100))) }
|
||||
function detail(sourceEvent) { return { value: currentValue, max: max, percent: percent(), status: currentStatus, fileName: fileName, sourceEvent: sourceEvent } }
|
||||
function cancelUpload(sourceEvent) { currentStatus = "cancelled"; $emit("cancel", detail(sourceEvent)) }
|
||||
function retryUpload(sourceEvent) { currentValue = 0; currentStatus = "uploading"; $emit("retry", detail(sourceEvent)) }
|
||||
function completeUpload(sourceEvent) { currentValue = max; currentStatus = "complete"; $emit("complete", detail(sourceEvent)) }
|
||||
}
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--file-upload-progress {class}">
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--file-upload-progress {class}" data-status="{currentStatus}" aria-live="polite">
|
||||
<div class="wire-next__row">
|
||||
<span>{label}</span>{#if showValue}<strong>{value}%</strong>{/if}</div>
|
||||
<progress value="{value}" max="{max}">
|
||||
<span>{#if fileName}<strong>{fileName}</strong>
|
||||
<small>{#if uploadedSize || fileSize}{uploadedSize}{#if uploadedSize && fileSize} of {/if}{fileSize}{:else}{label}{/if}</small>{:else}<strong>{label}</strong>{/if}</span>{#if showValue}<strong>{percent()}%</strong>{/if}</div>
|
||||
<progress value="{currentValue}" max="{max}" aria-label="{label}">
|
||||
</progress>
|
||||
<div class="wire-next__upload-status">
|
||||
<span class="wire-next__upload-status-icon" aria-hidden="true">
|
||||
</span>
|
||||
<span>{#if currentStatus === "uploading"}Uploading securely…{:else if currentStatus === "complete"}Upload complete{:else if currentStatus === "error"}Upload failed{:else}Upload cancelled{/if}</span>
|
||||
</div>
|
||||
<div class="wire-next__upload-actions">{#if currentStatus === "uploading"}<button type="button" @click="cancelUpload(event)">{cancelLabel}</button>
|
||||
<button type="button" @click="completeUpload(event)">Complete</button>{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}<button type="button" @click="retryUpload(event)">{retryLabel}</button>{/if}</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,24 @@ page FileUploadcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUpload</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>FileUpload</h1><p>Theme-aware, responsive file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileUpload
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">FileUpload</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>FileUpload</h1><p>Theme-aware, responsive file upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><FileUpload
|
||||
size="default"
|
||||
color="primary"
|
||||
title="File Upload"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileUpload"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"File Upload"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUpload.wrn</code></p><pre data-language="wrn"><code>component FileUpload {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="FileUpload"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"File Upload"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>upload</code></li><li><code>progress</code></li><li><code>success</code></li><li><code>error</code></li><li><code>cancel</code></li><li><code>remove</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/FileUpload.wrn</code></p><pre data-language="wrn"><code>component FileUpload {
|
||||
props {
|
||||
@event select = function
|
||||
@event upload = function
|
||||
@event progress = function
|
||||
@event success = function
|
||||
@event error = function
|
||||
@event cancel = function
|
||||
@event remove = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "File Upload"
|
||||
@@ -39,7 +46,7 @@ page FileUploadcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Gridcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Grid</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Grid</h1><p>Theme-aware, responsive grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Grid
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Grid</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Grid</h1><p>Theme-aware, responsive grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Grid
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
@@ -35,7 +35,7 @@ page Gridcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Imagecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Image</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Image</h1><p>Theme-aware, responsive image component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>9 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Image
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Image</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Image</h1><p>Theme-aware, responsive image component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>9 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Image
|
||||
size="default"
|
||||
color="primary"
|
||||
src="src"
|
||||
alt="alt"
|
||||
width="width"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Image"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>width</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>height</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>string</code></td><td>Optional</td><td><code>"lazy"</code></td></tr><tr><td><code>rounded</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Image.wrn</code></p><pre data-language="wrn"><code>component Image {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Image"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>src</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>alt</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>width</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>height</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>loading</code></td><td><code>string</code></td><td>Optional</td><td><code>"lazy"</code></td></tr><tr><td><code>rounded</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>load</code></li><li><code>error</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Image.wrn</code></p><pre data-language="wrn"><code>component Image {
|
||||
props {
|
||||
@event load = function
|
||||
@event error = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
src = ""
|
||||
@@ -39,7 +41,7 @@ page Imagecomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,70 @@ page InputGroupcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>InputGroup</h1><p>Theme-aware, responsive input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><InputGroup
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputGroup</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>InputGroup</h1><p>Theme-aware, responsive input group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><InputGroup
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Input Group"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="InputGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Input Group"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InputGroup.wrn</code></p><pre data-language="wrn"><code>component InputGroup {
|
||||
label="Input group"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="InputGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Input group"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>startText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>endText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>submit</code></li><li><code>action</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/InputGroup.wrn</code></p><pre data-language="wrn"><code>component InputGroup {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event submit = function
|
||||
@event action = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Input Group"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Input group"
|
||||
hiddenLabel = false
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
startText = ""
|
||||
endText = ""
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
actionLabel = ""
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
variant = "normal"
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleKeydown(sourceEvent) { if (sourceEvent.key === "Enter") { sourceEvent.stopPropagation(); $emit("submit", { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) } }
|
||||
function handleAction(sourceEvent) { $emit("action", { name: name, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input-group {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input-group {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__input-group-control">
|
||||
{#if startText}<span class="wire-next__input-addon">{startText}</span>{/if}
|
||||
{#if icon}<span class="{icon} wire-next__field-icon" data-position="{iconPosition}" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<input id="{id || name}" type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" readonly="{readonly}" disabled="{disabled}" required="{required}" aria-invalid="{error ? 'true' : 'false'}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @keydown="handleKeydown(event)" />
|
||||
{#if endText}<span class="wire-next__input-addon">{endText}</span>{/if}
|
||||
{#if actionLabel}<button type="button" disabled="{disabled}" @click="handleAction(event)">{actionLabel}</button>{/if}
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page InputNumbercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputNumber</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>InputNumber</h1><p>Theme-aware, responsive input number component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>40 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><InputNumber
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">InputNumber</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>InputNumber</h1><p>Theme-aware, responsive input number component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>40 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><InputNumber
|
||||
size="default"
|
||||
color="primary"
|
||||
variant="default"
|
||||
@@ -647,7 +647,7 @@ page InputNumbercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,110 @@ page Inputcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Input</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Input</h1><p>Theme-aware, responsive input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Input
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Input</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Input</h1><p>Theme-aware, responsive input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>28 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Input
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Input"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Input"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Input"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/input.wrn</code></p><pre data-language="wrn"><code>component Input {
|
||||
label="Input"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Input"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Input"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>autocomplete</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inputmode</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>pattern</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li><li><code>keydown</code></li><li><code>keyup</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Input.wrn</code></p><pre data-language="wrn"><code>component Input {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event invalid = function
|
||||
@event keydown = function
|
||||
@event keyup = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Input"
|
||||
id = ""
|
||||
name = ""
|
||||
value = ""
|
||||
label = "Input"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
value = ""
|
||||
type = "text"
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
autocomplete = ""
|
||||
inputmode = ""
|
||||
minlength = ""
|
||||
maxlength = ""
|
||||
pattern = ""
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function detail(sourceEvent) {
|
||||
return { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }
|
||||
}
|
||||
function handleInput(sourceEvent) { sourceEvent.stopPropagation(); $emit("input", detail(sourceEvent)) }
|
||||
function handleChange(sourceEvent) { sourceEvent.stopPropagation(); $emit("change", detail(sourceEvent)) }
|
||||
function handleFocus(sourceEvent) { sourceEvent.stopPropagation(); $emit("focus", detail(sourceEvent)) }
|
||||
function handleBlur(sourceEvent) { sourceEvent.stopPropagation(); $emit("blur", detail(sourceEvent)) }
|
||||
function handleInvalid(sourceEvent) { sourceEvent.stopPropagation(); $emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
|
||||
function handleKeydown(sourceEvent) { sourceEvent.stopPropagation(); $emit("keydown", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleKeyup(sourceEvent) { sourceEvent.stopPropagation(); $emit("keyup", { key: sourceEvent.key, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--input {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>
|
||||
{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}
|
||||
</div>
|
||||
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
|
||||
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<input
|
||||
id="{id || name}"
|
||||
type="{type}"
|
||||
name="{name}"
|
||||
value="{value}"
|
||||
placeholder="{variant === 'floating' ? ' ' : placeholder}"
|
||||
readonly="{readonly}"
|
||||
disabled="{disabled}"
|
||||
required="{required}"
|
||||
autocomplete="{autocomplete}"
|
||||
inputmode="{inputmode}"
|
||||
minlength="{minlength}"
|
||||
maxlength="{maxlength}"
|
||||
pattern="{pattern}"
|
||||
min="{min}"
|
||||
max="{max}"
|
||||
step="{step}"
|
||||
aria-invalid="{error ? 'true' : 'false'}"
|
||||
aria-describedby="{error ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}"
|
||||
@input="handleInput(event)"
|
||||
@change="handleChange(event)"
|
||||
@focus="handleFocus(event)"
|
||||
@blur="handleBlur(event)"
|
||||
@invalid="handleInvalid(event)"
|
||||
@keydown="handleKeydown(event)"
|
||||
@keyup="handleKeyup(event)"
|
||||
/>
|
||||
{#if variant === "floating"}<span class="wire-next__field-floating-label">{label}</span>{/if}
|
||||
</div>
|
||||
{#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
|
||||
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Kbdcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Kbd</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Kbd</h1><p>Theme-aware, responsive kbd component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Kbd
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Kbd</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Kbd</h1><p>Theme-aware, responsive kbd component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>4 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Kbd
|
||||
size="default"
|
||||
color="primary"
|
||||
label="⌘ K"
|
||||
@@ -31,7 +31,7 @@ page Kbdcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page LayoutSplittercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LayoutSplitter</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LayoutSplitter</h1><p>Theme-aware, responsive layout splitter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><LayoutSplitter
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LayoutSplitter</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>LayoutSplitter</h1><p>Theme-aware, responsive layout splitter component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><LayoutSplitter
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
gap="md"
|
||||
maxWidth="xl"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="LayoutSplitter"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>"xl"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LayoutSplitter.wrn</code></p><pre data-language="wrn"><code>component LayoutSplitter {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="LayoutSplitter"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>columns</code></td><td><code>number</code></td><td>Optional</td><td><code>2</code></td></tr><tr><td><code>gap</code></td><td><code>string</code></td><td>Optional</td><td><code>"md"</code></td></tr><tr><td><code>maxWidth</code></td><td><code>string</code></td><td>Optional</td><td><code>"xl"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>resizeStart</code></li><li><code>resize</code></li><li><code>resizeEnd</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LayoutSplitter.wrn</code></p><pre data-language="wrn"><code>component LayoutSplitter {
|
||||
props {
|
||||
@event resizeStart = function
|
||||
@event resize = function
|
||||
@event resizeEnd = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
columns = 2
|
||||
@@ -35,7 +38,7 @@ page LayoutSplittercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page LegendIndicatorcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>LegendIndicator</h1><p>Theme-aware, responsive legend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><LegendIndicator
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">LegendIndicator</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>LegendIndicator</h1><p>Theme-aware, responsive legend indicator component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><LegendIndicator
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Legend Indicator"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="LegendIndicator"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Legend Indicator"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegendIndicator.wrn</code></p><pre data-language="wrn"><code>component LegendIndicator {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="LegendIndicator"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Legend Indicator"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>toggle</code></li><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/LegendIndicator.wrn</code></p><pre data-language="wrn"><code>component LegendIndicator {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Legend Indicator"
|
||||
@@ -39,7 +41,7 @@ page LegendIndicatorcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Linkcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Link</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Link</h1><p>Theme-aware, responsive link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Link
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Link</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Link</h1><p>Theme-aware, responsive link component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Link
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Link"
|
||||
href="#"
|
||||
target="target"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Link"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Link"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>"#"</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>external</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Link.wrn</code></p><pre data-language="wrn"><code>component Link {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Link"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Link"</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>"#"</code></td></tr><tr><td><code>target</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>rel</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>external</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>click</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Link.wrn</code></p><pre data-language="wrn"><code>component Link {
|
||||
props {
|
||||
@event click = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Link"
|
||||
@@ -36,7 +39,7 @@ page Linkcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page ListGroupcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ListGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ListGroup</h1><p>Theme-aware, responsive list group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ListGroup
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ListGroup</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>ListGroup</h1><p>Theme-aware, responsive list group component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ListGroup
|
||||
size="default"
|
||||
color="primary"
|
||||
title="List Group"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ListGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"List Group"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ListGroup.wrn</code></p><pre data-language="wrn"><code>component ListGroup {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ListGroup"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"List Group"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ListGroup.wrn</code></p><pre data-language="wrn"><code>component ListGroup {
|
||||
props {
|
||||
@event select = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "List Group"
|
||||
@@ -39,7 +41,7 @@ page ListGroupcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Listcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">List</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>List</h1><p>Theme-aware, responsive list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><List
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">List</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>List</h1><p>Theme-aware, responsive list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><List
|
||||
size="default"
|
||||
color="primary"
|
||||
title="List"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="List"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"List"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/List.wrn</code></p><pre data-language="wrn"><code>component List {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="List"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"List"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/List.wrn</code></p><pre data-language="wrn"><code>component List {
|
||||
props {
|
||||
@event select = function
|
||||
@event click = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "List"
|
||||
@@ -39,7 +41,7 @@ page Listcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page Mapcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Map</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Map</h1><p>Theme-aware, responsive map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Map
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Map</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>Map</h1><p>Theme-aware, responsive map component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Map
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Map"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Map"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Map"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Map.wrn</code></p><pre data-language="wrn"><code>component Map {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Map"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Map"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>ready</code></li><li><code>move</code></li><li><code>zoom</code></li><li><code>markerClick</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Map.wrn</code></p><pre data-language="wrn"><code>component Map {
|
||||
props {
|
||||
@event ready = function
|
||||
@event move = function
|
||||
@event zoom = function
|
||||
@event markerClick = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Map"
|
||||
@@ -39,7 +43,7 @@ page Mapcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Marqueecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Marquee</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Marquee</h1><p>Theme-aware, responsive marquee component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Marquee
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Marquee</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Marquee</h1><p>Theme-aware, responsive marquee component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Marquee
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Marquee"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Marquee"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Marquee"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Marquee.wrn</code></p><pre data-language="wrn"><code>component Marquee {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Marquee"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Marquee"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>pause</code></li><li><code>resume</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Marquee.wrn</code></p><pre data-language="wrn"><code>component Marquee {
|
||||
props {
|
||||
@event pause = function
|
||||
@event resume = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Marquee"
|
||||
@@ -39,7 +41,7 @@ page Marqueecomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page MegaMenucomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>MegaMenu</h1><p>Theme-aware, responsive mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><MegaMenu
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">MegaMenu</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>MegaMenu</h1><p>Theme-aware, responsive mega menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><MegaMenu
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Mega Menu"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="MegaMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Mega Menu"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MegaMenu.wrn</code></p><pre data-language="wrn"><code>component MegaMenu {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="MegaMenu"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Mega Menu"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/MegaMenu.wrn</code></p><pre data-language="wrn"><code>component MegaMenu {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Mega Menu"
|
||||
@@ -37,7 +40,7 @@ page MegaMenucomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page Modalcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Modal</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Modal</h1><p>Theme-aware, responsive modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Modal
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Modal</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Modal</h1><p>Theme-aware, responsive modal component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Modal
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Modal"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Modal"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Modal"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Modal.wrn</code></p><pre data-language="wrn"><code>component Modal {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Modal"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Modal"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li><li><code>cancel</code></li><li><code>confirm</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Modal.wrn</code></p><pre data-language="wrn"><code>component Modal {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event cancel = function
|
||||
@event confirm = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Modal"
|
||||
@@ -42,7 +46,7 @@ page Modalcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Navcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Nav</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Nav</h1><p>Theme-aware, responsive nav component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Nav
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Nav</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Nav</h1><p>Theme-aware, responsive nav component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Nav
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Nav"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Nav"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Nav"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Nav.wrn</code></p><pre data-language="wrn"><code>component Nav {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Nav"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Nav"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Nav.wrn</code></p><pre data-language="wrn"><code>component Nav {
|
||||
props {
|
||||
@event select = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Nav"
|
||||
@@ -37,7 +39,7 @@ page Navcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Navbarcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navbar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Navbar</h1><p>Theme-aware, responsive navbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Navbar
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Navbar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Navbar</h1><p>Theme-aware, responsive navbar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Navbar
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Navbar"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Navbar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Navbar"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Navbar.wrn</code></p><pre data-language="wrn"><code>component Navbar {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Navbar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Navbar"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Navbar.wrn</code></p><pre data-language="wrn"><code>component Navbar {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Navbar"
|
||||
@@ -37,7 +40,7 @@ page Navbarcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Paginationcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pagination</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Pagination</h1><p>Theme-aware, responsive pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Pagination
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Pagination</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Pagination</h1><p>Theme-aware, responsive pagination component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Pagination
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Pagination"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Pagination"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Pagination"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Pagination.wrn</code></p><pre data-language="wrn"><code>component Pagination {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Pagination"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Pagination"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>previous</code></li><li><code>next</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Pagination.wrn</code></p><pre data-language="wrn"><code>component Pagination {
|
||||
props {
|
||||
@event change = function
|
||||
@event previous = function
|
||||
@event next = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Pagination"
|
||||
@@ -37,7 +40,7 @@ page Paginationcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page PinInputcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PinInput</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>PinInput</h1><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>26 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><PinInput
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">PinInput</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>PinInput</h1><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 props</span><span>0 slots</span><span>6 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><PinInput
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Verification code"
|
||||
@@ -133,7 +133,7 @@ page PinInputcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Popovercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Popover</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Popover</h1><p>Theme-aware, responsive popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Popover
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Popover</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Popover</h1><p>Theme-aware, responsive popover component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Popover
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Popover"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Popover"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Popover"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Popover.wrn</code></p><pre data-language="wrn"><code>component Popover {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Popover"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Popover"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Popover.wrn</code></p><pre data-language="wrn"><code>component Popover {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Popover"
|
||||
@@ -42,7 +44,7 @@ page Popovercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Progresscomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Progress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Progress</h1><p>Theme-aware, responsive progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Progress
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Progress</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Progress</h1><p>Theme-aware, responsive progress component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Progress
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Progress"
|
||||
@@ -39,7 +39,7 @@ page Progresscomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,35 +10,77 @@ page Radiocomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Radio</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Radio</h1><p>Theme-aware, responsive radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Radio
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Radio</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Radio</h1><p>Theme-aware, responsive radio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>25 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Radio
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Radio"
|
||||
id="id"
|
||||
name="name"
|
||||
value="on"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Radio"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Radio"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/radio.wrn</code></p><pre data-language="wrn"><code>component Radio {
|
||||
label="Radio"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Radio"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Radio"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"vertical"</code></td></tr><tr><td><code>card</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>rightAligned</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>list</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Radio.wrn</code></p><pre data-language="wrn"><code>component Radio {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Radio"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Radio"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
value = "on"
|
||||
options = []
|
||||
checked = false
|
||||
orientation = "vertical"
|
||||
card = false
|
||||
rightAligned = false
|
||||
list = false
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent }) }
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice wire-next--radio {class}">
|
||||
<input {...attrs} type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" />
|
||||
<span>{label}</span>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field wire-next--radio-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}" data-orientation="{orientation}" data-card="{card}" data-list="{list}" data-right-aligned="{rightAligned}">
|
||||
<div class="wire-next__field-heading">{#if options.length || cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}{/if}</div>
|
||||
{#if options.length}
|
||||
<div class="wire-next__radio-group" role="radiogroup" aria-label="{hiddenLabel ? label : ''}" aria-invalid="{error ? 'true' : 'false'}">
|
||||
{#each options as option}
|
||||
<label class="wire-next__choice wire-next--radio" for="{id || name}-{option.value}" data-variant="{variant}" data-disabled="{disabled || option.disabled}">
|
||||
<input id="{id || name}-{option.value}" type="radio" name="{name}" value="{option.value}" checked="{option.value === value || option.checked}" disabled="{disabled || option.disabled}" required="{required}" readonly="{readonly}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />
|
||||
<span class="wire-next__choice-copy">
|
||||
<strong>{option.label}</strong>{#if option.description}<small>{option.description}</small>{/if}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<label class="wire-next__choice wire-next--radio" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
|
||||
<input id="{id || name}" type="radio" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="emitField('invalid', event)" />{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,95 @@ page RangeSlidercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RangeSlider</h1><p>Theme-aware, responsive range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><RangeSlider
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">RangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>RangeSlider</h1><p>Theme-aware, responsive range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><RangeSlider
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Range Slider"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="RangeSlider"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Range Slider"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"range"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RangeSlider.wrn</code></p><pre data-language="wrn"><code>component RangeSlider {
|
||||
label="Range"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="RangeSlider"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Range"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>value</code></td><td><code>number</code></td><td>Optional</td><td><code>50</code></td></tr><tr><td><code>min</code></td><td><code>number</code></td><td>Optional</td><td><code>0</code></td></tr><tr><td><code>max</code></td><td><code>number</code></td><td>Optional</td><td><code>100</code></td></tr><tr><td><code>step</code></td><td><code>number</code></td><td>Optional</td><td><code>1</code></td></tr><tr><td><code>showValue</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showBounds</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showSteps</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>marks</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/RangeSlider.wrn</code></p><pre data-language="wrn"><code>component RangeSlider {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Range Slider"
|
||||
id = ""
|
||||
name = ""
|
||||
value = ""
|
||||
label = "Range"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
type = "range"
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
value = 50
|
||||
min = 0
|
||||
max = 100
|
||||
step = 1
|
||||
showValue = true
|
||||
showBounds = true
|
||||
showSteps = false
|
||||
marks = []
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
state currentValue = value
|
||||
functions {
|
||||
function percent() { if (Number(max) === Number(min)) { return 0 } return (Number(currentValue) - Number(min)) / (Number(max) - Number(min)) * 100 }
|
||||
function setValue(nextValue, sourceEvent, commit, detail, root, slider, input, output, progressValue) { if (readonly || disabled) { return } currentValue = Number(nextValue); root = sourceEvent.currentTarget.closest(".wire-next--range-slider"); if (root) { slider = root.querySelector("[role=slider]"); input = root.querySelector("input[name='" + name + "']"); output = root.querySelector("output"); progressValue = (currentValue - Number(min)) / (Number(max) - Number(min)) * 100; if (slider) { slider.setAttribute("aria-valuenow", String(currentValue)); slider.style.setProperty("--wire-range-progress", progressValue + "%") } if (input) { input.value = String(currentValue) } if (output) { output.textContent = String(currentValue) } } detail = { value: currentValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent }; $emit("input", detail); if (commit) { $emit("change", detail) } }
|
||||
function valueFromPointer(sourceEvent, rect, ratio) { rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); return Number(min) + ratio * (Number(max) - Number(min)) }
|
||||
function beginSlide(sourceEvent, rect, ratio, rawValue) { if (readonly || disabled) { return } sourceEvent.currentTarget.setPointerCapture(sourceEvent.pointerId); rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function moveSlide(sourceEvent, rect, ratio, rawValue) { if (!sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) { return } rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function endSlide(sourceEvent, rect, ratio, rawValue) { rect = sourceEvent.currentTarget.getBoundingClientRect(); ratio = Math.max(0, Math.min(1, (sourceEvent.clientX - rect.left) / rect.width)); rawValue = Number(min) + ratio * (Number(max) - Number(min)); currentValue = Number(min) + Math.round((rawValue - Number(min)) / Number(step)) * Number(step); if (sourceEvent.currentTarget.hasPointerCapture(sourceEvent.pointerId)) { sourceEvent.currentTarget.releasePointerCapture(sourceEvent.pointerId) } $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function selectMark(sourceEvent, root, slider, input, output, nextValue, progressValue, detail) { if (readonly || disabled) { return } root = sourceEvent.currentTarget.closest(".wire-next--range-slider"); slider = root.querySelector(".wire-next__custom-slider"); input = root.querySelector(".wire-next__range-value"); output = root.querySelector("output"); nextValue = Number(sourceEvent.currentTarget.dataset.value); currentValue = nextValue; progressValue = (nextValue - Number(min)) / (Number(max) - Number(min)) * 100; slider.setAttribute("aria-valuenow", String(nextValue)); slider.style.setProperty("--wire-range-progress", progressValue + "%"); input.setAttribute("value", String(nextValue)); output.replaceChildren(String(nextValue)); detail = { value: nextValue, min: min, max: max, step: step, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function handleKey(sourceEvent) { if (sourceEvent.key === "ArrowRight") { sourceEvent.preventDefault(); currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "ArrowLeft") { sourceEvent.preventDefault(); currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "Home") { sourceEvent.preventDefault(); currentValue = Number(min); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } if (sourceEvent.key === "End") { sourceEvent.preventDefault(); currentValue = Number(max); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) } }
|
||||
function emitFocus(nameEvent, sourceEvent) { $emit(nameEvent, { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function decreaseValue(sourceEvent) { currentValue = Math.max(Number(min), Number(currentValue) - Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function increaseValue(sourceEvent) { currentValue = Math.min(Number(max), Number(currentValue) + Number(step)); $emit("input", { value: currentValue, name: name, sourceEvent: sourceEvent }); $emit("change", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--range-slider {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--range-slider {class}" data-variant="{variant}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__range-control" data-variant="{variant}" data-icon-position="{iconPosition}" data-show-steps="{showSteps}">
|
||||
{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<button type="button" class="wire-next__range-stepper" aria-label="Decrease {label}" disabled="{disabled || readonly}" @click="decreaseValue(event)">−</button>
|
||||
<div class="wire-next__range-track">
|
||||
<input id="{id || name}" class="wire-next__sr-only wire-next__range-value" type="number" name="{name}" value="{currentValue}" min="{min}" max="{max}" step="{step}" required="{required}" readonly />
|
||||
<div class="wire-next__custom-slider" role="slider" tabindex="{disabled ? '-1' : '0'}" aria-label="{hiddenLabel ? label : ''}" aria-valuemin="{min}" aria-valuemax="{max}" aria-valuenow="{currentValue}" aria-disabled="{disabled}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" style="--wire-range-progress: {percent()}%" @pointerdown="beginSlide(event)" @pointermove="moveSlide(event)" @pointerup="endSlide(event)" @pointercancel="endSlide(event)" @keydown="handleKey(event)" @focus="emitFocus('focus', event)" @blur="emitFocus('blur', event)">
|
||||
<span class="wire-next__slider-fill">
|
||||
</span>
|
||||
<span class="wire-next__slider-thumb">
|
||||
</span>
|
||||
{#if marks.length}<span class="wire-next__slider-marks">{#each marks as mark}<button type="button" data-value="{mark.value}" style="left: {(Number(mark.value) - Number(min)) / (Number(max) - Number(min)) * 100}%" aria-label="{mark.label}" @click="selectMark(event)">
|
||||
</button>{/each}</span>{/if}
|
||||
</div>
|
||||
{#if showBounds}<div class="wire-next__range-bounds">
|
||||
<span>{min}</span>
|
||||
<span>Step {step}</span>
|
||||
<span>{max}</span>
|
||||
</div>{/if}
|
||||
</div>
|
||||
{#if showValue}<output for="{id || name}">{currentValue}</output>{/if}
|
||||
<button type="button" class="wire-next__range-stepper" aria-label="Increase {label}" disabled="{disabled || readonly}" @click="increaseValue(event)">+</button>
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Ratingcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Rating</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Rating</h1><p>Theme-aware, responsive rating component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Rating
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Rating</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Rating</h1><p>Theme-aware, responsive rating component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Rating
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Rating"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Rating"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Rating"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Rating.wrn</code></p><pre data-language="wrn"><code>component Rating {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Rating"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Rating"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Rating.wrn</code></p><pre data-language="wrn"><code>component Rating {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Rating"
|
||||
@@ -39,7 +41,7 @@ page Ratingcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,18 @@ page Scrollspycomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Scrollspy</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Scrollspy</h1><p>Theme-aware, responsive scrollspy component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Scrollspy
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Scrollspy</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Scrollspy</h1><p>Theme-aware, responsive scrollspy component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Scrollspy
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Scrollspy"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Scrollspy"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Scrollspy"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Scrollspy.wrn</code></p><pre data-language="wrn"><code>component Scrollspy {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Scrollspy"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Scrollspy"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Scrollspy.wrn</code></p><pre data-language="wrn"><code>component Scrollspy {
|
||||
props {
|
||||
@event change = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Scrollspy"
|
||||
@@ -37,7 +38,7 @@ page Scrollspycomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,22 @@ page SearchBoxcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>SearchBox</h1><p>Theme-aware, responsive search box component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><SearchBox
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">SearchBox</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>SearchBox</h1><p>Theme-aware, responsive search box component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>13 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><SearchBox
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Search Box"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="SearchBox"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Search Box"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"search"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchBox.wrn</code></p><pre data-language="wrn"><code>component SearchBox {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="SearchBox"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Search Box"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"search"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>search</code></li><li><code>submit</code></li><li><code>clear</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/SearchBox.wrn</code></p><pre data-language="wrn"><code>component SearchBox {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event search = function
|
||||
@event submit = function
|
||||
@event clear = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Search Box"
|
||||
@@ -43,7 +48,7 @@ page SearchBoxcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,38 +10,80 @@ page Selectcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Select</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Select</h1><p>Theme-aware, responsive select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Select
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Select</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Select</h1><p>Theme-aware, responsive select component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>22 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Select
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Select"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Select"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Select"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Select an option"</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/select.wrn</code></p><pre data-language="wrn"><code>component Select {
|
||||
label="Select"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Select"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Select"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>values</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>options</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>"Select an option"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>multiple</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>open</code></li><li><code>close</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Select.wrn</code></p><pre data-language="wrn"><code>component Select {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Select"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Select"
|
||||
hiddenLabel = false
|
||||
value = ""
|
||||
values = []
|
||||
options = []
|
||||
placeholder = "Select an option"
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
multiple = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function selected(option) {
|
||||
if (multiple) return values.includes(option.value)
|
||||
return option.value === value
|
||||
}
|
||||
function emitField(nameEvent, sourceEvent) {
|
||||
sourceEvent.stopPropagation()
|
||||
$emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
|
||||
}
|
||||
function handleFocus(sourceEvent) { emitField("focus", sourceEvent); $emit("open", { name: name, sourceEvent: sourceEvent }) }
|
||||
function handleBlur(sourceEvent) { emitField("blur", sourceEvent); $emit("close", { name: name, sourceEvent: sourceEvent }) }
|
||||
function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--select {class}">
|
||||
<span>{label}</span>
|
||||
<select {...attrs} name="{name}" multiple="{multiple}" disabled="{disabled}">
|
||||
<option value="">{placeholder}</option>{#each options as option}<option value="{option.value}" selected="{option.value === value}">{option.label}</option>{/each}</select>
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--select {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-readonly="{readonly}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
|
||||
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<select id="{id || name}" name="{name}" multiple="{multiple}" disabled="{disabled || readonly}" required="{required}" aria-readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="handleFocus(event)" @blur="handleBlur(event)" @invalid="handleInvalid(event)">
|
||||
{#if !multiple}<option value="" selected="{value === ''}" disabled="{required}">{placeholder}</option>{/if}
|
||||
{#each options as option}<option value="{option.value}" selected="{selected(option)}" disabled="{option.disabled}">{option.label}</option>{/each}
|
||||
</select>
|
||||
{#if variant === "floating"}<span class="wire-next__field-floating-label">{label}</span>{/if}
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
|
||||
<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Sidebarcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sidebar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Sidebar</h1><p>Theme-aware, responsive sidebar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Sidebar
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Sidebar</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Sidebar</h1><p>Theme-aware, responsive sidebar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Sidebar
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Sidebar"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Sidebar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Sidebar"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Sidebar.wrn</code></p><pre data-language="wrn"><code>component Sidebar {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Sidebar"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Sidebar"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>toggle</code></li><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Sidebar.wrn</code></p><pre data-language="wrn"><code>component Sidebar {
|
||||
props {
|
||||
@event toggle = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Sidebar"
|
||||
@@ -37,7 +40,7 @@ page Sidebarcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Skeletoncomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Skeleton</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Skeleton</h1><p>Theme-aware, responsive skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Skeleton
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Skeleton</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Skeleton</h1><p>Theme-aware, responsive skeleton component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Skeleton
|
||||
color="primary"
|
||||
label="Loading"
|
||||
size="md"
|
||||
@@ -35,7 +35,7 @@ page Skeletoncomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Spinnercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Spinner</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Spinner</h1><p>Theme-aware, responsive spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Spinner
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Spinner</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Spinner</h1><p>Theme-aware, responsive spinner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>5 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Spinner
|
||||
color="primary"
|
||||
label="Loading"
|
||||
size="md"
|
||||
@@ -35,7 +35,7 @@ page Spinnercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page Steppercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stepper</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Stepper</h1><p>Theme-aware, responsive stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Stepper
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Stepper</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Stepper</h1><p>Theme-aware, responsive stepper component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Stepper
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Stepper"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Stepper"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Stepper"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Stepper.wrn</code></p><pre data-language="wrn"><code>component Stepper {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Stepper"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Stepper"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>previous</code></li><li><code>next</code></li><li><code>complete</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Stepper.wrn</code></p><pre data-language="wrn"><code>component Stepper {
|
||||
props {
|
||||
@event change = function
|
||||
@event previous = function
|
||||
@event next = function
|
||||
@event complete = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Stepper"
|
||||
@@ -37,7 +41,7 @@ page Steppercomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page StrongPasswordcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StrongPassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>StrongPassword</h1><p>Theme-aware, responsive strong password component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>27 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><StrongPassword
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StrongPassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>StrongPassword</h1><p>Theme-aware, responsive strong password component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>27 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><StrongPassword
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Password"
|
||||
@@ -257,7 +257,7 @@ page StrongPasswordcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page StyledIconcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StyledIcon</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>StyledIcon</h1><p>Theme-aware, responsive styled icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><StyledIcon
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">StyledIcon</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>StyledIcon</h1><p>Theme-aware, responsive styled icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><StyledIcon
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Styled Icon"
|
||||
@@ -39,7 +39,7 @@ page StyledIconcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,35 +10,60 @@ page Switchcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Switch</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Switch</h1><p>Theme-aware, responsive switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Switch
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Switch</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Switch</h1><p>Theme-aware, responsive switch component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>20 props</span><span>0 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Switch
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Switch"
|
||||
id="id"
|
||||
name="name"
|
||||
value="on"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Switch"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Switch"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/switch.wrn</code></p><pre data-language="wrn"><code>component Switch {
|
||||
label="Switch"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Switch"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Switch"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"on"</code></td></tr><tr><td><code>checked</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Switch.wrn</code></p><pre data-language="wrn"><code>component Switch {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Switch"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Switch"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
value = "on"
|
||||
checked = false
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) { sourceEvent.stopPropagation(); $emit(nameEvent, { checked: sourceEvent.currentTarget.checked, value: value, name: name, sourceEvent: sourceEvent }) }
|
||||
function preventReadonly(sourceEvent) { if (readonly) sourceEvent.preventDefault() }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice wire-next--switch {class}">
|
||||
<input {...attrs} type="checkbox" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" />
|
||||
<span>{label}</span>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--choice-field {class}" data-inline="{inline}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">{#if cornerHint}<span class="{hiddenLabel ? 'wire-next__sr-only' : ''}">{label}</span>
|
||||
<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<label class="wire-next__choice wire-next--switch" for="{id || name}" data-variant="{variant}" data-icon-position="{iconPosition}">
|
||||
<input id="{id || name}" type="checkbox" role="switch" name="{name}" value="{value}" checked="{checked}" disabled="{disabled}" required="{required}" readonly="{readonly}" aria-checked="{checked ? 'true' : 'false'}" aria-invalid="{error ? 'true' : 'false'}" @click="preventReadonly(event)" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" />{#if icon}<span class="{icon}" aria-hidden="true">
|
||||
</span>{/if}<span class="{hiddenLabel || cornerHint ? 'wire-next__sr-only' : ''}">{label}</span>
|
||||
</label>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,20 @@ page Tablecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Table</span></nav><section class="doc-intro"><span class="eyebrow">tables component</span><h1>Table</h1><p>Theme-aware, responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Table
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Table</span></nav><section class="doc-intro"><span class="eyebrow">tables component</span><h1>Table</h1><p>Theme-aware, responsive table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Table
|
||||
size="default"
|
||||
color="primary"
|
||||
caption="Table"
|
||||
columns="[]"
|
||||
rows="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Table"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>"Table"</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/table.wrn</code></p><pre data-language="wrn"><code>component Table {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Table"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>caption</code></td><td><code>string</code></td><td>Optional</td><td><code>"Table"</code></td></tr><tr><td><code>columns</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>rows</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>striped</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>sort</code></li><li><code>select</code></li><li><code>rowClick</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/table.wrn</code></p><pre data-language="wrn"><code>component Table {
|
||||
props {
|
||||
@event sort = function
|
||||
@event select = function
|
||||
@event rowClick = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
caption = "Table"
|
||||
@@ -43,7 +46,7 @@ page Tablecomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Tabscomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tabs</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Tabs</h1><p>Theme-aware, responsive tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Tabs
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tabs</span></nav><section class="doc-intro"><span class="eyebrow">navigation component</span><h1>Tabs</h1><p>Theme-aware, responsive tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Tabs
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Tabs"
|
||||
items="[]"
|
||||
active="active"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Tabs"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tabs"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tabs.wrn</code></p><pre data-language="wrn"><code>component Tabs {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Tabs"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tabs"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>active</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>orientation</code></td><td><code>string</code></td><td>Optional</td><td><code>"horizontal"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Tabs.wrn</code></p><pre data-language="wrn"><code>component Tabs {
|
||||
props {
|
||||
@event change = function
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Tabs"
|
||||
@@ -37,7 +39,7 @@ page Tabscomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,37 +10,72 @@ page Textareacomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Textarea</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Textarea</h1><p>Theme-aware, responsive textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>10 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Textarea
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Textarea</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>Textarea</h1><p>Theme-aware, responsive textarea component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 props</span><span>0 slots</span><span>5 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Textarea
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Textarea"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Textarea"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Textarea"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>rows</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/textarea.wrn</code></p><pre data-language="wrn"><code>component Textarea {
|
||||
label="Textarea"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Textarea"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Textarea"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"start"</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>rows</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>resize</code></td><td><code>string</code></td><td>Optional</td><td><code>"vertical"</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>minlength</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>maxlength</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Textarea.wrn</code></p><pre data-language="wrn"><code>component Textarea {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Textarea"
|
||||
id = ""
|
||||
name = ""
|
||||
value = ""
|
||||
label = "Textarea"
|
||||
hiddenLabel = false
|
||||
placeholder = ""
|
||||
value = ""
|
||||
variant = "normal"
|
||||
icon = ""
|
||||
iconPosition = "start"
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
rows = 5
|
||||
resize = "vertical"
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
minlength = ""
|
||||
maxlength = ""
|
||||
class = ""
|
||||
}
|
||||
functions {
|
||||
function emitField(nameEvent, sourceEvent) {
|
||||
sourceEvent.stopPropagation()
|
||||
$emit(nameEvent, { value: sourceEvent.currentTarget.value, name: name, sourceEvent: sourceEvent })
|
||||
}
|
||||
function handleInvalid(sourceEvent) {
|
||||
$emit("invalid", { value: sourceEvent.currentTarget.value, name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent })
|
||||
}
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--textarea {class}">
|
||||
<span>{label}</span>
|
||||
<textarea {...attrs} name="{name}" placeholder="{placeholder}" rows="{rows}" disabled="{disabled}" required="{required}">{value}</textarea>
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--textarea {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
|
||||
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<textarea id="{id || name}" name="{name}" placeholder="{variant === 'floating' ? ' ' : placeholder}" rows="{rows}" style="resize: {resize}" readonly="{readonly}" disabled="{disabled}" required="{required}" minlength="{minlength}" maxlength="{maxlength}" aria-invalid="{error ? 'true' : 'false'}" aria-describedby="{error ? (id || name) + '-error' : (helperText ? (id || name) + '-help' : '')}" @input="emitField('input', event)" @change="emitField('change', event)" @focus="emitField('focus', event)" @blur="emitField('blur', event)" @invalid="handleInvalid(event)">{value}</textarea>
|
||||
{#if variant === "floating"}<span class="wire-next__field-floating-label">{label}</span>{/if}
|
||||
</div>
|
||||
{#if helperText}<small id="{(id || name) + '-help'}" class="wire-next__field-help">{helperText}</small>{/if}
|
||||
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,96 @@ page TimePickercomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimePicker</h1><p>Theme-aware, responsive time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TimePicker
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TimePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>TimePicker</h1><p>Theme-aware, responsive time picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>26 props</span><span>0 slots</span><span>7 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TimePicker
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Time Picker"
|
||||
id="id"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="TimePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Time Picker"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"time"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimePicker.wrn</code></p><pre data-language="wrn"><code>component TimePicker {
|
||||
label="Time"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="TimePicker"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Time"</code></td></tr><tr><td><code>hiddenLabel</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"normal"</code></td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--clock-3]"</code></td></tr><tr><td><code>iconPosition</code></td><td><code>string</code></td><td>Optional</td><td><code>"end"</code></td></tr><tr><td><code>helperText</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>cornerHint</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>error</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>inline</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>format</code></td><td><code>string</code></td><td>Optional</td><td><code>"24"</code></td></tr><tr><td><code>minuteStep</code></td><td><code>number</code></td><td>Optional</td><td><code>5</code></td></tr><tr><td><code>hours</code></td><td><code>string</code></td><td>Optional</td><td><code>["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]</code></td></tr><tr><td><code>minutes</code></td><td><code>string</code></td><td>Optional</td><td><code>["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]</code></td></tr><tr><td><code>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li><li><code>open</code></li><li><code>close</code></li><li><code>invalid</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TimePicker.wrn</code></p><pre data-language="wrn"><code>component TimePicker {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
@event open = function
|
||||
@event close = function
|
||||
@event invalid = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Time Picker"
|
||||
id = ""
|
||||
name = ""
|
||||
label = "Time"
|
||||
hiddenLabel = false
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "time"
|
||||
variant = "normal"
|
||||
icon = "icon-[lucide--clock-3]"
|
||||
iconPosition = "end"
|
||||
helperText = ""
|
||||
cornerHint = ""
|
||||
error = ""
|
||||
inline = false
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
format = "24"
|
||||
minuteStep = 5
|
||||
hours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
|
||||
minutes = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
|
||||
readonly = false
|
||||
disabled = false
|
||||
required = false
|
||||
class = ""
|
||||
}
|
||||
state currentValue = value
|
||||
state selectedHour = value ? value.split(":")[0] : "00"
|
||||
state selectedMinute = value ? value.split(":")[1] : "00"
|
||||
state expanded = false
|
||||
functions {
|
||||
function commit(part, nextValue, sourceEvent, next, detail) { if (part === "hour") { selectedHour = String(nextValue).padStart(2, "0") } if (part === "minute") { selectedMinute = String(nextValue).padStart(2, "0") } next = selectedHour + ":" + selectedMinute; if ((min && next < min) || (max && next > max)) { return } currentValue = next; detail = { value: currentValue, hour: selectedHour, minute: selectedMinute, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function selectTimePart(sourceEvent, root, input, parts, hourValue, minuteValue, next, trigger, detail) { root = sourceEvent.currentTarget.closest(".wire-next--time-picker"); input = root.querySelector(".wire-next__time-value"); parts = String(input.value || value || "00:00").split(":"); hourValue = sourceEvent.currentTarget.dataset.part === "hour" ? sourceEvent.currentTarget.dataset.value : parts[0]; minuteValue = sourceEvent.currentTarget.dataset.part === "minute" ? sourceEvent.currentTarget.dataset.value : parts[1]; next = hourValue + ":" + minuteValue; if ((min && next < min) || (max && next > max)) { return } currentValue = next; input.setAttribute("value", next); trigger = root.querySelector(".wire-next__time-trigger span"); if (trigger) { trigger.replaceChildren(next) } sourceEvent.currentTarget.setAttribute("aria-pressed", "true"); detail = { value: next, hour: hourValue, minute: minuteValue, name: name, sourceEvent: sourceEvent }; $emit("input", detail); $emit("change", detail) }
|
||||
function openPicker(sourceEvent) { expanded = true; $emit("open", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function closePicker(sourceEvent) { expanded = false; $emit("close", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleFocus(sourceEvent) { $emit("focus", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleBlur(sourceEvent) { $emit("blur", { value: currentValue, name: name, sourceEvent: sourceEvent }) }
|
||||
function handleInvalid(sourceEvent) { $emit("invalid", { name: name, message: sourceEvent.currentTarget.validationMessage, sourceEvent: sourceEvent }) }
|
||||
}
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--time-picker {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<div {...attrs} class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--time-picker {class}" data-variant="{variant}" data-inline="{inline}" data-floating="{variant === 'floating'}" data-invalid="{error ? 'true' : 'false'}" data-expanded="{expanded}">
|
||||
<div class="wire-next__field-heading">
|
||||
<label class="{hiddenLabel ? 'wire-next__sr-only' : ''}" for="{id || name}">{label}</label>{#if cornerHint}<span class="wire-next__field-hint">{cornerHint}</span>{/if}</div>
|
||||
<div class="wire-next__field-control" data-icon-position="{iconPosition}">
|
||||
{#if icon}<span class="{icon} wire-next__field-icon" aria-hidden="true">
|
||||
</span>{/if}
|
||||
<input id="{id || name}" class="wire-next__sr-only wire-next__time-value" type="text" name="{name}" value="{currentValue}" required="{required}" readonly aria-hidden="true" tabindex="-1" @invalid="handleInvalid(event)" />
|
||||
<button type="button" class="wire-next__time-trigger" disabled="{disabled || readonly}" aria-haspopup="dialog" aria-expanded="{expanded}" @click="openPicker(event)" @focus="handleFocus(event)" @blur="handleBlur(event)">
|
||||
<span>{currentValue || placeholder || "Select time"}</span>
|
||||
<i class="{icon}" aria-hidden="true">
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="wire-next__time-panel" role="dialog" aria-label="{label}">
|
||||
<div>
|
||||
<strong>Hour</strong>
|
||||
<div class="wire-next__time-options">{#each hours as hour}<button type="button" data-part="hour" data-value="{hour}" aria-pressed="{String(hour) === selectedHour}" @click="selectTimePart(event)">{hour}</button>{/each}</div>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Minute</strong>
|
||||
<div class="wire-next__time-options">{#each minutes as minute}<button type="button" data-part="minute" data-value="{minute}" aria-pressed="{String(minute) === selectedMinute}" @click="selectTimePart(event)">{minute}</button>{/each}</div>
|
||||
</div>
|
||||
<button type="button" class="wire-next__time-done" @click="closePicker(event)">Done</button>
|
||||
</div>
|
||||
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}
|
||||
<small class="wire-next__field-error" data-error="{name}">{error}</small>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,18 @@ page Timelinecomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Timeline</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Timeline</h1><p>Theme-aware, responsive timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Timeline
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Timeline</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Timeline</h1><p>Theme-aware, responsive timeline component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>1 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Timeline
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Timeline"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Timeline"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Timeline"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Timeline.wrn</code></p><pre data-language="wrn"><code>component Timeline {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Timeline"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Timeline"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Timeline.wrn</code></p><pre data-language="wrn"><code>component Timeline {
|
||||
props {
|
||||
@event select = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Timeline"
|
||||
@@ -39,7 +40,7 @@ page Timelinecomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page ToastNotificationscomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastNotifications</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>ToastNotifications</h1><p>Theme-aware, responsive toast notifications component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ToastNotifications
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToastNotifications</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>ToastNotifications</h1><p>Theme-aware, responsive toast notifications component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ToastNotifications
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Toast Notifications"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ToastNotifications"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toast Notifications"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastNotifications.wrn</code></p><pre data-language="wrn"><code>component ToastNotifications {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ToastNotifications"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toast Notifications"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>add</code></li><li><code>dismiss</code></li><li><code>clear</code></li><li><code>action</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToastNotifications.wrn</code></p><pre data-language="wrn"><code>component ToastNotifications {
|
||||
props {
|
||||
@event add = function
|
||||
@event dismiss = function
|
||||
@event clear = function
|
||||
@event action = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Toast Notifications"
|
||||
@@ -39,7 +43,7 @@ page ToastNotificationscomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Toastcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toast</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Toast</h1><p>Theme-aware, responsive toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Toast
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Toast</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>Toast</h1><p>Theme-aware, responsive toast component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Toast
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Toast"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Toast"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toast"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Toast.wrn</code></p><pre data-language="wrn"><code>component Toast {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Toast"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toast"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>dismiss</code></li><li><code>action</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/Toast.wrn</code></p><pre data-language="wrn"><code>component Toast {
|
||||
props {
|
||||
@event dismiss = function
|
||||
@event action = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Toast"
|
||||
@@ -39,7 +41,7 @@ page Toastcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,40 +10,254 @@ page ToggleCountcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleCount</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ToggleCount</h1><p>Theme-aware, responsive toggle count component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>13 props</span><span>0 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ToggleCount
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">ToggleCount</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>ToggleCount</h1><p>Theme-aware, responsive toggle count component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>23 props</span><span>0 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><ToggleCount
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Toggle Count"
|
||||
name="name"
|
||||
value="value"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ToggleCount"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>label</code></td><td><code>string</code></td><td>Optional</td><td><code>"Toggle Count"</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>placeholder</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>type</code></td><td><code>string</code></td><td>Optional</td><td><code>"text"</code></td></tr><tr><td><code>min</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>max</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>step</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToggleCount.wrn</code></p><pre data-language="wrn"><code>component ToggleCount {
|
||||
variant="segmented"
|
||||
name="billing-cycle"
|
||||
value="monthly"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="ToggleCount"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"segmented"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>name</code></td><td><code>string</code></td><td>Optional</td><td><code>"billing-cycle"</code></td></tr><tr><td><code>value</code></td><td><code>string</code></td><td>Optional</td><td><code>"monthly"</code></td></tr><tr><td><code>firstValue</code></td><td><code>string</code></td><td>Optional</td><td><code>"monthly"</code></td></tr><tr><td><code>firstLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Monthly"</code></td></tr><tr><td><code>secondValue</code></td><td><code>string</code></td><td>Optional</td><td><code>"annual"</code></td></tr><tr><td><code>secondLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Annual"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Billing frequency"</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>currency</code></td><td><code>string</code></td><td>Optional</td><td><code>"$"</code></td></tr><tr><td><code>suffix</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>firstValueKey</code></td><td><code>string</code></td><td>Optional</td><td><code>"monthly"</code></td></tr><tr><td><code>secondValueKey</code></td><td><code>string</code></td><td>Optional</td><td><code>"annual"</code></td></tr><tr><td><code>emptyValue</code></td><td><code>string</code></td><td>Optional</td><td><code>"—"</code></td></tr><tr><td><code>align</code></td><td><code>string</code></td><td>Optional</td><td><code>"end"</code></td></tr><tr><td><code>fullWidth</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>disabled</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>animate</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>animationDuration</code></td><td><code>number</code></td><td>Optional</td><td><code>450</code></td></tr><tr><td><code>animationSteps</code></td><td><code>number</code></td><td>Optional</td><td><code>18</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><p>This component does not declare a slot.</p></section><section id="events"><h2>Events</h2><ul><li><code>change</code></li><li><code>toggle</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/ToggleCount.wrn</code></p><pre data-language="wrn"><code>component ToggleCount {
|
||||
props {
|
||||
size = "default"
|
||||
color = "primary"
|
||||
label = "Toggle Count"
|
||||
name = ""
|
||||
value = ""
|
||||
placeholder = ""
|
||||
type = "text"
|
||||
min = ""
|
||||
max = ""
|
||||
step = ""
|
||||
disabled = false
|
||||
required = false
|
||||
variant = "segmented"
|
||||
class = ""
|
||||
|
||||
name = "billing-cycle"
|
||||
value = "monthly"
|
||||
firstValue = "monthly"
|
||||
firstLabel = "Monthly"
|
||||
secondValue = "annual"
|
||||
secondLabel = "Annual"
|
||||
ariaLabel = "Billing frequency"
|
||||
|
||||
items = []
|
||||
currency = "$"
|
||||
suffix = ""
|
||||
firstValueKey = "monthly"
|
||||
secondValueKey = "annual"
|
||||
emptyValue = "—"
|
||||
|
||||
align = "end"
|
||||
fullWidth = true
|
||||
disabled = false
|
||||
animate = true
|
||||
animationDuration = 450
|
||||
animationSteps = 18
|
||||
|
||||
@event change = function
|
||||
@event toggle = function
|
||||
}
|
||||
|
||||
state selectedValue = value
|
||||
|
||||
functions {
|
||||
function isFirstSelected() {
|
||||
return selectedValue === firstValue
|
||||
}
|
||||
|
||||
function isSecondSelected() {
|
||||
return selectedValue === secondValue
|
||||
}
|
||||
|
||||
function displayValue(item) {
|
||||
if (isSecondSelected()) {
|
||||
return item[secondValueKey] !== undefined
|
||||
? item[secondValueKey]
|
||||
: emptyValue
|
||||
}
|
||||
|
||||
return item[firstValueKey] !== undefined
|
||||
? item[firstValueKey]
|
||||
: emptyValue
|
||||
}
|
||||
|
||||
function dispatchToggleEvent(sourceEvent, previousValue, root, customEvent) {
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
|
||||
|
||||
if (!root) {
|
||||
return
|
||||
}
|
||||
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent("change", true, false, {
|
||||
component: "ToggleCount",
|
||||
name: name,
|
||||
value: selectedValue,
|
||||
previousValue: previousValue,
|
||||
firstValue: firstValue,
|
||||
secondValue: secondValue
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
|
||||
customEvent = document.createEvent("CustomEvent")
|
||||
customEvent.initCustomEvent("toggle", true, false, {
|
||||
component: "ToggleCount",
|
||||
name: name,
|
||||
value: selectedValue,
|
||||
previousValue: previousValue,
|
||||
firstValue: firstValue,
|
||||
secondValue: secondValue
|
||||
})
|
||||
root.dispatchEvent(customEvent)
|
||||
}
|
||||
|
||||
function selectValue(sourceEvent, nextValue, previousValue) {
|
||||
if (disabled || selectedValue === nextValue) {
|
||||
return
|
||||
}
|
||||
|
||||
previousValue = selectedValue
|
||||
selectedValue = nextValue
|
||||
|
||||
if (
|
||||
animate &&
|
||||
!window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
) {
|
||||
animateDisplayedValues(sourceEvent, previousValue)
|
||||
}
|
||||
|
||||
dispatchToggleEvent(sourceEvent, previousValue)
|
||||
}
|
||||
|
||||
function animateDisplayedValues(sourceEvent, previousValue, root, nodes) {
|
||||
root = sourceEvent.currentTarget.closest("[data-wrn-toggle-count]")
|
||||
|
||||
if (!root) {
|
||||
return
|
||||
}
|
||||
|
||||
nodes = root.querySelectorAll("[data-toggle-count-value]")
|
||||
animateValueAt(nodes, 0, previousValue)
|
||||
}
|
||||
|
||||
function animateValueAt(nodes, index, previousValue, node, fromValue, toValue) {
|
||||
if (index >= nodes.length) {
|
||||
return
|
||||
}
|
||||
|
||||
node = nodes[index]
|
||||
fromValue = Number(
|
||||
previousValue === secondValue
|
||||
? node.getAttribute("data-second-value")
|
||||
: node.getAttribute("data-first-value")
|
||||
)
|
||||
toValue = Number(
|
||||
selectedValue === secondValue
|
||||
? node.getAttribute("data-second-value")
|
||||
: node.getAttribute("data-first-value")
|
||||
)
|
||||
|
||||
if (!Number.isNaN(fromValue) && !Number.isNaN(toValue)) {
|
||||
animateValueFrame(node, fromValue, toValue, 0)
|
||||
}
|
||||
|
||||
animateValueAt(nodes, index + 1, previousValue)
|
||||
}
|
||||
|
||||
function animateValueFrame(node, fromValue, toValue, frame, totalFrames, nextValue) {
|
||||
totalFrames = Math.max(1, Number(animationSteps) || 1)
|
||||
|
||||
if (frame >= totalFrames) {
|
||||
node.replaceChildren(String(toValue))
|
||||
return
|
||||
}
|
||||
|
||||
nextValue = Math.round(
|
||||
fromValue +
|
||||
(toValue - fromValue) * (frame / totalFrames)
|
||||
)
|
||||
node.replaceChildren(String(nextValue))
|
||||
|
||||
setTimeout(
|
||||
animateValueFrame,
|
||||
Math.max(1, Number(animationDuration) / totalFrames),
|
||||
node,
|
||||
fromValue,
|
||||
toValue,
|
||||
frame + 1
|
||||
)
|
||||
}
|
||||
|
||||
function toggleValue(sourceEvent) {
|
||||
selectValue(
|
||||
sourceEvent,
|
||||
isFirstSelected() ? secondValue : firstValue
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
view {
|
||||
<label class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--field wire-next--toggle-count {class}">
|
||||
<span>{label}</span>
|
||||
<input {...attrs} type="{type}" name="{name}" value="{value}" placeholder="{placeholder}" min="{min}" max="{max}" step="{step}" disabled="{disabled}" required="{required}" />
|
||||
</label>
|
||||
<section
|
||||
{...attrs}
|
||||
data-wrn-toggle-count
|
||||
data-variant="{variant}"
|
||||
data-value="{selectedValue}"
|
||||
data-disabled="{disabled ? 'true' : 'false'}"
|
||||
class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--toggle-count wire-next--toggle-count-{variant} {fullWidth ? 'wire-next--toggle-count-full' : ''} {disabled ? 'wire-next--disabled' : ''} {class}"
|
||||
>
|
||||
<input type="hidden" name="{name}" value="{selectedValue}" />
|
||||
<div class="wire-next__toggle-count-control wire-next__toggle-count-control--{align}">
|
||||
{#if variant === "switch"}
|
||||
<span data-selected="{isFirstSelected() ? 'true' : 'false'}">{firstLabel}</span>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-label="{ariaLabel}"
|
||||
aria-checked="{isSecondSelected() ? 'true' : 'false'}"
|
||||
disabled="{disabled}"
|
||||
@click="toggleValue(event)"
|
||||
class="wire-next__toggle-count-switch"
|
||||
>
|
||||
<span aria-hidden="true">
|
||||
</span>
|
||||
</button>
|
||||
<span data-selected="{isSecondSelected() ? 'true' : 'false'}">{secondLabel}</span>
|
||||
{:else}
|
||||
<div class="wire-next__toggle-count-segmented" role="group" aria-label="{ariaLabel}">
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed="{isFirstSelected() ? 'true' : 'false'}"
|
||||
disabled="{disabled}"
|
||||
@click="selectValue(event, firstValue)"
|
||||
>{firstLabel}</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed="{isSecondSelected() ? 'true' : 'false'}"
|
||||
disabled="{disabled}"
|
||||
@click="selectValue(event, secondValue)"
|
||||
>{secondLabel}</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if items.length > 0}
|
||||
<div class="wire-next__toggle-count-items">
|
||||
{#each items as item}
|
||||
<article>
|
||||
<span>{item.label || item.name}</span>
|
||||
<strong>
|
||||
{#if currency}<small>{currency}</small>{/if}
|
||||
<span
|
||||
data-toggle-count-value
|
||||
data-first-value="{item[firstValueKey]}"
|
||||
data-second-value="{item[secondValueKey]}"
|
||||
>{displayValue(item)}</span>
|
||||
{#if suffix}<small>{suffix}</small>{/if}
|
||||
</strong>
|
||||
{#if item.description}<small>{item.description}</small>{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page TogglePasswordcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TogglePassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>TogglePassword</h1><p>Accessible password field with optional show and hide controls.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>24 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TogglePassword
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TogglePassword</span></nav><section class="doc-intro"><span class="eyebrow">advanced-forms component</span><h1>TogglePassword</h1><p>Accessible password field with optional show and hide controls.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>24 props</span><span>0 slots</span><span>3 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TogglePassword
|
||||
size="default"
|
||||
color="primary"
|
||||
label="Password"
|
||||
@@ -175,7 +175,7 @@ page TogglePasswordcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,19 @@ page Tooltipcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tooltip</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Tooltip</h1><p>Theme-aware, responsive tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>8 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Tooltip
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Tooltip</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>Tooltip</h1><p>Theme-aware, responsive tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>8 props</span><span>1 slots</span><span>2 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Tooltip
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Tooltip"
|
||||
description="description"
|
||||
open="false"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Tooltip"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tooltip"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/tooltip.wrn</code></p><pre data-language="wrn"><code>component Tooltip {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="Tooltip"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tooltip"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>open</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>placement</code></td><td><code>string</code></td><td>Optional</td><td><code>"bottom"</code></td></tr><tr><td><code>closeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Close"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>open</code></li><li><code>close</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/tooltip.wrn</code></p><pre data-language="wrn"><code>component Tooltip {
|
||||
props {
|
||||
@event open = function
|
||||
@event close = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Tooltip"
|
||||
@@ -42,7 +44,7 @@ page Tooltipcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page TreeViewcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeView</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>TreeView</h1><p>Theme-aware, responsive tree view component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TreeView
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">TreeView</span></nav><section class="doc-intro"><span class="eyebrow">base component</span><h1>TreeView</h1><p>Theme-aware, responsive tree view component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><TreeView
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Tree View"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="TreeView"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tree View"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TreeView.wrn</code></p><pre data-language="wrn"><code>component TreeView {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="TreeView"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Tree View"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>select</code></li><li><code>toggle</code></li><li><code>expand</code></li><li><code>collapse</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/TreeView.wrn</code></p><pre data-language="wrn"><code>component TreeView {
|
||||
props {
|
||||
@event select = function
|
||||
@event toggle = function
|
||||
@event expand = function
|
||||
@event collapse = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Tree View"
|
||||
@@ -39,7 +43,7 @@ page TreeViewcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,10 +10,10 @@ page Typographycomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Typography</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Typography</h1><p>Theme-aware, responsive typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Typography
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">Typography</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>Typography</h1><p>Theme-aware, responsive typography component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>6 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><Typography
|
||||
size="default"
|
||||
color="primary"
|
||||
columns="2"
|
||||
@@ -35,7 +35,7 @@ page Typographycomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -10,17 +10,21 @@ page WysiwygEditorcomponent {
|
||||
<header class="topbar">
|
||||
<a class="brand" href="/"><span>W</span> WRNexusJS</a>
|
||||
<nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
|
||||
</header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WysiwygEditor</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>WysiwygEditor</h1><p>Theme-aware, responsive wysiwyg editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.4.0</span><span>7 props</span><span>1 slots</span><span>0 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><WysiwygEditor
|
||||
<main class="portal-main docs-layout component-detail-page"><article id="main" class="documentation prose standalone"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/components">Components</a><span>/</span><span aria-current="page">WysiwygEditor</span></nav><section class="doc-intro"><span class="eyebrow">integrations component</span><h1>WysiwygEditor</h1><p>Theme-aware, responsive wysiwyg editor component.</p><div class="doc-meta"><span>@wrnexus/ui 0.5.0</span><span>7 props</span><span>1 slots</span><span>4 events</span></div></section><section id="usage"><h2>Usage</h2><p>Components are auto-discovered. Use the component directly in any <code>.wrn</code> view:</p><pre data-language="wrn"><code><WysiwygEditor
|
||||
size="default"
|
||||
color="primary"
|
||||
title="Wysiwyg Editor"
|
||||
description="description"
|
||||
items="[]"
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="WysiwygEditor"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Wysiwyg Editor"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><p>This component does not declare a custom event.</p></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WysiwygEditor.wrn</code></p><pre data-language="wrn"><code>component WysiwygEditor {
|
||||
/></code></pre><p>Legacy mount name: <code>data-component="WysiwygEditor"</code>.</p></section><section id="props"><h2>Props and attributes</h2><div class="table-wrap"><table><thead><tr><th>Prop</th><th>Type</th><th>Requirement</th><th>Default</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>color</code></td><td><code>string</code></td><td>Optional</td><td><code>"primary"</code></td></tr><tr><td><code>title</code></td><td><code>string</code></td><td>Optional</td><td><code>"Wysiwyg Editor"</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>items</code></td><td><code>string</code></td><td>Optional</td><td><code>[]</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"default"</code></td></tr><tr><td><code>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr></tbody></table></div></section><section id="slots"><h2>Slots</h2><ul><li><code>default</code></li></ul></section><section id="events"><h2>Events</h2><ul><li><code>input</code></li><li><code>change</code></li><li><code>focus</code></li><li><code>blur</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/WysiwygEditor.wrn</code></p><pre data-language="wrn"><code>component WysiwygEditor {
|
||||
props {
|
||||
@event input = function
|
||||
@event change = function
|
||||
@event focus = function
|
||||
@event blur = function
|
||||
size = "default"
|
||||
color = "primary"
|
||||
title = "Wysiwyg Editor"
|
||||
@@ -39,7 +43,7 @@ page WysiwygEditorcomponent {
|
||||
}
|
||||
}
|
||||
</code></pre></section></article><aside class="on-this-page"><h2>On this page</h2><nav><a href="#usage">Usage</a><a href="#props">Props and attributes</a><a href="#slots">Slots</a><a href="#events">Events</a><a href="#source">Source contract</a></nav></aside></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Examples {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Learn</span><span aria-hidden="true">/</span><span aria-current="page">Examples</span></nav><article class="documentation prose standalone"><h1>Examples</h1><p>Examples are tied to installed 0.4.0 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.</p><div class="coverage-list"><article><h2>Minimal .wrn page</h2><span class="status status-beta">Documented</span></article><article><h2>Database CRUD</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Authentication and protected route</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Permissions</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Forms and validation</h2><span class="status status-beta">Documented</span></article><article><h2>Realtime dashboard</h2><span class="status status-planned">Planned fixture</span></article><article><h2>File upload</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Background queue</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Redis pub/sub</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Workspace gateway</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Deployment</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Experimental mobile mode</h2><span class="status status-planned">Planned fixture</span></article></div></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Learn</span><span aria-hidden="true">/</span><span aria-current="page">Examples</span></nav><article class="documentation prose standalone"><h1>Examples</h1><p>Examples are tied to installed 0.5.0 package documentation. The focused snippets in guides are source-verified; standalone runnable projects and CI compilation are tracked as remaining work.</p><div class="coverage-list"><article><h2>Minimal .wrn page</h2><span class="status status-beta">Documented</span></article><article><h2>Database CRUD</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Authentication and protected route</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Permissions</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Forms and validation</h2><span class="status status-beta">Documented</span></article><article><h2>Realtime dashboard</h2><span class="status status-planned">Planned fixture</span></article><article><h2>File upload</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Background queue</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Redis pub/sub</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Workspace gateway</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Deployment</h2><span class="status status-planned">Planned fixture</span></article><article><h2>Experimental mobile mode</h2><span class="status status-planned">Planned fixture</span></article></div></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,9 +7,9 @@ page Gettingstarted {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Getting started</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · v0.4.0</span><h1>Build a contact inbox</h1><p>This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.</p><h2 id="create">1. Create the project</h2><pre><code>bunx @wrnexus/cli@0.4.0 create my-app
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">Getting started</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · v0.5.0</span><h1>Build a contact inbox</h1><p>This path creates a server-rendered page, validated API route, middleware, and realtime next step. It requires approved registry access and Bun 1.3.x; this site was verified with Bun 1.3.14.</p><h2 id="create">1. Create the project</h2><pre><code>bunx @wrnexus/cli@0.5.0 create my-app
|
||||
cd my-app
|
||||
bun install
|
||||
bun run dev</code></pre><h2 id="structure">2. Know the structure</h2><pre><code>app/pages/ # file-based .wrn routes
|
||||
@@ -39,7 +39,7 @@ export const POST = async (ctx) => {
|
||||
}</code></pre><h2 id="test-build">7. Test and ship</h2><pre><code>bun run test
|
||||
bun run build
|
||||
bun dist/server.js</code></pre><p>Next: <a href="/guides/deployment">deployment</a>, <a href="/guides/database">database</a>, <a href="/guides/authentication">authentication</a>, and <a href="/guides/workspaces-and-gateway">workspaces</a>.</p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page APIroutes {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">API routes</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>API routes</h1><p>Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">API routes</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>API routes</h1><p>Export GET, POST, PUT, PATCH, or DELETE from app/api files. Validate request bodies, enforce authentication and authorization, cap request sizes, and return Web Responses.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Authentication {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authentication</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Authentication</h1><p>Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authentication</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Authentication</h1><p>Configure session authentication, log users in through supported auth helpers, and read identity from context. Cookie flags, rotation, expiry, and secret storage remain deployment responsibilities.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Authorization {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authorization</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Authorization</h1><p>Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Authorization</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Authorization</h1><p>Authentication identifies; authorization decides. Enforce permissions in server routes and policies, including object ownership. UI hiding is never an authorization boundary.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Configurationandprofiles {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Configuration and profiles</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Configuration and profiles</h1><p>wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Configuration and profiles</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Configuration and profiles</h1><p>wrnexus.config.ts owns styles, SEO, security, data, mobile, fonts, and profiles. Keep secrets in validated environment variables and review merged production configuration.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Database {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Database</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Database</h1><p>Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Database</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Database</h1><p>Configure SQLite or the installed supported driver, keep queries in named SQL blocks, generate typed functions, and apply migrations before traffic. Back up data and test rollback independently.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Deployment {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Deployment</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Deployment</h1><p>Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Deployment</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Deployment</h1><p>Run bun run build, apply migrations, and start dist/server.js with Bun. Configure TLS, proxy trust, environment validation, health checks, graceful restarts, logs, backups, and restrictive security headers.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -7,10 +7,10 @@ page Formsandvalidation {
|
||||
view {
|
||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||
<div class="docs-shell">
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.4.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.0</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
||||
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/components">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Forms and validation</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.4.0</span><h1>Forms and validation</h1><p>Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.</p><h2>Release scope</h2><p>This guide describes installed 0.4.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.4.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Guides</span><span aria-hidden="true">/</span><span aria-current="page">Forms and validation</span></nav><article class="documentation prose standalone"><span class="status status-beta">Preview guide · 0.5.0</span><h1>Forms and validation</h1><p>Define a v.object schema, use data-schema on the form, show field errors with data-error, and always call parseBody on the server. refine is server-only.</p><h2>Release scope</h2><p>This guide describes installed 0.5.0 capabilities. Follow linked package declarations for exact signatures; undocumented behavior is not guaranteed.</p><p><a href="/packages">Browse package APIs</a> · <a href="/guides/troubleshooting">Troubleshooting</a> · <a href="/support">Support</a></p></article></main>
|
||||
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.0</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
||||
<BackToTop />
|
||||
</div>
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user