You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>| <strong>Function</strong> | <strong>Description</strong> |<br>| <code>asBoolean</code> | 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>. |<br>| <code>asInteger</code> | Converts a numeric string (e.g., <code>"42"</code>) to an <strong>integer</strong> (<code>42</code>). |<br>| <code>asNumber</code> | Converts a numeric string (e.g., <code>"3.14"</code>) to a <strong>floating-point number</strong> (<code>3.14</code>). |<br>| <code>asString</code> | Returns the attribute value as a <strong>string</strong> (unchanged). |<br>| <code>asEnum([...])</code> | 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. |<br>| <code>asJSON</code> | Parses a JSON string (e.g., <code>'["a", "b", "c"]'</code>) into an <strong>array</strong> or <strong>object</strong>. If invalid, returns <code>null</code>. |</p>
| <code>asBoolean</code> | 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>. |
291
+
| <code>asInteger</code> | Converts a numeric string (e.g., <code>"42"</code>) to an <strong>integer</strong> (<code>42</code>). |
292
+
| <code>asNumber</code> | Converts a numeric string (e.g., <code>"3.14"</code>) to a <strong>floating-point number</strong> (<code>3.14</code>). |
293
+
| <code>asString</code> | Returns the attribute value as a <strong>string</strong> (unchanged). |
294
+
| <code>asEnum([...])</code> | 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. |
295
+
| <code>asJSON</code> | Parses a JSON string (e.g., <code>'["a", "b", "c"]'</code>) into an <strong>array</strong> or <strong>object</strong>. If invalid, returns <code>null</code>. |</p>
290
296
</section>
291
297
292
298
<section>
293
299
294
300
<h2>Accessing Sub-elements within the Component</h2>
295
301
<p>Before adding <strong>event listeners</strong>, <strong>applying effects</strong>, or <strong>passing states</strong>, you need to select elements inside the component.</p>
296
302
<p>UIElement provides the following methods for <strong>element selection</strong>:</p>
<code-blockcollapsedlanguage="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
299
308
<pclass="meta">
300
309
@@ -364,7 +373,15 @@ <h3>Applying Effects with .sync()</h3>
364
373
365
374
</code-block>
366
375
<h3>Pre-defined Effects in UIElement</h3>
367
-
<p>| <strong>Function</strong> | <strong>Description</strong> |<br>| <code>setText()</code> | Updates <strong>text content</strong> with a <code>string</code> signal value (while preserving comment nodes). |<br>| <code>setProperty()</code> | Updates a given <strong>property</strong> with any signal value. |<br>| <code>setAttribute()</code> | Updates a given <strong>attribute</strong> with a <code>string</code> signal value. |<br>| <code>toggleAttribute()</code> | Toggles a given <strong>boolean attribute</strong> with a <code>boolean</code> signal value. |<br>| <code>toggleClass()</code> | Toggles a given <strong>CSS class</strong> with a <code>boolean</code> signal value. |<br>| <code>setStyle()</code> | Updates a given <strong>CSS property</strong> with a <code>string</code> signal value. |<br>| <code>createElement()</code> | Inserts a <strong>new element</strong> with a given tag name with a <code>Record<string, string></code> signal value for attributes. |<br>| <code>removeElement()</code> | Removes an element if the <code>boolean</code> signal value is <code>true</code>. |</p>
| <code>setText()</code> | Updates <strong>text content</strong> with a <code>string</code> signal value (while preserving comment nodes). |
378
+
| <code>setProperty()</code> | Updates a given <strong>property</strong> with any signal value. |
379
+
| <code>setAttribute()</code> | Updates a given <strong>attribute</strong> with a <code>string</code> signal value. |
380
+
| <code>toggleAttribute()</code> | Toggles a given <strong>boolean attribute</strong> with a <code>boolean</code> signal value. |
381
+
| <code>toggleClass()</code> | Toggles a given <strong>CSS class</strong> with a <code>boolean</code> signal value. |
382
+
| <code>setStyle()</code> | Updates a given <strong>CSS property</strong> with a <code>string</code> signal value. |
383
+
| <code>createElement()</code> | Inserts a <strong>new element</strong> with a given tag name with a <code>Record<string, string></code> signal value for attributes. |
384
+
| <code>removeElement()</code> | Removes an element if the <code>boolean</code> signal value is <code>true</code>. |</p>
368
385
<h3>Simplifying Effect Notation</h3>
369
386
<p>For effects that take two arguments, <strong>the second argument can be omitted</strong> if the signal key matches the targeted property name, attribute, class, or style property.</p>
0 commit comments