03315db863
- Added dropdown and radio input components to the demo for application settings. - Introduced horizontal layout for display preferences and notification settings. - Implemented checkbox demo with programmatic selection and clear functionality. - Created file upload and quantity selector demos with various states and configurations. - Added comprehensive radio input demo showcasing group behavior and various states. - Developed text input demo with validation states and advanced features like password visibility. - Introduced a new panel component for better content organization in demos.
138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.upload-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.upload-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.upload-box {
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
|
|
border-radius: 4px;
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
|
|
}
|
|
|
|
.upload-box h4 {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
font-size: 16px;
|
|
}
|
|
|
|
.info-section {
|
|
margin-top: 32px;
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#fff3cd', '#332701')};
|
|
border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
|
|
border-radius: 4px;
|
|
color: ${cssManager.bdTheme('#856404', '#ffecb5')};
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
|
|
<dees-input-fileupload
|
|
.label=${'Attachments'}
|
|
.description=${'Upload files by clicking or dragging'}
|
|
></dees-input-fileupload>
|
|
|
|
<dees-input-fileupload
|
|
.label=${'Resume'}
|
|
.description=${'Upload your CV in PDF format'}
|
|
.buttonText=${'Choose Resume...'}
|
|
></dees-input-fileupload>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Multiple Upload Areas'} .subtitle=${'Different upload zones for various file types'}>
|
|
<div class="upload-grid">
|
|
<div class="upload-box">
|
|
<h4>Profile Picture</h4>
|
|
<dees-input-fileupload
|
|
.label=${'Avatar'}
|
|
.description=${'JPG, PNG or GIF'}
|
|
.buttonText=${'Select Image...'}
|
|
></dees-input-fileupload>
|
|
</div>
|
|
|
|
<div class="upload-box">
|
|
<h4>Cover Image</h4>
|
|
<dees-input-fileupload
|
|
.label=${'Banner'}
|
|
.description=${'Recommended: 1200x400px'}
|
|
.buttonText=${'Select Banner...'}
|
|
></dees-input-fileupload>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different upload states for validation'}>
|
|
<dees-input-fileupload
|
|
.label=${'Identity Document'}
|
|
.description=${'Required for verification'}
|
|
.required=${true}
|
|
.buttonText=${'Upload Document...'}
|
|
></dees-input-fileupload>
|
|
|
|
<dees-input-fileupload
|
|
.label=${'System Files'}
|
|
.description=${'File upload is disabled'}
|
|
.disabled=${true}
|
|
.value=${[]}
|
|
></dees-input-fileupload>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Application Form'} .subtitle=${'Complete form with file upload integration'}>
|
|
<dees-form>
|
|
<dees-input-text .label=${'Full Name'} .required=${true}></dees-input-text>
|
|
<dees-input-text .label=${'Email'} .inputType=${'email'} .required=${true}></dees-input-text>
|
|
<dees-input-fileupload
|
|
.label=${'Resume'}
|
|
.description=${'Upload your CV (PDF preferred)'}
|
|
.required=${true}
|
|
></dees-input-fileupload>
|
|
<dees-input-fileupload
|
|
.label=${'Portfolio'}
|
|
.description=${'Optional: Upload work samples'}
|
|
></dees-input-fileupload>
|
|
<dees-input-text
|
|
.label=${'Cover Letter'}
|
|
.inputType=${'textarea'}
|
|
.description=${'Tell us why you would be a great fit'}
|
|
></dees-input-text>
|
|
</dees-form>
|
|
|
|
<div class="info-section">
|
|
<h4>Features:</h4>
|
|
<ul>
|
|
<li>Click to select files or drag & drop</li>
|
|
<li>Multiple file selection support</li>
|
|
<li>Visual feedback for drag operations</li>
|
|
<li>Right-click files to remove them</li>
|
|
<li>Integrates seamlessly with forms</li>
|
|
</ul>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |