UNPKG

@zeix/ui-element

Version:

UIElement - a HTML-first library for reactive Web Components

251 lines (225 loc) 10.1 kB
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>API Reference – UIElement Docs</title> <meta name="description" content="Functions, types, and constants" /> <link rel="stylesheet" href="./assets/main.css" /> <script type="module" src="./assets/main.js"></script> </head> <body class=""> <context-router> <header class="content-grid"> <h1 class="content"> UIElement Docs <small>Version 0.13.3</small> </h1> <section-menu> <nav> <h2 class="visually-hidden">Main Menu</h2> <ol> <li> <a href="index.html"> <span class="icon">📖</span> <strong>Introduction</strong> <small>Overview and key benefits of UIElement</small> </a> </li> <li> <a href="getting-started.html"> <span class="icon">🚀</span> <strong>Getting Started</strong> <small>Installation, setup, and first steps</small> </a> </li> <li> <a href="components.html"> <span class="icon">🏗️</span> <strong>Components</strong> <small>Anatomy, lifecycle, signals, effects</small> </a> </li> <li> <a href="styling.html"> <span class="icon">🎨</span> <strong>Styling</strong> <small>Scoped styles, CSS custom properties</small> </a> </li> <li> <a href="data-flow.html"> <span class="icon">🔄</span> <strong>Data Flow</strong> <small>Passing state, events, context</small> </a> </li> <li> <a href="examples.html"> <span class="icon">🍽️</span> <strong>Examples</strong> <small>Common use cases and demos</small> </a> </li> <li> <a href="blog.html"> <span class="icon">📜</span> <strong>Blog</strong> <small>Latest articles and updates</small> </a> </li> <li> <a href="api.html"> <span class="icon">📚</span> <strong>API Reference</strong> <small>Functions, types, and constants</small> </a> </li> <li> <a href="about.html"> <span class="icon">🤝</span> <strong>About</strong> <small>License, versioning, getting involved</small> </a> </li> </ol> </nav> </section-menu> <card-callout class="content danger" hidden> <p class="error" role="alert" aria-live="polite"></p> </card-callout> </header> <main class="content-grid"><section-hero> <h1 id="api-reference"> <a name="api-reference" class="anchor" href="#api-reference"> <span class="permalink">🔗</span> </a> 📚 API Reference </h1> <div> <p class="lead">Functions, types, and constants</p> <module-toc> <nav> <h2>In this Page</h2> <ol> <li><a href="#component">Component</a></li> <li><a href="#signals">Signals</a></li> <li><a href="#attribute-parsers">Attribute Parsers</a></li> <li><a href="#signal-producers">Signal Producers</a></li> <li><a href="#effects">Effects</a></li> <li><a href="#dom-utilities">DOM Utilities</a></li> </ol> </nav> </module-toc> </div> </section-hero> <section> <h2 id="component"> <a name="component" class="anchor" href="#component"> <span class="permalink">🔗</span> </a> Component </h2> <p>Create a Web Component of type <a href="api/type-aliases/Component.html">Component</a> with reactive properties that extend <a href="api/type-aliases/ComponentProps.html">ComponentProps</a>.</p> <ul> <li><a href="api/functions/component.html">component</a> defines a custom element with reactive properties and declarative effects</li> </ul> </section> <section> <h2 id="signals"> <a name="signals" class="anchor" href="#signals"> <span class="permalink">🔗</span> </a> Signals </h2> <p>Create a signal of type <a href="api/type-aliases/Signal.html">Signal</a>.</p> <ul> <li><a href="api/functions/computed.html">computed</a> creates a <a href="api/type-aliases/Computed.html">Computed</a> signal derived from other signals</li> <li><a href="api/functions/state.html">state</a> creates a <a href="api/type-aliases/State.html">State</a> signal</li> </ul> <p>Helper functions:</p> <ul> <li><a href="api/functions/isComputed.html">isComputed</a> checks whether a value is a <a href="api/type-aliases/Computed.html">Computed</a> signal</li> <li><a href="api/functions/isSignal.html">isSignal</a> checks whether a value is a <a href="api/type-aliases/Signal.html">Signal</a></li> <li><a href="api/functions/isState.html">isState</a> checks whether a value is a <a href="api/type-aliases/State.html">State</a> signal</li> </ul> </section> <section> <h2 id="attribute-parsers"> <a name="attribute-parsers" class="anchor" href="#attribute-parsers"> <span class="permalink">🔗</span> </a> Attribute Parsers </h2> <p>Declare how attributes are parsed. Functions returning <a href="api/type-aliases/AttributeParser.html">AttributeParser</a> that will be used to create <a href="api/type-aliases/State.html">State</a> signals as writable reactive properties on the component.</p> <ul> <li><a href="api/functions/asBoolean.html">asBoolean</a> parses boolean attributes (presence indicates true)</li> <li><a href="api/functions/asEnum.html">asEnum</a> parses string attributes constrained to specific values</li> <li><a href="api/functions/asInteger.html">asInteger</a> parses integer attributes with validation</li> <li><a href="api/functions/asJSON.html">asJSON</a> parses JSON attributes into JavaScript objects</li> <li><a href="api/functions/asNumber.html">asNumber</a> parses numeric attributes as floating-point numbers</li> <li><a href="api/functions/asString.html">asString</a> parses string attributes</li> </ul> </section> <section> <h2 id="signal-producers"> <a name="signal-producers" class="anchor" href="#signal-producers"> <span class="permalink">🔗</span> </a> Signal Producers </h2> <p>Declare how signals are initialized. Functions returning type <a href="api/type-aliases/SignalProducer.html">SignalProducer</a> that will be used to create <a href="api/type-aliases/Computed.html">Computed</a> signals as read-only reactive properties on the component.</p> <ul> <li><a href="api/functions/fromContext.html">fromContext</a> consumes a context value from nearest ancestor context provider component</li> <li><a href="api/functions/fromEvents.html">fromEvents</a> creates a computed signal from event transformers on descendant elements</li> <li><a href="api/functions/fromSelector.html">fromSelector</a> creates a computed signal of descentant elements matching a CSS selector</li> </ul> </section> <section> <h2 id="effects"> <a name="effects" class="anchor" href="#effects"> <span class="permalink">🔗</span> </a> Effects </h2> <p>Declare effects of type <a href="api/type-aliases/Effect.html">Effect</a> to be applied when signals change:</p> <ul> <li><a href="api/functions/dangerouslySetInnerHTML.html">dangerouslySetInnerHTML</a> sets inner HTML content from a signal</li> <li><a href="api/functions/emitEvent.html">emitEvent</a> dispatches custom events when signals change</li> <li><a href="api/functions/insertOrRemoveElement.html">insertOrRemoveElement</a> conditionally inserts or removes elements</li> <li><a href="api/functions/on.html">on</a> attaches event listeners to elements</li> <li><a href="api/functions/pass.html">pass</a> passes signal values to descendant component properties</li> <li><a href="api/functions/provideContexts.html">provideContexts</a> provides context values to descendant components</li> <li><a href="api/functions/setAttribute.html">setAttribute</a> sets element attributes from signals</li> <li><a href="api/functions/setProperty.html">setProperty</a> sets element properties from signals</li> <li><a href="api/functions/setStyle.html">setStyle</a> sets CSS styles from signals</li> <li><a href="api/functions/setText.html">setText</a> sets text content from signals</li> <li><a href="api/functions/show.html">show</a> conditionally shows or hides elements</li> <li><a href="api/functions/toggleAttribute.html">toggleAttribute</a> toggles attributes based on signal values</li> <li><a href="api/functions/toggleClass.html">toggleClass</a> toggles CSS classes based on signal values</li> <li><a href="api/functions/updateElement.html">updateElement</a> base function for updating elements, used for <a href="api/functions/setText.html">setText</a>, <a href="api/functions/show.html">show</a>, <a href="api/functions/toggleClass.html">toggleClass</a>, <a href="api/functions/toggleAttribute.html">toggleAttribute</a>, <a href="api/functions/setAttribute.html">setAttribute</a>, <a href="api/functions/setProperty.html">setProperty</a>, <a href="api/functions/setStyle.html">setStyle</a></li> </ul> </section> <section> <h2 id="dom-utilities"> <a name="dom-utilities" class="anchor" href="#dom-utilities"> <span class="permalink">🔗</span> </a> DOM Utilities </h2> <p>Functions to work with descendant elements:</p> <ul> <li><a href="api/functions/read.html">read</a> reads properties from a descendant element, waiting for components to be upgraded</li> <li><a href="api/functions/reduced.html">reduced</a> creates a computed signal from a reducer function</li> <li><a href="api/functions/requireDescendant.html">requireDescendant</a> requires a descendant element to exist and returns it, otherwise throws an error</li> </ul> </section> </main> <footer class="content-grid"> <div class="content"> <h2 class="visually-hidden">Footer</h2> <p>© 2024 – 2025 Zeix AG</p> </div> </footer> </context-router> </body> </html>