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
@@ -67,44 +67,46 @@ page FileInputDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Choose a document</h2><p>Select a PDF or image. The selected filename replaces the placeholder.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><FileInput size="default" label="File Input" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" icon="" multiple="false" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><FileInput size="default" name="attachment" label="Attachment" hiddenLabel="false" placeholder="Choose a file" value="" icon="" accept=".pdf,image/*" multiple="false" helperText="PDF or image" inline="false" variant="normal" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<section class="demo-code" aria-label="Choose a document usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><FileInput
|
||||
label="File Input"
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-1"
|
||||
name="attachment"
|
||||
label="Attachment"
|
||||
accept=".pdf,image/*"
|
||||
helperText="PDF or image"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Compact</span><h2>Multiple attachments</h2><p>Select several files; each filename is shown in the control.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><FileInput size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" icon="icon-[lucide--arrow-right]" multiple="false" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><FileInput size="sm" name="attachments" label="Attachments" hiddenLabel="false" placeholder="Choose files" value="" icon="icon-[lucide--arrow-right]" multiple="true" inline="false" variant="secondary" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<section class="demo-code" aria-label="Multiple attachments usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><FileInput
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
placeholder="Enter a sample value"
|
||||
value="sample-2"
|
||||
name="attachments"
|
||||
label="Attachments"
|
||||
placeholder="Choose files"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
multiple="true"
|
||||
variant="secondary"
|
||||
/></code></pre>
|
||||
</section>
|
||||
@@ -112,24 +114,25 @@ page FileInputDetail {
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Disabled upload</h2><p>A disabled control cannot open the file chooser.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="file-input-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><FileInput size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" value="sample-3" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><FileInput size="lg" name="disabled-file" label="Attachment" hiddenLabel="false" placeholder="Uploads unavailable" value="" icon="icon-[lucide--trash-2]" multiple="false" inline="false" variant="success" readonly="false" disabled="true" required="false" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<section class="demo-code" aria-label="Disabled upload usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><FileInput
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
placeholder="Search by name, email, or identifier"
|
||||
value="sample-3"
|
||||
name="disabled-file"
|
||||
label="Attachment"
|
||||
placeholder="Uploads unavailable"
|
||||
icon="icon-[lucide--trash-2]"
|
||||
variant="success"
|
||||
disabled="true"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -176,7 +179,7 @@ if (component) registerOutputHandler(component, "invalid", (payload) => <span
|
||||
<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>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>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"File"</code></td><td>No</td></tr><tr><td><code>hiddenLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"Choose a file"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--upload]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>accept</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>multiple</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>helperText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>cornerHint</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>error</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>inline</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"normal"</code></td><td>No</td></tr><tr><td><code>readonly</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>required</code></td><td>boolean</td><td><code>false</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="#file-input-demo-1">Production default</a><a href="#file-input-demo-2">Compact application</a><a href="#file-input-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-input-demo-1">Choose a document</a><a href="#file-input-demo-2">Multiple attachments</a><a href="#file-input-demo-3">Disabled upload</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
Reference in new issue
Block a user