Refactor dees-input-fileupload component and styles
- Updated demo.ts to enhance layout and styling, including renaming classes and adjusting spacing. - Removed unused template rendering logic from template.ts. - Simplified index.ts by removing the export of renderFileupload. - Revamped styles in styles.ts for improved design consistency and responsiveness. - Enhanced file upload functionality with better descriptions and validation messages.
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { html, css, cssManager } from '@design.estate/dees-element';
|
||||
import { css, cssManager, html } from '@design.estate/dees-element';
|
||||
import './component.js';
|
||||
import '../dees-panel.js';
|
||||
|
||||
@@ -6,201 +6,154 @@ export const demoFunc = () => html`
|
||||
<dees-demowrapper>
|
||||
<style>
|
||||
${css`
|
||||
.demo-container {
|
||||
.demo-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: 32px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.upload-grid {
|
||||
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.upload-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.demo-grid--two {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
padding: 16px;
|
||||
background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
|
||||
border-radius: 4px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
|
||||
|
||||
.demo-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.upload-box h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-top: 32px;
|
||||
|
||||
.demo-note {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: ${cssManager.bdTheme('#fff3cd', '#332701')};
|
||||
border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
|
||||
border-radius: 4px;
|
||||
color: ${cssManager.bdTheme('#856404', '#ffecb5')};
|
||||
border-radius: 12px;
|
||||
border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(215 20% 26%)')};
|
||||
background: ${cssManager.bdTheme('hsl(213 100% 97%)', 'hsl(215 20% 12%)')};
|
||||
color: ${cssManager.bdTheme('hsl(215 25% 32%)', 'hsl(215 20% 82%)')};
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.demo-note strong {
|
||||
color: ${cssManager.bdTheme('hsl(217 91% 45%)', 'hsl(213 93% 68%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div class="demo-container">
|
||||
<dees-panel .title=${'1. Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
|
||||
<dees-input-fileupload
|
||||
.label=${'Attachments'}
|
||||
.description=${'Upload any files by clicking or dragging them here'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Single File Only'}
|
||||
.description=${'Only one file can be uploaded at a time'}
|
||||
.multiple=${false}
|
||||
.buttonText=${'Choose File'}
|
||||
></dees-input-fileupload>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'2. File Type Restrictions'} .subtitle=${'Upload areas with specific file type requirements'}>
|
||||
<div class="upload-grid">
|
||||
<div class="upload-box">
|
||||
<h4>Images Only</h4>
|
||||
|
||||
<div class="demo-shell">
|
||||
<dees-panel
|
||||
.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=${'Profile Picture'}
|
||||
.description=${'JPG, PNG or GIF (max 5MB)'}
|
||||
.accept=${'image/jpeg,image/png,image/gif'}
|
||||
.maxSize=${5 * 1024 * 1024}
|
||||
.label=${'Attachments'}
|
||||
.description=${'Upload supporting documents for your request'}
|
||||
.accept=${'image/*,.pdf,.zip'}
|
||||
.maxSize=${10 * 1024 * 1024}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Brand assets'}
|
||||
.description=${'Upload high-resolution imagery (JPG/PNG)'}
|
||||
.accept=${'image/jpeg,image/png'}
|
||||
.multiple=${false}
|
||||
.buttonText=${'Select Image'}
|
||||
.maxSize=${5 * 1024 * 1024}
|
||||
.buttonText=${'Select cover image'}
|
||||
></dees-input-fileupload>
|
||||
</div>
|
||||
|
||||
<div class="upload-box">
|
||||
<h4>Documents Only</h4>
|
||||
|
||||
<div class="demo-stack">
|
||||
<dees-input-fileupload
|
||||
.label=${'Resume'}
|
||||
.description=${'PDF or Word documents only'}
|
||||
.accept=${".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"}
|
||||
.buttonText=${'Select Document'}
|
||||
.label=${'Audio uploads'}
|
||||
.description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
|
||||
.accept=${'audio/*'}
|
||||
.maxSize=${25 * 1024 * 1024}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Disabled example'}
|
||||
.description=${'Uploader is disabled while moderation is pending'}
|
||||
.disabled=${true}
|
||||
></dees-input-fileupload>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'3. Validation & Limits'} .subtitle=${'File size limits and validation examples'}>
|
||||
<dees-input-fileupload
|
||||
.label=${'Small Files Only'}
|
||||
.description=${'Maximum file size: 1MB'}
|
||||
.maxSize=${1024 * 1024}
|
||||
.buttonText=${'Upload Small File'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Limited Upload'}
|
||||
.description=${'Maximum 3 files, each up to 2MB'}
|
||||
.maxFiles=${3}
|
||||
.maxSize=${2 * 1024 * 1024}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Required Upload'}
|
||||
.description=${'This field is required'}
|
||||
.required=${true}
|
||||
></dees-input-fileupload>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'4. States & Styling'} .subtitle=${'Different states and validation feedback'}>
|
||||
<dees-input-fileupload
|
||||
.label=${'Disabled Upload'}
|
||||
.description=${'File upload is currently disabled'}
|
||||
.disabled=${true}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Pre-filled Example'}
|
||||
.description=${'Component with pre-loaded files'}
|
||||
.value=${[
|
||||
new File(['Hello World'], 'example.txt', { type: 'text/plain' }),
|
||||
new File(['Test Data'], 'data.json', { type: 'application/json' })
|
||||
]}
|
||||
></dees-input-fileupload>
|
||||
</dees-panel>
|
||||
|
||||
<dees-panel .title=${'5. Form Integration'} .subtitle=${'Complete form with various file upload scenarios'}>
|
||||
<dees-form>
|
||||
<h3 style="margin-top: 0; margin-bottom: 24px; color: ${cssManager.bdTheme('#333', '#fff')};">Job Application Form</h3>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Full Name'}
|
||||
.required=${true}
|
||||
.key=${'fullName'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Email'}
|
||||
.inputType=${'email'}
|
||||
.required=${true}
|
||||
.key=${'email'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Resume'}
|
||||
.description=${'Required: PDF format only (max 10MB)'}
|
||||
.required=${true}
|
||||
.accept=${'application/pdf'}
|
||||
.maxSize=${10 * 1024 * 1024}
|
||||
.multiple=${false}
|
||||
.key=${'resume'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Portfolio'}
|
||||
.description=${'Optional: Upload up to 5 work samples (images or PDFs, max 5MB each)'}
|
||||
.accept=${'image/*,application/pdf'}
|
||||
.maxFiles=${5}
|
||||
.maxSize=${5 * 1024 * 1024}
|
||||
.key=${'portfolio'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'References'}
|
||||
.description=${'Upload reference letters (optional)'}
|
||||
.accept=${".pdf,.doc,.docx"}
|
||||
.key=${'references'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Additional Comments'}
|
||||
.inputType=${'textarea'}
|
||||
.description=${'Any additional information you would like to share'}
|
||||
.key=${'comments'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-form-submit .text=${'Submit Application'}></dees-form-submit>
|
||||
</dees-form>
|
||||
|
||||
<div class="info-section">
|
||||
<h4 style="margin-top: 0;">Enhanced Features:</h4>
|
||||
<ul style="margin: 0; padding-left: 20px;">
|
||||
<li>Drag & drop with visual feedback</li>
|
||||
<li>File type restrictions via accept attribute</li>
|
||||
<li>File size validation with custom limits</li>
|
||||
<li>Maximum file count restrictions</li>
|
||||
<li>Image preview thumbnails</li>
|
||||
<li>File type-specific icons</li>
|
||||
<li>Clear all button for multiple files</li>
|
||||
<li>Proper validation states and messages</li>
|
||||
<li>Keyboard accessible</li>
|
||||
<li>Single or multiple file modes</li>
|
||||
</ul>
|
||||
|
||||
<dees-panel
|
||||
.title=${'Form integration'}
|
||||
.subtitle=${'Combine file uploads with the rest of the DEES form ecosystem'}
|
||||
>
|
||||
<div class="demo-grid">
|
||||
<dees-form>
|
||||
<div class="demo-stack">
|
||||
<dees-input-text
|
||||
.label=${'Project name'}
|
||||
.description=${'How should we refer to this project internally?'}
|
||||
.required=${true}
|
||||
.key=${'projectName'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Contact email'}
|
||||
.inputType=${'email'}
|
||||
.required=${true}
|
||||
.key=${'contactEmail'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Statement of work'}
|
||||
.description=${'Upload a signed statement of work (PDF, max 15MB)'}
|
||||
.required=${true}
|
||||
.accept=${'application/pdf'}
|
||||
.maxSize=${15 * 1024 * 1024}
|
||||
.multiple=${false}
|
||||
.key=${'sow'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-fileupload
|
||||
.label=${'Creative references'}
|
||||
.description=${'Optional. Upload up to five visual references'}
|
||||
.accept=${'image/*'}
|
||||
.maxFiles=${5}
|
||||
.maxSize=${8 * 1024 * 1024}
|
||||
.key=${'references'}
|
||||
></dees-input-fileupload>
|
||||
|
||||
<dees-input-text
|
||||
.label=${'Notes'}
|
||||
.description=${'Add optional context for reviewers'}
|
||||
.inputType=${'textarea'}
|
||||
.key=${'notes'}
|
||||
></dees-input-text>
|
||||
|
||||
<dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
|
||||
</div>
|
||||
</dees-form>
|
||||
|
||||
<div class="demo-note">
|
||||
<strong>Good to know:</strong>
|
||||
<ul>
|
||||
<li>Drag & drop highlights the dropzone and supports keyboard activation.</li>
|
||||
<li>Accepted file types are summarised automatically from the <code>accept</code> attribute.</li>
|
||||
<li>Image uploads show live previews generated via <code>URL.createObjectURL</code>.</li>
|
||||
<li>File size and file-count limits surface inline validation messages.</li>
|
||||
<li>The component stays compatible with <code>dees-form</code> value accessors.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</dees-panel>
|
||||
</div>
|
||||
</dees-demowrapper>
|
||||
`;
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user