Refresh UI components and showcase; release updated framework packages
This commit is contained in:
Clintchiz committed
1 parent
d800228585
commit
c77f5e1cec
293 files changed
+22544
-35778
No files matched your search
@@ -26,7 +26,7 @@ page MetricCardDetail {
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
|
||||
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "lift"
|
||||
state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none"
|
||||
state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
@@ -73,7 +73,7 @@ page MetricCardDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metLine truncated
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -199,7 +199,7 @@ if (component) registerOutputHandler(component, "select", (payload) => <span>
|
||||
if (component) registerOutputHandler(component, "action", (payload) => <span>{</span>
|
||||
console.log("action", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Metric"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"0"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>iconStyle</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>prefix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>suffix</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trend</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>trendDirection</code></td><td>string</td><td><code>"neutral"</code></td><td>No</td></tr><tr><td><code>progress</code></td><td>number</td><td><code>-1</code></td><td>No</td></tr><tr><td><code>progressLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-card-demo-1">Operational KPI</a><a href="#metric-card-demo-2">Progress metric</a><a href="#metric-card-demo-3">Selectable dashboard metric</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
@@ -207,7 +207,7 @@ if (component) registerOutputHandler(component, "action", (payload) => <span>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
<span></span>
|
||||
<a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
|
||||
<span></span>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user