@zeix/ui-element
Version:
UIElement - a HTML-first library for reactive Web Components
251 lines (225 loc) • 10.1 kB
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>