@zeix/ui-element

<!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="preload" href="./assets/main.css?v=452f3291" as="style" /> <link rel="modulepreload" href="./assets/main.js?v=4387827c" /> <link rel="stylesheet" href="./assets/main.css?v=452f3291" /> <script type="module" src="./assets/main.js?v=4387827c" ></script> </head> <body class=""> <context-router> <header class="content-grid"> <a href="#main" class="skiplink visually-hidden"> Skip to main content </a> <h1 class="content"> UIElement Docs <small>Version 0.14.0</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 id="main" class="content-grid"><section-hero> <h1 id="api-reference"> <a name="api-reference" class="anchor" href="#api-reference"> <span class="permalink">🔗</span> <span class="title">📚 API Reference</span> </a> </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="#parsers">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> <span class="title">Component</span> </a> </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> <span class="title">Signals</span> </a> </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="parsers"> <a name="parsers" class="anchor" href="#parsers"> <span class="permalink">🔗</span> <span class="title">Parsers</span> </a> </h2> <p>Declare how attributes are parsed. Functions returning <a href="api/type-aliases/AttributeParser.html">Parser</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> <table> <thead> <tr> <th>Function</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><a href="api/functions/asBoolean.html">asBoolean()</a></td> <td>Converts <code>"true"</code> / <code>"false"</code> to a <strong>boolean</strong> (<code>true</code> / <code>false</code>). Also treats empty attributes (<code>checked</code>) as <code>true</code> and missing attributes as <code>false</code>.</td> </tr> <tr> <td><a href="api/functions/asInteger.html">asInteger()</a></td> <td>Converts a numeric string (e.g., <code>"42"</code>) to an <strong>integer</strong> (<code>42</code>).</td> </tr> <tr> <td><a href="api/functions/asNumber.html">asNumber()</a></td> <td>Converts a numeric string (e.g., <code>"3.14"</code>) to a <strong>floating-point number</strong> (<code>3.14</code>).</td> </tr> <tr> <td><a href="api/functions/asString.html">asString()</a></td> <td>Returns the attribute value as a <strong>string</strong> (unchanged).</td> </tr> <tr> <td><a href="api/functions/asEnum.html">asEnum(values)</a></td> <td>Ensures the string matches <strong>one of the allowed values</strong>. Example: <code>asEnum(["small", "medium", "large"])</code>. If the value is not in the list, it defaults to the first option.</td> </tr> <tr> <td><a href="api/functions/asJSON.html">asJSON(fallback)</a></td> <td>Parses a JSON string (e.g., <code>'["a", "b", "c"]'</code>) into an <strong>array</strong> or <strong>object</strong>. If invalid, returns the fallback object.</td> </tr> </tbody></table> <p>The pre-defined parsers <code>asInteger()</code>, <code>asNumber()</code> and <code>asString()</code> allow to set a custom fallback value as parameter.</p> <p>The <code>asEnum()</code> parser requires an array of valid values, while the first will be the fallback value for invalid results.</p> <p>The <code>asJSON()</code> parser requires a fallback object as parameter as <code>{}</code> probably won't match the type you're expecting.</p> </section> <section> <h2 id="signal-producers"> <a name="signal-producers" class="anchor" href="#signal-producers"> <span class="permalink">🔗</span> <span class="title">Signal Producers</span> </a> </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> <span class="title">Effects</span> </a> </h2> <p>Declare effects of type <a href="api/type-aliases/Effect.html">Effect</a> to be applied when signals change:</p> <table> <thead> <tr> <th>Function</th> <th>Description</th> </tr> </thead> <tbody><tr> <td><a href="api/functions/setText.html">setText()</a></td> <td>Updates <strong>text content</strong> with a <code>string</code> signal value (while preserving comment nodes).</td> </tr> <tr> <td><a href="api/functions/setProperty.html">setProperty()</a></td> <td>Updates a given <strong>property</strong> with any signal value.</td> </tr> <tr> <td><a href="api/functions/show.html">show()</a></td> <td>Updates the <strong>visibility</strong> of an element with a <code>boolean</code> signal value.</td> </tr> <tr> <td><a href="api/functions/setAttribute.html">setAttribute()</a></td> <td>Updates a given <strong>attribute</strong> with a <code>string</code> signal value.</td> </tr> <tr> <td><a href="api/functions/toggleAttribute.html">toggleAttribute()</a></td> <td>Toggles a given <strong>boolean attribute</strong> with a <code>boolean</code> signal value.</td> </tr> <tr> <td><a href="api/functions/toggleClass.html">toggleClass()</a></td> <td>Toggles a given <strong>CSS class</strong> with a <code>boolean</code> signal value.</td> </tr> <tr> <td><a href="api/functions/setStyle.html">setStyle()</a></td> <td>Updates a given <strong>CSS property</strong> with a <code>string</code> signal value.</td> </tr> <tr> <td><a href="api/functions/dangerouslySetInnerHTML.html">dangerouslySetInnerHTML()</a></td> <td>Sets <strong>HTML content</strong> with a <code>string</code> signal value.</td> </tr> <tr> <td><a href="api/functions/insertOrRemoveElement.html">insertOrRemoveElement()</a></td> <td>Inserts (positive integer) or removes (negative integer) elements with a <code>number</code> signal value.</td> </tr> <tr> <td><a href="api/functions/emitEvent.html">emitEvent()</a></td> <td>Dispatches custom events when signals change.</td> </tr> <tr> <td><a href="api/functions/on.html">on()</a></td> <td>Attaches event listeners to elements.</td> </tr> <tr> <td><a href="api/functions/pass.html">pass()</a></td> <td>Passes signal values to descendant component properties.</td> </tr> <tr> <td><a href="api/functions/provideContexts.html">provideContexts()</a></td> <td>Provides context values to descendant components.</td> </tr> <tr> <td><a href="api/functions/updateElement.html">updateElement()</a></td> <td>Base function for updating elements, used by other effects.</td> </tr> </tbody></table> <p><strong>Tip</strong>: TypeScript will check whether a typed value is assignable to a certain element property. Prefer <code>setProperty()</code> over <code>setAttribute()</code> for increased type safety. Setting string attributes is possible for all elements, but will have an effect only on some.</p> </section> <section> <h2 id="dom-utilities"> <a name="dom-utilities" class="anchor" href="#dom-utilities"> <span class="permalink">🔗</span> <span class="title">DOM Utilities</span> </a> </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>