docs: update portal for WRNexusJS 0.3.5
This commit is contained in:
+2
-2
@@ -7,10 +7,10 @@ page Pagenotfound {
|
|||||||
view {
|
view {
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||||
<div class="docs-shell">
|
<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.3.4</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.3.5</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>
|
<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>
|
<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.3.4</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.3.5</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 />
|
<BackToTop />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ page Access {
|
|||||||
view {
|
view {
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||||
<div class="docs-shell">
|
<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.3.4</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.3.5</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>
|
<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.3.4 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.3.4 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>
|
<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.3.5 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.3.5 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.3.4</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.3.5</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 />
|
<BackToTop />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ page Architecture {
|
|||||||
view {
|
view {
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||||
<div class="docs-shell">
|
<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.3.4</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.3.5</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>
|
<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.3.4</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>
|
<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.3.5</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.3.4</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.3.5</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 />
|
<BackToTop />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ page Benchmarks {
|
|||||||
view {
|
view {
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||||
<div class="docs-shell">
|
<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.3.4</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.3.5</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>
|
<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>
|
<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.3.4</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.3.5</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 />
|
<BackToTop />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ page Changelog {
|
|||||||
view {
|
view {
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
||||||
<div class="docs-shell">
|
<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.3.4</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.3.5</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>
|
<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.3.4 <small>2026-07-13</small></h2><p>Documentation is aligned to all 29 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.3.4. 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>
|
<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.3.5 <small>2026-07-13</small></h2><p>Documentation is aligned to all 29 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.3.5. 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.3.4</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.3.5</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 />
|
<BackToTop />
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,42 +0,0 @@
|
|||||||
page AcceptAllCookiesButtoncomponent {
|
|
||||||
seo {
|
|
||||||
title = "AcceptAllCookiesButton component"
|
|
||||||
description = "Reusable accept all cookies button component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AcceptAllCookiesButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>AcceptAllCookiesButton</h1><p>Reusable accept all cookies button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AcceptAllCookiesButton
|
|
||||||
label="Action"
|
|
||||||
href="href"
|
|
||||||
type="button"
|
|
||||||
variant="primary"
|
|
||||||
disabled="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AcceptAllCookiesButton"</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>"Action"</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>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>"primary"</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><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/AcceptAllCookiesButton.wrn</code></p><pre data-language="wrn"><code>component AcceptAllCookiesButton {
|
|
||||||
props {
|
|
||||||
label = "Action"
|
|
||||||
href = ""
|
|
||||||
type = "button"
|
|
||||||
variant = "primary"
|
|
||||||
disabled = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</button>{/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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleAccordioncomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleAccordion component"
|
|
||||||
description = "Reusable accessible accordion component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleAccordion</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleAccordion</h1><p>Reusable accessible accordion component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleAccordion
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleAccordion"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleAccordion.wrn</code></p><pre data-language="wrn"><code>component AccessibleAccordion {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleCarouselcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleCarousel component"
|
|
||||||
description = "Reusable accessible carousel component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleCarousel</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleCarousel</h1><p>Reusable accessible carousel component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleCarousel
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleCarousel"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleCarousel.wrn</code></p><pre data-language="wrn"><code>component AccessibleCarousel {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,61 +0,0 @@
|
|||||||
page AccessibleChartSummarycomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleChartSummary component"
|
|
||||||
description = "Reusable accessible chart summary component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleChartSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleChartSummary</h1><p>Reusable accessible chart summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleChartSummary
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleChartSummary"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleChartSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleChartSummary {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">
|
|
||||||
<div class="grid gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950/60">
|
|
||||||
<div class="flex items-center gap-2 text-sm font-bold">
|
|
||||||
<span class="icon-[lucide--chart-no-axes-combined] size-5 text-violet-500" aria-hidden="true">
|
|
||||||
</span>Chart summary</div>
|
|
||||||
<dl class="grid gap-3">
|
|
||||||
<div class="flex items-center justify-between gap-4">
|
|
||||||
<dt class="text-sm text-slate-500">Delivered</dt>
|
|
||||||
<dd class="font-bold">96.8%</dd>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between gap-4">
|
|
||||||
<dt class="text-sm text-slate-500">Engaged</dt>
|
|
||||||
<dd class="font-bold">42.1%</dd>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center justify-between gap-4">
|
|
||||||
<dt class="text-sm text-slate-500">Converted</dt>
|
|
||||||
<dd class="font-bold">8.7%</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page AccessibleDialogcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleDialog component"
|
|
||||||
description = "Reusable accessible dialog component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleDialog</h1><p>Reusable accessible dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleDialog
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleDialog"</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>""</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>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/AccessibleDialog.wrn</code></p><pre data-language="wrn"><code>component AccessibleDialog {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleErrorSummarycomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleErrorSummary component"
|
|
||||||
description = "Reusable accessible error summary component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleErrorSummary</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleErrorSummary</h1><p>Reusable accessible error summary component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleErrorSummary
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleErrorSummary"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleErrorSummary.wrn</code></p><pre data-language="wrn"><code>component AccessibleErrorSummary {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleIconcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleIcon component"
|
|
||||||
description = "Reusable accessible icon component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleIcon</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleIcon</h1><p>Reusable accessible icon component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleIcon
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleIcon"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleIcon.wrn</code></p><pre data-language="wrn"><code>component AccessibleIcon {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page AccessibleMenucomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleMenu component"
|
|
||||||
description = "Reusable accessible menu component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccessibleMenu</h1><p>Reusable accessible menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleMenu
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleMenu"</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>""</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>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/AccessibleMenu.wrn</code></p><pre data-language="wrn"><code>component AccessibleMenu {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleTabscomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleTabs component"
|
|
||||||
description = "Reusable accessible tabs component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleTabs</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTabs</h1><p>Reusable accessible tabs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleTabs
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleTabs"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleTabs.wrn</code></p><pre data-language="wrn"><code>component AccessibleTabs {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AccessibleTooltipcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccessibleTooltip component"
|
|
||||||
description = "Reusable accessible tooltip component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccessibleTooltip</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AccessibleTooltip</h1><p>Reusable accessible tooltip component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccessibleTooltip
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccessibleTooltip"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AccessibleTooltip.wrn</code></p><pre data-language="wrn"><code>component AccessibleTooltip {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page AccountMenucomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccountMenu component"
|
|
||||||
description = "Reusable account menu component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccountMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AccountMenu</h1><p>Reusable account menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccountMenu
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccountMenu"</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>""</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>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/AccountMenu.wrn</code></p><pre data-language="wrn"><code>component AccountMenu {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page AccountStatusBannercomponent {
|
|
||||||
seo {
|
|
||||||
title = "AccountStatusBanner component"
|
|
||||||
description = "Reusable account status banner component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AccountStatusBanner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>AccountStatusBanner</h1><p>Reusable account status banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AccountStatusBanner
|
|
||||||
label="AccountStatus"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
value="value"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AccountStatusBanner"</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>"AccountStatus"</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>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>"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/AccountStatusBanner.wrn</code></p><pre data-language="wrn"><code>component AccountStatusBanner {
|
|
||||||
props {
|
|
||||||
label = "AccountStatus"
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
value = ""
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
|
|
||||||
<strong data-show="title || label">{title || label}</strong>
|
|
||||||
<span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ActionMenucomponent {
|
|
||||||
seo {
|
|
||||||
title = "ActionMenu component"
|
|
||||||
description = "Reusable action menu component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ActionMenu</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ActionMenu</h1><p>Reusable action menu component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ActionMenu
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ActionMenu"</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>""</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>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/ActionMenu.wrn</code></p><pre data-language="wrn"><code>component ActionMenu {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ActiveFilterListcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ActiveFilterList component"
|
|
||||||
description = "Reusable active filter list component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ActiveFilterList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActiveFilterList</h1><p>Reusable active filter list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ActiveFilterList
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ActiveFilterList"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/ActiveFilterList.wrn</code></p><pre data-language="wrn"><code>component ActiveFilterList {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ActivityListcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ActivityList component"
|
|
||||||
description = "Reusable activity list component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ActivityList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ActivityList</h1><p>Reusable activity list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ActivityList
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ActivityList"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/ActivityList.wrn</code></p><pre data-language="wrn"><code>component ActivityList {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AddOnCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AddOnCard component"
|
|
||||||
description = "Reusable add on card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AddOnCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddOnCard</h1><p>Reusable add on card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AddOnCard
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AddOnCard"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AddOnCard.wrn</code></p><pre data-language="wrn"><code>component AddOnCard {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page AddressInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AddressInput component"
|
|
||||||
description = "Reusable address input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AddressInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AddressInput</h1><p>Reusable address input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><AddressInput
|
|
||||||
label="Address"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AddressInput"</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>"Address"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/AddressInput.wrn</code></p><pre data-language="wrn"><code>component AddressInput {
|
|
||||||
props {
|
|
||||||
label = "Address"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AddressPreviewcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AddressPreview component"
|
|
||||||
description = "Reusable address preview component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AddressPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AddressPreview</h1><p>Reusable address preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AddressPreview
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AddressPreview"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AddressPreview.wrn</code></p><pre data-language="wrn"><code>component AddressPreview {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AdvancedFilterBuildercomponent {
|
|
||||||
seo {
|
|
||||||
title = "AdvancedFilterBuilder component"
|
|
||||||
description = "Reusable advanced filter builder component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AdvancedFilterBuilder</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AdvancedFilterBuilder</h1><p>Reusable advanced filter builder component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AdvancedFilterBuilder
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AdvancedFilterBuilder"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AdvancedFilterBuilder.wrn</code></p><pre data-language="wrn"><code>component AdvancedFilterBuilder {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page AlertDialogcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AlertDialog component"
|
|
||||||
description = "Reusable alert dialog component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AlertDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>AlertDialog</h1><p>Reusable alert dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AlertDialog
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AlertDialog"</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>""</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>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/AlertDialog.wrn</code></p><pre data-language="wrn"><code>component AlertDialog {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page AmountInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AmountInput component"
|
|
||||||
description = "Reusable amount input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AmountInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AmountInput</h1><p>Reusable amount input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><AmountInput
|
|
||||||
label="Amount"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AmountInput"</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>"Amount"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/AmountInput.wrn</code></p><pre data-language="wrn"><code>component AmountInput {
|
|
||||||
props {
|
|
||||||
label = "Amount"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
page AnalyticsDashboardPreviewcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AnalyticsDashboardPreview component"
|
|
||||||
description = "Reusable analytics dashboard preview component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AnalyticsDashboardPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AnalyticsDashboardPreview</h1><p>Reusable analytics dashboard preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AnalyticsDashboardPreview
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AnalyticsDashboardPreview"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AnalyticsDashboardPreview.wrn</code></p><pre data-language="wrn"><code>component AnalyticsDashboardPreview {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<section class="wire-analytics-preview {class}">
|
|
||||||
<div class="wire-analytics-preview__surface">
|
|
||||||
<div class="wire-analytics-preview__visual">
|
|
||||||
{#if image}
|
|
||||||
<img
|
|
||||||
src="{image}"
|
|
||||||
alt="{alt}"
|
|
||||||
class="wire-analytics-preview__image"
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<div
|
|
||||||
class="wire-analytics-preview__chart"
|
|
||||||
role="img"
|
|
||||||
aria-label="Delivery trend rising over seven days"
|
|
||||||
>
|
|
||||||
<div class="wire-analytics-preview__chart-header">
|
|
||||||
<strong>Delivery trend</strong>
|
|
||||||
<span>↗ 18.4%</span>
|
|
||||||
</div>
|
|
||||||
<svg
|
|
||||||
class="wire-analytics-preview__chart-svg"
|
|
||||||
viewBox="0 0 700 250"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
|
|
||||||
<stop offset="0%" stop-color="currentColor" stop-opacity=".3">
|
|
||||||
</stop>
|
|
||||||
<stop offset="100%" stop-color="currentColor" stop-opacity="0">
|
|
||||||
</stop>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g fill="none" stroke="var(--wire-color-border,#e2e8f0)">
|
|
||||||
<path d="M20 50H680M20 115H680M20 180H680M20 230H680">
|
|
||||||
</path>
|
|
||||||
</g>
|
|
||||||
<path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z">
|
|
||||||
</path>
|
|
||||||
<path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32">
|
|
||||||
</path>
|
|
||||||
</svg>
|
|
||||||
<div class="wire-analytics-preview__days">
|
|
||||||
<span>Mon</span>
|
|
||||||
<span>Tue</span>
|
|
||||||
<span>Wed</span>
|
|
||||||
<span>Thu</span>
|
|
||||||
<span>Fri</span>
|
|
||||||
<span>Sat</span>
|
|
||||||
<span>Sun</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="wire-analytics-preview__content">
|
|
||||||
{#if eyebrow}
|
|
||||||
<p class="wire-analytics-preview__eyebrow">{eyebrow}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if title}
|
|
||||||
<h2 class="wire-analytics-preview__title">{title}</h2>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if description}
|
|
||||||
<p class="wire-analytics-preview__description">{description}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="wire-analytics-preview__metrics">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if href}
|
|
||||||
<a href="{href}" class="wire-analytics-preview__action">
|
|
||||||
{actionLabel}<span aria-hidden="true">→</span>
|
|
||||||
</a>
|
|
||||||
{/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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page AnchorNavigationcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AnchorNavigation component"
|
|
||||||
description = "Reusable anchor navigation component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AnchorNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AnchorNavigation</h1><p>Reusable anchor navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AnchorNavigation
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AnchorNavigation"</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>eyebrow</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>description</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>"start"</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/AnchorNavigation.wrn</code></p><pre data-language="wrn"><code>component AnchorNavigation {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
page AnnouncementBarcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AnnouncementBar component"
|
|
||||||
description = "Reusable announcement bar component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AnnouncementBar</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AnnouncementBar</h1><p>Reusable announcement bar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>14 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><AnnouncementBar
|
|
||||||
badge="New"
|
|
||||||
message="WRNexusJS Organizations is now available."
|
|
||||||
description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
|
|
||||||
href="/organizations"
|
|
||||||
actionLabel="Explore organizations"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AnnouncementBar"</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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>badge</code></td><td><code>string</code></td><td>Optional</td><td><code>"New"</code></td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>Optional</td><td><code>"WRNexusJS Organizations is now available."</code></td></tr><tr><td><code>description</code></td><td><code>string</code></td><td>Optional</td><td><code>"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."</code></td></tr><tr><td><code>href</code></td><td><code>string</code></td><td>Optional</td><td><code>"/organizations"</code></td></tr><tr><td><code>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Explore organizations"</code></td></tr><tr><td><code>ariaLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Announcement"</code></td></tr><tr><td><code>badgeIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--sparkles]"</code></td></tr><tr><td><code>actionIcon</code></td><td><code>string</code></td><td>Optional</td><td><code>"icon-[lucide--arrow-right]"</code></td></tr><tr><td><code>dismissLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Dismiss announcement"</code></td></tr><tr><td><code>showBadge</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showDescription</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>showAction</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>dismissible</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</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>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/AnnouncementBar.wrn</code></p><pre data-language="wrn"><code>component AnnouncementBar {
|
|
||||||
props {
|
|
||||||
class: string = ""
|
|
||||||
badge: string = "New"
|
|
||||||
message: string = "WRNexusJS Organizations is now available."
|
|
||||||
description: string = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
|
|
||||||
href: string = "/organizations"
|
|
||||||
actionLabel: string = "Explore organizations"
|
|
||||||
ariaLabel: string = "Announcement"
|
|
||||||
badgeIcon: string = "icon-[lucide--sparkles]"
|
|
||||||
actionIcon: string = "icon-[lucide--arrow-right]"
|
|
||||||
dismissLabel: string = "Dismiss announcement"
|
|
||||||
showBadge: boolean = true
|
|
||||||
showDescription: boolean = true
|
|
||||||
showAction: boolean = true
|
|
||||||
dismissible: boolean = true
|
|
||||||
}
|
|
||||||
|
|
||||||
state visible = true
|
|
||||||
|
|
||||||
view {
|
|
||||||
<aside
|
|
||||||
role="region"
|
|
||||||
aria-label="{ariaLabel}"
|
|
||||||
class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
|
|
||||||
class:hidden="!visible"
|
|
||||||
>
|
|
||||||
<!-- Decorative background -->
|
|
||||||
<div
|
|
||||||
aria-hidden="true"
|
|
||||||
class="pointer-events-none absolute inset-0 overflow-hidden"
|
|
||||||
>
|
|
||||||
<div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10">
|
|
||||||
</div>
|
|
||||||
<div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
|
|
||||||
>
|
|
||||||
<div class="flex min-w-0 flex-1 items-center justify-center gap-3">
|
|
||||||
<!-- Badge -->
|
|
||||||
<span data-show="showBadge"
|
|
||||||
class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
|
|
||||||
>
|
|
||||||
<span class="{badgeIcon} h-3 w-3" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{badge}
|
|
||||||
</span>
|
|
||||||
<!-- Message -->
|
|
||||||
<p
|
|
||||||
class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
|
|
||||||
>
|
|
||||||
<span class="font-semibold text-slate-950 dark:text-white">
|
|
||||||
{message}
|
|
||||||
</span>
|
|
||||||
<span data-show="showDescription" class="hidden md:inline">
|
|
||||||
{description}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
<!-- CTA -->
|
|
||||||
<a data-show="showAction"
|
|
||||||
href="{href}"
|
|
||||||
class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
|
|
||||||
>
|
|
||||||
{actionLabel}
|
|
||||||
|
|
||||||
<span class="{actionIcon} h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<!-- Mobile CTA -->
|
|
||||||
<a data-show="showAction"
|
|
||||||
href="{href}"
|
|
||||||
aria-label="{actionLabel}"
|
|
||||||
class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
|
|
||||||
>
|
|
||||||
<span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<!-- Close -->
|
|
||||||
<button data-show="dismissible"
|
|
||||||
type="button"
|
|
||||||
@click="visible = false"
|
|
||||||
aria-label="{dismissLabel}"
|
|
||||||
class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
|
|
||||||
>
|
|
||||||
<span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page ApartmentInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApartmentInput component"
|
|
||||||
description = "Reusable apartment input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApartmentInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApartmentInput</h1><p>Reusable apartment input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><ApartmentInput
|
|
||||||
label="Apartment"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApartmentInput"</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>"Apartment"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/ApartmentInput.wrn</code></p><pre data-language="wrn"><code>component ApartmentInput {
|
|
||||||
props {
|
|
||||||
label = "Apartment"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ApiAuthenticationNoticecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiAuthenticationNotice component"
|
|
||||||
description = "Reusable api authentication notice component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiAuthenticationNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiAuthenticationNotice</h1><p>Reusable api authentication notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiAuthenticationNotice
|
|
||||||
label="ApiAuthentication"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
value="value"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiAuthenticationNotice"</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>"ApiAuthentication"</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>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>"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/ApiAuthenticationNotice.wrn</code></p><pre data-language="wrn"><code>component ApiAuthenticationNotice {
|
|
||||||
props {
|
|
||||||
label = "ApiAuthentication"
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
value = ""
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
|
|
||||||
<strong data-show="title || label">{title || label}</strong>
|
|
||||||
<span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
page ApiEndpointCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiEndpointCard component"
|
|
||||||
description = "Reusable api endpoint card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiEndpointCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiEndpointCard</h1><p>Reusable api endpoint card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiEndpointCard
|
|
||||||
method="GET"
|
|
||||||
path="/api/example"
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiEndpointCard"</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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>method</code></td><td><code>string</code></td><td>Optional</td><td><code>"GET"</code></td></tr><tr><td><code>path</code></td><td><code>string</code></td><td>Optional</td><td><code>"/api/example"</code></td></tr><tr><td><code>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"View endpoint"</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/ApiEndpointCard.wrn</code></p><pre data-language="wrn"><code>component ApiEndpointCard {
|
|
||||||
props {
|
|
||||||
class = ""
|
|
||||||
method = "GET"
|
|
||||||
path = "/api/example"
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "View endpoint"
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<article
|
|
||||||
class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900 {class}"
|
|
||||||
>
|
|
||||||
<div class="flex flex-wrap items-center gap-3" >
|
|
||||||
<span
|
|
||||||
class="rounded-lg px-2.5 py-1 font-mono text-xs font-bold {method === 'GET' ? 'bg-emerald-100 text-emerald-700' : method === 'POST' ? 'bg-blue-100 text-blue-700' : method === 'DELETE' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}"
|
|
||||||
>
|
|
||||||
{method}
|
|
||||||
</span>
|
|
||||||
<code class="text-sm font-semibold">
|
|
||||||
{title || path}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<p
|
|
||||||
data-show="description"
|
|
||||||
class="mt-3 text-sm text-slate-500"
|
|
||||||
>
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
<div class="mt-4">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
{#if href}<a href="{href}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-violet-600 dark:text-violet-300">{actionLabel}<span class="icon-[lucide--arrow-right] size-4" aria-hidden="true">
|
|
||||||
</span>
|
|
||||||
</a>{/if}
|
|
||||||
</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ApiErrorExamplecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiErrorExample component"
|
|
||||||
description = "Reusable api error example component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiErrorExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiErrorExample</h1><p>Reusable api error example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiErrorExample
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiErrorExample"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/ApiErrorExample.wrn</code></p><pre data-language="wrn"><code>component ApiErrorExample {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ApiHeaderTablecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiHeaderTable component"
|
|
||||||
description = "Reusable api header table component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiHeaderTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiHeaderTable</h1><p>Reusable api header table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiHeaderTable
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiHeaderTable"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/ApiHeaderTable.wrn</code></p><pre data-language="wrn"><code>component ApiHeaderTable {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ApiKeyCreateDialogcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiKeyCreateDialog component"
|
|
||||||
description = "Reusable api key create dialog component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiKeyCreateDialog</span></nav><section class="doc-intro"><span class="eyebrow">overlays component</span><h1>ApiKeyCreateDialog</h1><p>Reusable api key create dialog component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiKeyCreateDialog
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
open="false"
|
|
||||||
closeLabel="Close"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiKeyCreateDialog"</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>""</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>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/ApiKeyCreateDialog.wrn</code></p><pre data-language="wrn"><code>component ApiKeyCreateDialog {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
open = false
|
|
||||||
closeLabel = "Close"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div data-show="open" class="wire-overlay wire-catalog-overlay {class}">
|
|
||||||
<section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog">
|
|
||||||
<header>
|
|
||||||
<h2 data-show="title" class="wire-dialog__title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-dialog__description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<slot />
|
|
||||||
<button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ApiKeyDisplaycomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiKeyDisplay component"
|
|
||||||
description = "Reusable api key display component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiKeyDisplay</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiKeyDisplay</h1><p>Reusable api key display component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiKeyDisplay
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiKeyDisplay"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/ApiKeyDisplay.wrn</code></p><pre data-language="wrn"><code>component ApiKeyDisplay {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page ApiKeyInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiKeyInput component"
|
|
||||||
description = "Reusable api key input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiKeyInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ApiKeyInput</h1><p>Reusable api key input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><ApiKeyInput
|
|
||||||
label="ApiKey"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiKeyInput"</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>"ApiKey"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/ApiKeyInput.wrn</code></p><pre data-language="wrn"><code>component ApiKeyInput {
|
|
||||||
props {
|
|
||||||
label = "ApiKey"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ApiMethodBadgecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiMethodBadge component"
|
|
||||||
description = "Reusable api method badge component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiMethodBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiMethodBadge</h1><p>Reusable api method badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiMethodBadge
|
|
||||||
label="ApiMethod"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
value="value"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiMethodBadge"</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>"ApiMethod"</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>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>"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/ApiMethodBadge.wrn</code></p><pre data-language="wrn"><code>component ApiMethodBadge {
|
|
||||||
props {
|
|
||||||
label = "ApiMethod"
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
value = ""
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
|
|
||||||
<strong data-show="title || label">{title || label}</strong>
|
|
||||||
<span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ApiParameterTablecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiParameterTable component"
|
|
||||||
description = "Reusable api parameter table component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiParameterTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiParameterTable</h1><p>Reusable api parameter table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiParameterTable
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiParameterTable"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/ApiParameterTable.wrn</code></p><pre data-language="wrn"><code>component ApiParameterTable {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ApiRateLimitNoticecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiRateLimitNotice component"
|
|
||||||
description = "Reusable api rate limit notice component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiRateLimitNotice</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiRateLimitNotice</h1><p>Reusable api rate limit notice component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiRateLimitNotice
|
|
||||||
label="ApiRateLimit"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
value="value"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiRateLimitNotice"</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>"ApiRateLimit"</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>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>"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/ApiRateLimitNotice.wrn</code></p><pre data-language="wrn"><code>component ApiRateLimitNotice {
|
|
||||||
props {
|
|
||||||
label = "ApiRateLimit"
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
value = ""
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
|
|
||||||
<strong data-show="title || label">{title || label}</strong>
|
|
||||||
<span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ApiRequestExamplecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiRequestExample component"
|
|
||||||
description = "Reusable api request example component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiRequestExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiRequestExample</h1><p>Reusable api request example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiRequestExample
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiRequestExample"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/ApiRequestExample.wrn</code></p><pre data-language="wrn"><code>component ApiRequestExample {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ApiResponseExamplecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiResponseExample component"
|
|
||||||
description = "Reusable api response example component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiResponseExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiResponseExample</h1><p>Reusable api response example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiResponseExample
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiResponseExample"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/ApiResponseExample.wrn</code></p><pre data-language="wrn"><code>component ApiResponseExample {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page ApiSchemaTablecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiSchemaTable component"
|
|
||||||
description = "Reusable api schema table component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiSchemaTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>ApiSchemaTable</h1><p>Reusable api schema table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiSchemaTable
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiSchemaTable"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/ApiSchemaTable.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaTable {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ApiSchemaViewercomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiSchemaViewer component"
|
|
||||||
description = "Reusable api schema viewer component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiSchemaViewer</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>ApiSchemaViewer</h1><p>Reusable api schema viewer component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiSchemaViewer
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiSchemaViewer"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/ApiSchemaViewer.wrn</code></p><pre data-language="wrn"><code>component ApiSchemaViewer {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ApiVersionBadgecomponent {
|
|
||||||
seo {
|
|
||||||
title = "ApiVersionBadge component"
|
|
||||||
description = "Reusable api version badge component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ApiVersionBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>ApiVersionBadge</h1><p>Reusable api version badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ApiVersionBadge
|
|
||||||
label="ApiVersion"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
value="value"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ApiVersionBadge"</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>"ApiVersion"</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>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>"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/ApiVersionBadge.wrn</code></p><pre data-language="wrn"><code>component ApiVersionBadge {
|
|
||||||
props {
|
|
||||||
label = "ApiVersion"
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
value = ""
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}">
|
|
||||||
<strong data-show="title || label">{title || label}</strong>
|
|
||||||
<span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page AppHeadercomponent {
|
|
||||||
seo {
|
|
||||||
title = "AppHeader component"
|
|
||||||
description = "Reusable app header component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AppHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>AppHeader</h1><p>Reusable app header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AppHeader
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AppHeader"</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>eyebrow</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>description</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>"start"</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/AppHeader.wrn</code></p><pre data-language="wrn"><code>component AppHeader {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ArchitectureSectioncomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArchitectureSection component"
|
|
||||||
description = "Reusable architecture section component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArchitectureSection</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArchitectureSection</h1><p>Reusable architecture section component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArchitectureSection
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArchitectureSection"</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>eyebrow</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>description</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>"start"</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/ArchitectureSection.wrn</code></p><pre data-language="wrn"><code>component ArchitectureSection {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page AreaChartcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AreaChart component"
|
|
||||||
description = "Reusable area chart component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AreaChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>AreaChart</h1><p>Reusable area chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AreaChart
|
|
||||||
title="title"
|
|
||||||
value="value"
|
|
||||||
description="description"
|
|
||||||
summary="summary"
|
|
||||||
loading="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AreaChart"</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>""</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>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>""</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>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/AreaChart.wrn</code></p><pre data-language="wrn"><code>component AreaChart {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
value = ""
|
|
||||||
description = ""
|
|
||||||
summary = ""
|
|
||||||
loading = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
|
|
||||||
<figcaption>
|
|
||||||
<strong data-show="title">{title}</strong>
|
|
||||||
<span data-show="value" class="wire-metric__value">{value}</span>
|
|
||||||
<span data-show="description" class="wire-muted">{description}</span>
|
|
||||||
</figcaption>
|
|
||||||
<div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
|
|
||||||
</div>
|
|
||||||
<div data-show="!loading" class="wire-catalog-visualization__content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="summary" class="wire-visually-hidden">{summary}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ArticleHerocomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArticleHero component"
|
|
||||||
description = "Reusable article hero component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArticleHero</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleHero</h1><p>Reusable article hero component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArticleHero
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArticleHero"</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>eyebrow</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>description</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>"start"</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/ArticleHero.wrn</code></p><pre data-language="wrn"><code>component ArticleHero {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ArticleLayoutcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArticleLayout component"
|
|
||||||
description = "Reusable article layout component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArticleLayout</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticleLayout</h1><p>Reusable article layout component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArticleLayout
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArticleLayout"</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>eyebrow</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>description</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>"start"</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/ArticleLayout.wrn</code></p><pre data-language="wrn"><code>component ArticleLayout {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ArticleNewsletterCTAcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArticleNewsletterCTA component"
|
|
||||||
description = "Reusable article newsletter c t a component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArticleNewsletterCTA</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleNewsletterCTA</h1><p>Reusable article newsletter c t a component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArticleNewsletterCTA
|
|
||||||
label="Action"
|
|
||||||
href="href"
|
|
||||||
type="button"
|
|
||||||
variant="primary"
|
|
||||||
disabled="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArticleNewsletterCTA"</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>"Action"</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>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>"primary"</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><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/ArticleNewsletterCTA.wrn</code></p><pre data-language="wrn"><code>component ArticleNewsletterCTA {
|
|
||||||
props {
|
|
||||||
label = "Action"
|
|
||||||
href = ""
|
|
||||||
type = "button"
|
|
||||||
variant = "primary"
|
|
||||||
disabled = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</button>{/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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page ArticlePageShellcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArticlePageShell component"
|
|
||||||
description = "Reusable article page shell component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArticlePageShell</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>ArticlePageShell</h1><p>Reusable article page shell component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArticlePageShell
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArticlePageShell"</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>eyebrow</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>description</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>"start"</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/ArticlePageShell.wrn</code></p><pre data-language="wrn"><code>component ArticlePageShell {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page ArticleShareActionscomponent {
|
|
||||||
seo {
|
|
||||||
title = "ArticleShareActions component"
|
|
||||||
description = "Reusable article share actions component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ArticleShareActions</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>ArticleShareActions</h1><p>Reusable article share actions component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><ArticleShareActions
|
|
||||||
label="Action"
|
|
||||||
href="href"
|
|
||||||
type="button"
|
|
||||||
variant="primary"
|
|
||||||
disabled="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ArticleShareActions"</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>"Action"</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>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>"primary"</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><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/ArticleShareActions.wrn</code></p><pre data-language="wrn"><code>component ArticleShareActions {
|
|
||||||
props {
|
|
||||||
label = "Action"
|
|
||||||
href = ""
|
|
||||||
type = "button"
|
|
||||||
variant = "primary"
|
|
||||||
disabled = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot />
|
|
||||||
</button>{/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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
page AspectRatiocomponent {
|
|
||||||
seo {
|
|
||||||
title = "AspectRatio component"
|
|
||||||
description = "Reusable aspect ratio component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AspectRatio</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>AspectRatio</h1><p>Reusable aspect ratio component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>1 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><AspectRatio /></code></pre><p>Legacy mount name: <code>data-component="AspectRatio"</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>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/AspectRatio.wrn</code></p><pre data-language="wrn"><code>component AspectRatio {
|
|
||||||
props {
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div class="wire-aspect-ratio {class}">
|
|
||||||
<slot />
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
page AssetCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AssetCard component"
|
|
||||||
description = "Reusable asset card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AssetCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AssetCard</h1><p>Reusable asset card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AssetCard
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AssetCard"</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>""</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>href</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/AssetCard.wrn</code></p><pre data-language="wrn"><code>component AssetCard {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card wire-catalog-card--asset {class}">
|
|
||||||
<h3 data-show="title">{title}</h3>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
<slot />
|
|
||||||
<a data-show="href" href="{href}" class="wire-catalog-card__link">
|
|
||||||
<span class="wire-visually-hidden">Open {title}</span>
|
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page AttachmentPickercomponent {
|
|
||||||
seo {
|
|
||||||
title = "AttachmentPicker component"
|
|
||||||
description = "Reusable attachment picker component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AttachmentPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AttachmentPicker</h1><p>Reusable attachment picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><AttachmentPicker
|
|
||||||
label="Attachment"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AttachmentPicker"</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>"Attachment"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/AttachmentPicker.wrn</code></p><pre data-language="wrn"><code>component AttachmentPicker {
|
|
||||||
props {
|
|
||||||
label = "Attachment"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AttachmentUploadcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AttachmentUpload component"
|
|
||||||
description = "Reusable attachment upload component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AttachmentUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AttachmentUpload</h1><p>Reusable attachment upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AttachmentUpload
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AttachmentUpload"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AttachmentUpload.wrn</code></p><pre data-language="wrn"><code>component AttachmentUpload {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AudioUploadcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AudioUpload component"
|
|
||||||
description = "Reusable audio upload component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AudioUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AudioUpload</h1><p>Reusable audio upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AudioUpload
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AudioUpload"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AudioUpload.wrn</code></p><pre data-language="wrn"><code>component AudioUpload {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AuditLogPreviewcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuditLogPreview component"
|
|
||||||
description = "Reusable audit log preview component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuditLogPreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuditLogPreview</h1><p>Reusable audit log preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AuditLogPreview
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuditLogPreview"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AuditLogPreview.wrn</code></p><pre data-language="wrn"><code>component AuditLogPreview {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page AuditTablecomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuditTable component"
|
|
||||||
description = "Reusable audit table component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuditTable</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AuditTable</h1><p>Reusable audit table component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AuditTable
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuditTable"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/AuditTable.wrn</code></p><pre data-language="wrn"><code>component AuditTable {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page AuthenticatorCodeInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuthenticatorCodeInput component"
|
|
||||||
description = "Reusable authenticator code input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuthenticatorCodeInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>AuthenticatorCodeInput</h1><p>Reusable authenticator code input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><AuthenticatorCodeInput
|
|
||||||
label="AuthenticatorCode"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuthenticatorCodeInput"</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>"AuthenticatorCode"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/AuthenticatorCodeInput.wrn</code></p><pre data-language="wrn"><code>component AuthenticatorCodeInput {
|
|
||||||
props {
|
|
||||||
label = "AuthenticatorCode"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AuthorAvatarcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuthorAvatar component"
|
|
||||||
description = "Reusable author avatar component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuthorAvatar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorAvatar</h1><p>Reusable author avatar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AuthorAvatar
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuthorAvatar"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AuthorAvatar.wrn</code></p><pre data-language="wrn"><code>component AuthorAvatar {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AuthorCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuthorCard component"
|
|
||||||
description = "Reusable author card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuthorCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorCard</h1><p>Reusable author card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AuthorCard
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuthorCard"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AuthorCard.wrn</code></p><pre data-language="wrn"><code>component AuthorCard {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AuthorizedApplicationCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AuthorizedApplicationCard component"
|
|
||||||
description = "Reusable authorized application card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AuthorizedApplicationCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AuthorizedApplicationCard</h1><p>Reusable authorized application card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AuthorizedApplicationCard
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AuthorizedApplicationCard"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AuthorizedApplicationCard.wrn</code></p><pre data-language="wrn"><code>component AuthorizedApplicationCard {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
page AutoGridcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AutoGrid component"
|
|
||||||
description = "Reusable auto grid component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AutoGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>AutoGrid</h1><p>Reusable auto grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>1 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><AutoGrid /></code></pre><p>Legacy mount name: <code>data-component="AutoGrid"</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>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/AutoGrid.wrn</code></p><pre data-language="wrn"><code>component AutoGrid {
|
|
||||||
props {
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div class="wire-auto-grid {class}">
|
|
||||||
<slot />
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AutomationExampleCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AutomationExampleCard component"
|
|
||||||
description = "Reusable automation example card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AutomationExampleCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AutomationExampleCard</h1><p>Reusable automation example card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AutomationExampleCard
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AutomationExampleCard"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AutomationExampleCard.wrn</code></p><pre data-language="wrn"><code>component AutomationExampleCard {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AvailabilityCalendarcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AvailabilityCalendar component"
|
|
||||||
description = "Reusable availability calendar component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AvailabilityCalendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvailabilityCalendar</h1><p>Reusable availability calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AvailabilityCalendar
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AvailabilityCalendar"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AvailabilityCalendar.wrn</code></p><pre data-language="wrn"><code>component AvailabilityCalendar {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page AvatarUploadcomponent {
|
|
||||||
seo {
|
|
||||||
title = "AvatarUpload component"
|
|
||||||
description = "Reusable avatar upload component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">AvatarUpload</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>AvatarUpload</h1><p>Reusable avatar upload component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><AvatarUpload
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="AvatarUpload"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/AvatarUpload.wrn</code></p><pre data-language="wrn"><code>component AvatarUpload {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
page BackButtoncomponent {
|
|
||||||
seo {
|
|
||||||
title = "BackButton component"
|
|
||||||
description = "Reusable back button component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BackButton</span></nav><section class="doc-intro"><span class="eyebrow">actions component</span><h1>BackButton</h1><p>Reusable back button component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BackButton
|
|
||||||
label="Action"
|
|
||||||
type="button"
|
|
||||||
disabled="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BackButton"</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>"Action"</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>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><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/BackButton.wrn</code></p><pre data-language="wrn"><code>component BackButton {
|
|
||||||
props {
|
|
||||||
label = "Action"
|
|
||||||
type = "button"
|
|
||||||
disabled = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--ghost {class}">{label}<slot />
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
page BackToTopcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BackToTop component"
|
|
||||||
description = "Reusable back to top component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BackToTop</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>BackToTop</h1><p>Reusable back to top component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>4 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><BackToTop
|
|
||||||
label="Back to top"
|
|
||||||
assistiveLabel="Return to the top of the page"
|
|
||||||
threshold="500"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BackToTop"</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>class</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>"Back to top"</code></td></tr><tr><td><code>assistiveLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Return to the top of the page"</code></td></tr><tr><td><code>threshold</code></td><td><code>number</code></td><td>Optional</td><td><code>500</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>click</code></li></ul></section><section id="source"><h2>Source contract</h2><p>Installed source: <code>components/BackToTop.wrn</code></p><pre data-language="wrn"><code>component BackToTop {
|
|
||||||
props {
|
|
||||||
class = ""
|
|
||||||
label = "Back to top"
|
|
||||||
assistiveLabel = "Return to the top of the page"
|
|
||||||
threshold = 500
|
|
||||||
}
|
|
||||||
|
|
||||||
state visible = false
|
|
||||||
|
|
||||||
functions {
|
|
||||||
function updateBackToTopVisibility() {
|
|
||||||
visible = window.scrollY > threshold
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToTop() {
|
|
||||||
window.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: "smooth"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lifecycle {
|
|
||||||
mount {
|
|
||||||
updateBackToTopVisibility()
|
|
||||||
|
|
||||||
window.addEventListener(
|
|
||||||
"scroll",
|
|
||||||
updateBackToTopVisibility,
|
|
||||||
{ passive: true }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
unmount {
|
|
||||||
window.removeEventListener(
|
|
||||||
"scroll",
|
|
||||||
updateBackToTopVisibility
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
watch visible {
|
|
||||||
console.debug(
|
|
||||||
"Back-to-top visibility:",
|
|
||||||
value,
|
|
||||||
previous
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div
|
|
||||||
class="group fixed bottom-6 right-5 z-[70] flex items-center gap-2 transition-all duration-300 sm:right-6 lg:bottom-8 lg:right-8 {class}"
|
|
||||||
class:pointer-events-none="!visible"
|
|
||||||
class:translate-y-5="!visible"
|
|
||||||
class:scale-90="!visible"
|
|
||||||
class:opacity-0="!visible"
|
|
||||||
class:pointer-events-auto="visible"
|
|
||||||
class:translate-y-0="visible"
|
|
||||||
class:scale-100="visible"
|
|
||||||
class:opacity-100="visible"
|
|
||||||
>
|
|
||||||
<!-- Hover label -->
|
|
||||||
<span
|
|
||||||
class="pointer-events-none hidden translate-x-2 whitespace-nowrap rounded-xl border border-slate-200 bg-white/95 px-3 py-2 text-xs font-semibold text-slate-700 opacity-0 shadow-lg shadow-slate-950/10 backdrop-blur-xl transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100 dark:border-white/10 dark:bg-slate-900/95 dark:text-slate-200 dark:shadow-black/30 sm:block"
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</span>
|
|
||||||
<!-- Gradient border wrapper -->
|
|
||||||
<div
|
|
||||||
class="relative rounded-2xl bg-linear-to-br from-indigo-500 via-violet-500 to-cyan-500 p-px shadow-xl shadow-indigo-600/20 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-2xl group-hover:shadow-indigo-600/30"
|
|
||||||
>
|
|
||||||
<!-- Glow -->
|
|
||||||
<div aria-hidden="true" class="absolute inset-1 rounded-2xl bg-indigo-500/20 opacity-0 blur-xl transition-opacity duration-300 group-hover:opacity-100" >
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
@click="scrollToTop()"
|
|
||||||
aria-label="{label}"
|
|
||||||
title="{label}"
|
|
||||||
class="relative grid h-12 w-12 place-items-center rounded-[15px] bg-white/95 text-indigo-700 backdrop-blur-xl transition duration-300 hover:bg-indigo-600 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 active:scale-95 dark:bg-slate-900/95 dark:text-indigo-300 dark:hover:bg-indigo-500 dark:hover:text-white dark:focus-visible:ring-offset-slate-950 sm:h-13 sm:w-13"
|
|
||||||
>
|
|
||||||
<!-- Arrow -->
|
|
||||||
<span class="icon-[lucide--arrow-up] h-5 w-5 transition-transform duration-300 group-hover:-translate-y-0.5" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
<span class="sr-only">
|
|
||||||
{assistiveLabel}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BankTransferDetailscomponent {
|
|
||||||
seo {
|
|
||||||
title = "BankTransferDetails component"
|
|
||||||
description = "Reusable bank transfer details component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BankTransferDetails</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BankTransferDetails</h1><p>Reusable bank transfer details component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BankTransferDetails
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BankTransferDetails"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BankTransferDetails.wrn</code></p><pre data-language="wrn"><code>component BankTransferDetails {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
page Bannercomponent {
|
|
||||||
seo {
|
|
||||||
title = "Banner component"
|
|
||||||
description = "Reusable banner component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">Banner</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>Banner</h1><p>Reusable banner component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><Banner
|
|
||||||
text="Announcement"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
variant="brand"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="Banner"</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>class</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>text</code></td><td><code>string</code></td><td>Optional</td><td><code>"Announcement"</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>variant</code></td><td><code>string</code></td><td>Optional</td><td><code>"brand"</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/Banner.wrn</code></p><pre data-language="wrn"><code>component Banner {
|
|
||||||
props {
|
|
||||||
class = ""
|
|
||||||
text = "Announcement"
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
variant = "brand"
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<aside class="px-4 py-3 text-center text-sm font-medium {variant === 'warning' ? 'bg-amber-400 text-amber-950' : 'bg-violet-600 text-white'} {class}">
|
|
||||||
<span>{text}</span>
|
|
||||||
<a data-show="href" href="{href}" class="ml-2 underline underline-offset-4">{actionLabel} →</a>
|
|
||||||
</aside>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BarChartcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BarChart component"
|
|
||||||
description = "Reusable bar chart component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BarChart</span></nav><section class="doc-intro"><span class="eyebrow">visualization component</span><h1>BarChart</h1><p>Reusable bar chart component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BarChart
|
|
||||||
title="title"
|
|
||||||
value="value"
|
|
||||||
description="description"
|
|
||||||
summary="summary"
|
|
||||||
loading="false"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BarChart"</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>""</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>description</code></td><td><code>string</code></td><td>Optional</td><td><code>""</code></td></tr><tr><td><code>summary</code></td><td><code>string</code></td><td>Optional</td><td><code>""</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>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/BarChart.wrn</code></p><pre data-language="wrn"><code>component BarChart {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
value = ""
|
|
||||||
description = ""
|
|
||||||
summary = ""
|
|
||||||
loading = false
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}">
|
|
||||||
<figcaption>
|
|
||||||
<strong data-show="title">{title}</strong>
|
|
||||||
<span data-show="value" class="wire-metric__value">{value}</span>
|
|
||||||
<span data-show="description" class="wire-muted">{description}</span>
|
|
||||||
</figcaption>
|
|
||||||
<div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton">
|
|
||||||
</div>
|
|
||||||
<div data-show="!loading" class="wire-catalog-visualization__content">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="summary" class="wire-visually-hidden">{summary}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
page BetaBadgecomponent {
|
|
||||||
seo {
|
|
||||||
title = "BetaBadge component"
|
|
||||||
description = "Reusable beta badge component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BetaBadge</span></nav><section class="doc-intro"><span class="eyebrow">feedback component</span><h1>BetaBadge</h1><p>Reusable beta badge component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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><BetaBadge
|
|
||||||
label="Beta"
|
|
||||||
variant="default"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BetaBadge"</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>"Beta"</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/BetaBadge.wrn</code></p><pre data-language="wrn"><code>component BetaBadge {
|
|
||||||
props {
|
|
||||||
label = "Beta"
|
|
||||||
variant = "default"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--betabadge {class}">{label}<slot />
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BillingAddressFormcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BillingAddressForm component"
|
|
||||||
description = "Reusable billing address form component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BillingAddressForm</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingAddressForm</h1><p>Reusable billing address form component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BillingAddressForm
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BillingAddressForm"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BillingAddressForm.wrn</code></p><pre data-language="wrn"><code>component BillingAddressForm {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BillingExamplecomponent {
|
|
||||||
seo {
|
|
||||||
title = "BillingExample component"
|
|
||||||
description = "Reusable billing example component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BillingExample</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BillingExample</h1><p>Reusable billing example component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BillingExample
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BillingExample"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BillingExample.wrn</code></p><pre data-language="wrn"><code>component BillingExample {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BillingPeriodTogglecomponent {
|
|
||||||
seo {
|
|
||||||
title = "BillingPeriodToggle component"
|
|
||||||
description = "Reusable billing period toggle component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BillingPeriodToggle</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BillingPeriodToggle</h1><p>Reusable billing period toggle component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BillingPeriodToggle
|
|
||||||
label="BillingPeriod"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BillingPeriodToggle"</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>"BillingPeriod"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BillingPeriodToggle.wrn</code></p><pre data-language="wrn"><code>component BillingPeriodToggle {
|
|
||||||
props {
|
|
||||||
label = "BillingPeriod"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BlackoutDatePickercomponent {
|
|
||||||
seo {
|
|
||||||
title = "BlackoutDatePicker component"
|
|
||||||
description = "Reusable blackout date picker component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BlackoutDatePicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BlackoutDatePicker</h1><p>Reusable blackout date picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BlackoutDatePicker
|
|
||||||
label="BlackoutDate"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BlackoutDatePicker"</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>"BlackoutDate"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BlackoutDatePicker.wrn</code></p><pre data-language="wrn"><code>component BlackoutDatePicker {
|
|
||||||
props {
|
|
||||||
label = "BlackoutDate"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BlogCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BlogCard component"
|
|
||||||
description = "Reusable blog card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BlogCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogCard</h1><p>Reusable blog card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BlogCard
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BlogCard"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BlogCard.wrn</code></p><pre data-language="wrn"><code>component BlogCard {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page BlogGridcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BlogGrid component"
|
|
||||||
description = "Reusable blog grid component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BlogGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogGrid</h1><p>Reusable blog grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BlogGrid
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BlogGrid"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/BlogGrid.wrn</code></p><pre data-language="wrn"><code>component BlogGrid {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page BlogListcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BlogList component"
|
|
||||||
description = "Reusable blog list component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BlogList</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>BlogList</h1><p>Reusable blog list component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BlogList
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BlogList"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/BlogList.wrn</code></p><pre data-language="wrn"><code>component BlogList {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BlogSearchcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BlogSearch component"
|
|
||||||
description = "Reusable blog search component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BlogSearch</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BlogSearch</h1><p>Reusable blog search component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BlogSearch
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BlogSearch"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BlogSearch.wrn</code></p><pre data-language="wrn"><code>component BlogSearch {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
page BodyTextcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BodyText component"
|
|
||||||
description = "Reusable body text component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BodyText</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BodyText</h1><p>Reusable body text component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>3 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><BodyText
|
|
||||||
text="text"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BodyText"</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>text</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>"start"</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/BodyText.wrn</code></p><pre data-language="wrn"><code>component BodyText {
|
|
||||||
props {
|
|
||||||
text = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<div class="wire-type wire-type--body wire-text--{align} {class}">{text}<slot />
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BorderRadiusPickercomponent {
|
|
||||||
seo {
|
|
||||||
title = "BorderRadiusPicker component"
|
|
||||||
description = "Reusable border radius picker component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BorderRadiusPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BorderRadiusPicker</h1><p>Reusable border radius picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BorderRadiusPicker
|
|
||||||
label="BorderRadius"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BorderRadiusPicker"</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>"BorderRadius"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BorderRadiusPicker.wrn</code></p><pre data-language="wrn"><code>component BorderRadiusPicker {
|
|
||||||
props {
|
|
||||||
label = "BorderRadius"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page BottomNavigationcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BottomNavigation component"
|
|
||||||
description = "Reusable bottom navigation component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BottomNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BottomNavigation</h1><p>Reusable bottom navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BottomNavigation
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BottomNavigation"</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>eyebrow</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>description</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>"start"</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/BottomNavigation.wrn</code></p><pre data-language="wrn"><code>component BottomNavigation {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BrandColorPickercomponent {
|
|
||||||
seo {
|
|
||||||
title = "BrandColorPicker component"
|
|
||||||
description = "Reusable brand color picker component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BrandColorPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandColorPicker</h1><p>Reusable brand color picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BrandColorPicker
|
|
||||||
label="BrandColor"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BrandColorPicker"</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>"BrandColor"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BrandColorPicker.wrn</code></p><pre data-language="wrn"><code>component BrandColorPicker {
|
|
||||||
props {
|
|
||||||
label = "BrandColor"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BrandSelectorcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BrandSelector component"
|
|
||||||
description = "Reusable brand selector component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BrandSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BrandSelector</h1><p>Reusable brand selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BrandSelector
|
|
||||||
label="Brand"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BrandSelector"</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>"Brand"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BrandSelector.wrn</code></p><pre data-language="wrn"><code>component BrandSelector {
|
|
||||||
props {
|
|
||||||
label = "Brand"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
page Breadcrumbscomponent {
|
|
||||||
seo {
|
|
||||||
title = "Breadcrumbs component"
|
|
||||||
description = "Reusable breadcrumbs component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">Breadcrumbs</span></nav><section class="doc-intro"><span class="eyebrow">core component</span><h1>Breadcrumbs</h1><p>Reusable breadcrumbs component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><Breadcrumbs
|
|
||||||
items="[]"
|
|
||||||
centered="false"
|
|
||||||
compact="false"
|
|
||||||
showHome="true"
|
|
||||||
homeLabel="Home"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="Breadcrumbs"</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>class</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>centered</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>compact</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>showHome</code></td><td><code>boolean</code></td><td>Optional</td><td><code>true</code></td></tr><tr><td><code>homeLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Home"</code></td></tr><tr><td><code>homeHref</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/Breadcrumbs.wrn</code></p><pre data-language="wrn"><code>component Breadcrumbs {
|
|
||||||
props {
|
|
||||||
class: string = ""
|
|
||||||
items = []
|
|
||||||
centered = false
|
|
||||||
compact = false
|
|
||||||
showHome = true
|
|
||||||
homeLabel = "Home"
|
|
||||||
homeHref = "/"
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<nav
|
|
||||||
aria-label="Breadcrumb"
|
|
||||||
class="w-full {class}"
|
|
||||||
class:hidden="items.length === 0 && !showHome"
|
|
||||||
>
|
|
||||||
<ol
|
|
||||||
class="flex flex-wrap items-center text-slate-500 dark:text-slate-400"
|
|
||||||
class:justify-center="centered"
|
|
||||||
class:gap-1.5="compact"
|
|
||||||
class:text-xs="compact"
|
|
||||||
class:gap-2="!compact"
|
|
||||||
class:text-sm="!compact"
|
|
||||||
>
|
|
||||||
<!-- Home -->
|
|
||||||
<li
|
|
||||||
class:hidden="!showHome"
|
|
||||||
class:inline-flex="showHome"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="{homeHref}"
|
|
||||||
class="group inline-flex items-center gap-1.5 rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300"
|
|
||||||
>
|
|
||||||
<span class="icon-[lucide--home] h-3.5 w-3.5" aria-hidden="true" >
|
|
||||||
</span>
|
|
||||||
<span class:hidden="compact">
|
|
||||||
{homeLabel}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="sr-only"
|
|
||||||
class:hidden="!compact"
|
|
||||||
>
|
|
||||||
{homeLabel}
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<!-- Separator after home -->
|
|
||||||
<li
|
|
||||||
aria-hidden="true"
|
|
||||||
class="text-slate-300 dark:text-slate-700"
|
|
||||||
class:hidden="!showHome || items.length === 0"
|
|
||||||
class:inline-flex="showHome && items.length > 0"
|
|
||||||
>
|
|
||||||
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" >
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
<!-- Dynamic breadcrumb items -->
|
|
||||||
{#each items as item, index}
|
|
||||||
<li class="inline-flex min-w-0 items-center gap-2">
|
|
||||||
<!-- Linked item -->
|
|
||||||
<a
|
|
||||||
href="{item.href}"
|
|
||||||
class="max-w-48 truncate rounded-lg transition hover:text-indigo-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:hover:text-indigo-300 sm:max-w-64"
|
|
||||||
class:hidden="item.current || item.href === ''"
|
|
||||||
class:inline-flex="!item.current && item.href !== ''"
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</a>
|
|
||||||
<!-- Current item -->
|
|
||||||
<span
|
|
||||||
aria-current="page"
|
|
||||||
class="max-w-48 truncate font-semibold text-slate-950 dark:text-white sm:max-w-64"
|
|
||||||
class:hidden="!item.current"
|
|
||||||
class:inline-flex="item.current"
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
<!-- Plain unlinked item -->
|
|
||||||
<span
|
|
||||||
class="max-w-48 truncate text-slate-600 dark:text-slate-300 sm:max-w-64"
|
|
||||||
class:hidden="item.current || item.href !== ''"
|
|
||||||
class:inline-flex="!item.current && item.href === ''"
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</span>
|
|
||||||
<!-- Separator -->
|
|
||||||
<span
|
|
||||||
aria-hidden="true"
|
|
||||||
class="inline-flex text-slate-300 dark:text-slate-700"
|
|
||||||
class:hidden="index === items.length - 1"
|
|
||||||
>
|
|
||||||
<span class="icon-[lucide--chevron-right] h-3.5 w-3.5" >
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page BrowserFramecomponent {
|
|
||||||
seo {
|
|
||||||
title = "BrowserFrame component"
|
|
||||||
description = "Reusable browser frame component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BrowserFrame</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>BrowserFrame</h1><p>Reusable browser frame component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BrowserFrame
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BrowserFrame"</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>eyebrow</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>description</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>"start"</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/BrowserFrame.wrn</code></p><pre data-language="wrn"><code>component BrowserFrame {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page BudgetRangeSlidercomponent {
|
|
||||||
seo {
|
|
||||||
title = "BudgetRangeSlider component"
|
|
||||||
description = "Reusable budget range slider component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BudgetRangeSlider</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>BudgetRangeSlider</h1><p>Reusable budget range slider component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><BudgetRangeSlider
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BudgetRangeSlider"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/BudgetRangeSlider.wrn</code></p><pre data-language="wrn"><code>component BudgetRangeSlider {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BudgetSelectorcomponent {
|
|
||||||
seo {
|
|
||||||
title = "BudgetSelector component"
|
|
||||||
description = "Reusable budget selector component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BudgetSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BudgetSelector</h1><p>Reusable budget selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BudgetSelector
|
|
||||||
label="Budget"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BudgetSelector"</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>"Budget"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BudgetSelector.wrn</code></p><pre data-language="wrn"><code>component BudgetSelector {
|
|
||||||
props {
|
|
||||||
label = "Budget"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page BusinessHoursPickercomponent {
|
|
||||||
seo {
|
|
||||||
title = "BusinessHoursPicker component"
|
|
||||||
description = "Reusable business hours picker component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">BusinessHoursPicker</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>BusinessHoursPicker</h1><p>Reusable business hours picker component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><BusinessHoursPicker
|
|
||||||
label="BusinessHours"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="BusinessHoursPicker"</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>"BusinessHours"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/BusinessHoursPicker.wrn</code></p><pre data-language="wrn"><code>component BusinessHoursPicker {
|
|
||||||
props {
|
|
||||||
label = "BusinessHours"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page ButtonSelectorcomponent {
|
|
||||||
seo {
|
|
||||||
title = "ButtonSelector component"
|
|
||||||
description = "Reusable button selector component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">ButtonSelector</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>ButtonSelector</h1><p>Reusable button selector component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><ButtonSelector
|
|
||||||
label="Button"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="ButtonSelector"</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>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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/ButtonSelector.wrn</code></p><pre data-language="wrn"><code>component ButtonSelector {
|
|
||||||
props {
|
|
||||||
label = "Button"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
page CalendarGridcomponent {
|
|
||||||
seo {
|
|
||||||
title = "CalendarGrid component"
|
|
||||||
description = "Reusable calendar grid component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CalendarGrid</span></nav><section class="doc-intro"><span class="eyebrow">data component</span><h1>CalendarGrid</h1><p>Reusable calendar grid component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><CalendarGrid
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
empty="false"
|
|
||||||
emptyText="No items available."
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CalendarGrid"</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>""</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>empty</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>emptyText</code></td><td><code>string</code></td><td>Optional</td><td><code>"No items available."</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/CalendarGrid.wrn</code></p><pre data-language="wrn"><code>component CalendarGrid {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
empty = false
|
|
||||||
emptyText = "No items available."
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-collection {class}">
|
|
||||||
<header data-show="title || description">
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description">{description}</p>
|
|
||||||
</header>
|
|
||||||
<div data-show="!empty" role="list" class="wire-catalog-collection__items">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<p data-show="empty" role="status" class="wire-muted">{emptyText}</p>
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page CalendarHeadercomponent {
|
|
||||||
seo {
|
|
||||||
title = "CalendarHeader component"
|
|
||||||
description = "Reusable calendar header component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CalendarHeader</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CalendarHeader</h1><p>Reusable calendar header component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><CalendarHeader
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CalendarHeader"</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>eyebrow</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>description</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>"start"</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/CalendarHeader.wrn</code></p><pre data-language="wrn"><code>component CalendarHeader {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
page CalendarNavigationcomponent {
|
|
||||||
seo {
|
|
||||||
title = "CalendarNavigation component"
|
|
||||||
description = "Reusable calendar navigation component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CalendarNavigation</span></nav><section class="doc-intro"><span class="eyebrow">layout component</span><h1>CalendarNavigation</h1><p>Reusable calendar navigation component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><CalendarNavigation
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
align="start"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CalendarNavigation"</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>eyebrow</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>description</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>"start"</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/CalendarNavigation.wrn</code></p><pre data-language="wrn"><code>component CalendarNavigation {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
align = "start"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<section class="wire-catalog-section wire-text--{align} {class}">
|
|
||||||
<header data-show="eyebrow || title || description">
|
|
||||||
<span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span>
|
|
||||||
<h2 data-show="title">{title}</h2>
|
|
||||||
<p data-show="description" class="wire-muted">{description}</p>
|
|
||||||
</header>
|
|
||||||
<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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page Calendarcomponent {
|
|
||||||
seo {
|
|
||||||
title = "Calendar component"
|
|
||||||
description = "Reusable calendar component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">Calendar</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>Calendar</h1><p>Reusable calendar component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><Calendar
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="Calendar"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/Calendar.wrn</code></p><pre data-language="wrn"><code>component Calendar {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
page CallbackUrlInputcomponent {
|
|
||||||
seo {
|
|
||||||
title = "CallbackUrlInput component"
|
|
||||||
description = "Reusable callback url input component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CallbackUrlInput</span></nav><section class="doc-intro"><span class="eyebrow">forms component</span><h1>CallbackUrlInput</h1><p>Reusable callback url input component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</span><span>11 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><CallbackUrlInput
|
|
||||||
label="CallbackUrl"
|
|
||||||
name="name"
|
|
||||||
value="value"
|
|
||||||
placeholder="placeholder"
|
|
||||||
type="text"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CallbackUrlInput"</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>"CallbackUrl"</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>required</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>readonly</code></td><td><code>boolean</code></td><td>Optional</td><td><code>false</code></td></tr><tr><td><code>help</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>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/CallbackUrlInput.wrn</code></p><pre data-language="wrn"><code>component CallbackUrlInput {
|
|
||||||
props {
|
|
||||||
label = "CallbackUrl"
|
|
||||||
name = ""
|
|
||||||
value = ""
|
|
||||||
placeholder = ""
|
|
||||||
type = "text"
|
|
||||||
required = false
|
|
||||||
disabled = false
|
|
||||||
readonly = false
|
|
||||||
help = ""
|
|
||||||
error = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<label class="wire-field wire-catalog-field {class}">
|
|
||||||
<span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span>
|
|
||||||
</span>
|
|
||||||
<input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" />
|
|
||||||
<span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span>
|
|
||||||
<span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span>
|
|
||||||
<slot />
|
|
||||||
</label>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
page CampaignCardcomponent {
|
|
||||||
seo {
|
|
||||||
title = "CampaignCard component"
|
|
||||||
description = "Reusable campaign card component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CampaignCard</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CampaignCard</h1><p>Reusable campaign card component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><CampaignCard
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
icon="icon-[lucide--send]"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CampaignCard"</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>""</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>href</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--send]"</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/CampaignCard.wrn</code></p><pre data-language="wrn"><code>component CampaignCard {
|
|
||||||
props {
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
icon = "icon-[lucide--send]"
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card wire-catalog-card--campaign {class}">
|
|
||||||
<span class="wire-catalog-card__icon">
|
|
||||||
<span class="{icon} size-5" aria-hidden="true">
|
|
||||||
</span>
|
|
||||||
</span>{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-catalog-card__link">
|
|
||||||
<span class="wire-visually-hidden">Open {title}</span>
|
|
||||||
</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
page CampaignPerformancePreviewcomponent {
|
|
||||||
seo {
|
|
||||||
title = "CampaignPerformancePreview component"
|
|
||||||
description = "Reusable campaign performance preview component."
|
|
||||||
}
|
|
||||||
|
|
||||||
view {
|
|
||||||
<div class="docs-shell">
|
|
||||||
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
||||||
<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.3.4</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">CampaignPerformancePreview</span></nav><section class="doc-intro"><span class="eyebrow">content component</span><h1>CampaignPerformancePreview</h1><p>Reusable campaign performance preview component.</p><div class="doc-meta"><span>@wrnexus/ui 0.3.4</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><CampaignPerformancePreview
|
|
||||||
eyebrow="eyebrow"
|
|
||||||
title="title"
|
|
||||||
description="description"
|
|
||||||
href="href"
|
|
||||||
actionLabel="Learn more"
|
|
||||||
/></code></pre><p>Legacy mount name: <code>data-component="CampaignPerformancePreview"</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>eyebrow</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>description</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>actionLabel</code></td><td><code>string</code></td><td>Optional</td><td><code>"Learn more"</code></td></tr><tr><td><code>image</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>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/CampaignPerformancePreview.wrn</code></p><pre data-language="wrn"><code>component CampaignPerformancePreview {
|
|
||||||
props {
|
|
||||||
eyebrow = ""
|
|
||||||
title = ""
|
|
||||||
description = ""
|
|
||||||
href = ""
|
|
||||||
actionLabel = "Learn more"
|
|
||||||
image = ""
|
|
||||||
alt = ""
|
|
||||||
class = ""
|
|
||||||
}
|
|
||||||
view {
|
|
||||||
<article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</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.3.4</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>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user