natxocc/sigpro
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Files
1f2229ddda316f2e265843a0b2cc0d1484dca379
sigpro/docs/assets/ui_quick.md.CsppjR8J.js
natxocc 876874c2f0 1.1.5
2026-03-26 14:06:49 +01:00

45 lines
19 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{_ as i,o as a,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"🧩 UI Components (WIP)","description":"","frontmatter":{},"headers":[],"relativePath":"ui/quick.md","filePath":"ui/quick.md"}'),n={name:"ui/quick.md"};function l(h,s,p,o,r,k){return a(),e("div",null,[...s[0]||(s[0]=[t(`<h1 id="🧩-ui-components-wip" tabindex="-1">🧩 UI Components <code>(WIP)</code> <a class="header-anchor" href="#🧩-ui-components-wip" aria-label="Permalink to &quot;🧩 UI Components \`(WIP)\`&quot;">​</a></h1><blockquote><p><strong>Status: Work In Progress.</strong> &gt; These are high-level, complex visual components designed to speed up development. They replace native HTML elements with &quot;superpowered&quot; versions that handle their own internal logic, reactivity, and professional styling.</p></blockquote><h2 id="⚠️-prerequisites" tabindex="-1">⚠️ Prerequisites <a class="header-anchor" href="#⚠️-prerequisites" aria-label="Permalink to &quot;⚠️ Prerequisites&quot;">​</a></h2><p>To ensure all components render correctly with their reactive themes and states, your project <strong>must</strong> have the following versions installed:</p><ul><li><strong>Tailwind CSS v4+</strong>: For the new engine performance and modern CSS variables.</li><li><strong>DaisyUI v5+</strong>: Required for the updated theme-selectors and improved component classes used in the SigPro UI library.</li></ul><hr><h2 id="_1-what-are-ui-components" tabindex="-1">1. What are UI Components? <a class="header-anchor" href="#_1-what-are-ui-components" aria-label="Permalink to &quot;1. What are UI Components?&quot;">​</a></h2><p>Unlike <strong>Tag Helpers</strong> (which are just functional mirrors of HTML tags), SigPro UI Components are smart abstractions:</p><ul><li><strong>Stateful</strong>: They manage complex internal states (like date ranges, search filtering, or API lifecycles).</li><li><strong>Reactive</strong>: Attributes prefixed with <code>$</code> are automatically tracked via <code>$.watch</code>.</li><li><strong>Self-Sane</strong>: They automatically use <code>._cleanups</code> to destroy observers or event listeners when removed from the DOM.</li><li><strong>Themed</strong>: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.</li></ul><hr><h2 id="_2-the-ui-registry-available-now" tabindex="-1">2. The UI Registry (Available Now) <a class="header-anchor" href="#_2-the-ui-registry-available-now" aria-label="Permalink to &quot;2. The UI Registry (Available Now)&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Category</th><th style="text-align:left;">Components</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Forms &amp; Inputs</strong></td><td style="text-align:left;"><code>Button</code>, <code>Input</code>, <code>Select</code>, <code>Autocomplete</code>, <code>Datepicker</code>, <code>Colorpicker</code>, <code>CheckBox</code>, <code>Radio</code>, <code>Range</code>, <code>Rating</code>, <code>Swap</code></td></tr><tr><td style="text-align:left;"><strong>Feedback</strong></td><td style="text-align:left;"><code>Alert</code>, <code>Toast</code>, <code>Modal</code>, <code>Loading</code>, <code>Badge</code>, <code>Tooltip</code>, <code>Indicator</code></td></tr><tr><td style="text-align:left;"><strong>Navigation</strong></td><td style="text-align:left;"><code>Navbar</code>, <code>Menu</code>, <code>Drawer</code>, <code>Tabs</code>, <code>Accordion</code>, <code>Dropdown</code></td></tr><tr><td style="text-align:left;"><strong>Data &amp; Layout</strong></td><td style="text-align:left;"><code>Request</code>, <code>Response</code>, <code>Grid</code> (AG-Grid), <code>List</code>, <code>Stack</code>, <code>Timeline</code>, <code>Stat</code>, <code>Fieldset</code>, <code>Fab</code></td></tr></tbody></table><hr><h2 id="_3-examples-with-superpowers" tabindex="-1">3. Examples with &quot;Superpowers&quot; <a class="header-anchor" href="#_3-examples-with-superpowers" aria-label="Permalink to &quot;3. Examples with &quot;Superpowers&quot;&quot;">​</a></h2><h3 id="a-the-declarative-api-flow-request-response" tabindex="-1">A. The Declarative API Flow (<code>Request</code> &amp; <code>Response</code>) <a class="header-anchor" href="#a-the-declarative-api-flow-request-response" aria-label="Permalink to &quot;A. The Declarative API Flow (\`Request\` &amp; \`Response\`)&quot;">​</a></h3><p>Instead of manually managing <code>loading</code> and <code>error</code> flags, use these together to handle data fetching elegantly.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 1. Define the request (it tracks dependencies automatically)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> userProfile</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`https://api.example.com/user/\${</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">userId</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}\`</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 2. Render the UI based on the request state</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-4&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Response</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(userProfile, (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> H1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.name),</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> P</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(data.email)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ])</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> )</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span></code></pre></div><h3 id="b-smart-inputs-autocomplete" tabindex="-1">B. Smart Inputs &amp; Autocomplete <a class="header-anchor" href="#b-smart-inputs-autocomplete" aria-label="Permalink to &quot;B. Smart Inputs &amp; Autocomplete&quot;">​</a></h3><p>SigPro UI inputs handle labels, icons, password toggles, and validation states out of the box using DaisyUI v5 classes.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> searchQuery</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Autocomplete</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Find a Country&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> placeholder: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Start typing...&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Spain&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;France&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Germany&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Italy&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Portugal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: searchQuery,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">val</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Selected:&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, val)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="c-the-reactive-datepicker" tabindex="-1">C. The Reactive Datepicker <a class="header-anchor" href="#c-the-reactive-datepicker" aria-label="Permalink to &quot;C. The Reactive Datepicker&quot;">​</a></h3><p>Handles single dates or ranges with a clean, reactive interface that automatically syncs with your signals.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myDate</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// or { start: &quot;&quot;, end: &quot;&quot; } for range</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Datepicker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Select Expiry Date&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: myDate,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> range: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="d-imperative-toasts-modals" tabindex="-1">D. Imperative Toasts &amp; Modals <a class="header-anchor" href="#d-imperative-toasts-modals" aria-label="Permalink to &quot;D. Imperative Toasts &amp; Modals&quot;">​</a></h3><p>Trigger complex UI elements from your logic. These components use <code>$.mount</code> internally to ensure they are properly cleaned up from memory after they close.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Show a notification (Self-destroying after 3s)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Settings saved successfully!&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;alert-success&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Control a modal with a simple signal</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isModalOpen</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Modal</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $open: isModalOpen, </span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Delete Account&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> buttons: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;btn-error&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, onclick: doDelete }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;This action cannot be undone.&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-internationalization-i18n" tabindex="-1">4. Internationalization (i18n) <a class="header-anchor" href="#_4-internationalization-i18n" aria-label="Permalink to &quot;4. Internationalization (i18n)&quot;">​</a></h2><p>The UI library comes with a built-in locale system. It currently supports <code>es</code> and <code>en</code>.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Set the global UI language</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">SetLocale</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;en&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Access translated strings (Returns a signal that tracks the current locale)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> t</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> tt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;confirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_5-best-practices" tabindex="-1">5. Best Practices <a class="header-anchor" href="#_5-best-practices" aria-label="Permalink to &quot;5. Best Practices&quot;">​</a></h2><ul><li><strong>Use <code>$</code> for Reactivity</strong>: If a property starts with <code>$</code>, the component expects a Signal (e.g., <code>$value: mySignal</code>).</li><li><strong>Automatic Cleaning</strong>: You don&#39;t need to manually destroy these components if they are inside a <code>$.If</code> or <code>$.For</code>. SigPro&#39;s core will &quot;sweep&quot; their internal watchers automatically.</li><li><strong>Manual Cleanups</strong>: If you build custom components using <code>setInterval</code> or third-party observers, always add the stop functions to the element&#39;s <code>._cleanups</code> Set.</li></ul>`,33)])])}const E=i(n,[["render",l]]);export{c as __pageData,E as default};
Reference in New Issue View Git Blame Copy Permalink