design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(demo-inputs): wrap input component demos in dees-form containers for consistent form integration

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-12 19:04:43 +00:00
parent eb3d396c68
commit 7c2635fc13
15 changed files with 469 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ts_web/elements/00group-input/dees-input-fileupload/demo.ts
View File

@@ -55,41 +55,43 @@ export const demoFunc = () => html`
.title=${'Modern file uploader'}
.subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
>
<div class="demo-grid demo-grid--two">
<div class="demo-stack">
<dees-input-fileupload
.label=${'Attachments'}
.infoText=${'Upload supporting documents for your request'}
.description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
.accept=${'image/*,.pdf,.zip'}
.maxSize=${10 * 1024 * 1024}
></dees-input-fileupload>
<dees-form>
<div class="demo-grid demo-grid--two">
<div class="demo-stack">
<dees-input-fileupload
.label=${'Attachments'}
.infoText=${'Upload supporting documents for your request'}
.description=${'Accepted formats: images, PDF, and ZIP archives up to 10MB'}
.accept=${'image/*,.pdf,.zip'}
.maxSize=${10 * 1024 * 1024}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Brand assets'}
.infoText=${'Upload high-resolution imagery (JPG/PNG)'}
.accept=${'image/jpeg,image/png'}
.multiple=${false}
.maxSize=${5 * 1024 * 1024}
.buttonText=${'Select cover image'}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Brand assets'}
.infoText=${'Upload high-resolution imagery (JPG/PNG)'}
.accept=${'image/jpeg,image/png'}
.multiple=${false}
.maxSize=${5 * 1024 * 1024}
.buttonText=${'Select cover image'}
></dees-input-fileupload>
</div>
<div class="demo-stack">
<dees-input-fileupload
.label=${'Audio uploads'}
.infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
.accept=${'audio/*'}
.maxSize=${25 * 1024 * 1024}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Disabled example'}
.infoText=${'Uploader is disabled while moderation is pending'}
.disabled=${true}
></dees-input-fileupload>
</div>
</div>
<div class="demo-stack">
<dees-input-fileupload
.label=${'Audio uploads'}
.infoText=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
.accept=${'audio/*'}
.maxSize=${25 * 1024 * 1024}
></dees-input-fileupload>
<dees-input-fileupload
.label=${'Disabled example'}
.infoText=${'Uploader is disabled while moderation is pending'}
.disabled=${true}
></dees-input-fileupload>
</div>
</div>
</dees-form>
</dees-panel>
<dees-panel
@@ -98,7 +100,6 @@ export const demoFunc = () => html`
>
<div class="demo-grid">
<dees-form>
<div class="demo-stack">
<dees-input-text
.label=${'Project name'}
.infoText=${'How should we refer to this project internally?'}
@@ -140,7 +141,6 @@ export const demoFunc = () => html`
></dees-input-text>
<dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
</div>
</dees-form>
<div class="demo-note">