31 lines
20 KiB
JavaScript
31 lines
20 KiB
JavaScript
import{_ as i,o as t,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Official UI Plugin: UI","description":"","frontmatter":{},"headers":[],"relativePath":"plugins/core.ui.md","filePath":"plugins/core.ui.md"}'),n={name:"plugins/core.ui.md"};function l(h,s,p,o,d,r){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="official-ui-plugin-ui" tabindex="-1">Official UI Plugin: <code>UI</code> <a class="header-anchor" href="#official-ui-plugin-ui" aria-label="Permalink to "Official UI Plugin: \`UI\`""></a></h1><p>The <strong>SigPro UI</strong> plugin is a high-level component library built on top of the reactive core. It leverages <strong>Tailwind CSS v4</strong> for utility styling and <strong>daisyUI v5</strong> for semantic components.</p><h2 id="_1-prerequisites-installation" tabindex="-1">1. Prerequisites & Installation <a class="header-anchor" href="#_1-prerequisites-installation" aria-label="Permalink to "1. Prerequisites & Installation""></a></h2><p>To use these components, you must install the styling engine. SigPro UI provides the logic, but Tailwind and daisyUI provide the visuals.</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-LcRKQ" id="tab-3jnYZsk" checked><label data-title="NPM" for="tab-3jnYZsk">NPM</label><input type="radio" name="group-LcRKQ" id="tab-BadOedm"><label data-title="PNPM" for="tab-BadOedm">PNPM</label><input type="radio" name="group-LcRKQ" id="tab-x05bQwr"><label data-title="Yarn" for="tab-x05bQwr">Yarn</label><input type="radio" name="group-LcRKQ" id="tab-oXolM0y"><label data-title="Bun" for="tab-oXolM0y">Bun</label></div><div class="blocks"><div class="language-bash vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tailwindcss/vite</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> daisyui@next</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tailwindcss/vite</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> daisyui@next</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tailwindcss/vite</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> daisyui@next</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -d</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tailwindcss</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tailwindcss/vite</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> daisyui@next</span></span></code></pre></div></div></div><p>Would you like to continue with the <strong>Router.md</strong> documentation now?</p><h3 id="css-configuration-app-css" tabindex="-1">CSS Configuration (<code>app.css</code>) <a class="header-anchor" href="#css-configuration-app-css" aria-label="Permalink to "CSS Configuration (\`app.css\`)""></a></h3><p>In Tailwind v4, configuration is handled directly in your CSS. Create a <code>src/app.css</code> file:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</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;">/* src/app.css */</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> "tailwindcss"</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;">/* Import daisyUI v5 as a Tailwind v4 plugin */</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> "daisyui";</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Optional: Configure themes */</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@custom-variant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> dark (&:where(.dark, [data-theme="dark"], [data-theme="dark"] *)));</span></span></code></pre></div><hr><h2 id="_2-initialization" tabindex="-1">2. Initialization <a class="header-anchor" href="#_2-initialization" aria-label="Permalink to "2. Initialization""></a></h2><p>You must import your CSS and register the <code>UI</code> plugin in your entry point. This populates the global scope with reactive component helpers (prefixed with <code>_</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;">// main.js</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> './app.css'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { UI } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'sigpro/plugins'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">plugin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">UI</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Global components like _button and _input are now ready</span></span>
|
||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./App.js'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">).</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app.default));</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><hr><h2 id="_3-core-component-tags-tags" tabindex="-1">3. Core Component Tags (<code>_tags</code>) <a class="header-anchor" href="#_3-core-component-tags-tags" aria-label="Permalink to "3. Core Component Tags (\`_tags\`)""></a></h2><p>SigPro UI components are more than just HTML; they are <strong>Reactive Functional Components</strong> that manage complex states (loading, errors, accessibility) automatically.</p><h3 id="a-action-components-button" tabindex="-1">A. Action Components (<code>_button</code>) <a class="header-anchor" href="#a-action-components-button" aria-label="Permalink to "A. Action Components (\`_button\`)""></a></h3><p>The <code>_button</code> automatically handles spinners and disabled states based on signals.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Property</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>$loading</code></strong></td><td style="text-align:left;"><code>signal</code></td><td style="text-align:left;">If true, shows a spinner and disables the button.</td></tr><tr><td style="text-align:left;"><strong><code>$disabled</code></strong></td><td style="text-align:left;"><code>signal</code></td><td style="text-align:left;">Manually disables the button (logic-bound).</td></tr><tr><td style="text-align:left;"><strong><code>icon</code></strong></td><td style="text-align:left;"><code>node/str</code></td><td style="text-align:left;">Prepends an icon to the text.</td></tr><tr><td style="text-align:left;"><strong><code>badge</code></strong></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">Appends a small badge to the button.</td></tr></tbody></table><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:#6F42C1;--shiki-dark:#B392F0;">_button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $loading: $isSaving, </span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'💾'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> class: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'btn-primary'</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:#032F62;--shiki-dark:#9ECBFF;">"Save Data"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h3 id="b-high-density-forms-input-select-checkbox" tabindex="-1">B. High-Density Forms (<code>_input</code>, <code>_select</code>, <code>_checkbox</code>) <a class="header-anchor" href="#b-high-density-forms-input-select-checkbox" aria-label="Permalink to "B. High-Density Forms (\`_input\`, \`_select\`, \`_checkbox\`)""></a></h3><p>These components wrap the raw input in a <code>fieldset</code> with integrated labels and tooltips.</p><ul><li><strong><code>label</code></strong>: Field title displayed above the input.</li><li><strong><code>tip</code></strong>: Displays a <code>?</code> badge that shows a tooltip on hover.</li><li><strong><code>$error</code></strong>: A signal that, when populated, turns the input red and displays the message.</li><li><strong><code>$value</code></strong>: <strong>Two-way binding</strong>. Updates the signal on input and the input on signal change.</li></ul><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:#6F42C1;--shiki-dark:#B392F0;">_input</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;">"Username"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Choose a unique name"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $value: $name,</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $error: $nameError</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><hr><h2 id="_4-complex-ui-patterns" tabindex="-1">4. Complex UI Patterns <a class="header-anchor" href="#_4-complex-ui-patterns" aria-label="Permalink to "4. Complex UI Patterns""></a></h2><h3 id="reactive-modals-modal" tabindex="-1">Reactive Modals (<code>_modal</code>) <a class="header-anchor" href="#reactive-modals-modal" aria-label="Permalink to "Reactive Modals (\`_modal\`)""></a></h3><p>The <code>_modal</code> is surgically mounted. If the <code>$open</code> signal is <code>false</code>, the component is completely removed from the DOM, optimizing performance.</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;"> $showModal</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;">({ $open: $showModal, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Alert"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, [</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Are you sure you want to proceed?"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> _button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> doAction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() }, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"Confirm"</span><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="navigation-layout-tabs-drawer-navbar" tabindex="-1">Navigation & Layout (<code>_tabs</code>, <code>_drawer</code>, <code>_navbar</code>) <a class="header-anchor" href="#navigation-layout-tabs-drawer-navbar" aria-label="Permalink to "Navigation & Layout (\`_tabs\`, \`_drawer\`, \`_navbar\`)""></a></h3><p>Designed to work seamlessly with the <strong>Router</strong>.</p><table tabindex="0"><thead><tr><th style="text-align:left;">Component</th><th style="text-align:left;">Key Logic</th></tr></thead><tbody><tr><td style="text-align:left;"><strong><code>_tabs</code></strong></td><td style="text-align:left;">Accepts an <code>active</code> property (signal or function) to highlight the current tab.</td></tr><tr><td style="text-align:left;"><strong><code>_drawer</code></strong></td><td style="text-align:left;">A responsive sidebar that toggles via an ID or an <code>$open</code> signal.</td></tr><tr><td style="text-align:left;"><strong><code>_navbar</code></strong></td><td style="text-align:left;">Standard top bar with shadow and glass effect support.</td></tr><tr><td style="text-align:left;"><strong><code>_menu</code></strong></td><td style="text-align:left;">Vertical navigation list with active state support.</td></tr></tbody></table><hr><h2 id="_5-summary-table-ui-globals" tabindex="-1">5. Summary Table: UI Globals <a class="header-anchor" href="#_5-summary-table-ui-globals" aria-label="Permalink to "5. Summary Table: UI Globals""></a></h2><p>Once <code>$.plugin(UI)</code> is active, these tags are available project-wide:</p><table tabindex="0"><thead><tr><th style="text-align:left;">Tag</th><th style="text-align:left;">Category</th><th style="text-align:left;">Use Case</th></tr></thead><tbody><tr><td style="text-align:left;"><code>_fieldset</code></td><td style="text-align:left;">Layout</td><td style="text-align:left;">Grouping related inputs with a <code>legend</code>.</td></tr><tr><td style="text-align:left;"><code>_accordion</code></td><td style="text-align:left;">Content</td><td style="text-align:left;">Collapsible sections (FAQs).</td></tr><tr><td style="text-align:left;"><code>_badge</code></td><td style="text-align:left;">Feedback</td><td style="text-align:left;">Status indicators (Success, Warning).</td></tr><tr><td style="text-align:left;"><code>_tooltip</code></td><td style="text-align:left;">Feedback</td><td style="text-align:left;">Descriptive text on hover.</td></tr><tr><td style="text-align:left;"><code>_range</code></td><td style="text-align:left;">Input</td><td style="text-align:left;">Reactive slider for numerical values.</td></tr></tbody></table><hr><h3 id="what-s-next" tabindex="-1">What's next? <a class="header-anchor" href="#what-s-next" aria-label="Permalink to "What's next?""></a></h3><p>With the UI ready and styled via <strong>Tailwind v4</strong>, we can move to the <strong>Router.md</strong>. We will explain how to link <code>_tabs</code> and <code>_menu</code> to different URL paths for a full SPA experience.</p><p><strong>Would you like to start with the Router configuration?</strong></p>`,40)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};
|